Parcel로 React 프로젝트 빌드 후 실행 시 src 디렉터리를 참조하지 못하는 문제 해결 과정

문제 상황

프로젝트를 배포한 이후로 경로에 '/'가 2개 이상 들어가는 경로를 주소창에 입력할 경우 응답이 200으로 정상임에도 Now Loading 화면에서 화면이 넘어가지 않는 오류가 발생했다.

 

배포한 이후로 로컬 환경에서도 API 요청 주소만 로컬 백엔드 서버로 바꿔서 build한 뒤 실행하고 있는데, 로컬에서도 똑같은 문제가 발생하는 것이 확인되고 있고, package.json에 프로젝트를 빌드하기 위한 build 명령어를 추가한 뒤부터 해당 오류가 발생한 것을 봤을 때 build와 관련된 문제인 것 같아 추가한 build 명령어를 중심으로 문제를 추적해보기로 했다.

 

해결 과정

먼저 어느 상황에서 정상적인 화면 출력이 되지 않고 Now Loading이 나타나는지 확인했다. 주소창에 경로를 직접 입력해 페이지에 접근할 때, 경로에 '/'가 2개 이상 포함되어 있을 때는 Sources에서 src 디렉터리가 들어오지 않는 것이 확인되었다.

 

path: /login

path: /login/abcdefg

 

다음은 package.json의 scripts에 추가한 build 명령어이다.

"build": "parcel build index.html --public-url ./",

 

입력한 경로의 형태에 따라 차이가 나타나는 것을 볼 때, 상대 경로 상으로 현재 위치를 나타내는 '.' 이 영향을 끼치는 것인가 의심되었다. 가장 우측에 있는 '/'의 왼쪽에 쓰여진 모든 주소를 기준으로 src 경로를 찾는 것인가 싶어 이번에는 명령어에서 현재 위치를 나타내는 '.'을 빼보았다.

"build": "parcel build index.html --public-url /",

 

다시 프로젝트를 빌드해서 실행한 결과, '/'가 2개 이상 포함되는 경로에서도 src를 정상적으로 가지고 들어오는 것이 확인되었다. API 요청 주소를 배포된 백엔드 프로젝트 주소로 변경해 프로젝트를 빌드해 배포한 결과, 배포된 프로젝트에서도 정상적으로 경로를 찾는 것을 확인했다.

 

path: /posts/list

 

더 알아봐야 할 것

사실 문제만 해결했지, Parcel 번들러의 build 과정을 제대로 이해하지 못하고 있기 때문에 우연히 찍어 맞춰서 해결했다는 생각이 든다. parcel build 명령어가 수행될 때 어떤 과정을 거치는지 정리해서 이해할 필요가 있겠다.

 

Targets

Parcel JS. Use of --public-url option

[삽질] - parcel build시 root 문제