우테코(우아한테크코스) 프론트엔드 폴더 구조 톺아보기

유유자적 깃헙을 돌아다니며 뛰어난 사람들의 코드를 보며 좌절하던 도중 우연히 우테코 깃헙을 발견했습니다.

네카라쿠배라 불릴 정도로 개발자라면 한 번쯤은 다니고 싶어하는 배민의 부트캠프인 우테코에서는 어떤식으로 디렉토리 구조를 설계하고 코드는 어떻게 짜는지 궁금해서 살펴보았습니다.

 

배민의 웹서비스는 리액트와 자바로 구성되어 있다고 알고 있습니다.

그래서 그런지 우테코에서도 자바, 리액트로 프로젝트로 되어 있는 것을 확인했습니다.

 

저는 프론트엔드 주니어 개발자라 프론트엔드 위주로 살펴보았습니다.

 

1. packge.json

해당 부분에서 눈 여겨본 부분은 3가지 입니다.

 

1. Next.js의 부재

리액트 공식문서에서 조차 Next.js 사용을 권장하고 있습니다.

근데 우테코의 프로젝트들을 살펴보면 Next.js를 사용하여 프레임워크라는 이점을 이용하기보단

리액트(라이브러리)의 자유도를 더 중요하게 생각하는 것 같았습니다.

 

많은 분들이 아시겠지만 리액트는 라이브러리입니다. Next.js는 리액트의 프레임워크죠.

Next.js에서 제공하는 편리한 기능 대신 본인들이 필요한 라이브러리들을 하나하나 찾아가며 목적에 맞게 사용한다는 느낌을 받았습니다.

그 예로, 많은 프로젝트에서 상태관리 라이브러리, Redux, Recoil, Zustand와 같은 편리한 라이브러리보단 리액트 ContexAPI를 사용하는 점이 인상 깊었네요.

 

이러한 과정에서 해당 라이브러리가 왜 필요하고 공부하고 팀원들과 토론하는 과정에서 많은 것을 얻을 수 있겠구나라는 생각을 했습니다.

 

2. TDD

모든 프로젝트에서 jest와 testing-library 같은 라이브러리를 통해 테스트 코드 작성을 통해 코드의 품질을 높이려는 노력이 보였습니다.

 

3. msw

msw란 먼저 MSW를 간략하게 설명하면, MSW(Mock Service Worker)란, 클라이언트가 HTTP 요청을 전송하면 Service Worker가 요청을 가로챈(intercept) 후 Mocking된 응답 값을 반환함으로써 서버와의 통신을 모방하는 오픈소스 라이브러리입니다.

 

요즘 웹 서비스는 프론트엔드와 백엔드가 분리되어 있습니다.

풀스택을 제외한 프로젝트나 신규 기능 개발을 하게 되면 우리는 협업을 통해 프로젝트를 진행하게 됩니다.

이런 협업 과정 중에서 종종 생기는 문제는 프론트엔드가 화면을 구성한 후 백엔드를 개발이 완료될 때 까지 대기시간이 존재한다는 것입니다.

이러한 애로사항을 해소할 수 있는 라이브러리고, 저 역시 이러한 부분에 크게 공감을 하고 있어서 신규 기능 개발할 때 적극 도입해보려고 생각했습니다.

 

2. 프론트엔드 디렉토리 구조

src
├── apis
├── components
├── constants
├── contexts or store
├── hooks
├── mocks
├── pages
├── types
├── styles
├── routers
├── utils
└── ....etc

 

우테코의 모든 프론트엔드 프로젝트가 위의 구조처럼은 되어 있지 않지만 거의 비슷하게 되어 있었습니다.

디렉토리 구조를 보면서 느낀점은 객체지향의 5원칙이 생각났습니다.

각각의 목적에 맞게 분리를 잘해놨다는 생각을 했습니다.

 

폴더 별로 느낀점입니다.

 

1. coponents 폴더

컴포넌트를 모아놓은 폴더. 마이크로 프론트엔드에 맞춰서 설계가 잘되어 있는 느낌

 

2. constants 폴더

공통적으로 사용되는 init value나 상수들을 정의한 파일들이 위치하는 폴더. 

 

3. contexts or Store

상태관리 관련된 파일을 정리한 폴더.

 

4. hooks

리액트 hooks 관련 폴더. 프로젝트마다 엄청난 양의 리액트 hooks들이 존재...

 

5. mocks 

위에서 언급한 msw 관련 폴더, 가데이터와 handler 등이 있음.

 

6. routers

라우터 관련 폴더. 라우팅을 별도의 폴더에서 관리하는게 새로웠습니다.

폴더가 없으면 Router.tsx와 같은 파일에서 관리

 

마치며...

모든 프로젝트가 이렇다는건 아닙니다. 우테코 깃헙에 있는 많은 프로젝트를 보며 느낀점이니 참고만 해주시길 바랍니다.

 

아는 만큼 보인다라는 말이 있습니다. 

아직 주니어 개발자다 보니 보이는게 이 정도입니다... 아는게 많으신 분들은 분명 더 많이 보일거라 생각됩니다.

 

이번 우테코 프로젝트를 하나하나 상세히 보지는 못 했지만 살펴보면서 저희 회사 코드랑 비교도 해보고 좋아보이는건 도입해봐야지 라는 생각도하고 더 좋은 구조와 개발에 대해 고민하게 되는 좋은 시간이었습니다.

 

더 많은 우테코 프로젝트에 관심있으시면 아래 우테코 깃헙 프로젝트 참고해주시면 될 거 같습니다.

 

https://github.com/woowacourse-teams

woowacourse-teams