개발자 지망생의 블로그

[React, Vite] 개발 모드에서는 되고 배포하면 에러 날 때 React + Vite + TypeScript 프로젝트를 하다 에러가 발생했다. 로컬에서는 화면이 정상적으로 나왔는데 배포한 사이트에서는 빈 화면만 떴다. 에러 메시지는 다음과 같았다. create-react-app, vite 등에서 제공하는 build 기능은 코드를 경량화 및 난독화해 준다. 따라서 'ao'라는 식별자가 무엇인지 알아볼 수 없다. 개발 모드에서는 잘 실행되었으므로 build 한 결과물에 에러가 있을 것이다. 어느 부분에서 에러가 났는지 확인하기 위해 minify 옵션을 꺼야 한다. vite.config.ts 파일에서 build: { minify: false } 를 추가해주자. build를 실행한 뒤, index.html..

Vite 프로젝트를 GitHub Pages에 배포했을 때 빈 화면이 뜨는 에러 Vite + React + TypeScript로 프로젝트를 진행하던 중 오류가 발생했다. 배포 스크립트를 추가하고 push 했는데 build, deploy 모두 success로 표시되지만 페이지에 빈 화면만 떴다. Actions 탭에 들어가 Artifacts를 다운로드 받아 확인해 봄으로써 문제 원인을 파악할 수 있었다. (Artifacts : 런타임 동안 만들어진 파일들) script 태그의 src 경로와 link 태그의 href 경로가 절대 경로로 표시되어 있다. 해결 방법은 간단하다. vite.config.ts 파일에서 base: ''를 추가해주면 된다. 그러면 이렇게 상대 경로를 참조하는 것을 확인할 수 있다. vite..