[ React + TypeScript + Vite ] public 경로 단순하게 설정하는 방법

react + typescript + vite

🤔 내가 하고 싶은 것

기존에 매우 길었던 public path를 좀 더 단순화하여 나타내고 싶었다.

 

파일을 빌드할 때에도 콘솔에 다음과 같은 메세지가 나타났다.

files in the public directory are served at the root path.
Instead of /public/json/KoreaRegion/SigunguJSON.ts, use /json/KoreaRegion/SigunguJSON.ts.

 

기존의 public path

import { IMetroCityTypes } from "../../../public/json/KoreaRegion/MetroCitiesJSON";

 

변경하고 싶은 public path

import { IMetroCityTypes } from "/json/KoreaRegion/MetroCitiesJSON";

 

💩 시도했으나 실패한 것

1. 환경 변수를 사용하여 public path 설정하기
   • import 구문에 환경 변수를 설정하는 방법이 있다.
   • import { IMetroCityTypes } from `${process.env.PUBLIC_URL}/json/KoreaRegion/MetroCitiesJSON`;
   • 하지만 TypeScript 에러가 발생하게 된다. import 구문에는 general string 만이 올 수 있다.
2. public-url-loader 라이브러리 설치하기
   • 두 번째 방법으로 라이브러리를 설치하는 방법이 있다.
   • 이 라이브러리는 Webpack 에서 제공하는 라이브러리이므로, Vite 환경에서는 사용할 수 없다.

⚡ Vite 설정

Vite 는 vite.config.ts 환경에서 설정을 해야 한다.

import { defineConfig } from "vite";
import path from "path";

export default defineConfig({  
  base: "/public/path/",
  resolve: {
    alias: {
      "/json/": path.resolve("SCRAPMARKET_FRONT", "public/json/"),
    },
  },
});

base와 resolve 를 추가해주었다.

 

💙 TypeScript 설정

vite만 설정하면 typescript 가 인식할 수 없다. 

typescript도 인식할 수 있도록 tsconfig.json 에서 설정한다.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "/json/*": ["./public/json/*"]
    }
  },
}

위 코드를 추가해주었다.

 

💡 결론

위의 절차를 밟으면 내가 원하던 경로로 public 폴더에 접근할 수 있다.

하지만 조사를 하다보니 이러한 asset 들은 public 폴더 말고 src 폴더 안에서 관리하는 게 더 편리하다는 의견을 종종 볼 수 있었다. 

 

그래서 public과 src 에서 정적 파일을 관리할 때의 장단점을 더 조사할 예정이다.