[240117] 모듈, 상대경로 깔끔하게 관리

코드 리뷰 받고 배운 것

자바스크립트의 index

자바스크립트에서 index 파일을 사용하면 import 문을 간결하게 만들 수 있다.

어떻게?

• Node 의 모듈 시스템
• package.json, main 에 대한 정보 없으면 index.js 또는 index.node 파일을 찾아 가져온다.
• tmi : 라이언 달은 이렇게 만든 것을 후회한다. index.js 가 각 디렉토리의 진입점이면 귀여울 것 같았다고 함

// ./디렉토리/index.js
export * from "./Apple"
export * from "./Banana"
export * from "./Orange"

import { Apple } from "./디렉토리/Apple"
import { Banana } from "./디렉토리/Banana"
import { Orange } from "./디렉토리/Orange"

import { Apple, Banana, Orange } from "./디렉토리"

• 위 처럼 export 를 한 곳에서 해주면 깔끔하게 관리가 가능하다.

그럼 무조건 저렇게 쓰는게 좋을까?

• 정답은 없다.
• 사수님이랑은 이렇게 논의함
• import 하고 있는 것이 뭔지 명확하게 알 수 있어야함
• 예를들어 import {} “./type” 여기서는 타입을 가져오는 것을 유추할 수 있음
• import {} “./type/user” 여기서는 아 타입중에서도 유저 타입을 가져오구나 유추할 수 있음
• user에 내보내는 타입이 몇개 없으면 type에서 같이 내보내는게 깔끔할 수 있을 것 같음, 여러가지 있다면 저렇게 user 안에서 내보내는 것도 의미전달에 더 좋을 것 같아서 목적에 맞게 내보내자.

모듈을 작성할 때 생각할 것들

• 유지보수성
• 응집성, 영역침범을 하지 않는가
• 독립적인가, 종속성이 낮을수록 좋음
• 필요한 것들만 내보내고 소비될 수 있도록

현재 회사에서 추구하는 좋은 구조

• 부위별로 포지셔닝
  • 배치 컴포넌트는 배치만, 역할 최대한 1개씩
• 커스텀 hook 도 사용하는 컴포넌트에 응집, props 만 잘 전달해주면 어디서든 사용가능하도록