[에러] React 빌드 후 배포 시 흰 화면 오류

프로젝트를 하면서 프로젝트를 빌드한 후 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 프로퍼티에 이를 적어주어 시작 절대 경로를 알려주는 것이다.

혹시 내용이 틀리거나 수정해야 하는 부분이 있다면 알려주세요!