Studying/React

리액트 절대경로 @ 커스텀 공부하기

creamymood 2025. 6. 20. 12:42

프로젝트를 하고 팀원들과 같이 작업을 하며

점점 코드 양도 많아지고 경로가 깊어지는 현상으로, 경로 앞에@를 설정하는 걸 우리 팀에서 도입하기로 했다

 

간단히 공부 해보기 위한 기록

절대경로 @ 설정하는 방법 (Vite 기준)

❶ vite.config.ts 또는 vite.config.js 열기

vite.config.ts 파일을 열기

// vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path' // ⭐️ 이거 꼭 추가해야 함!

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // ⭐️ 여기서 @를 src로 매핑!
    },
  },
})

만약 .js 파일이면 path.resolve(...) 그대로 쓰면 된다

더보기

그냥 무작정 따라 적기보다 뭐가 뭔지 알고 넘어가기.

 

우선 config 파일이란 ?

vite.config.ts 파일은 Vite 프로젝트의 전체 설정을 담당하는 핵심 파일

이 파일을 잘 이해하면, 어떤 설정이든 자유롭게 커스터마이징할 수 있어서 정말 중요하다. 

 vite.config.ts 파일의 역할

1. 플러그인 설정

Vite는 경량이고 빠른 대신, 필요한 기능은 플러그인으로 추가함. 예를 들어,

import react from '@vitejs/plugin-react'

plugins: [react()]

→ Vite에서 React 문법(JSX) 을 사용하려면 꼭 이 플러그인을 추가해야 해.

 

2. 경로(alias) 설정

예: @/components/Button 이렇게 짧게 쓰고 싶을 때:

import path from 'path'

resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src')
  }
}

→ @를 src 폴더로 인식하게 설정.

 

3. 서버 설정 (개발 서버)

개발 중 로컬 서버 포트나 프록시 등 설정 가능:

server: {
  port: 3000,
  open: true, // 자동으로 브라우저 열기
}

 

 

4. 빌드 설정

최종 배포 시의 파일 구조나 옵션들 지정:

build: {
  outDir: 'dist', // 빌드 결과물 폴더
}

 

 

5. 환경 변수 연결

import.meta.env로 .env 파일을 사용할 수 있게 함.

 

필요할 때마다 설정 항목을 조금씩 추가하면 된다.

그렇다면, 절대 경로 @ 설정하는 방법 풀이

 @를 써서 폴더 안 깊이 들어가도 쉽게 import 하고 싶다는 것

예시 : 일반 방식

import MyComponent from '../../../components/MyComponent'

이게 너무 복잡하고 짜증나니까…

예시 : 절대경로 방식

import MyComponent from '@/components/MyComponent'

이렇게 @로 src부터 바로 접근하고 싶은 거지!

 

이걸 가능하게 해주는 게 바로 vite.config.ts 파일

 

import path from 'path'
  •  path는 Node.js에 기본으로 들어있는 "경로 도와주는 도구야".

 

alias: {
  '@': path.resolve(__dirname, 'src'),
}
  • "@"라는 별명(alias) 을 만들어서
  • "src" 폴더를 가리키게 설정한 거야!

👉 그래서 @/components = src/components가 되는 거야!!

전체 흐름을 그림으로 표현하면:

import Something from '@/components/Button'
// 실제로는 Vite가 이렇게 봐:
// import Something from 'src/components/Button'

즉, @는 그냥 src의 애칭이라고 생각하면 돼!
(별명, shortcut, 단축키 같은 느낌!)

 

 

@처럼 별칭(alias) 은 원하는 폴더마다 설정해줘야 한다 !

 예를 들어서…

프로젝트 구조가 이렇게 돼 있다고 해보자:

src/
  components/
  pages/
  hooks/
  utils/
shared/
types/

 

자주 쓰는 폴더들을 별칭으로 지정하려면:

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@components': path.resolve(__dirname, 'src/components'),
      '@pages': path.resolve(__dirname, 'src/pages'),
      '@hooks': path.resolve(__dirname, 'src/hooks'),
      '@utils': path.resolve(__dirname, 'src/utils'),
      '@shared': path.resolve(__dirname, 'shared'),
      '@types': path.resolve(__dirname, 'types'),
    },
  },
})

 

import Button from '@components/Button'
import useFetch from '@hooks/useFetch'
import { doSomething } from '@utils/helpers'

이런 식으로 깔끔하고 명확하게 import 할 수 있음

 

참고: 꼭 다 설정해야 하는 건 아니야

  • @ 하나만 해두고 @/components, @/utils 이렇게 쓰는 사람들도 많아!
  • 하지만 자주 쓰는 폴더가 많고 @/pages/SignUp 이런 게 너무 길다 싶으면
    별도로 @pages, @hooks 따로 설정하면 더 깔끔해지지!

 

 타입스크립트 쓴다면 tsconfig.json도 잊지 말고 설정

"paths": {
  "@/*": ["src/*"],
  "@components/*": ["src/components/*"],
  "@pages/*": ["src/pages/*"],
  "@hooks/*": ["src/hooks/*"],
  "@utils/*": ["src/utils/*"],
  "@shared/*": ["shared/*"],
  "@types/*": ["types/*"]
}

 

✨ 자주 하는 실수 팁

더보기
  • 설정하고 나면 꼭 VSCode 껐다 켜기!
  • tsconfig.json에 paths도 맞게 설정해야 VSCode에서 빨간줄 안 떠

필요하면 그림이나 예제 코드 구조도 만들어줄 수 있어!
더 이해 안 가는 부분 있어? 내가 끝까지 같이 설명해줄게! 😊

❷ tsconfig.json 도 수정해줘 (타입스크립트일 때만!)

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

자바스크립트만 쓴다면 이건 안 해도 돼.

 

❸ VSCode 재시작 

  • 저장하고 VSCode 껐다 켜기
  • 그래야 빨간 줄 안 뜨고 @로 잘 인식돼!

 

❹이제 이렇게 사용 가능 💡

// 예시
import MyComponent from '@/components/MyComponent'

이제 ../../../ 이런 거 안 써도 됌! ❤️