프로필 페이지 만들기 (3) - 절대경로 alias 설정

 

이번 포스트에서는 @절대경로 설정에 대해 작성해보고자 한다.

절대 경로에 대한 상세한 설명은 다른 블로그를 참조하길 바란다.

여기서는 실제 코드 적용만 설명한다.

 

 

위 사진과 같이 경로를 '../../'로 찾지 않고 @로 바로 최상위 디렉토리로 이동하는 것이다.

 

실제 적용을 위해서는 3개의 파일을 수정해야 한다.

// vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';
import { resolve } from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: { find: '@', replacement: resolve(__dirname, 'src') },
  },
  plugins: [react(), tsconfigPaths()],
});

 

// tsconfig.json

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "strict": true
  }
}

 

// tsconfig.node.json

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["vite.config.ts"]
}

 

위 설정을 마치면 적용할 수 있다.