OFS 프로젝트 중 캘린더 페이지를 구현하고 있었는데, moment 패키지를 삭제하고 dayjs 패키지를 새롭게 설치하고 적용하는 과정에서 아래와 같은 에러가 발생하였다.
🔽 504 Outdated Optimize Dep
GET http://localhost:5173/node_modules/.vite/deps/dayjs.js?v=5465f0dc net::ERR_ABORTED 504 (Outdated Optimize Dep)🤔 오류 원인
Vite 서버가 오래된 번들(새로 업데이트되지 않은)을 로드했기 때문에 발생한 문제이다.
💼 번들링?
번들링이란 여러 개의 JavaScript, CSS, 이미지 파일 등을 하나의 파일 또는 여러 최적화된 파일로 묶는 과정을 말한다. 웹 브라우저는 HTTP 요청이 많아지면 느려지기 때문에, 여러 파일들을 하나로 합치고 최적화하여 속도와 성능이 개선시킬 수 있다.
🪡 Vite가 번들링하는 방식?
Vite는 개발 환경에서 빠르게 로딩하도록 설계되었다. 기존의 Webpack과 같은 번들러는 앱을 실행할 때 전체 코드를 한번에 번들링 하는 방식으로 속도가 다소 느리다는 단점이 있었다.
반면 Vite는 ES Module 방식을 이용하여 요청이 들어올 때만 필요한 파일을 번들링해서 제공하는 방식으로 작동한다. import된 모듈 (ex. dayjs)를 미리 변환하여 .vite 캐시에 저장하고 브라우저가 요청하면 .vite/dayjs.js 같은 경로로 제공하는 것이다.
.vite 폴더는 node_modules/.vite 경로 상에 있고 dependencies를 미리 최적화해서 저장해두는 캐시 디렉토리이다. 이 폴더 안에는 dayjs, react, react-dom 같은 패키지를 브라우저에 빨리 서빙하기 위한 번들 결과가 들어있다.
문제 상황에서는 새롭게 darm -rf node_modules/.viteyjs를 설치 했음에도 불구하고 .vite 캐시는 이전 상태를 기억하고 있어 오래된 번들을 로드하려고 했기 때문에 오류가 발생한 것이다.
🥳 오류 해결
.vite 캐시를 삭제하고 서버를 재시작하면 오래된 번들 상태는 삭제되고 현재 상태에 맞는 새로운 번들 결과가 .vite에 저장될 것이다.
.vite 캐시 삭제
rm -rf node_modules/.vite서버 재시작
npm run devvite의 번들링 과정에 대해 간단히 알아볼 수 있었던 좋은 기회였다. 개발을 하다보면 늘 오류와 싸워야 하지만 그 과정에서 얻어가는 것이 꼭 있으니, 오류를 두려워 하지 않고 배움의 기회로 삼아 열심히 해보자!! 💪
