[애니모리] 디렉토리 구조 변경

지난 포스팅에서 애니모리의 디렉토리 구조는 VAC와 아토믹 패턴을 혼합한 형태로 결정하였다.

 

하지만 10월 6일에 진행한 현업 멘토와의 멘토링 시간에 이에 대한 질문을 했다가 아토믹 패턴은 구조 분배가 모호하여 자주 사용하지 않는다. 다음과 같이 페이지로 나눌 수 있다。

Atomic 디자인 패턴 관련 피드백

☞ 각 레벨의 개념이 모호해서 Atomic 별로라고 생각
☞ 재사용이 불가능한 컴포넌트는 그냥 만들고, 재사용 가능한 컴포넌트만 따로 분리
☞ 페이지별로 관리하는 방법 제시
☞ 디자인 패턴의 경우, 정하고 나서 README.md에 정리해서 알려주는 것이 더욱 중요
   － 어떤 구조를 채택하게 되었는가?
   － 왜 이 구조로 결정하게 되었는가?

src
  / component
     / common
        Button.tsx
        Input.tsx
      
  / page
     / movie
       MoviePage.tsx
       MovieSearchContainer.tsx
       MovieInfo.tsx
     / actor

라는 피드백을 듣고 회의한 결과는 다음과 같았다.

 

우리가 아토믹 패턴을 사용하게된 이유?

카카오테크캠퍼스 2단계에서 아토믹 패턴을 사용했기때문에

더 나은 방향이 있는가?

페이지별로 나누고 공통 부분은 common 폴더에 담자

 

결국 디렉토리 구조는 페이지별로 나누게 되었고 오늘 해당 사항 적용을 끝냈다.

 

또한 VAC 구조에 대해서도 다음과 같은 피드백을 받아서 유도리있게 구현하는 것으로 결정하였다。

☞ 규모가 큰 회사에서는 FE 개발자(로직)와 퍼블리셔(마크업, CSS)가 나뉘어서 협업을 하기 때문에 VAC 패턴이라는 게 등장 하게 된 것

☞ 너무 패턴에 얽매여서 개발하는 것보단 편하게 하는 게 좋음
    － 나누는 것이 편할 것 같을 때는 VAC 써보고, 안 나눠도 될 정도의 작은 컴포넌트라면 나누지 말고 합쳐서 해도 무방할듯 → 유도리있게 구현하기