React.js vite 설치 및 vite로 ./../../ 없애고 파일 경로 단축해서 사용 및 import문 정리하기

React를 개발하다 보면 './../src', './../../css/page/common.css' 이렇게 지저분하게 파일 경로가 작성이 됩니다.

이러한 현상을 조금이나마 깔끔하게 정리하고자 기록을 합니다.

 

vite는 복잡한 Webpack을 대체 하는 차세대 프론트엔드 빌드 도구입니다.

 

서론이 너무 긴 것을 싫어하니,

바로 본론으로 들어가겠습니다.

 

vite로 react프로젝트 설치하는 법입니다.

vscode 터미널에 원하는 작업 경로에서 아래와 같이 입력을 합니다.

npm create vite@latest 프로젝트 이름 마음대로 설정

// "프로젝트 이름 마음대로 설정"에는 원하시는 프로젝트 이름을 넣으시면 됩니다.

 

그러면 터미널에 아래 이미지와 같은 설정 입력이 생깁니다.

다양한 프론트엔드 프레임워크를 지원합니다.

원하는 프레임워크는 키보드의 방향키로 선택 후 엔터를 치면 됩니다.

React의 경우 타입스크립트, 자바스크립트 버전을 지원합니다.

Vue도 그러한 것으로 알고 있습니다.

저같은 경우는 Javascript로 설정했습니다.

 

완료된 상태입니다.

다음은 만들어진 프로젝트 폴더로 이동을 합니다.

 

vite의 경우 node_modules가 따로 설치가 되어있지 않습니다.

그래서

npm i
npm install

// 둘 중 하나만 선택

npm i로 node_modules를 설치해줍니다.

 

드디어 우리가 건드릴 파일이 나왔습니다.

이 녀석입니다.

이 녀석을 열어주면 초기에는

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
})

이렇게 되어있습니다.

 

이 파일에서 이제 경로를 지정 해줄겁니다.

 

바로 예시를 넣겠습니다.

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'),
      '@css': path.resolve(__dirname, './src/css'),
      '@cssBase': path.resolve(__dirname, './src/css/base'),
      '@cssCommon': path.resolve(__dirname, './src/css/common'),
      '@cssComponent': path.resolve(__dirname, './src/css/component'),
      '@cssLayout': path.resolve(__dirname, './src/css/layout'),
      '@cssPage': path.resolve(__dirname, './src/css/page'),
      '@cssMixin': path.resolve(__dirname, './src/css/mixin'),
      '@cssEvent': path.resolve(__dirname, './src/css/event'),
      '@cssTeacher': path.resolve(__dirname, './src/css/teacher'),
      '@cssServices': path.resolve(__dirname, './src/css/services'),
      '@cssAdmin': path.resolve(__dirname, './src/css/admin'),
      '@cssMypage': path.resolve(__dirname, './src/css/mypage'),
      
      // jsx
      '@components': path.resolve(__dirname, './src/jsx/components'),
      '@layouts': path.resolve(__dirname, './src/jsx/layouts'),
      '@pages': path.resolve(__dirname, './src/jsx/pages'),
      '@hooks': path.resolve(__dirname, './src/hooks'),
      '@store': path.resolve(__dirname, './src/store'),
      '@utils': path.resolve(__dirname, './src/utils'),

      // api
      '@api': path.resolve(__dirname, './src/api'),
    },
  },
  server: {
    port: 3000, // ✅ 여기서 포트번호 지정
  },
})

위와 같이 구성을 할 수 있습니다.

vite는 처음에는 임의로 포트번호를 넣습니다.

이렇게 하면 원하는 포트 번호를 넣어서 설정을 할 수도 있습니다.

 

참고로 scss를 사용하였기에 base파일을 넣었습니다.

 

이제 원하는 jsx파일에서 원하는 파일들을 import 하면 됩니다.

아래는 import의 예시입니다.

import React, { useState } from 'react'; // 리액트와 useState 불러오기
import '@cssPage/state/useeffect02.scss'; // 스타일 파일 불러오기
import api from '@api/api.js'; // axios 인스턴스 불러오기

이제 이렇게하면 깔끔하게 import문을 정리 할 수 있습니다.