[React] 프로젝트 기본 경로 설정 - 길어지는 상대경로를 간단하게

▶프로젝트 기본 경로 설정 - 길어지는 상대경로를 간단하게

프로젝트를 진행하다보면 폴더안에 폴더를 굉장히 많이 생성하게 되는데요.

 

만약 TodoForm.js 파일에서 styles.폴더의 파일을 import 하려면 부모의 부모의... 계속 올라가서 다시 폴더를 찾아 파일을 찾아야 할 것입니다.

그런데 이러한 상대경로를 사용하는 것이 아니라

처음부터 src 폴더에서 styles 폴더에서 파일을 찾으면 굉장히 간단해 보입니다.

 

이렇게 사용하기 위해서는 말하지 않아도 src에서 찾도록 기본 경로를 따로 설정해 주어야 하는데요.

 

🔎 기본 경로 설정하기 - 여기부터 파일을 찾아

---

우선 최상단 폴더 안에 jsconfig.json 파일을 생성해줍니다.

 

📄 jsconfig.json 파일

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

 

그러면 이제 부모의 부모의... ../../../ 로 작성하지 않고 src 다음 경로부터 바로 작성하여 import 해올 수 있게 됩니다.

 

사용 예시 → 📄 src/pages/Home/components/Modal/TodoForm.js 파일

import { flexCenter } from 'styles/common';