리액트 절대경로

한태동·2024년 6월 3일

리액트 절대 경로 설정(jsconfig.json)

상대경로로 파일 import시 깊어지게 되거나 폴더가 복잡할 시 찾는데 시간이 오래 지체됨.

하지만 절대 경로로 파일을 import해주면 가독성도 좋고 금방 찾을 수 있다.

1. jsconfig.json 파일이란?

디렉토리 에 jsconfig.json파일이 있으면 해당 디렉토리가 JavaScript 프로젝트의 루트임을 나타낸다.
프로젝트에 속한 파일, 프로젝트에서 제외할 파일 및 컴파일러 옵션을 나열할 수 있다.
jsconfig.json의 compilerOptions
- baseUrl: 프로젝트 기본 디렉토리(절대 경로 기준 디렉토리)
- paths: baseUrl 기준으로 계산될 경로, baseUrl 옵션 설정이 선행되어야 한다!

2. src를 생략

jsconfig.json 생성 (package.json과 같은 위치에 만들어준다)
jsconfig.json에 소스코드 작성

{
       "compilerOptions": {
		       // baseUrl: 절대적 모듈 이름들의 기준이 되는 기준 Url
           "baseUrl": "src"
       },
       "include": [
           "src"
       ]
   }

src 키워드 없이 절대 경로로 import 가능!
components/main.jsx 와 같이 접근 가능

3. src 생략하지 않고 src부터 작성

src/components/main.jsx 와 같은 방법

jsconfig.json 생성 (package.json과 같은 위치에 만들어준다)
jsconfig.json에 소스코드 작성

{
	"compilerOptions": {
		// baseUrl: src로 작성하면 src가 기준이 됨.
		"baseUrl": "src",
		// 예약어가 @가 된다. 좌측에 사용할 이름, 우측에 사용될 디렉토리 주소 작성
		"paths": {
				"@*": [*"src/*"*]
		}
	}
}

4. Vite에서 Javascript 절대경로 지정

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import { resolve } from 'path';

export default defineConfig({
	plugins: [react()],
	// resolve: Vite 설정 파일에서 모듈 해석과 관련된 설정을 정의하는 데 사용.
	resolve: {
		// alias: 특정 경로에 대한 별칭 -> 코드의 가독성/유지보수 용이하게 함.
		alias: [
			// find: 찾을 경로 패턴(별칭), replacement: 실제 경로
			{ find: '@', replacement: resolve(__dirname, 'src') },
			{ find: '@pages', replacement: resolve(__dirname, 'src/pages') },
		]
	}
})