1. vercel 배포
1-1. 배포방법
- https://vercel.com/ 가입 및 깃허브 연동하여 레포지토리 선택
 |  |
|---|---|
| 좌측 상단에 계정정보->Add GitHub Account를 클릭 | 원하는 레포지토리를 선택하여 import |
- 배포할 project 설정 및 배포
2. 트러블 슈팅
2-1. 이미지 참조 경로
1) 문제발생
| 이미지 참조 경로 |
|---|
   |
2) 원인 추론
콘솔창을 확인하니 이미지 참조 경로를 배포할 때 문제가 생겼다는 것을 알 수 있었다.
나의 경우 이미지를 사용할 때 상대경로 <img src="../assets/pokeball.png" alt="포켓볼" />로 사용했는데 배포 할 경우 모든 파일이 로컬에서 작업했던 구조대로 유지되는 것이 아니므로 상대 경로로 할 경우 지정된 이미지 파일을 찾지 못할 수 있다고 한다.
그러므로 경로를 바로 사용하는 것보다 improt를 한 다음 쓰는 것이 더 적합하다고 한다. 또한 절대경로를 사용하고 싶다면 vite.config.js에 절대경로를 지정하는 추가 설정을 해줘야 하는데 나의 경우는 따로 설정은 하지않고 import를 하기로 결정했다.
3) 해결 방안
import pokemonBackground from "/src/assets/gradient-white-color-background.png";
import pokeball from "/src/assets/pokeball.png";
background-image: url(${pokemonBackground});
background: url(${pokeball});++++ 추가 문제 : 배포 브랜치 main이 아닌 다른 브랜치로 설정
이미지 경로를 제대로 바꿨음에도 전혀 반영이 되지 않았다. 알고보니 나는 default 브랜치로 rtk를 설정했기 때문에 배포시 자동으로 rtk가 잡힐 것이라고 생각했다. 그러나 초기 배포시에는 배포 브랜치가 main으로 잡힌다고 한다. 그리하여 main이 아닌 다른 분기 브랜치에서 배포 되기 원하면, Settings -> Git -> Production Branch를 main이 아닌 rtk로 변경해주어야 했다.
 |
|---|
| 배포 브랜치 main이 아닌 rtk로 설정 |
4) 결과
이미지가 정상적으로 보여진다.
 |  |  |
|---|
2-2. 새로고침 404 에러
1) 문제 발생
vercel이 정상적으로 배포되고 잘 작동한다고 생각했는데, 새로고침을 하면 404라는 에러가 발생했다.
2) 원인 추론
새로고침을 하면 경로를 제대로 찾지 못하는 것이 원인이었다. 그 이유는 react가 SPA이기 때문이다. 페이지는 하나뿐이고 실제로 페이지를 넘나드는 것이 아니라 react가 처리해 주어 화면이 바뀔 뿐이다. 그리하여 'https://pokemon-dex-app-rho.vercel.app/dex' 에서 새로고침을 한다고 할때 브라우저가 서버에 /dex로 요청을 보내지만 실상 그 페이지는 없는 것이다. 그래서 서버가 /dex 페이지를 찾지 못해 404에러를 발생시키는 듯 했다.
3) 해결 방안
이를 해결하기 위해서는 vercel.json파일을 새로 생성하여 어느곳에서 새로고침이 되어도 서버가 index.html로 반환이 되게끔 해주어야 했다.
4) 결과
새로고침시 vercel이 경로를 제대로 찾지 못한 것을 위의 해결방안을 통해 쉽게 해결이 되었다.
