이렇게 또 한달이...

빠르다 빨라,,, 세상 빠른 한달이 지나갔다. 배운 것도 많고 느낀 것도 많지만 지금 내 머리속에 가장 크게 자리잡아있는 것은 어떻게 하면 재사용성을 높히며 생성성을 높힐수 있는 구조로 컴포넌트를 짤까이다. 가장 유명하고 핫했던 '아토믹 디자인 패턴'을 제대로 사용하보는게 가장 큰 관심사이다. 그래서 이번 회고에서는 아토믹 디자인 패턴에 대한 내용이 대부분 들어가게되었다...ㅎㅎ 이 패턴을 맹신한다는 느낌보다는 이 패턴을 욕하기 위해서는 내가 직접 제대로 써보고 단점과 장점을 느껴야지 말할 수 있다고 생각하기 때문에 제대로 한번 써보려고 한다.

Keep

이전부터 끈질기게 멘토님께 하나의 주제에 대해서 계속 물어보았다. 아토믹 디자인 패턴을 검색하면 가장 위에 뜬 글의 주인이 멘토님이셔서 빨대를 아주 깊게 꽂아야겠다는 생각으로ㅎㅎㅎㅎㅎ 아토믹 디자인 패턴을 제대로 경험해보기 위해서 노션 클로닝 과제부터 아토믹 디자인 패턴에 맞게끔 설계를 해보고있다.

이렇게 경험 해본 후 개인 프로젝트에 도입하여 조금 더 복잡한 프로젝트를 할 때 어떻게 사용하는게 좋은지, 컴포넌트를 나누는 기준은 어떻게 하는게 좋을 지, 재사용성을 향상하기 위해서 어떤식으로 설계해야하는지 공부중이다.

아토믹 디자인 패턴 (+ compound component 패턴)

정말 많은 글들과 많은 기업들의 레퍼런스를 찾아보며 한가지 확실해진 것은 brad frost의 아토믹 디자인 패턴은 하나의 가이드이고 은색탄환이 아니다. 자신의 상황에 맞게 변경하며 기준을 세워 사용하는 것을 알 수 있었다. (한가지 예시로 Line에서는 5단계가 아닌 atom, molecule, page 이렇게 나눠서 사용한다.)

또한 아토믹 디자인 만으로 사용하면 효과가 미미하고 복잡하기만 하다는 느낌을 받았다. 그래서 개발에 앞서 간단하게라도 피그마를 이용하서 디자인을 하고 storybook을 이용해서 디자인 시스템을 먼저 구축할 것이다. 벨로그의 주인장 글을 보며 따라가볼 예정이다.

그렇게 완전한 사이클을 겪어본 후 정말 재사용성과 생산성이 상승하였는지 몸으로 느껴볼 것이다.

Problem

1. 처음 도입해보는 개념을 한번에 우르르 사용하다보니 여기저기에서 브레이크가 걸린다. 이번 프로젝트의 목표를 뽀족하게 정해야겠다.

   현재 새롭게 사용하고 있는 스팩들 중요도 순

   • 아토믹 디자인 패턴에 맞게 구조설계
   • Next.js v13
   • MongoDB
   • S3
   • Tiny에디터
     • ⇒ 여기서 이미지 처리를 하느라 너무 많은 삽질과 시간을 보냈다. 일단 보류하고 우선순위대로 개발을 해보자

2. 개인 프로젝트들을 하다보니 데브코스의 커리큘럼에 투자하던 시간이 저번달에 비해 많이 줄었다..

3. 요즘 알고리즘 문풀을 안한다…

   • 지금내가 가장 하고싶은거는?? 개인 프로젝트가 재밌다. 이거부터 하다보니 다른 걸 안한다ㅋㅋ,,

Try

1. 개인 프로젝트는 어떻게 이어나갈 것인가?
   1. storybook을 사용해서 디자인 시스템 컴포넌트들을 문서화한다.
   2. Figma를 이용해서 화면설계를 먼저하고 컴포넌트들을 나눈 후 구현을 시작한다
   3. material-UI를 참고하여 Atoms에 들어갈 컴포넌트와 디자인들을 구현한다
   4. Organism컴포넌트를 나누는 기준은 UI가 아닌 사용하는 데이터(모델) 단위로 나눈다
   5. 컨텍스트가 포함되어있지 않으면 Molecule로 분류하며 범용적인 네이밍을 사용한다
   6. 컨텍스트가 포함되어있으면 Organism으로 분류하며 네이밍에 포함한다
   7. Layout은 외부에서 주입, UI가 조금씩 변경되야하는 컴포넌트는 compound component로 구현한다

이런식으로 구성할 것이다.

1. 데브코스와의 비율을 어느정도로 둘 것인가?

   • 개인 공부는 일단 제쳐두고 코어시간에는 당일 강의부터 다 듣자! 실습을 다 따라하지 않더라도!!
   • 그리고 남는 시간에 개인 공부를 하자!!!

2. 하고싶은 거를 뒤로 미루고 해야하는 거를 먼저하자!

   하루 일과를 아래와 같이 변경

   • 기상 ~ 코어시간 전 : 내가 하고싶은거
   • 오늘 강의부터 다 듣고 정리
   • 코딩 테스트 1문제 && 1시간 이상
   • 개인 프로젝트

생각지 못한 인턴, 신입 공고들이 종종 나오고 있다... 물론 자소서와 포폴도 중요하지만 흔들리지말고 내가 해보고싶은 것부터 완성하자!!(그냥 코테 연습느낌으로 보고오자~)

아자아자!!