우주마켓 리빌딩 - 기획

개요

원래는 팀원들과 만들었던 프로젝트인 우주마켓을 리팩토링해서 성능을 개선하려고 했지만 타입스크립트도 적용하고, 번들러도 바꾸고, 디자인패턴을 도입해서 제대로 만들어보고 싶어서 다시 만들기로 마음먹게 되었다.

프로젝트 스택

기존 프로젝트는 대표적인 스택으로는 React, redux-toolkit, styled-components를 사용하였다.

리빌드할 프로젝트는 Next.js를 활용하여 SSR 방식으로 만들고 tanstack-query를 이용하여 클라이언트에서 서버상태를 관리할 계획이다. 또 near-zero-runtime CSS 라이브러리인 tailwindCSS를 사용하여 재사용성 있는 컴포넌트를 만들 계획이다.

디자인 패턴

컴포넌트 별로 이미 분류가 되어있어서 아토믹 패턴을 도입해보기로 결정했다. 아토믹 패턴을 도입하면 작은 단위의 컴포넌트들을 복합적으로 조합해서 사용할텐데 어떻게 상태를 공유할지가 고민이었다. tanstack-query 덕분에 전역상태관리 라이브러리를 사용할 계획은 없기 때문에 contextAPI를 사용해야할텐데 코드의 통일성 및 효율성을 위해 Compound Components 패턴을 도입해서 해결하기로 결정하였다.

아토믹패턴 (Atomic Pattern)

아토믹 패턴은 atom, molecule, organism, template, page라는 5가지의 분류에 따라 컴포넌트를 개발하는 방법으로 더 이상 나눌 수 없는 atom부터 이런 atom들을 조합해서 만드는 molecule 그리고 이런 atom과 molecule이 모여 구체화된 Organism을 이루고 조합하여 template이라는 페이지에 적용할 레이아웃을 만들수 있습니다. page는 template 의 인스턴스라고 할 수 있으며 실제 콘텐츠를 담고 있습니다.

Compound Components

컴포넌트를 만들다보면 여러 컴포넌트를 합쳐야할때가 있습니다. 대부분의 경우에는 상태를 공유해야 하는 경우가 생길텐데 이런 상태 하나하나 전역상태 라이브러리를 통해 관리할 수 없기 때문에 Props drilling 을 피하면서 코드의 통일성을 유지할 수 있는 Compound Components을 소개합니다.

스타일

tailwindCSS를 선택하게 된 이유는 첫번째 빠르고, 두번째 일관성있기 때문이다. tailwindCSS는 대부분 속성들의 값이 정해져있고 tailwind.config.ts를 통해서 커스텀할 수 있기 때문에 일관성 있는 디자인이 가능하고, 디자인 변경사항이 있더라도 tailwind.config.ts 수정을 통해서 전체적으로 대응할 수 있어서 편리하다. 그리고 세번째로는 빌드타임에 최적화된 CSS를 만들기 때문에 런타임 오버헤드가 존재하지 않는다는 점이다.

맺음말

사실 리팩토링만 계획했는데 적용하고 싶은 기술과 패턴이 있기 때문에 리빌딩을 하게 되었다. 처음에는 언제 다할까? 라는 생각이 들었지만 지금 와서는 얼른 만들고 성능을 개선할 생각에 흥분된다. 리빌드 과정은 시리즈로 계속 작성할 예정이다.