프레임워크/React
리액트 컴포넌트를 절대경로로 임포트하는 방법
D.Y
2020. 4. 6. 23:22
안녕하세요.
오늘은 리액트 컴포넌트를 상대경로가 아닌 절대경로로 임포트하는 방법에 대해서 알아보겠습니다.
아래 설명은 CRA 프로젝트를 기준으로 설명합니다 : )
왜 절대경로인가?
-
상대경로로 설정할 경우 디렉터리 구조가 깊어질수록 import 하기 어려워진다.
import Common from "../../../../utils/common";
-
절대경로로 설정할 경우 디렉터리 구조와 관계없이 손쉽게 import를 할 수 있다.
import Common from "src/utils/common";
설정 방법
- 프로젝트의 루트에 .env 파일을 생성하고 아래의 내용을 붙여넣습니다.
NODE_PATH=src/
- VSCODE에서도 Path를 잡아줘야하기 때문에 프로젝트의 루트에 jsconfig.json 파일을 생성하고 아래 내용을 붙여넣습니다.
-
{ "compilerOptions": { "baseUrl": "." }, "include": [ "src" ] }
참조