Fall in IT.

리액트 컴포넌트를 절대경로로 임포트하는 방법 본문

프레임워크/React

리액트 컴포넌트를 절대경로로 임포트하는 방법

D.Y 2020. 4. 6. 23:22
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

 

오늘은 리액트 컴포넌트를 상대경로가 아닌 절대경로로 임포트하는 방법에 대해서 알아보겠습니다.

아래 설명은 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"
      ]
    }
    

 

참조

 

 

 

0 Comments
댓글쓰기 폼