프로젝트를 하면서 프로젝트를 빌드한 후 webpack의 devServer를 이용해서 현재 상황을 확인했었다. 근데 어느 순간 부터인가
npm run dev를 한 후 콘솔을 확인했을 때 다음과 같은 에러를 내뱉었다.
GET http://localhost:3000/searchbg.jpg 431 (Request Header Fields Too Large)
전에 포스트에서 볼 수 있듯이 실제 이 에러의 문제는 내용과는 상관이 없었다.
또 다른 프로젝트 중에 github의 pages에 배포를 했을 때는 정말 아무것도 없는 흰 화면만 보여주었다.
내 프로젝트에는 다음과 같은 두 가지 문제가 있었다.
1. build 문제
2. react-router 문제
build 문제
stackoverflow에서 말하는 문제 해결법을 다 실행해 봤는데 소용이 없었다. 그래서 내 프로젝트의 package.json이나 webpack, babel 설정 파일들을 꼼꼼히 확인해보고자 하였고 그 과정에서 정말 나의 실수를 발견할 수 있었다.
정말 어이없는 실수이긴 한데 webpack.config.js 파일 코드를 살펴보니 다음과 같이 작성해 놓았더라.
module.exports = {
mode: 'none',
entry: './src/index.tsx',
output: {
filename: 'bundle.tsx',
path: path.resolve(__dirname, 'dist/'),
publicPath: '/',
},우리는 배포를 하기 전 babel등을 통해 브라우저가 인식하지 못하는 typescript 언어를 인식할 수 있는 javascript 언어로 바꿔줘야 한다. 근데 output 파일 확장자를 .tsx로 설정한 것이다.
이 부분을 고치니 build된 bundle.js 파일에서는 더 이상 빨간 오류를 뱉어내지 않았다.
module.exports = {
mode: 'none',
entry: './src/index.tsx',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist/'),
publicPath: '/',
},react-router 문제
노마드코더 슬랙에 같은 오류를 겪은 분이 올려놓으신 해답을 보고 문제를 해결할 수 있었다. 다음과 같이 HashRouter 컴포넌트의 프로퍼티를 다음과 같이 설정해주면 된다.
const Router = () => {
return (
<HashRouter basename={process.env.PUBLIC_URL}>
...
</HashRouter>
)
}react-router의 HashRouter의 basename 프로퍼티는 모든 Route의 root URL을 설정해줄 때 사용한다.
왜 이렇게 설정을 해줘야 하나 궁금해서 리액트 공식문서에 찾아보니
When you run npm run build , Create React App will substitute %PUBLIC_URL% with a correct absolute path so your project works even if you use client-side routing or host it at a non-root URL. In JavaScript code, you can use process.env.PUBLIC_URL for similar purposes: render()
배포 시 시작하는 URL 경로를 정확히 잡아줘야 하는데 react-router의 HashRouter의 basename 프로퍼티에 이를 적어주어 시작 절대 경로를 알려주는 것이다.
혹시 내용이 틀리거나 수정해야 하는 부분이 있다면 알려주세요!
