[React + Craco + TS] Alias 절대경로 + 폴더 index 절대경로 설정 방법

⚡ Craco + Typescript, Alias로 절대경로 설정하기

---

이 글을 본다는 것은 상대경로와 절대경로의 차이에 대해 이미 알고 있고,
상대 경로 지옥에 빠져 본 것이라 생각해 그 둘의 차이점을 설명하는 것은 패스하겠습니다.

 

기존에 절대경로를 설정하는 방법 중 craco+ craco-alias 은 지원이 종료되어 사용할 수 없고
react-app-rewired 는 익숙치 않아 craco만을 이용해 설정하는 방법을 소개합니다.

//상대경로
import { ComponentA } from '../../../components/ComponentA'

//절대경로
import { ComponentA } from '@components/ComponentA'
import { ComponentB } from '@components/ComponentB'

//절대경로 설정으로 폴더 import
import { ComponentA, ComponentB, ComponentC, ComponentD } from '@components'

그럼 위 코드와 같이 CRA 환경에서 Alias를 이용해 절대경로를 세팅하는 방법과
추가적으로 한 폴더에서 여러 모듈을 절대경로로 import/export하는 방법을 알아보겠습니다.

---

📌 Craco(Create React App Configuration Override) 설치

$ npm i @craco/craco

• 편리한 CRA 환경을 깨고 웹팩 설정을 할 수 있는 eject대신
  간단한 설정파일로 웹팩을 커스텀할 수 있는 craco를 받아줍니다.

//package.json

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
}

• 설치가 완료되었다면 package.json 파일로 가서 scripts 부분을 위와 같이 바꾸어줍니다.

---

📌 craco.config.js 설정파일 생성

// carco.config.js

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components'),
      '@pages': path.resolve(__dirname, 'src/pages'),
      '@hooks': path.resolve(__dirname, 'src/hooks'),
    },
  },
};

• root 경로에 craco.config.js 파일을 생성합니다.
• 노드 path 모듈을 가져온 뒤 Alias path를 작성합니다.
  대게 src 아래의 폴더들을 전부 작성해주는게 국롤입니다.

---

📌 tsconfig.paths.json 설정파일 생성

// tsconfig.paths.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@pages/*": ["./pages/*"],
      "@components/*": ["./components/*"],
      "@hooks/*": ["./hooks/*"]
    }
  }
}

• tsconfig의 프로퍼티인 compilerOptions은 tsconfig.json에 작성해도 되지만
  관리하기 편하도록 root 경로 아래에 따로 분리하여 파일을 생성해줍니다.
• baseUrl은 아래에 작성할 경로의 base가 되는 경로입니다.
  어짜피 다 src 아래에 있으니 위처럼 작성해줍니다.
• paths에는 craco 설정파일에 작성한 Alias path 정보들을
  TypeScript가 알아먹도록 한번 더 작성해줍니다.

---

📌 tsconfig.json에 경로 파일 적용

// tsconfig.json

{
  "compilerOptions": {
    ...
  },
  "include": [...],

  // 추가
  "extends": "./tsconfig.paths.json"
}

위에서 작성한 tsconfig.paths.json 파일을 extends 해줍니다.

여기까지 똑같이 하셨다면 다음과 같이 Alias를 이용하여 절대경로로 모듈을 import 할 수 있게 됩니다.

절대경로를 사용하는 것은 정말 좋지만 프로젝트 규모가 더욱 더 커질 수록
그에 비례해서 끝도 없는 import 구문이 늘어날 것입니다.

 

 

⚡️ 폴더의 index.ts(index.js) 파일 Alias 적용

---

// src/components/index.ts

export { ComponentA } from './ComponentA'
export { ComponentB } from './ComponentB'
export { ComponentC } from './ComponentC'

// ---------------------------- \\

import { ComponentA, ComponentB, ComponentsC } from '../components'

기존에는 이렇게 import가 늘어날 때에는 폴더의 index.ts 파일에 모듈들을 전부 export 해준 뒤,
한꺼번에 모듈들을 import 하곤 했습니다.

이런 index 파일에 Alias을 적용하려면 다음과 같이 적용하면 됩니다.

 

📌 tsconfig.paths.json에 index 파일 Alias 세팅

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@pages": ["./pages/index.ts"],
      "@pages/*": ["./pages/*"],

      "@components": ["./components/index.ts"],
      "@components/*": ["./components/*"],

      "@hooks": ["./hooks/index.ts"],
      "@hooks/*": ["./hooks/*"]
    }
  }
}

정말 간단하게도 tsconfig.paths.json 파일에 index 파일을 폴더명으로 Alias를 추가하기만 하면 끝입니다.

 

path alias 순서에 따라 import 우선순위가 바뀌기 때문에 index alias를 폴더 alias보다 위로 올려주어야 합니다.

이렇게 세팅해둔다면 다음과 같이 간결하게 코드를 작성할 수 있어
프로젝트 규모가 커질 수록, import 해야하는 모듈이 많아질 수록 더 편리하게 사용됩니다.

---

📌 index(barrel) 파일 자동 생성하기

이렇게 간결한 import를 위해 생성하는 배럴파일을 수작업으로 처리하기 귀찮으신 분들은

아래 글을 참고하셔서 자동으로 생성해보세요!

[React, JS, TS] 간결한 import를 위한 index(barrel) 파일을 자동으로 생성해보자

[React, JS, TS] 간결한 import를 위한 index(barrel) 파일을 자동으로 생성해보자

 

⚡ cra-template-lasbe

---

$ npx create-react-app my-app --template lasbe

리액트 + 타입스크립트에 craco와 절대경로 보일러플레이트를 적용한 템플릿을 npm에 배포했습니다.

 

만약 새로 프로젝트를 만드는데 절대 경로 설정이 필요하신 분은

간단하게 템플릿 형태로 프로젝트를 생성할 수 있습니다.

 

[React/TypeScript] 절대경로 CRA 템플릿 npm 배포