REACT11 리덕스로 모달 상태 제어하기 [번역] 🐱👤 원문 : https://betterprogramming.pub/react-use-redux-to-control-modal-visibility-states-8953e44b71fd React: Use Redux To Control Modal Visibility States Easily manage dialog opening and closing state betterprogramming.pub 부제 : 모달 열기 및 닫기 상태를 쉽게 관리하는 법 모달은 응용 프로그램의 기본 창 위에 위치하며 현재 상호 작용 흐름을 방해하지 않으면서 사용자가 의사 결정을 내리는 데 도움이 되는 UI 요소이다. 또한 사용자의 작업에 대한 피드백을 제공하기도 하고 앱의 현재 경로나 페이지를 변경하지 않은 채 일부 콘텐츠를.. 2022. 6. 10. [react-chatbot-kit] 챗봇 구현하기 - 3 이전 글 : 2022.06.09 - [react-chatbot-kit] 챗봇 구현하기 - 2 챗봇 스타일링하기 🌮 기본 구조 파악하기 초기 상태의 챗봇은 요렇게 생겼다. 스타일해줄 부분을 정리해보면 다음과 같다. 챗봇 화면 자체 위치 헤더 챗봇 프로필 아이콘 챗봇 메세지 사용자 프로필 아이콘 사용자 메세지 메세지 입력 창 보내기 버튼 처음부터 뜯어보면서 차근차근 스타일링해보자! 🌮 챗봇 화면 자체 위치 조정 챗봇 화면 위치의 경우 거의 화면 오른쪽 하단에 고정된 것을 많이 볼 수 있다. 나도 그렇게 해 줄 예정이다! 공식문서의 Customizing CSS 파트를 참고하면 스타일링할 클래스들의 이름을 쉽게 찾을 수 있다. styles 폴더에 chatbot.css 파일을 추가해 복사 붙여 넣기 해주자. /*.. 2022. 6. 9. [react-chatbot-kit] 챗봇 구현하기 - 2 이전 글 : 2022.06.07 - [react-chatbot-kit] 챗봇 구현하기 - 1 챗봇 테스트해보기 🥪 react-chatbot-kit 라이브러리 설치하기 npm install react-chatbot-kit 🥪 필요한 파일들 생성하기 챗봇을 사용하기 위해 필요한 파일 세 개를 만들어보자! 먼저 루트 디렉토리에 bot 폴더를 만들어 하위에 필요한 파일들을 만들어줄 것이다. 왼쪽과 같이 ActionProvider.js, config.js, MessageParser.js 파일을 생성해준다. 공식 문서를 참고해 파일들의 기본적인 내용을 채워준다.(MessageParser.js 파일의 경우 공식 문서에서 export default 부분이 누락되어있다.) // bot/ActionProvider.js c.. 2022. 6. 9. [react-chatbot-kit] 챗봇 구현하기 - 1 프로젝트 세팅하기 🥙 사용할 스택 확인 Next.js Typescript styled-components 🥙 프로젝트 생성 먼저 원하는 위치에 Next.js + Typescript 프로젝트를 만든다. npx create-next-app chat-bot --typescript 🥙 styled-components, eslint 설치 만든 프로젝트로 경로를 옮기고 styled-components 관련 라이브러리와 eslint를 설치해준다. cd chat-bot yarn add styled-components @types/styled-components babel-plugin-styled-components eslint 🥙 .babelrc 파일 추가 루트 경로에 .babelrc 파일을 만든다. { "preset.. 2022. 6. 7. 리액트로 채팅 프론트엔드 구축하기 [번역] 🐱👤 원문 : https://bhavaniravi.medium.com/learn-reactjs-by-building-a-chat-frontend-2d8fe664276e Learn ReactJs by Building a Chat FrontEnd Building a Chat application from scratch using ReactJs bhavaniravi.medium.com 리액트를 사용하여 채팅 응용프로그램을 처음부터 작성해보자. 🥗 리액트란 무엇인가? React는 사용자 인터페이스를 빌드하기 위한 자바스크립트 라이브러리이다. 페이스북과 개인 개발자 및 기업 커뮤니티에 의해 유지 보수된다. — Wikipedia 간단히 말하면 HTML + JS + CSS = React이다. 🥗 왜 리액트를 사용하.. 2022. 5. 31. React create 구현하기 ( + onSubmit, shouldComponentUpdate 함수 ) 🧂 기본 개념 정리 지금까지 우리가 공부한 개념들을 정리해보자. Props는 컴포넌트 내 (우리의 경우 Content.js 내부)에서는 값을 변경할 수 없으며 읽기, 불러오기만 가능하지만 외부에선 변경할 수 있다. State는 setState 함수로 컴포넌트 내부에서도 동적으로 값을 변경할 수 있다. Props와 State 모두 render 함수를 호출하며 호출한 결과로 UI가 바뀌게 된다. 새로운 개념을 하나 추가하자면, 실제 브라우저 HTML을 의미하는 DOM이 있다. 상위 컴포넌트가 하위 컴포넌트에 명령할 때, 즉 데이터를 전달할 땐 Props를 사용한다. 여기서 위에 말한 것처럼 하위 컴포넌트는 Props를 읽기만 가능하다. 반대로, 하위 컴포넌트가 상위 컴포넌트에 데이터를 전달할 땐 Event를.. 2021. 1. 13. React Event - React 컴포넌트 이벤트 만들기 컴포넌트에 이벤트를 추가하는 것은 애플리케이션에 역동성을 부여한다. 우리가 만들 이벤트는 특정 버튼을 눌러 원하는 페이지로 이동하거나 페이지를 이동하지 않고, 또는 페이지를 리로딩하지 않고 화면을 전환하는 이벤트이다. 🌭 State Setting 페이지의 state가 기본 모드인 welcome mode인지, 카테고리를 선택하면 밑에 설명이 나오는 read mode인지 구분하기 위해 constructor의 this.state에 mode를 추가한다. mode의 기본값으로는 'welcome'을 준다. mode : 'welcome', mode가 welcome일 때, contents에 표시할 문구도 this.state에 작성한다. welcome : { title:'Welcome', desc:'Hello React.. 2021. 1. 12. React State 의 소개와 사용법 이번 내용은 이해하기 어려운 게 맞으므로 일단 그러려니 하고 보면서 익숙해지는 게 중요하다..! 🥚 Props와 State의 의미 앞서 배운 props란, 사용자가 component를 사용하는 입장에서 중요한 것으로 component의 기본 동작을 바꾸고 싶을 때 사용자가 조작하는 것이다. 쉽게 말해 태그의 속성에 해당하며 component 외부에 존재한다. state란, props의 값에 따라 내부 구현에 필요한 데이터들을 가리키며 component 내부 동작을 의미한다. 둘은 철저하게 분리되어 있어야 하며 철저하게 분리되어 있을수록 좋은 웹, 앱이라 칭할 수 있다. 🥚 props(속성) 부분을 state로 표현해보자 App 컴포넌트의 하위 컴포넌트인 Subject 컴포넌트에서 하드 코딩되어있는 pro.. 2021. 1. 11. React Refactoring 및 components 파일로 분리하기 🍳 Refactoring :: 태그의 속성(attribute, props)을 웹페이지에 표시하기 Refactoring이란, 동작 변화 없이 내부 구조를 변경하는 것을 의미한다. 밑의 코드처럼 태그의 속성인 title, sub에 값을 주어 웹에 표시되는 문구를 바꾸고자 한다. class App extends Component { render() { return ( ); } } 이 경우, JSX의 {this.props.name} 문법을 사용한다. 예를 들어 name이 title이라면 {this.props.title}으로 표기한다. class Subject extends Component { render() { return ( {this.props.title} {this.props.sub} ); } } JSX.. 2021. 1. 11. HTML 코드를 React 코드로 변환해보기 🧇 HTML 코드 작성하기 public이라는 디렉토리는 create-react-app에서 npm을 실행시켰을 때, 파일을 찾는 document root를 의미한다. public디렉토리 안에 간단한 pure.html을 추가한다. MEOW The cat rules the world! HTML CSS JavaScript HTML HTML is HyperText Markup Language. 터미널에서 npm을 실행시키고 localhost:3000/pure.html에 들어가보면 다음과 같은 화면을 볼 수 있다. 🧇 React로 Component 만들기 pure.html과 App.js를 함께 보며 진행한다. 우선 미리 말하자면 Component를 만드는 부분은 이렇게 구성된다. class App extends C.. 2021. 1. 8. React 유래와 장점, 개발 환경 종류 🧈 React 이제 리액트를 클래스형 기반의 객체지향 프로그래밍 스타일로 코드를 작성할 것이다. 우리는 클래스를 만드는 것이 아니라 클래스를 사용하는 것이기 때문에 클래스가 무엇인지 몰라도 코드 작성이 가능하지만 객체지향(Object Oriented Programming)에서 클래스의 기본적인 정의를 알고 가자! 객체 지향과 클래스 객체란 객체의 속성을 이루는 데이터와 그 데이터의 조작 방법에 대한 내용을 말한다. 그리고 그것을 다루는 개념이 객체 지향이다. 즉 객체는 속성과 기능을 가지고 있는 것이 핵심이다. 객체지향 프로그래밍 언어는 기존의 절차 지향 프로그래밍 언어와 완전히 다른 개념이 아닌 좀 더 보완하고 발전시킨 것이다. 클래스란 데이터와 메소드가 결합된 사용자 정의 타입이다. 사용자 정의 타입.. 2021. 1. 7. 이전 1 다음
