Vite2 [트러블 슈팅]Vite + React 프로젝트를 GitHub Pages에 배포했는데 흰 화면만 나오는 문제 [문제사항]Vite + React로 만든 프로젝트를 GitHub Pages에 올렸는데, 로컬에서는 npm run dev로 잘 실행되는데 정작 깃 페이지 주소 URL에 들어가면 배경이 흰 화면만 나오는 문제가 발생했다.빌드도 에러 없이 끝났고, GitHub Pages 설정도 main 브랜치로 되어 있었는데 페이지에 들어가면 제목만 나오고 아무 내용도 안 보였다. 원인 분석 처음엔 “빌드가 잘못된 건가?” 하고 생각했지만,Vite 프로젝트는 로컬(localhost:3000)에서는 기본 경로(/) 기준으로 파일을 불러온다.하지만 GitHub Pages는 리포지터리 이름이 포함된 하위 경로(/@@@_Dev/) 에서 페이지를 호스팅한다. 즉,로컬 실행 시 http://localhost:3000/ GitHub P.. 2025. 10. 18. [IT공부] 나만 알고 싶은 웹 개발 빌드 툴 'Vite(비트)' Vite(프랑스어로 '빠르다'는 뜻의 '빛'을 뜻하는 '비트'로 발음)는 현대적인 웹 개발 환경을 위한 차세대 빌드 툴입니다. 등장배경기존의 "웹팩(Webpack, "번들링"(하나의 큰 파일로 합치는 의미)에 최적화된 빌드 툴)"과 같은 빌드 툴이 가지고 있던 "느린 개발 서버 시작" 및 "핫 리로드(Hot Reload) 속도" 문제를 해결하고자 등장했습니다. 핵심은 네이티브 ES 모듈(ESM)을 활용기존 방식(Webpack 등) : 개발 서버를 실행하기 전에 모든 소스 코드를 번들링(하나의 파일로 묶는 작업)합니다. 프로젝트가 커질수록 이 과정이 느려지고, 파일 하나만 수정해도 전체를 다시 번들링해야 해서 핫 리로드 속도가 느려지는 단점이 있었습니다.Vite 방식 : 소스 코드를 미리 "번들링"하지 .. 2025. 9. 10. 이전 1 다음 728x90 반응형