[LAB-15] CRA 절대경로 설정에 대해서 질문있습니다!!

[ovelute53]

질문 작성자

윤새한

문제 상황

CRA에서 절대경로를 설정하는 단계에서 해당 파일을 읽을 수 없다는 에러메세지가 발생되어 질문드립니다. jsconfig.json 파일에 이미지와 같이 코드를 작성하고 app.jsx 파일을 index.jsx 파일에서 절대경로로 불러오는 과정에서 오류가 발생됩니다.

프로젝트 저장소 URL

LAB15 GitHub

main 브랜치입니다!!

환경 정보

• 운영체제 정보 (예: Windows, macOS): Windows
• Node.js 정보 (예: v16.14.0): v18.12.1
• 라이브러리 정보 (예: React v18.0.2): React v18.0.2

[yamoo9]

CRA가 제공하는 기본 절대 경로 설정

기본적으로 CRA는 React 팀이 제공하는 절대 경로 설정 방법만 사용 가능합니다. @ovelute53 님께서 jsconfig.json 파일에 추가한 paths 설정은 적용되지 않습니다.

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

CRA 문서에서 안내하는 대로 jsconfig.json 파일 구성을 바꾸면 잘 작동합니다.

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./src"
  }
}

index.jsx

import App from 'app/App';

CRACO 확장을 사용한 절대 경로 설정

paths 설정을 사용해 CRA의 절대 경로 설정을 사용자 입맛에 맞게 변경하고 싶다면? CRACO와 같은 CRA 구성 덮어쓰기 확장을 설치해야 합니다.

CRA는 Webpack을 사용하므로 CRA의 Webpack 구성을 덮어써야 합니다. CRACO 구성 추가 후, webpack.alias 설정을 아래와 같이 변경하면 커스텀 절대 경로 설정이 가능합니다.

CRACO 구성 추가

@craco/craco 패키지를 프로젝트에 설치합니다.

npm i -D @craco/craco

craco.config.js 파일을 프로젝트 디렉토리에 추가합니다.

  my-app/
  ├── node_modules/
+ ├── craco.config.js
  └── package.json

package.json 파일의 start, build, test 명령을 react-scripts → craco로 변경합니다. (eject 명령 제외)

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

CRACO 절대 경로 구성

craco.config.js 구성 파일에 커스텀 별칭(alias) 설정을 추가합니다.

const { resolve } = require('node:path');

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

그리고 jsconfig.json 파일을 추가해주면 좋습니다. 절대 경로 방법으로 파일 탐색 시 '@/'만 입력했을 때 하위 에셋이 VS Code에 표시됩니다.

jsconfig.json

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

구성을 문제 없이 마쳤다면 이제 커스텀 절대 경로 설정이 가능합니다.

index.jsx

import App from '@/app/App';

CRACO 구성이 포함된 스캐폴딩 ZIP 파일을 첨부합니다. 참고해보세요. 😊

final-cra-confirm-by-yamoo9.zip

[ovelute53]

네 감사합니다!!! 그러면 firebase 적용할 때 .env 파일의 제 고유값이 잘 적용되었는지 확인하려면 상대경로로만 확인할 수 있을까요? firebase도 절대경로 지정해서 console.log 찍어봤을 때에는 적용이 안되고 상대경로에서만 읽히는 것 같아서 추가질문 드립니다!!

[yamoo9]

추가 질문 답변

@ovelute53 님 추가 질문에 답변 드립니다.

firebase 디렉토리 이름이 node_modules/firebase와 충돌해서 발생한 문제일 뿐, 디렉토리 이름을 변경하면 절대 경로 사용이 가능합니다.

아래 스크린샷은 절대 경로를 사용해 웹 브라우저에 Firebase 구성 정보를 출력한 예입니다.

[ovelute53]

네 감사합니다!!! 엄청난 도움이 되었씁니당 ><