순수 리액트 + 타입스크립트를 쓰면서 작업 하는 중이었다.
Shadcn UI 를 적용하다가 별칭 (@ 패스)를 사용 하게 되었는데 에러를 만나게 되었다.

Shadcn UI 사용은 나중에 다시 다뤄보도록 하겠다.
Shadcn UI 사용하기 위해서 수동 설정을 해줬는데 이것도 고군분투했었다.

별칭 패스

별칭 패스 는
import할때 ‘../’ 이런식의 절대 경로를 @/ 이렇게 깔끔하게 변동할수 있는 것이었다.

별칭 패스를 이용하기 위해서 tsconfig.json 에 패스를 지정하게 되었다

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

}

이렇게 지정하면 @/ 이렇게 별칭으로 쓸수 있다는 것이었다.

에러 직면

Shadcn UI를 설정하고 테스트를 위해서 간단하게 버튼 모양을 적용하기 위해서 설치를 했는데

ERROR in ./src/components/ui/button.tsx 7:0-37 Module not found: Error: Can't resolve '@/src/lib/utils' in
에러를 만나게 되었다.
button.tsx 를 설치하고 파일 안에서 '@/src/lib/utils’ 의 모듈 를 찾을 수 없다는 에러였다.

해결 방안

이런 문제는 참조 문제여서 일단 첫번째로 파일의 스펠링이 정확한지 다시한번 확인하였다.

문제가 없고 IDE 인 vsCode에서도 컨트롤 클릭으로 해당 경로를 누르면 해당 경로로 이동하는데 @/src/lib/utils 를 컨트롤 클릭해서 접근하여도
정확하게 위치를 찾았다.

그런데 리액트를 구동했을때는 에러가 나오니 환장할 노릇이었다.

chat GPT에게 어떻게 해결해야 할지 물어보니 "@/src/": ["./src/"] 를 넣으라고 하고 이상한 방법들만 계속 알려줬다.

직접 검색해서 문제를 찾으려고 해도 내가 한 방법들만 설명했다

스펠링을 잘 체크해볼것. 모듈이 설치되어 있는지 확인할것 . 파일이 잘 있는지 확인할것

이런 방법들을 다 해도 문제가 해결되지 않아서 절대 경로로 직접 접근 하는 방법을 적용해보았다.

기존 : import { cn } from "@/src/lib/utils";
수정 : import { cn } from "../../../src/lib/utils";

이렇게 하니 에러가 해결 될수 있었다.

뭐가 잘못된 것인지 확인해보니

순수 CRA 리액트는 @ 패스를 사용하기위해서는 다른 라이브러리를 사용해야 한다 라는 것을 알게 되었다

“여기서 중요한 점은 CRA(react-scripts 기반) 은 vite.config.ts 같은 게 없어서,
@ alias를 기본으로 인식하지 못해요.” 지피티 답변

Webpack config를 건들여서 @ 패스를 적용해야 하는데 순수 리액트는 이를 건드릴수 없어서
추가 작업으로 라이브러리를 사용해서 작업하는 것이 깔끔하다는 것이었다.

Craco라이브러리 활용

Craco 라이브러리를 추천해주었다.

적용 방법
1. 설치
npm install @craco/craco --save-dev
2. Package.json 수정
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test"
}

3. 루트에 craco.config.js 생성
   const path = require("path")

module.exports = {
webpack: {
alias: {
"@": path.resolve(__dirname, "src"), // ✅ 이제 @ 쓸 수 있음
},
},
}

이렇게 수정하는 방법이 있었는데 라이브러리를 또 추가하면 무거워질것 같기도 하였고 처음 듣는 라이브러리라서
설치하기가 꺼려졌다

Vite 적용

두번째 방법으로는 Vite를 사용하면 @패스를 사용할수 있는 것이었다.

첫번째 방법과 두번째 방법을 생각해봤는데
Vite를 더 잘 알기도 하고 추후 배포 시간을 줄이기 위해서 Vite를 적용할것 미리 적용해보자 라는 생각에

Vite로 해결해 보기로 하였다.

Vite로 변경해서 다시 코드를수정하던가 마이그레이션을 해야하는데 이것도 추후에 작성해보도록 하겠다

오늘 일단 결론

순수 CRA 는 @패스를 사용하기 위해서는 추가 작업이 필요하다.

방법으로는 여러가지가 있는데 일단 craco 라이브러리를 설치하는 것, 두번째는 Vite를 사용해라 이다.