15. Atomic Design Pattern + 상수 적용

• 컴포넌트를 작성하다보니 폴더 구조가 복잡해지는 것 같아서 깔끔하게 관리하기 위해 Atomic Design Pattern을 적용했다.

1. Atomic Design Pattern

• 카카오 기술블로그를 참조해서 다음과 같이 컴포넌트를 정리했다.

• Atom : 개별적 컴포넌트 파츠
• Molecule : Atom들을 묶어서 완전한 컴포넌트를 구성한다.
• Organism : Molecule들을 묶어서 페이지의 한 '구역'을 완성한다.
• Template : Organism들을 배치해서 페이지의 배치도를 짠다.
• Page : Template의 인스턴스로, 실제 컨텐츠로 구성 완료

=> components 내에 bar, button, section 등의 폴더로 구성된 구조 대신
components/atoms에 Bars.ts, Buttons.ts, Sections.ts 등을 구성해
단일 컴포넌트 구성원끼리 묶어놓았다.

2. 상수 적용

• 디자인적인 변경 때마다 매번 상수들을 수정하는 것이 힘들어 재사용성을 위해 상수 파일을 따로 만들었다.

🟥 상수 파일을 불러왔을 때 'Cannot find module ...' 에러가 발생했지만, tsconfig.paths.json에서 경로를 제대로 인식하지 못해서 생긴 에러같았다. Constants 폴더에 한해서는 동일 에러가 자꾸 발생해서, 일단은 파일 내에서는 상대경로를 사용해 표시하였다. 폴더 구조가 완전히 깔끔해지고 어느정도 구성이 완료되면 해당 문제를 해결해볼까 한다.