barrel

barrel은 통 이란 뜻인데 그냥 정리된 모든것을 index안에 깔끔하게 선언한다/담는다고 보면 될것 같다.

아래는 barrel에 대해 organization에 적은 설명이다.

각 컴포넌트에 해당되는 폴더를 만들고 그 안에 index.js를 만듭니다.

예를 들어 index.js안에 export { default } from './Header' 라고 해두면 VS CODE상에서 해당 파일을 링크하여 열었을때(ctrl를 누른상태로 클릭) vs code 에디터 상단에 Header.jsx 라고 뜹니다.

이는 여러개의 파일을 link로 열었을때 index.jsx 라는 이름이 여러개가 떠서 헷갈리는 상황을 막아줍니다.

절대 경로 설정

개발하다가 import 경로를 설정할때 import할 컴포넌트가 깊이 있으면 경로가 길어지기 마련이다

import checkWithinOneday from '../../../../utils/checkWithinOneday';

그럼 어디서든 src부터 시작하도록 절대경로를 지정해주자

우선 react 부터

// jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "includes": ["src"]
}

그담 next-js!

// jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "."
  }
}

그럼 아래같이 경로가 깔끔해진다

import checkWithinOneday from 'utils/checkWithinOneday';

참고자료

아래링크는 anti-react pattern인데 위에서 언급된거 말고 다른 꿀팁도 전수 받을 수 있으니 참고!

https://www.youtube.com/watch?v=b0IZo2Aho9Y&list=PLVXg2VmU-9lusuqwDXrHhdrREo6T47z93&index=12&t=275s