path 깔끔하게 관리하기

 

☀️ 일반적인 path 경로설정

특정 컴포나 파일을 import 할 때 경로를 설정한다. 이때 파일의 위치에 따라 경로가 상대적이기 때문에 지저분한 경우가 많다. 초기 디렉토리를 구성 할 때 컴포의 성격에 따라 파일을 구분지어 분류하기 때문에 경로는 동일한 경우가 대부분이다.

따라서 경로를 깔끔하게 설정해봤다.

//경로 관리 전
import Navbar from '././././layouts/Navbar'
import Header from '././././layouts/Header'
import Button from '././././components/Button'
import Banner from '././././components/Banner'

//경로 관리 후
import Navbar from '@layouts/Navbar'
import Header from '@layouts/Header'
import Button from '@components/Button'
import Banner from '@components/Banner'

 

 

🌈 디렉토리 구조

react-create-app(RCA)를 통해서 초기 프로젝트를 셋팅했기 때문에 파일구조가 이렇게 됐다.(+ ts 사용)

front
 L node_module
 L public
 L src
    L components
    L hooks
    L layouts
    L ...
 L package.json
 L package-lock.json
 L tsconfig.json

 

🌟 경로 설정

여기선 타입스크립트를 사용하기 때문에 tsconfig.json에서 경로설정을 해준다.

두가지를 넣어주는데

1) baseUrl : tsconfig.json위치를 기준으로 path에 넣을 경로를 입력한다.

   (나는 src안에 파일들이 들어있어서 아래처럼 baseurl 설정했음)

2) paths : import 경로에 축약해서 넣을 path들을 작성한다.

   ex) @hooks/* 를 쓰면 import Navbar from @hooks/Navbar 이렇게 사용할 수 있음.

//tsconfig.json
{
  "compilerOptions": {
/.../
    "baseUrl":"./src/",
    "paths": {
      "@hooks/*": ["hooks/*"],
      "@components/*": ["components/*"],
      "@layouts/*": ["layouts/*"],
      "@pages/*": ["pages/*"],
      "@utils/*": ["utils/*"],
      "@typings/*": ["typings/*"]
    }
/.../
  },
}

 

✨ 경로설정 오류

그런데 tsconfig.json에서만 바꾸면 이런 에러를 만날 수가 있다. 해당 위치에서 module을 찾을 수 없다는건데 이유는 webpack에서도 경로를 설정해줘야하기 때문.

 

🌻 경로설정 오류 해결

(craco라이브러리를 사용하는 방법도 있는데  여기선 직접해봤다.)

RCA를 통해서 프로젝트를 셋팅하면 webpack가 포함되어 있다. 그런데 일반적으로 webpack.config.js은 폴더에서 숨겨져있다. 아래 명령어로 표시할 수 있는데 주의! 한번 표시되면 다시 못 감춘다.

npm run eject

 

이게 표시될 것!

이후, webpack.config.js에서 경로를 추가해준다.

파일 내 검색을 통해 alias를 찾고 아래 위치에 작성해주면 끝!

alias: {
   	  'react-native': 'react-native-web',
          ...(isEnvProductionProfile && {
          'react-dom$': 'react-dom/profiling',
          'scheduler/tracing': 'scheduler/tracing-profiling',
        }),
        ...(modules.webpackAliases || {}),
        /여기에 경로 추가하자!!
        '@hooks': path.resolve('src', 'hooks'),
        '@components': path.resolve('src', 'components'),
        '@layouts': path.resolve('src', 'layouts'),
        '@pages': path.resolve('src', 'pages'),
        '@utils': path.resolve('src', 'utils'),
        '@typings': path.resolve('src', 'typings'),
      },