프로젝트 구조 설계하기

프리온보딩 인턴십을 진행하며 사전 과제인 Todo 앱을 각자 어떻게 구현해왔는지 리뷰하는 시간을 가졌다.

깔끔한 프로젝트 폴더 구조를 통해 모듈화를 수행하신 분들의 코드를 보게 되었다. 

그 전에는 부끄러운 폴더 구조... (components, pages만 대충 나누는 정도였음) 로 구상하던 나에게 모듈화 / 프로젝트 구조 설계에 대한 관심을 갖게 해준 좋은 기회였다.

나의 부끄러운 과거... ㅋㅋㅋㅋㅋ components, pages만 겨우 나누고 components 내에서도 layout 등으로 나누지 않았다. 그리고 저 안에 API 호출과 validation 함수 등이 모두 한꺼번에 들어가있음...(지옥) 이렇게 모듈화를 안해준 것이 코드의 가독성을 매우 해쳤다.

 

협업 시, 내 코드를 가독성 좋게 작성하는 것이 매우 필수적이다. 그러기 위해서는 프로젝트 구조를 명확하게 설계하고 이에 따라 적절히 모듈화해야 한다. 또한, 이러한 작업을 통해 가독성이 정말 많이 상승한다는 것을 느꼈다. 

 

그래서 이번에 채용 과제를 진행하며, 폴더 구조 및 모듈화에 대해 더 공부하고 적용해보기로 했다.

 

우선 채용 과제 내용은 밝힐 수 없지만, 백엔드와 API 통신을 구현하지 않아도 된다는 점 + TypeScript / redux-toolkit / tailwind CSS 스택을 이용할 예정이라는 점을 참고하여 폴더 구조 및 모듈화 계획을 간략히 세워보았다. 

 

* 모듈화: 어플리케이션을 더 작은 부분 (모듈) 으로 세분화하는 것.

각 모듈은 어플리케이션 자체와 나머지 부분들로부터 가능한 한 독립적이어야 하고, 특정한 기능을 가져야 한다. 

 

(e.g. src/apis/CRUD.js 에서는 CRUD를 위해 필요한 api 통신인 GET, POST, PUT, DELETE 등의 요청을 수행하는 함수가 각각 export 되는 식) 

 

 

위의 이미지를 참고하여 프로젝트 구조를 구상해보았다.

 

 

- assets: 정적 파일 보관

- components: 상태를 렌더링하는 컴포넌트 보관

- hooks: 커스텀훅 작성

- pages 컴포넌트들로 이루어진 페이지 구현

- redux: redux-toolkit 코드 작성 / 상태 관리

- ts: interface, types 작성

- utils: 프로젝트 로직상 필요한 함수 작성

 

-> 나는 tailwind css를 이용하고 api 통신을 구현하지 않아, styles와 apis는 따로 폴더를 생성하지 않았다. 

-> 이대로 프로젝트를 진행해보며 모듈화를 프로젝트에 직접 적용해보자!