에러 소개
Uncaught SyntaxError: Unexpected token '<'
npm start 등으로 로컬 환경에서 잘 작동되던 프로젝트였다.
그런데 빌드하여 github에 배포하니 위와 같은 에러가 났다...
단순히 새로고침으로 해결되는 경우도 있지만, 아닌 경우에는 이 글을 끝까지 읽어보자. (강요 아님)
에러 설명
우선, 리액트에서 npm run build를 하면 build라는 파일이 생긴다.
여기에는 이름도 이상하고, 그 안의 코드는 더더욱 이상한 각종 파일이 있다.
이것들의 정체는 우리가 리액트로 쓴 코드를 번들링 작업으로 최적화한 결과물이다.
번들링이란, 우리가 여러 개로 파일을 나누어 작성하였던 코드 등(javascript, json, image, css)을 압축하고, 난독화한 것을 의미한다.
즉 이 에러는 번들링의 결과물 중 index.html의 첫 행인 <doctype html>의 <를 제대로 인식하지 못하여 발생한 문제이다.
혹시 한 줄로만 작성되어있다면 Ctrl + K + F 등 자동정렬 단축키를 활용하여 가독성을 좋게 만들자.
해결 방법:
에러 해결 방법은 여러 가지가 있다.
소개하는 방법을 하나씩 해보면서 에러를 해결해보자!
1. 원래 작성한 코드의 <BrowserRouter>를 살펴보자
<BrowserRouter>에 아래처럼 basename={process.env.PUBLIC_URL}이라고 props를 추가해보자.
<BrowserRouter basename={process.env.PUBLIC_URL}>
이렇게 하면 에러 해결!
위의 코드를 조금 딥하게 파헤처보자.
process를 링크를 타고 가면 process.env는 사용자의 환경을 포함한 객체를 반환한다고 한다.
그리고 PUBLIC_URL은 자동으로 package.json에서 작성한 homepage로 설정된다.
2. build 폴더의 index.html을 살펴보자
번들링 된 build 폴더의 index.html을 확인해보면 <link rel="manifest" 부분이 있을 것이다.
이걸 <link rel="/manifest"로 수정하자!
마무리
최종적으로 이렇게 수정된 파일을 다시 빌드하여 배포하면 된다.
리액트를 로컬 환경에서 돌리는 것과 배포를 하는 것은 다른 차원의 이야기인 것 같다...
번들링 과정 등 약간의 웹 최적화 개념까지 알 수 있어서 뿌듯했다!
