[Instagram-Clone] 파일 구조

---

파일 구조

 

파일 구조에 대해 깊게 생각해 봐야 할 것 같다.

예전에 작은 프로젝트를 진행했을 때도 파일 구조로 인해 프로젝트가 더러워 보이는 것은 물론 내가 진행하는 프로젝트 이지만 알아보기 정말 어려웠다.

저 당시 프로젝트를 끝내고 나서  "다음 프로젝트 때는 많은 시간을 들여서라도 파일 구조에 대하여 확실히 기획하고 가자" 라고 다짐했었다

 

그것이 지금이다

 

---

Atomic Design

 

React로 프로젝트를 하는 사람들이면 한 번쯤은 고민해 본다는 Atomic Design Pattern (이하 Atomic )이다.

 Atomic은 Componenet를 정말 잘게 쪼개서 하나하나 조립해 가는 방식이다

 

사진을 보도록 하자

위 사진은 Navigation Bar을 구성하는 요소를 점점 잘게 쪼개 본 것이다 

 

 

Atom

- 최소 단위

- Button, input, form

 

Molecules

- Atom들을 결합하고 역할을 부여하는 것

 

Organisms

- Layout

- Header, Navigation

 

Templates

- Organisms Layout을 연결

 

Pages

- 말 그대로 모든 것을 합친 완벽한 것

 

 

---

글을 마치며

 

 

이론을 안다고 바로 사용하기는 쉽지 않다 계속 생각하고 고민해 보아야 한다

 

다음 글은 로그인/ 가입 page 파일 구조 기획을 해보려 한다