---
# System prepended metadata

title: Untitled

---

## 코드리뷰 

### 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에 들어가는 것이 더 적절하다고 생각합니다. 