7. 폰트, 절대경로(Craco) 설정

1. 폰트 설정

웹페이지의 전체적인 아웃라인, 컨텐츠, 색상톤, 아이콘 등을 결정 후 사용할
폰트를 일단 넣어두었다.

2. 절대경로 설정

그러고 난 후에 절대경로를 세팅해준다.
프로젝트를 진행할수록 디렉토리 구조가 깊어지고 복잡해지기 때문에
미리 import할 경로를 깔끔하게 만드는 작업이 필요하다.

CRA 환경에서 절대경로를 사용하려면 webpack 또는 다른 config 파일을 수정해야 하는데, 그러려면 eject를 해야 한다.
eject를 하면 이전 개발환경으로 다시 되돌릴 수 없기 때문에 유지보수성 측면에서 eject 없이 설정환경을 변경하는 것이 좋고, 이런 게 가능하게 만들어주는 것들 중 하나가 Craco이다.

• Craco(Create React App Configuration Override)라는 모듈을 사용해서 환경설정을 쉽게 해준다.

2-1. 설치

npm i --save craco-alias @craco/craco

2-2. package.json 변경
scripts를 craco에 대한 코드로 변경

//package.json : 변경 전

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

//package.json : 변경 후

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

2-3. config 추가
프로젝트 root 경로에 craco.config.js, tsconfig.paths.json 파일 생성 후 각각 작성

//craco.config.js : craco 환경설정

const CracoAlias = require("craco-alias");

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

//tsconfig.paths.json : 경로 환경설정!! 디렉토리에 맞게 수정한다
{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": { // 이 부분을 수정
            "pages/*": ["src/pages/*"],
            "components/*": ["src/components/*"],
            "styles/*": ["src/styles/*"]
        }
    }
}

2-4. tsconfig.json 수정
extends...부분을 추가해준다 -> 타입스크립트에서 경로에 대한 부분을 적용

//tsconfig.json
{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    ·······(생략)
}

2-5. 사용

//tsx
import React from 'react';
...
import Something from 'pages/...';

function App(){
...
<Something />
...
}

절대경로를 사용해보고, 웹페이지에 해당 항목이 잘 반영되면 환경설정이 잘 된 것이다.
혹시 제대로 되지 않는다면, 해당 로컬 페이지는 react-scripts start으로 띄우고, 환경설정이 제대로 적용되지 않았을 것이이다.
이미 띄워진 로컬 페이지를 닫고, 다시 npm run start를 하면 제대로 적용됨을 알 수 있다.

출처 : Jacob Ko