1. vite.config를 만나게 되다.
우선 팀 프로젝트에서 API base URL를 정했는데,
우리 팀은 이 URL이 /api/~ 로 시작한다.
그래서 fetch를 받을 때 아무 생각도 없이 그냥 /api/~ 로 받아버렸다.
연결을 시도해보니 문제가 발생했다.
API 요청을 보냈는데, 원하는 JSON 데이터가 아니라 전혀 다른 응답이 돌아온 거다.
처음에는 백엔드 문제라고 생각했다.
서버가 켜져 있는지 확인하고,
라우팅이 잘못된 건 아닌지 확인해보고.
하지만 서버도 정상 실행에
해당 API 라우트가 제대로 정의되어 있었고
Postman으로 직접 요청을 보내서 응답도 확인해봐도
Postman에서는 정상적으로 JSON 응답이 잘 내려오고 있었다.
그럼에도 불구하고 프론트에서 요청을 보내면 정상적인 응답이 오지 않았다.
네트워크 탭을 열어서 응답을 확인해보니,
내가 받고 있던 건 API 응답이 아니라 HTML 파일이었다.
이 부분에서 해결 방법이 뭔지 찾아보다가,
vite.config 파일과 proxy 설정을 건들게 되었다.
2. proxy 설정, 알고 계셨나요?
Vite 개발 서버는 기본적으로 프론트 요청을 처리하기 때문에,
/api처럼 백엔드로 보내고 싶은 요청은 별도로 전달해주는 설정이 필요하다.
그게 바로 proxy였다.
server: {
proxy: {
'/api': 'http://localhost:8080',
}
}설명을 보면, /api로 시작하는 요청을
지정한 백엔드 서버(localhost:8080)로 전달해준다는 의미였다.
정확한 동작 원리를 이해한 상태는 아니었지만,
“이걸 적용하면 해결된다”는 흐름을 보고 그대로 적용해봤다.
결과는 바로 나타났다.
이전까지 HTML이 돌아오던 요청이
정상적으로 JSON 데이터를 반환하기 시작한 것이다.
이때는 단순히 문제가 해결됐으니 넘어가자는 생각 뿐이었다.
코드 리뷰를 통해 이 부분에 대한 질문을 받으면서,
그제서야 내가 적용한 방식에 대해 다시 생각해보게 됐다.
사실 우리가 지금까지 학습해온 방식은 풀 URL을 사용하는 방식이었고,
현재 팀 프로젝트 환경에서도 proxy 설정 없이 충분히 동작하는 구조였다.
결국 나는 팀 기준에 맞춰 다시 풀 URL 방식으로 코드를 수정했다.
이 과정을 통해 느낀 건,
proxy 설정이 잘못된 접근이었다기보다는
상황에 따라 선택할 수 있는 방식 중 하나였다는 점이다.
지금은 풀 URL을 사용하고 있지만,
이번 경험 덕분에 proxy 설정, 그리고 vite.config에 관해 찾아보게 됐다.
3. proxy가 필요한 상황
그럼 proxy 설정은 언제 사용하는 걸까?
이걸 이해하려면 요청이 어떻게 흐르는지를 먼저 생각해봐야 한다.
프론트는 Vite 개발 서버 위에서 동작하고 있고,
내가 보내는 API 요청도 일단 이 서버를 거치게 된다.
이때 /api처럼 상대 경로로 요청을 보내면,
그 요청은 기본적으로 백엔드가 아니라
프론트 개발 서버로 먼저 전달된다.
그리고 Vite는 이 요청을 백엔드로 넘겨주지 않는다.
별도의 설정이 없다면, 해당 요청을 프론트에서 처리하려고 시도하게 된다.
이 상황에서 등장하는 게 proxy 설정이다.
proxy는 특정 경로(/api)로 들어온 요청을
백엔드 서버로 전달해주는 역할을 한다.
즉,
- /api/... 요청 → 프론트 서버에서 받음
- proxy 설정 → 백엔드(localhost:8080)로 전달
이 흐름이 만들어지는 것이다.
그래서 proxy는 다음과 같은 상황에서 유용하다.
- 프론트와 백엔드를 각각 다른 서버에서 개발할 때
- 상대 경로(/api)를 유지하면서 API를 호출하고 싶을 때
- 개발 환경에서 CORS 문제를 우회하고 싶을 때
반대로,
- 풀 URL(http://localhost:8080/...)로 직접 요청을 보내는 경우라면
- proxy 없이도 충분히 동작할 수 있다
결국 proxy는 필수 설정이 아니라,
개발 환경에 따라 선택할 수 있는 방식 중 하나라고 볼 수 있다.
4. vite.config에서 추가로 다루는 설정들
proxy 설정을 적용하면서 처음으로 vite.config 파일을 제대로 찾아보게 됐는데,
생각보다 다양한 설정들을 만질 수 있었다.
그중에서 몇 가지 설정만 간단히 정리해보면 다음과 같다.
먼저, 개발 서버 포트를 지정하는 설정이다.
server: {
port: 5173,
}기본 포트가 정해져 있긴 하지만,
여러 프로젝트를 동시에 실행할 경우 포트를 직접 지정해야 할 상황이 생길 수 있다.
다음은 서버 실행 시 브라우저를 자동으로 열어주는 설정이다.
server: {
open: true,
}개발할 때 매번 주소를 입력하는 번거로움을 줄일 수 있어서,
작지만 편의성을 높여주는 설정이다.
또 하나는 import 경로를 정리할 수 있는 alias 설정이다.
resolve: {
alias: {
'@': '/src',
},
}상대 경로를 계속 이어서 쓰는 대신,
@ 같은 별칭을 사용해서 경로를 더 깔끔하게 관리할 수 있다.
마지막으로, 배포 시 경로를 설정하는 base 옵션이 있다.
base: '/my-app/',로컬에서는 크게 체감되지 않지만,
배포 환경에서는 리소스 경로를 맞추기 위해 필요한 설정이다.
이처럼 vite.config는 단순한 설정 파일이 아니라,
개발 환경 전반을 조정하는 역할을 한다.
