props-drilling으로 코드 작성 후, context API으로 리팩토링 까지는 완료되었으나, 마지막 남은 선택 구현사항인 Redux Toolkit으로 리팩토링 하기가 마무리 되지 않은 상황이었다.
그러나 한 시까지 제출해야 되는 상황에서 시간이 부족해 일단 context API 브랜치에서 main 브랜치로 병합 후 배포하고, 이후 Redux Toolkit 에서 리팩토링 마무리 후 다시 main 브랜치에 병합하여 자동으로 상태가 업데이트 되게 하려 했었다.(Vercel 은 Git 레포지토리의 메인 브랜치나 지정된 브랜치에 푸시된 변경 사항을 자동으로 감지하여 배포를 업데이트 해줌)
일단 처음 배포하는 데에는 문제가 없었다.
배포 방법
-
vercel에 접속 후 회원가입 -
start deploying클릭 -
Import Git Repository를 할 수 있는 페이지가 나오면,Continue with GitHub을 누르고Import Git Repository에서github에 있는 내repository에서 import해 올 repo를 선택 -
Configure Project에서 자신의 프로젝트에 맞게 수정(vercel이 대부분의 사항을 자동으로 감지해서 설정해줌 -> 수동 설정이 필요한 경우에만 수정하면 됨) -
Deploy를 누르고 잠시 기다려주면, 빌드/배포 완료!
문제 해결 과정
에러 1
첫 배포까지는 순조로웠으나 redux Toolkit 브랜치와 병합 후 문제가 발생했다!
원래 자동으로 수정돼서 배포 내용이 업데이트 되어야 했는데 업데이트는 되지 않고 에러 메세지가 떠있었다.
읽어보니 vite가 react-redux 모듈을 빌드 중에 찾지 못해서 발생한 문제인 것 같아, react-redux를 다시 설치하고 push한 후, 확인해보니 해당 에러는 해결되었다.
이 때 주의해야 할 부분은 설치 후에 react-redux가 프로젝트 파일의 package.json의
devDependencies가 아닌 dependencies에 설치 됐는지도 확인해야 한다.
기본적으로 npm install이나 yarn add 같은 명령어 패키지로 설치하면 dependencies에 추가되지만, 특정 상황이나 프로젝트 설정 템플릿에 따라 devDependencies에 추가되는 경우도 있다고 한다.
이 경우 로컬 개발환경에서는 문제가 없을 수도 있지만, Vercel과 같은 클라우드 배포 플랫폼은 프로덕션 빌드 시 프로덕션 환경에 불필요한 패키지를 설치하지 않기 위해 devDependencies는 따로 설치하지 않기에 이런 경우에도 react-redux를 찾지 못하는 오류가 발생할 수 있다.
에러 2
그 다음으로는 에러 메세지 화면을 캡쳐하진 못했지만 프로젝트 파일에서 import 할 때, 파일 경로의 대소문자를 정확하게 입력하지 않아 발생한 문제였다.
현재 코드를 보면 상단에서 "../redux/slices/pokemonSlice" 로 addPokemon과 removePokemon을 import 해오고 있는데 실제 폴더 명을 살펴보면 slices 가 아닌 대문자 Slices로 되어있는 것을 알 수 있다.(원래 폴더명을 소문자로 짓기에 당연히 소문자로 지었을 거라 생각하고 slices로 가져오는 실수를 하다...)
로컬 환경, 특히 macOS나 Windows에서는 파일 경로의 대소문자를 엄격하게 구분하지 않기 때문에, 파일 경로에서 대소문자가 맞지 않아도 코드가 정상적으로 실행될 수 있다. 이에 따라, VSCode나 로컬 개발 환경에서는 "../redux/slices/pokemonSlice"와 같이 잘못된 경로로 파일을 import해도 문제를 감지하지 못하고 코드가 정상적으로 작동하곤 한다.
그러나, Vercel과 같은 서버 환경(특히 Linux 기반)에서는 파일 경로의 대소문자를 엄격하게 구분한다. 따라서, 파일 경로에서 대소문자가 실제 폴더명이나 파일명과 다를 경우, 서버는 해당 파일을 찾지 못해 오류가 발생하게 된다고 한다...
해당 경로까지 전부 수정해준 뒤, 푸시했더니 드디어!!! 정상적으로 업데이트 되었다.
너무 피곤했던 하루...😇
오늘의 교훈: 휴먼 에러를 피하기 위해 로컬 환경에서부터 파일 경로를 실제 파일명과 대소문자까지 정확히 맞춰 작성하는 습관을 기르자... 그리고 웬만하면 VSCode에서 자동 완성 기능을 활용하여 경로를 지정하자^^!
