[다담다] import 경로 절대경로로 변경하기

한낱·2023년 9월 8일

세상의 모든 URL, 다담다

목록 보기

5/17

상대경로로 설정했을 때의 문제점

코드를 작성하고 다른 파일에서 해당 코드를 불러오면 자동으로 상대경로가 입력된다. 이는 vscode에서 실행되는 자동 import 덕분인데, 그동안 이 자동 import된 상대경로를 통해 편하게 작업하였으나 오늘 문제가 발생했다.

현재 프로젝트는 점점 규모가 커져서 현재 파일이 좀 많다. 오늘 그 파일을 좀 정리해보려 폴더에 몇몇 파일을 옮겼는데, 옮긴 후 경로를 제대로 찾지 못하는 오류가 발생했디.

기본적으로 파일의 위치가 변경되면 관련된 import가 변경되지만 그 중 몇몇 누락된 코드들이 오류를 일으킨 것이다. 변경된 파일 규모가 작고 이를 참조하고 있는 코드가 적다면 일일이 찾아다니며 업데이트 하면 되고, 현재까지 그래왔으나 오늘 한 번에 여러 파일을 옮기다보니 해당 import를 모두 직접 수정하기에는 문제가 있다고 판단하였다.

👌 해결책 : 절대경로

다른 방법을 찾아보던 중 import 경로를 절대 경로로 변경할 수 있음을 깨달았다.

🔧 설정

import 경로를 절대경로로 변경하기 위해선 몇몇 설정을 변경해야 한다.

tsconfig / jsconfig

현재 프로젝트는 typescript를 사용하고 있어 tsconfig 설정에 추가해주었지만, 만약 javascript로만 작성하고 있다면 jsconfig 설정을 변경해주면 된다.

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

해당 코드는 '.'을 baseUrl로 잡고, src 폴더 하위 폴더를 '@'를 통해 표현하도록 한다.

이를 적용한 이후 현재 코드 모습은 다음과 같다.

해당 이미지는 src 폴더 하위 / 하위 폴더에 위치한 파일로, 기존 같았으면 component 내에 있는 파일 하위에 있는 파일에 접근하기 위해 ..을 사용하여 복잡한 상대경로를 사용하였을테지만, 절대경로로 바꾼 덕분에 src를 기준으로 파일의 위치를 표현할 수 있어졌고, 파일의 위치가 바뀌더라도 변화가 덜 적용된 import로 인해 겪을 고통이 없어졌다.

vite config

vite를 통해 프로젝트를 시작했다면 추가로 vite config 파일에도 설정을 추가해야 한다.

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      { find: '@', replacement: path.resolve(__dirname, 'src') },
      },
    ]
  }
})

vite tsconfig paths

vite 설정을 직접하는 대신, 라이브러리에 맡겨도 된다. 현재 프로젝트에는 이 vite tsconfig paths 라이브러리를 적용해서 사용하고 있다.

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

export default defineConfig({
  base: "./",
  plugins: [react(), tsconfigPaths()],
})

vscode 설정

여기까지 설정을 모두 따라했는데도, 자꾸 내 프로젝트에서는 import가 상대경로로 지정되어 곤혹을 겪었따. 알고보니, 절대 경로 설정은 완료가 되었으나 VSCode의 자동 import 설정이 상대 경로로 유지되어 있어서 기존 코드를 지우고 다시 작성하려 하면 상대 경로로 업데이트되는 문제가 있었다.