14.React typeScript 절대경로 적용하기 with CRA

---

CRA + typeScript

• 프로젯트 폴더 구조가 겹겹인 경우, import 경로를 상대 경로로 하면 코드가 길어지고 보기 어렵기 때문에 대부분 절대 졀대경로를 사용합니다.

절대경로를 설정하는 방법은 대략 세가지 정도가 있습니다.

• Babel plugin

• Webpack,Fusebox…(module bundlers)

• create-react-app, create-react-app-ts

여기선 CRA 에서 webpack 설정을 바꿔줘야 하는데 그러면 eject 를 해야 되기 때문에 craco 를 이용해서 CRA 를 쉽게 설정 할 수 있습니다.

Craco 란?

Craco (Create React App Configuration Override) 는 CRA 를 쉽제 설정하고 eject 를 안해도 eslint, babel, postcss 등을 쉽게 설정할 수 있습니다.

Craco 설치 및 적용방법

yarn add @craco/craco

yarn add craco-alias -D

1.Package.json 파일을 수정합니다.

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

2.tsconfig.paths.json 파일을 루트에 생성하고 paths 설정을 합니다.

// src/tsconfig.paths.json 이
// paths 는 프로젝트의 폴더명에 따라서 바꿔 줌
// 위의 comments 를 지워야지 나중에 compile 시 parse json error 가 발생하지 않음
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "pages/*": ["src/pages/*"],
      "components/*": ["src/components/*"],
      "styles/*": ["src/styles/*"]
    }
  }
}

3.root 경로에 craco.config.js 파일을 생성합니다.

// src/craco.config.js
const CracoAlias = require("craco-alias");

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: "tsconfig",
        tsConfigPath: "tsconfig.paths.json",
      },
    },
  ],
};

🔷 Options 설정

• source: default 값은 options로, jsconfig, tsconfig 선택 가능

• baseUrl: default 값은 ./로 root 폴더를 가리킴

• aliases: alias 이름과 경로, default 값은 {}

• tsConfigPath: 만약 source가 tsconfig이라면 해당 파일 이름 작성

• debug: default 값은 false이며, 만약 버그가 생긴다면 해당 값을 true로 바꾸어 console로 내용 확인 가능

4.tsconfig.json 파일에 extends 를 추가 합니다.

// src/tsconfig.json
{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
	...
  }
  "include": [
    "src",
    "tsconfig.paths.json"
  ]
}

5.적용하기

// 상대 경로와 다르게 src 를 절대경로로 설정하여 보다 직관적으로 import 할 수 있게 됨
import Dropdown from "components/Dropdown";
import Banner from "components/Banner";

각 폴더별 index.ts 모듈로 관리하기

• project 안에 components, pages 등 해당 폴더 안의 index.ts 를 만들어 줍니다.

//  in index.ts
export {default as Dropdown } from './Dropdown'
export {default as Header } from './Header'
...

• import 하려는 파일에서는 index 만 가져 오면 됨

import {Dropdown, Header} from ‘component/index.ts’

🔶 🔷 📌 🔑

Reference

• 내일의 나는 오늘의 내가 만든다 - https://velog.io/@shin6403/React-Typescript-%EC%A0%88%EB%8C%80%EA%B2%BD%EB%A1%9C-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0feat.React-CRA {:target=”_blank”}

• CRACO github - https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#installation