리액트에서 절대 경로를 설정하는 방법

리액트를 사용하면 경로는 일반적으로 상대 경로를 사용하게 된다.

상대 경로의 최대의 단점은 코드 길이가 길어질 뿐만 아니라,

코드 경로가 헷갈리는 경우가 많이 발생하여 쓸데없는 시간소비가 있을 수 있다.

그렇기 때문에 절대 경로도 꽤 편리한 기능이어서 그 사용방법에 대해 적어보려고 한다.

 

 

 

먼저, 원하는 위치에 absolute-path라는 앱을 설치한다.

(여기서 앱이름은 본인이 원하는 이름으로 하여도 큰 문제는 없다. 단, 대문자는 안된다.)

yarn create react-app absolute-path

추가적으로 원하는 폴더가 현재 위치일 경우(즉, absolute-path폴더가 있고 터미널로 현재 그 위치일 경우)에는 다음과 같은 명령어로 입력을 한다.

 

TMI

yarn create react-app .

스페이스와 닷을 쓰는 것은 파이썬에도 비슷한 명령어가 있다. 아마 공통된 명령어인 듯하다. 현재 위치에다가 설치를 한다는 것으로 위에 명령어는 absolute-path폴더를 만든 후 설치라면, 이 명령어는 폴더 생성 없이 바로 설치를 의미한다.

 

 

설치를 하게 되면 다음과 같은 경로로 만들어지게 된다.

node_modules
public
src
package.json
README.md
yarn.lock

 

그럼 package.json경로와 동일한 위치에 jsconfig.json을 생성한 후 아래와 같은 코드를 작성한다.

jsconfig.json

{
    "compilerOptions": {
        "baseUrl": "src"
    },
    "include": [
        "src"
    ]
}

 

그리고 확인해보면 문제없이 사용할 수 있다.

 

예시를 들어보기 위해 다음과 같이 폴더 및 js파일을 만들었다고 가정을 한다.

absolute-path
↳ node_modules
↳ public
↳ src
  ↳ components
    ↳ Button.js
    ↳ Footer.js
  ↳ styles
    ↳ utils
      ↳ common.css 
↳ package.json
↳ README.md
↳ yarn.lock

 

button.js에서 common.css를 불러올 때 원래는 다음과 같이 불러온다.

import React from 'react';
import '../styles/utils/common.css';

const Button = () => {
	return (
    	<>
        	<button>버튼</button>
        </>
    );
};

export default Button;

 

만약 방금 전의 코드를 적용하게 되면

import React from 'react';
import 'styles/utils/common.css';

const Button = () => {
	return (
    	<>
        	<button>버튼</button>
        </>
    );
};

export default Button;

다음과 같이 적용이 되는 것을 확인할 수 있다.

 

 

 

처음 절대 경로를 접한 것은 'cross-env'를 사용하였지만,

우연히 다른 절대경로를 설정할 방법이 있어서 정리하게 되었다.

이 방법이 조금 더 간단하고, 라이브러리를 설치하지 않아도 되어서 바꾸게 되었다.