## 코드리뷰 ### Milk Frontend 민지호 #### 기술 스택 Next.js, Redux, Redux-Saga, Typescript, Axios #### 프로젝트 구조 및 설명 github: https://github.com/STOVE-Milk/steam-clone/tree/develop/src/frontend/modules ``` 📦components //atomic design 패턴 이용, 길이상 각 폴더별 컴포넌트는 생략 ┣ 📂atoms ┣ 📂molecules ┗ 📂organisms 📦modules //코드리뷰 받고 싶은 부분 ┣ 📂game ┃ ┣ 📜actions.ts //액션 ┃ ┣ 📜index.ts //모듈 불러오는 곳 ┃ ┣ 📜initalData.ts //스토어 초기 state 데이터 (typescript여서 타입에 맞게 데이터를 미리 넣어줘야함) ┃ ┣ 📜reducer.ts //리듀서 ┃ ┣ 📜saga.ts //사가 ┃ ┗ 📜types.ts //스토어 state들의 타입 지정 ┣ 📂utils ┃ ┣ 📜actionUtils.ts //액션 유틸 함수 - 요청/성공/실패 액션 생성 ┃ ┣ 📜reducerUtils.ts //리듀서 유틸 함수 - 액션에 따른 state의 상태(로딩/데이터/에러) 생성 ┃ ┗ 📜sagaUtils.ts //사가 유틸 함수 - 단순한 get요청을 위한 사가 생성 ┣ 📜configureStore.ts //루트 리듀서로 스토어 생성 후 사가 미들웨어 적용 ┗ 📜index.ts //여러 리듀서 합쳐서 루트 리듀서 생성 📦pages ┣ 📂api ┃ ┣ 📂game ┃ ┃ ┣ 📜api.ts //서버 api ┃ ┃ ┗ 📜type.ts //api에서 주고받을 요청/응답 타입 지정 ┃ ┗ 📜axiosClient.ts ┣ 📂game ┃ ┗ 📜[id].tsx ┣ 📜_app.tsx ┣ 📜_document.tsx ┣ 📜category.tsx ┣ 📜chat.tsx ┣ 📜index.tsx ┗ 📜signup.tsx ``` #### 궁금한 점 1. 리덕스와 사가 사용 시, 스토어와 사가 구조를 어떻게 설계하고, 그렇게 설계한 이유가 궁금합니다. 2. 액션마다 request/success/fail 액션을 만들었더니 reducer의 크기가 너무 비대해지는 것 같습니다. 다른 방법이 있을까요? 3. Next.js로 프로젝트 생성 시, 초기에 api 폴더가 pages 폴더 안에 자동으로 생겼는데, 서버 api 관련 폴더가 페이지 안에 들어가는게 맞나요? 저는 modules와 같은 depth에 들어가는 것이 더 적절하다고 생각합니다.