컴포넌트 import 경로 줄이기

react에서 component를 불러올때, 항상 이런식으로 import했다.

import Auth from "../routes/Auth"

폴더와 파일 구성이 많아질수록 import 할 파일의 경로가 헷갈렸다. 물론 vsc의 기능을 사용하면 되지만, ".."을 계속 쓰는 것이 코드에 불필요해 보였다.

importing a component

importing a component

".." 경로를 제거 할 수 있는 방법은 default폴더를 src로 지정 해놓는 것이다. src에 기능을 하는 모든 파일이 있기 때문에 최상위 폴더인 src를 default값으로 지정해놓으면 ".."을 쓸 필요가 없어진다.

예를 들어, 이런 구성의 폴더와 파일이 있다면,

App.js에서 Auth.js를 import 할 때, 차이

import Auth from "../routes/Auth" //기존

import Auth from "routes/Auth" //src default설정

Auth.js에서 App.js를 import 할때, 차이

import App from "../components/App" //기존

import App from "components/App" //src default설정

항상 기준이 src 폴더이기 때문에 ".."을 할 필요가 없게 된다.

src default 적용 방법

최상위에 jsconfig.json파일을 만들고, 밑에 코드만 저장해주면 된다.

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

나는 바로 적용이 안되서 서버를 껐다 키고, 기존 경로를 default경로로 바꿨다가 다시 바꾸고 하니 적용됐다.

src deafault 사용시 주의할 점

파일명과 모듈명이 같으면 에러가 생길 수 있다.

예를 들어 firebase 모듈을 불러 오려면 밑에와 같이 코드를 작성해야한다.

import firebase from "firebase"

이번에는 firebase.js의 파일을 import하려고 한다. src 폴더 안에 firebase.js파일이 있다면, 밑에와 같이 코드를 작성해야한다.

import firebase from "firebase"

이렇게 되면 모듈을 불러오는 코드와 파일을 불러오는 코드가 같아지기 때문에 프로그램은 무엇을 실행해야하는지 모른다. 결국 에러가 뜬다. 이 부분을 꼭 주의 하자!

파일명은 모듈명과 다르게!