요즘 들어 새로운 기술들을 적용하다 보니 잘 작동하던 웹사이트에 오류가 넘쳐난다..^^
테스트 서버의 중요성을 깨닫는 요즘이다ㅠㅜ
또 서버가 터진줄 알았더니 그게 아니었다.
build는 성공적으로 되고 localhost에서도 정상적으로 작동하는데, 배포한 웹에서는 페이지 자체가 뜨지 않는 오류가 발생했다.
이슈
개발자모드로 보니,
webpack번들 중 하나에서 오류가 났다는건데.. 사실 압축된 코드에서 에러 원인을 알아내기가 많이 힘들다ㅠ
하지만 난 알아내지.
이슈 해결
오류난 vendor 파일의 코드를 보니 전체적으로 빨갛게 오류가 나있었는데, 코드 시작 부분이 이상해서 앞부분이 잘린 것 같다고 생각했다.
(codeEditor라는 컴포넌트가 있어서 앞에 co가 잘린 것이라고 추측했음)
deEditor"use strict";(self.webpackChunkpes_fe=self.webpackChunkpes_fe||[]).push([[855],{9197:(e,t,a)=>{a.d(t,{d$e:()=>c});var s=a(2225);function c(e){return(0,s.k5)({tag:"svg",attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z"},child:[]}]})(e)}}}])앞부분이 잘린 것이라면, 청크 나누는 과정에서 잘못 잘랐다는건데..
찾아보니 Teaser플러그인을 사용하여 코드 압축을 할 때, 번들링 과정에서 잘못 쪼개질수도 있다고 한다!
webpack.config.js파일에서 Terser 플러그인을 비활성화하니까 해결됐다!
optimization: {
minimize: false, // 코드 압축 비활성화
}
FrontEnd