💻 TIL 23.03.17

Refactoring에서 생각해 봐야할 항목

이번에 refactoring을 진행하기 전에 이번처럼 큰 공사(refactoring)을 하지 않기 위해 기초적인 것을 공부하고 있다. 공부를 하다보니 어느 글에서 module의 특성을 고려하여 directory structre를 작성하라라는 문구를 봤다. 나는 그동안 알지도 못하는 module을 당연한듯이 쓰다보니 이 말 뜻을 이해하지 못했다. 그래서 모듈에 대해 공부해보고 지난글에서 작성한 디렉토리 구조를 다시 작성해보려 한다.

❔ 모듈이란

• 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다. 이때 모듈이 성립하려면 모듈은 자신만의 파일 스코프를 가질 수 있어야한다.
  출처 : JavaScript Deep Dive 48장
• 즉, 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재한다. 하지만 완전이 분리되어 개별적으로 존재하는 모듈은 재사용이 불가능하므로 존재의 의미가 없다고 할 수 있다. 따라서 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하다. 이를 export라 한다. export된 모듈의 자산은 다른 모듈에서 재사용할 수 있는데, 이때 공개된 모듈을 재사용할 때 자신의 스코프 내로 불러들여 사용하는 것을 import라 한다.
• 따라서 모듈은 기능별로 분리되어 개별적인 파일로 작성되는데, 코드의 단위를 명확히 분리하여 애플리케이션을 구성할 수 있고, 재사용성이 좋아서 개발 효율성과 유지보수성을 높일 수 있다.

Directory Sturcture 재설계

 // before
 ├── components
 │   ├── Header.tsx
 │   ├── Footer.tsx
 │   └── Tag.tsx
 ├── page
 │   ├── mainPage
 │   │   └── index.tsx
 │   └── detailStudyPage
 │       ├── index.tsx
 │       ├── TabStudyIntroduce.tsx
 |       └── TabBookIntroduce.tsx
 ├── style
 │   ├── components
 │   │   ├── HeaderStyled.tsx
 │   │   ├── FooterStyled.tsx
 │   │   └── TagStyled.tsx
 │   └── page
 │       ├── mainPage
 │       │   └── MainPageStyled.tsx
 │       └── detailStudyPage
 │           ├── DetailStudyPageStyled.tsx
 │           ├── TabStudyIntroduceStyled.tsx
 |           └── TabBookIntroduceStyled.tsx
 └── run

• 기존에 구상했던 부분에서 모듈의 특성을 고려하지 않은 부분은 style과 component의 분리다. 모듈의 특성상 개발의 효율성과 유지보수성을 높일 수 있다는 것인데, 자주 사용하는 모듈끼리 함께 있어야 관리하기 용이할 것 같다는 생각이 들었다. 해당 생각을 바탕으로 다시 구상해봤을때의 결과이다

   // after
   ├── components
   │   ├── Header.tsx
   │   ├── HeaderStyled.tsx
   │   └── Footer.tsx
   │   ├── FooterStyled.tsx
   │   ├── Tag.tsx
   │   └── TagStyled.tsx
   ├── page
   │   ├── mainPage
   │   │   └── index.tsx
   │   │   └── MainPageStyled.tsx
   │   └── detailStudyPage
   │       ├── index.tsx
   │       ├── TabStudyIntroduce.tsx
   |       ├── TabBookIntroduce.tsx
   │       ├── DetailStudyPageStyled.tsx
   │       ├── TabStudyIntroduceStyled.tsx
   |       └── TabBookIntroduceStyled.tsx
   ├── style
   └── run

• style에는 공통으로 사용되는 부분에 대해서 사용하려고 한다. 하지만 아직까지 공통으로 사용되는 스타일에 대해서 생각해본 것이 없으므로 추후에 넣어볼 예정이다.