디렉토리는 어떻게 짤까? (아토믹 디자인 패턴)

2023-11-22

다시쓰는 아토믹 디자인 패턴

여러 자료들을 보며 굳이 아토믹 그대로를 따를 필요가 없다고 느껴졌다.

그리고 내가 생각했을때 어떻게 구조를 가져갈지에 대해서 고민해보았다.

Atom : color, font, layout 같은 디자인 요소만 포함 (HTML는 따로 안 만듬)

Molecule : SRP를 지키고 컨텍스트를 포함하지 않음, 한가지 기능만을 위한 HTML태그를 이용한 컴포넌트, 재사용이 쉬운 범용적 네이밍 (layout은 외부에서 주입), (client component)

Organism : 컨텍스트를 포함하고 layout을 정함 (server component , client component)

Template : 외부로부터 주입받은 상태를 포함함(server component)

Page : Template을 담은 (server component)

Atom (Server Component)

디자인의 기본값이 적용된 HTML 태그들을 가지고 있다.

⇒ 머트리얼 UI의 Atom을 참고하자

⇒ 디자인 시스템을 만들어서 npm에 배포 ⇒ atoms 대처

Molecule (흐음….)

SRP!!!!!!오직 하나의 역할!!!!

단, Compound Component로 만들어 레이아웃과 구조는 밖에서 결정 할 수 있도록 한다.

UI기준이 아닌 사용하는 모델 기준으로 컴포넌트를 구현!!

Organism (Server Component || Client Component)

여기서부터 컨텍스트를 가질 수 있다.

단, UI기준이 아닌 사용하는 모델(데이터)를 기준으로 컴포넌트를 구현하자!!

Template (Server Component)

오직 레이아웃만!!!!!!오직!!! 따라서 이 안에 어떠한 컨텍스트를 갖을 필요가 없다

즉, Atom, Molecule, Organism 컴포넌트를 모두 외부로부터 주입받는다.

⇒ 이렇게 했을 때의 이점은

Prop drilling에서 Template 단계가 빠져 1depth가 줄어든다.
레이아웃과 비즈니스 영역을 분리할 수 있다.

Page (Server Component)

DB에 접근하는 경우 데이터는 여기서

원칙!

레이아웃과 스타일은 사용하는곳에서 정한다.

이들은 스타일 토큰으로 만들어 분류하고 가져다 쓴다.

스타일 토큰 분류
1. 박스 모델(Box Model):
  - width, height
  - margin, padding
  - border
2. 레이아웃(Layout):
  - display
  - position
  - float, clear
  - flex, grid
3. 폰트 및 텍스트(Font and Text):
  - font-family, font-size, font-weight
  - color
  - line-height
  - text-align, text-decoration
4. 배경 및 색상(Background and Color):
  - background-color
  - background-image
  - color
5. 포지션과 정렬(Positioning and Alignment):
  - position
  - top, right, bottom, left
  - justify-content, align-items
6. 애니메이션 및 변환(Animation and Transition):
  - animation
  - transition
7. 효과 및 그림자(Effects and Shadows):
  - box-shadow
  - text-shadow
  - opacity
8. 폼 요소(Form Elements):
  - input, button, select, textarea
  - form
  - label
9. 플렉스 및 그리드(Flexbox and Grid):
  - flex-direction, flex-wrap, justify-content, align-items
  - grid-template-columns, grid-template-rows 고마워 챗지피티야..!

재사용성이 필요한 요소들은 Compount components로!

고민

next로 아토믹 디자인 패턴을 연습해보다 궁금한점들이 생겼습니다! Atom은 그냥 기본 HTML태그내에 스타일이 추가된 것인가?
1. 그렇다면 스타일에 의존하기 때문에 재사용이 낮아지지 않나?
2. 아니라면 스타일을 외부에서 주입하는건데 그냥 HTML을 쓰는것과 무엇이 다르지? 제가 이해한 바로는 atom은 최소단위의 원자를 나타내다 보니 디자인 시스템을 사용하지 않는다면 Atom의 사용 이유가 없다고 느껴졌습니다. 그렇다면 디자인 시스템이 없는 상태에서는 아톰을 만들 필요가 없고 아톰으로 조립되어가는 아토믹 디자인 패턴이 큰 효과가 없지 않을까? 라는 생각을 하게 되었습니다. 멘토님의 생각을 여쭙고싶습니다!!
컨텍스트란..?? 이전에 슬렉에서 질문에 대한 답변을 주신것과 작성하신 글들을 보면서 Oragnisum과Molecule의 기준을 컨텍스트 유무로 정하신다고 받아들였습니다. 제가 계속 헷갈리는 이유를 고민해보니 컨텍스트가 무엇인지에 대해서 명확하지 않다는 느낌을 받았습니다!! 제가 생각했을때는 컨텍스트가 데이터를 핸들링하는 로직이 들어간 부분이라고 생각했는데 멘토님께서 말씀해주신 컨텍스트는 어떤 의미인가요???
재사용성을 높히기 위해서는?? ⇒ atom으로 이루어진 search bar는 Molecule이다. ⇒ search bar를 재사용 가능하게 하기 위해서는 compound component 패턴으로 만들어주는게 좋을 듯하다 ⇒ compound component 패턴으로 만들면 내부에 로직이 들어간다 (= 컨텍스트가 들어간다??) ⇒ 그러면 search bar는 Organism인가? ⇒ Organisum이라면 Molecule에는 어떤게 들어가는거지? cf) 컨텍스트란 어떤 걸 의미하는 걸까? 이러한 생각의 흐름을 갖게 되었습니다. 저도 제 생각이 정리가 잘 안되어서 중구난방하게 질문을 드리게 된 것 같아 죄송합니다,, 저는 컨텍스트를 어떠한 데이터에 대한 핸들링 부분이라고 생각하였습니다. 컨텍스트가 들어가는 부분은 Oragnisum으로 한다면 Molecule에는 어떤게 들어가야 하는걸까요??