최근에 프로젝트 설계에 대해 매우 좋은 평가를 받아서 내가 사용하고 있는 프로젝트 구조를 공개해보면 더 많은 성공을 거두지 않을까 싶어 글을 적는다. 개인적으로 부족한 점이 많다고 생각되는데 한 번 칭찬을 들으니까 욕심이 생겨서 더 많은 평가를 통해 부족한 점을 채워보고 싶다. 🤗
배경
React를 이용해서 웹을 개발한지 어느덧 2년이 넘어간다. 책을 읽는 것 보단 공식 문서를 통해 공부하는 것을 더 좋아해서 공식문서를 많이 참고하여 공부하였는데 역시 너무 어려웠다. 영어 독해 능력이 떨어질 뿐더러 처음 접하는 프레임워크(프레임워크 처럼 사용할 수 있는 라이브러리)가 너무 어려웠다.
그냥 하라는 대로 하고, 기본적으로 제공해주는 틀을 이용해서 개발하였는데 계속 개발하다보니 이런 생각이 떠올랐다.
"내가 회사에 가서도 CRA를 통해 개발할까? " 🤔
정답은 아니었다. 약 1년전에 우연한 기회로 레이니스트에 견학을 가게됬는데 이때 궁금해서 웹 팀장님께 물어봤었다. 정말 직설적으로 물어봤었는데, 지금 생각해보면 정말 당연한 대답이다.😂 (이불킥 엄청 했다)
그래서 이 이후로 webpack을 공부하기 시작했고 React 프로젝트 기초 설정부터 폴더구조까지 직접 만들어보게되었다. (나는 내 프로젝트 구조가 한참 부족하고 보완 해야할 점이 많다고 생각하기 때문에 계속해서 보완하려고 노력하고 있다.)
디자인 패턴과 아키텍처
나는 React에서 상태관리를 위해 Redux를 사용한다. 주위에서 ContextApi나 MobX를 추천해주기도 하였지만 내가 생각하는 이상적인 코드의 깔끔함이 Redux와 가장 잘 맞는 것 같아서 Redux를 사용하고 있다. 때문에 Flux패턴을 사용하게 되는데 나는 여기에 아키텍처를 입혀보았다.
아키텍처 중 Clean Architecture를 공부하고 아키텍처에 대한 지식을 차근차근 쌓아가다가 계속 공부만 하고 적용을 안 해보다 보니 내가 정확하게 이해하고 있는지도 궁금했고, 공부만 해선 계속 지체될 것 같아서 과감하게 도전해보았다.
실패
막연하게 도전했지만 React프로젝트에 Clean Architecture를 적용하는 것은 내 생각만큼 쉽지 않았다. 가장 큰 문제는 Redux가 있는데 어떻게 프로젝트 구조를 설계 해야하는지가 어려웠다.
그래서 나는 외부의 도움을 얻기로 하였다. 나는 Github에 떠돌고 있는 여러 예제들을 참고해보았다. 그 중 모티브를 삼아 설계했던 구조가 해당 링크이다.
위 사진은 모티브로 했던 폴더 구조인데 보이는 것 처럼 module들도 따로 분리하여 새로운 package를 형성하는 것을 볼 수 있다. 처음에는 이와 같은 방법으로 진행을 해보려고 많은 삽질을 해보았는데 개인적으로 선호하는 스타일이 아니어서 다른 방향으로 고개를 돌렸다.
이후에도 많은 시도를 하였다. android의 Clean Architecture처럼 구조를 잡아보기도 하였고 redux를 제외시키고 구조를 설계해보기도 하였다. 또 TS말고 Javascript를 이용해서도 해보았는데.. 역시 힘들었다. 많은 시도와 삽질을 해본 끝에 결단을 내린 폴더구조는 애매모호 했다.
프로젝트 설계
Clean Architecture를 완전 사용하지 않고 어느정도만 copy한다는 느낌으로 설계하였다. 그리고 Redux의 데이터 흐름을 어떻게 하면 유연하게 흘러가게할 수 있을까, 의존성을 어떻게 하면 더 줄일 수 있을까 열심히 생각하면서 설계하였다.
┌── .vscode - vscode setting
├── node_modules
├── public/ - favicon, html
├── src/
│ ├── @types/ - typescript date type 정의
│ │ └── index.d.ts
│ │
│ ├── assets/ - assets 폴더
│ ├── components/ - 컴포넌트 폴더 (views)
│ │ └── componentName/ - index.ts를 정의
│ │ └── style/ - 컴포넌트 별 style
│ ├── container/ - 컨테이너 폴더 (presenters)
│ │ └── containerName/ - custom hook을 통한 상태관리
│ │ └── presenter/ - 해당 container에서 사용되는 presenter
│ ├── data/ - redux 폴더 (use Cases & entities)
│ │ ├── actions/ - 액션 정의
│ │ ├── middleware/ - 미들웨어 정의
│ │ │ ├── api/
│ │ │ │ ├── apiTypes.ts
│ │ │ │ ├── baseUrl.ts
│ │ │ │ └── index.ts
│ │ │ │
│ │ │ └── sagas/ - 사가 정의
│ │ │
│ │ └── reducers/ - 리듀서 정의
│ │
│ ├── page/ - 라우터 정의 폴더
│ │ └── App.tsx
│ │
│ ├── styles/ - 글로벌 스타일 폴더
│ │ └── globalStyle.ts
│ │
│ └── utils/ - 유틸 폴더
│ └── util.ts
│
├── package.json
├── .babelrc
├── .env
├── postcss.config.ts
├── tsconfig.json
├── tslint.json
└── webpack.config.ts기술 스택
프로젝트를 설계하면서 사용하는 기술에 따라 구조를 조금씩 변경하였다. 물론 라이브러리에 의존적이 않도록 나만의 규칙을 세우고 개발한다. 😏
기본적으로 React + Redux + @middleware를 사용하고, middleware는 redux-saga를 사용한다.
스타일링에선 styled-components를 사용하고,
HTTP 통신에서 axios를 사용한다.
또 post-css와 webpack + babel로 기본적인 앱 세팅을 하고있고, Typescript를 사용하여 개발한다.
결론 및 고찰
위 프로젝트 구조가 내가 직접 설계하고 고안한 구조이다. 지금 이렇게 글을 적으면서 다시 돌아보니 많이 허접하고 부족한 점이 눈에 보이는 것 같다. 직접 프로젝트 구조를 설계하면서 데이터의 흐름이나 방향에 대해 많이 고민하게 되고 의존성 주입에 대해 많이 생각하게 되는 것 같다.
해당 프로젝트 구조를 만들기 까지 여러 프로젝트를 경험하였다.
처음에는 구글링을 하다가 언뜻 본 폴더구조에서 style폴더를 src/위치에 설계한 것 보고 따라해보았는데 styled-components를 사용해서 스타일링을 하다보니 styled-component의 네이밍이 겹치는 부분이 많아서 재활용 하기 힘든 이름을 정하게 되었다. 그러다가 velopert님이 발표하신 자료를 우연하게 접하게 되었는데 나와 같은 고민을 하셨어서 좋은 해답을 찾을 수 있었다.
그리고 프로젝트 구조를 새우기전에는 container를 component의 구분을 짓는 용도로 사용하고 component의 모든 데이터를 관리하도록 하였는데 redux example를 참고하여 view는 모두 compoennt로 이동시키고 container를 presenter처럼 사용하게 되었다.
webpack에 대한 이해도도 많이 부족하고, 아키텍처나 디자인 패턴에 대한 이해도가 많이 부족한 상황에서 나만의 React 프로젝트를 설계하는 과정은 쉽지 만은 않았다. 하지만 어려운 과정을 거치고 나니 많은 배움을 얻을 수 있었다. 직접 프로젝트를 설계한다는 경험을 통해 좀 더 깊은 생각을 할 수 있는 기회였다.
처음 작성하는 블로그 글이라서 필력이 많이 부족합니다. 많은 조언 부탁드립니다.😎
