Next4 [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. Next, Next 특징, Next 설치 🥓 Next React(SPA) + SSR 원래 SPA에 SSR을 더하려면 웹서버, 웹팩, 데이터 로딩, 코드 스플리팅 등등이 필요하지만.. Next를 사용하면 그럴 필요가 없다! 🥓 Next 특징 사전 렌더링 및 서버 사이드 렌더링(SSR) Next는 빌드 시 모든 페이지를 미리 렌더링한다. 따라서 처음 페이지를 불러올 때, 미리 렌더링 해서 만들어진 HTML를 빠르게 사용자에게 제공할 수 있다! 이 특징은 검색 엔진 최적화(SEO)에도 좋다. HTML을 불러온 후에는 페이지에 필요한 최소한의 자바스크립트 코드를 불러와 사용한다. 서버 데이터가 필요한 페이지의 경우엔 SSR로 HTML을 생성한다. Hot Code Reload 코드 변경 사항 저장 시 프로그램이 자동으로 리로드된다. 자동 코드 분할 불필.. 2021. 11. 30. 이전 1 다음
