주제: CRA Project Structure

CRA로 만든 프로젝트의 폴더구조는 참 다양합니다.

• Q1: 어떤 폴더구조로 프로젝트를 진행하셨나요?
• Q2: 왜 그렇게 나누었는지, 그리고 해당 구조의 장점과 단점은 무엇인가요?

팀: 이제찬 & 김동원

📦src
┣ 📂components -- 컴포넌트 단위의 React 파일
┃ ┣ 📜Comment.js
┃ ┗ 📜CommentList.js
┃
┣ 📂lib -- 모듈화된 함수
┃ ┣ 📂api
┃ ┃ ┣ 📜client.js
┃ ┃ ┗ 📜data.js
┃ ┣ 📂hooks
┃ ┗ 📂styles
┃      ┗ 📜GlobalStyles.js
┃
┣ 📂pages -- 페이지 단위의 React 파일
┃ ┗ 📜CommentPage.js
┃
┣ 📂reducers -- 상태를 변화시키는 로직
┃ ┣ 📜comment.js
┃ ┗ 📜index.js
┃
┣ 📂sagas -- 네트워크 비동기 처리
┃ ┣ 📜comment.js
┃ ┗ 📜index.js
┃
┣ 📂store -- 전역 state 선언
┃ ┗ 📜index.js
┃
┣ 📜App.js
┗ 📜index.js

A1:

폴더 구조 설명 :

• 리액트를 구성하는 컴포넌트들을 담은 components 폴더
• 프로젝트에 필요한 데이터, 함수들을 담은 lib 폴더
• 페이지들을 담당하는 pages 폴더
• 새로운 상태를 반환하는 리듀서 모음인 reducers 폴더
• 비동기 네트워크 통신을 위한 사가 모임인 sagas 폴더
• 전역 store 관리를 위한 store 폴더

A2: 이런식으로 나눈 이유는 독립적인 기능을 하는 덩어리들을 폴더로 구분하기 위함입니다.

• 장점: 독립적인 기능을 하는 덩어리를 폴더로 구분하면서 폴더 구조를 한눈에 알아볼 수 있어 원하는 스크립트 파일을 빠르게 수정할 수 있는 장점이 있었습니다.
• 단점: 하지만 이런식의 폴더 구조는 프로젝트가 복잡해지면서 모든 컴포넌트들을 components 폴더 안에 넣는다면 폴더의 복잡성이 높아지는 단점이 있습니다