1. 프로젝트 셋업

초보를 위한 리액트js 강의를 다시 보면서 진행하고 있다.

typescript 템플릿으로 리액트앱 만들기

CRA 홈페이지

npx create-react-app my-app --template typescript

or

yarn create react-app my-app --template typescript

절대경로 설정하기

조금 난항을 겪은 부분
처음에는 tsconfig.json에서 컴파일러 옵션에"baseUrl": "src"만 넣어주면 바로 끝날 줄 알았는데, 에러가 발생했다. 알고보니 ts에는 다른 방법이 필요한 듯하다.
처음에는 이곳을 참조했는데, 에러가 계속 떠서 여러가지 방법을 시도하다가 많은 사람들이 추천한 CRACO로 해결되었다.
CRACO는 CRA의 config(설정)들을 override(무시)한다는 의미다.

CRACO 설치

출처: howdy-mj님의 블로그

npm install @craco/craco //craco 설치
npm install --save-dev craco-alias // Webpack 및 Jest용 자동 별칭 생성을 위한 craco 플러그인 설치

패키지 설치 후, root 폴더에서 아래의 파일을 생성

//craco.config.js

const CracoAlias = require('craco-alias')

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        baseUrl: './src',
        tsConfigPath: './tsconfig.extend.json',
      },
    },
  ],
}

Options 설정

• source: default 값은 options로, jsconfig, tsconfig 선택 가능
• baseUrl: default 값은 ./로 root 폴더를 가리킴
• aliases: alias 이름과 경로, default 값은 {}
• tsConfigPath: 만약 source가 tsconfig이라면 해당 파일 이름 작성
• debug: default 값은 false이며, 만약 버그가 생긴다면 해당 값을 true로 바꾸어 console로 내용 확인 가능

//tsconfig.extend.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      // 파일
      "@app": ["./App.tsx"],

      // 폴더
      "@routes/*": ["./Routes/*"],
      "@components/*": ["./Components/*"],
      "@assets/*": ["./assets/*"]
    }
  }
}

(나는 자주 쓰게 될 폴더 assets, components, routes 폴더를 넣었다.)

그리고 tsconfig.json, package.json 파일에서 아래의 항목을 추가/수정 한다.

// tsconfig.json

{
  "extends": "./tsconfig.extend.json",
  "compilerOptions": {
    //...
  }
}

// package.json

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

다 마쳤다면, 다른 곳에서 아래와 같이 import가 가능하다.

import Home from '@components/Home';