[Sendbird를 활용한 웹 채팅] 3. 프로젝트 구조 & 패키지 설치

1. 프로젝트 생성

1. CRA

npx create-react-app sendbird-chat

 

2. src 하위에 폴더 생성

• assets: 이미지 파일 저장
• Components: 페이지를 이루는 단위 컴포넌트
• Pages: 주소 변화에 따른 개별 페이지 컴포넌트
• utils: API 통신 및 기타 util 모듈

 

3. 파일 생성

• src/
  • assets/
    • Logo.png
  • Components/
    • GlobalStyles.js
    • Layout.js
    • Router.js
    • SendbirdAction.js
  • Pages/
    • Login.js
    • MailLogin.js
    • OpenChat.js
    • GroupChat.js
    • Chatting.js

 

2. 패키지 설치

• axios 0.21.1
• styled-components 5.3.0
• styled-reset 4.3.4
• prop-types 15.7.2
• react-dom 17.0.2
• react-router-dom 5.2.0
• sendbird 3.0.153