Atomic Design Pattern 으로 리팩토링

협업에서의 첫걸음 - (디자인 패턴의 부재)

컴포넌트를 설계하는 방법은 다양하다. 그래서 컴포넌트 구조 설계 시 명확한 기준이 없으면 팀원들 각자가 생각하는 의미있는 기준으로 컴포넌트를 나누게 된다

프로젝트를 진행하고 그 파일 개수와 그 규모가 커질수록 재사용성과 가독성이 좋은 컴포넌트 파일을 생성하고자 하는 욕심을 갈수록 커진다

그래서 우리 팀에서는 이번 스프린트가 종료된 이후에 바로 폴더 구조 리팩토링을 진행하기로 하였다

바뀌는 점 간략히 보기

기존의 폴더구조는 아래처럼 존재하였다

├── app
│   ├── pages
│   │   ├──home
│   ├── ...
├── components
│   ├── commons
│   ├── units
│   │   ├──home
├── commons
│   ├── assets
│   ├── ...
└── atoms

또한 각 폴더는 또 client폴더, server 폴더를 나누어서 컴포넌트를 배치시켰다
클라이언트 컴포넌트, 서버 컴포넌트가 존재하는 next의 경우에는 이 디자인 패턴도 괜찮을 것 같아서 초기에 시작을 하였지만 작업을 하면서 오히려 복잡도를 증가시키고 폴더구조 자체의 가독성을 저하시킨다는 것을 깨닫게 되었다

그래서 이번 폴더 구조 리팩토링을 통해 Atomic Design Pattern 을 도입하기로 하였다

Atomic Design Pattern이란?

brad frost의 아토믹 디자인 은 화학적 관점에서 영감을 얻은 디자인 시스템입니다. 모든 것은 atom(원자)으로 구성되어있고 atom(원자)들이 서로 결합하여 molecule(분자)이 되고, molecule는 더 복잡한 organism(유기체)으로 결합하여 궁극적으로 모든 물질을 생성합니다. 아토믹 디자인에서는 이 개념을 차용해서 컴포넌트를 atom, molecule, organism, template, page의 5가지 레벨로 나눕니다.