CRA에서 절대경로 설정하기

앞뒤가 안맞아서 수정중....

CRA에서 자체적으로 설정하는법

프로젝트 root 경로에  자바스크립트라면 jsconfig.json, 타입스크립트를 사용한다면 tsconfig.json 파일을 추가한 후
다음과 같이 작성해준다. 

 

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

이렇게 위와 같이 작성해주면 절대 경로로 사용할 수 있다. 

 

사용하는 방법은 아래와 같다. 

만약 App 컴포넌트에서 components/Footer 경로에 있는 Footer 컴포넌트를 불러온다면 

import문에 import Footer from 'components/Footer' 이렇게 불러와 주면된다. 

 

CRACO 사용하기

❗ CRACO 를 사용하는 건 타입스크립트를 사용하는 환경에서만 가능한 거 같다. (필자만의 생각일수도...)

 

다른 경로의 모듈을 불러올 때  ../../.....처럼 상대 경로로 설정하면 deps가 너무 길어진다. 따라서 상대 경로로 

설정하지 않고 절대경로로 바꾸면 deps가 길어지는 부분을 해결할 수 있다.

 

이것을 해결하기 위해서 CRA의 webpack 을 다시 설정해야하는데 이때 eject 명령어(yarn eject)을 사용해야

한다.  굳이 이렇게 하지 않고 절대경로를 설정하는 방법이 있다. 

 

그것은 바로 CRACO 라는 패키지이다. 

CRACO 

CRACO 란 Create React App Configuration Override 의 줄임말로 eject하지 않고 webpack 설정을 

대신해준다.

 

설치하기 

$ npm i @craco/craco@alpha

 

 

설정하기

croco.config.js 을 파일을 만들고 아래와 같이 작성해준다. 

 // croco.config.js  
 const path = require('path');
 
 module.exports = {
   webpack: {
     alias: {
       '@components': path.resolve(__dirname, 'src/components'),
       '@views': path.resolve(__dirname, 'src/views'),
     },
   },
 };

◎ alias 속성에 src의 하위 폴더의 이름을 넣어주면 된다. 

◎ 경로 넣어주기

    path.resolve(__dirname, '폴더명') 의 형태로 지정해준다. 

◎ @ 대신에 ~ 표시 또는 생략해도 된다. 

 

 

package.json 수정하기  

package.json 파일의 scripts 부분을 아래와 같이 수정해주자!

 

 /* package.json */
 "scripts": {
   "start": "craco start",
   "build": "craco build"
   "test": "craco test"
 }

 

 

절대 경로로 import 하기

 import useInput from '@components/Header';