React 프로젝트에서 jsconfig.json 을 이용한 절대 경로 설정하기

jsconfig.json이 필요한 이유

React 프로젝트를 진행하다 보면, 파일과 디렉토리의 구조가 복잡해지면서 상대 경로를 사용하는 것이 번거로워질 수 있습니다. 이럴 때, jsconfig.json을 설정하여 절대 경로를 사용하면 훨씬 간결하고 깔끔한 코드를 작성할 수 있습니다. 이번 글에서는 jsconfig.json 설정 과정에서 만난 작은 어려움과 그 해결 과정을 공유하고자 합니다.

jsconfig.json이란?

jsconfig.json은 JavaScript 프로젝트의 설정 파일입니다. 이 파일을 통해 절대 경로를 설정함으로써 파일 간의 참조가 더욱 간편해집니다. 이번 글에서는 React 프로젝트에서 이 설정 파일을 어떻게 구성하고 사용하는지 알아보겠습니다.

json
Copy code
{
  "compilerOptions": {
    "target": "esnext",
    "baseUrl": "src"
  },
  "include": ["src"]
}

주의사항

파일 위치 확인: jsconfig.json 파일이 프로젝트 루트에 위치하고 있는지 확인했습니다. 이 파일은 gitignore와 package.json 파일과 같은 위치에 있어야 합니다.

에디터와 서버 재시작: 설정 변경 후, 코드 에디터와 개발 서버를 재시작했습니다. 이렇게 하면 새로운 설정이 올바르게 적용되었음을 확인할 수 있습니다.

참고 사이트
https://create-react-app.dev/docs/importing-a-component/#absolute-imports

https://code.visualstudio.com/docs/languages/jsconfig

jsconfig.json Reference