프로젝트 리빌딩 회고록 (feat: Next, Mobx, MetarialUI, Atomic)

기존에 React, Redux로 3년은 더 된  회사의 프로젝트를 다시 재구성하여 작업을 진행할 기회가 생겨 프로젝트 설정부터 완료까지 혼자 진행한 회고록이다.

 

1.  기술 스택 설정

     -  기존에 사용하던 스택으로는 React, Redux, Redux-Saga, Antd, Styled-Component, Typescript 였고
         presentational & container 패턴을 이용하여 제작을 주로 사용하였다.
         다른 기술들과 비교점을 찾아가며 협업과 개발에 더 편리한 스택을 찾기 위해 새로운 기술 스택을 도입하였다.
         React 프레임워크인 Next를 채택하였고 상태 관리로 Mobx, UI프레임워크로 MetarialUI를 사용하였다.
         컴포넌트를 더 세분화하고 재사용성을 더 높이기위해 Atomic디자인 패턴을 도입해 보았다.
   

 

2.  개발기간

     - 마감일이 크게 정해져 있지 않았던 프로젝트라 여러가지 검색과 시도를 해보며 대략 1달 반 정도의 시간이 걸렸다.

3.  프로젝트 구조

├── config  - env
└── src
    ├── layouts - common side menu
    ├── assets - img, font 등등
    ├── atomic - component
    ├── hooks - common hook
    ├── libs - utils function
    ├── models - types, infeface
    ├── pages - page 
    ├── services - api
    ├── stores - mobx
    └── styles - mui theme

 

4.  NextJS 

     - 관리자 사이트라서 Next의 특징적인 기능들인 SEO, SSR 등은 크게 활용되지 않았다.
     - 프레임 워크라 그런지 기존 React에서 일일이 설정해줘야 하는 Route를 page의 폴더구조를 통해 Route가 가능해 편리하게 사용하였다.
     - 기존에 Node서버로 Alert를 띄워 아이디 비밀번호 인증을 했었는데 같은 방법으로 사용하려니 에러가 발생해 Next에서 제공되는  middleware를 통해 구현할 수 있었다.
     - 다음에도 사용할 기회가 생긴다면 좀 더 활용을 잘할 수 있도록 DOC를 좀 더 잘 살펴봐야겠다.

5.  MaterialUI

     - 잘 사용하고 있던 Antd를  Next에 접목시키는 과정에서 큰 문제는 아니지만 새로고침을 여러 번 할 시 스타일이 뒤늦게 렌더가 되어 한참을 찾다 MaterialUI로 변경하게 되었다.
     - MaterialUI도 여러 가지 편리하게 사용할 수 있었지만 제공되는 컴포넌트들이 Antd보다는 조금 적다는 느낌이 강했다. (특히 TABLE)
     - 기존 프로젝트가 Antd로 되어있었기 때문에 스타일을 맞추어주기 위해 antd.min.css를 가져와 활용했다.
     - 확실히 자주 사용하던 Antd가 더 편했기에 다음엔 렌더링 문제를 꼭 해결해서 적용해봐야 할 것.....

6.  Mobx

     - 스토어 구조 

   ├── faq
      ├── faq.api.ts - api 통신
      ├── faq.store.ts - store 생성

      ├── pay.const.ts - const
      └── index.ts - export
   ├── index.ts - 스토어 병합 및 export 

    - 소스를 짤막하게 살펴보면  이런 식으로 사용을 했다.

export class FaqStore {
    @observable categoryList: ResponseCategoryListModel[] = [];
     
    constructor() {
       super();
       makeObservable(this);
    }
        
    @action getCategoryList = async (type: string) => {
      this.categoryList = await faqAPI.getCategoryList(type);
    };
  }

     - 사용하는 컴포넌트에서는  이런 식으로 사용하였다.

interface FaqProps {
  faq: FaqStore;
}

const Faq = () => {
  return <div></div>
}

export default inject('faq')(observer(Faq));

     - hydrate로 Next에서 제공하는 getServerSideProps로 호출해 초기 데이터를 받아 왔다.
     - Mobx를 설정하는 방법이 여러 가지가 있어서 시도해 보다가 제일 최적화되었다고 생각한 방법을 사용하였다.
     - 초기 작업 시에 hook을 만들어 관리하던 상태 값들도 Mobx로 이동하여 한번에 관리하는 걸로 변경.
     - Redux, Redux-Saga 보다 확연히 코드량이 줄어든 거 같아 맘에 들었다...  
     

7.  Atomic

     - presentational & container 패턴을 사용하다가 atomic패턴으로 변경을 했다.

    - 기존 패턴은 데이터 관리를 container에서 했지만 atomic 최상단인 pages나 template에서 관리를 하였다.
    - presentational & container 패턴도 사용을 잘한다면 재사용을 높일 수 있게 만들 수 있으나, atomic은 설계부터 가작 작은 단위부터 만들어 나갔고 재사용성을 높이기 용이했다. 
    - 재사용되는 컴포넌트들의 네이밍이 힘들었다.
    - 재사용 시에 추가되어야 하는 props 등이 생겨나 계속적인 수정 작업이 필요했다...
    - 가장 작은 단위로 만들지만 UI프레임 워크를 사용하고 있어서 Material을 기준으로 atom을 설정하고, molecules, orgaisms,           template들을 만들어 나갔다.
    - 중간중간 재사용이 안 되는 컴포넌트들도 만들게 되었는데 추후에는 이런 컴포넌트들을 최대한 줄일 수 있는 방법을 생각해봐야 한다.
    - 만들 땐 작업이 느린 거 같았으나 만들어 놓은 후엔 점점 작업 속도가 붙어 가는 것을 느꼈다.

8.  끝으로..

     혼자 하는 작업이었지만 굉장히 재밌게 작업을 진행했다. 

      처음 적용해보는 기술들이라 생각보다 시간을 많이 잡아먹은 게 크게 느껴진다... 예기치 못한 에러들이 너무 많았고 해결하느라 많은         시간을 할애해버렸다... 좀 더 개발자 스킬이 올라가면 금방금방 새 기술들을 적용을 할 수 있지 않을까 싶다.

     이번에 적용한 기술 스택들은 세미나로 ppt를 만들어 공유를 했는데  팀원들도 괜찮게 느꼈는지 다음 프로젝트에도 사용될 것 같다.?