Module not found: Error: Can't resolve '@/components/ui ......

에러 해결방법

죄송합니다. Create React App (CRA)으로 프로젝트를 만드셨다는 점을 고려하지 못했습니다. CRA는 내부적으로 웹팩 설정을 관리하므로 webpack.config.js 파일이 없는 것이 정상입니다. CRA로 만든 TypeScript 프로젝트에 맞는 tsconfig.json 파일을 제안해 드리겠습니다.

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "src"
  },
  "include": [
    "src"
  ]
}

이 tsconfig.json 파일은 Create React App의 TypeScript 설정과 호환되며, 다음과 같은 특징이 있습니다:

1. baseUrl을 "src"로 설정하여 src 폴더를 기준으로 한 상대 경로 import를 허용합니다.
2. include 섹션에서 "src" 폴더의 모든 파일을 포함시킵니다.
3. CRA의 기본 설정을 대부분 유지하여 호환성을 보장합니다.

이 설정을 사용하면 @ 별칭 없이도 src 폴더 내의 파일들을 쉽게 import할 수 있습니다. 예를 들어:

import { Alert } from 'components/ui/alert';

만약 @ 별칭을 사용하고 싶다면, CRA에서는 추가적인 설정이 필요합니다. 이를 위해서는 다음 단계를 따르세요:

1. craco (Create React App Configuration Override) 패키지를 설치합니다:

   npm install @craco/craco

2. 프로젝트 루트에 craco.config.js 파일을 생성하고 다음 내용을 추가합니다:

   const path = require('path');
   
   module.exports = {
     webpack: {
       alias: {
         '@': path.resolve(__dirname, 'src'),
       },
     },
   };

3. package.json의 scripts 섹션을 수정합니다:

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

4. tsconfig.json에 paths 설정을 추가합니다:

   "compilerOptions": {
     // ... 다른 옵션들 ...
     "baseUrl": "src",
     "paths": {
       "@/*": ["./*"]
     }
   }

이렇게 설정하면 @ 별칭을 사용할 수 있게 되며, 다음과 같이 import할 수 있습니다:

import { Alert } from '@/components/ui/alert';

이 설정으로 대부분의 경로 관련 문제가 해결될 것입니다. 여전히 문제가 지속된다면, src/components/ui/alert.ts (또는 alert.tsx) 파일이 실제로 존재하는지 확인해 주세요.