CRA 절대경로로 변경하는 법

입사 하고 프로젝트를 딱 받았을때 경악했던게 비공식적으로 지원 종료했다는 소문이 난 CRA로 만들었다는 점 (2025년 2월에 공식저으로 지원 종료를 알림). 그리고 상대경로인 점과 폴더명에 한글을 썼다는 점, 폴더가 분리되지 않고 모~든 파일이 features에 있는다는 것이다.
오래된 플젝이면 당연히 CRA일수도 있는거 아니냐? 할 수도 있는데 전혀 오래되지 않은, 무려 작년 여름(2024년 8월)에 시작한 프로젝트라는 것이다. CRA가 비공식적으로 지원 종료한거 아니냐라는 말이 나온건 2024년때보다 더 전부터 들었던것 같다. 근데도 굳이 CRA로 시작 했다는게 너무 충격적이고, 기가막힌건 나름 열심히 검색해봤더니 CRA를 추천해줘서 했다고하더라... 대체 검색을 어떻게 한건지 매우 의문스럽다.

아무튼 이 놈의 상대경로로 지정 되어 있어서 폴더 구조 갈아앞으면서 귀찮은 일들이 많았었다. 아무튼 상대경로로 되어있는 CRA에도 절대경로 설정이 가능하다

 

절대경로 설정

---

맨 처음에는 기존 tsconfig.json만 수정하면 될거라고 안일하게 생각했다

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"]
    }
  },
}

vscode에서는 경로 인식이 잘 되어서 에러 메세지가 뜨진 않지만 CRA 내부상에서 결국 인식을 못하더라

CRA는 내부적으로 webpack을 사용하고 있고 webpack config 파일을 꺼내려면 npm run eject을 실행해야한다. eject는 CRA 내부 설정 파일이나 종속성같은 것들은 숨김처리 했기에 이걸 꺼낼 수 있는 명령어를 따로 만들어둔거다

절대경로 하나 설정하자고 모든 설정 파일을 꺼내기란… 민감한 부분이기도 하고 현상황에 과하다고 생각해서 craco라는 라이브러리를 사용하기로 했다

✅ craco란? CRA의 번거로운 설정을 줄이기 위해 나타난 오버라이딩 패키지

$ yarn add @craco/craco

// root 경로에 craco.confing.js
const path = require('path');

module.exports = {
    webpack: {
        alias: {
            '~': path.resolve(__dirname, 'src/'),
        }
    }
}

craco 설정 파일 생성 해준다

// package.json
{
  "scripts": {
    "dev": "set HTTPS=true&& craco start",
    "build": "craco react-scripts build",
    "test": "craco react-scripts test",
    "eject": "react-scripts eject"
  },
}

package.json에 react-scripts를 craco로 변경해주면 끝난다