절대경로 설정하기(jsconfig.json)

✒️ 2025-05-28 09:40 내용 수정

상대 경로의 번거로움

• 아래와 같은 구조에서 Header.js Component에 styles/header.module.css와 pages/Main.js를 사용한다고 가정해보자.
  

• 상대 경로로 작성한다면 아래처럼 작성한다.

import styles from '../styles/header.module.css';
import Main from '../pages/Main.js';

• 현재는 깊이 들어가지 않는 구조지만, component나 pages폴더에서 더 하위 폴더를 생성한다면 css 파일을 가져오거나, 다른 component를 가져올 때 상대 경로가 매우 복잡하게 된다.
  • '../../../styles/common.css'처럼 매우 길어지게 되고, 파일 위치를 변경하거나 수정 시에 번거로워진다.

절대경로 설정

• 절대 경로를 커스터마이징 하는 방법은 여러가지가 있으며, 그 중에서 가장 간단하게 설정할 수 있는 jsconfig.json 파일 설정으로 진행했다.
  • 다른 방법들은 이 자료를 참고.
• 참고 자료 : 바야's React 절대경로 설정하기(create-react-app), 코딩마차's React 절대경로 설정 및 컴포넌트 불러오기
• src 폴더를 기준으로 절대 경로를 작성하기 위해 프로젝트의 최상위 경로에 jsconfig.json 파일을 생성하고 아래 내용을 추가한다.
  • Spring boot 내에 있는 React 프로젝트 폴더에서도 React 프로젝트 최상위 경로에 생성하면 작동되었다.
  • 위 사진을 기준으로 보자면 src 폴더가 있는 경로와 같은 경로에 생성하면 된다.

{
    "compilerOptions": {
        "baseUrl": "src" // root 디렉터리의 url
    },
    "include" : ["src"] // include에서 지정한 디렉터리들에 적용
}

• 이제 경로를 작성할 때 src 폴더를 기준으로 절대 경로를 작성한다.

import styles from 'styles/header.module.css';
import Main from 'pages/Main.js';