폴더구조

📁 폴더 별 용도

assets : image, css 파일

cert : 백엔드와 토큰을 통신하는 과정에서 필요한 함수

components : 프로젝트에서 사용되는 모든 컴포넌트

globalObj : 프로젝트에서 사용되는 전역 함수와 객체

recoil : recoil을 사용한 전역 상태 관리

🙋 장점

1) 폴더의 구조를 한 번에 이해하기 쉬워, 협업하기에 편합니다.

제가 서울 42를 떠나면 누군가가 이 프로젝트를 이어 받을 수도 있다고 생각했습니다. 따라서 최대한 폴더 구조를 직관적이고 이해하기 쉽게 만들어야 한다고 생각했습니다. 따라서 컴포넌트 폴더를 page 단위로 생성하여 직관적으로 이해하기 쉽게 만들었습니다.

.
├── Auth
├── Main
├── Result
├── Review
└── utils

component 폴더의 구조입니다. 아주 이해하기 쉽지요. 각 폴더 이름이 곧 웹에서의 페이지 단위입니다.

🤦 단점

Atomic design pattern 보다 나은 점?

Atomic design pattern은 이 곳에서 사용해보았습니다.

1) css 를 한 곳(asset/css)에 모아두기 때문에 css 관리하기가 간편합니다.

물론 atomic design 도 css를 한 곳에 모을 수는 있지만 혼란을 야기합니다. 왜냐하면, 현재 프로젝트의 컴포넌트 디자인 폴더 그대로 css 폴더 구조를 짜야 하기 때문입니다.

2) 생각보다 컴포넌트 재활용이 잘 됩니다.

SliderBtnBox 라는 컴포넌트는 리뷰페이지에서 사용하는 컴포넌트인데, 이는 슬라이더가 필요한 곳에 재사용할 수 있습니다. 아니면 재사용할 컴포넌트들을 아예 공용 폴더 (utils)에다가 만들어도 되기 때문에, atomic design의 재사용 성능과 크게 다른 것이 없다고 생각합니다.

3) 가독성이 훨-씬 좋습니다.

이는 장점에서 다룬 내용입니다!