포켓몬 도감 사이트) TroubleShooting 3 : Vercel 배포🎈

1. 문제 발생🤯

01. Vercel 배포 후 이미지 로딩 실패

포켓몬 도감 페이지 프로젝트가 마무리되어 간다. Vercel로 배포하고 기대에 부푼 마음으로 페이지에 접속했다.

엥 내 이미지 어디갔어요?🤨
로컬에서 업로드한 이미지가 출력이 되지 않았다. url로 입력한 이미지는 정상적으로 출력되는걸 보니, 로컬 업로드 방식에서 문제가 있는 것 같다.

02. Vercel 배포 후 새로고침시 404 오류

이미지 업로드를 해결하기 위해 여러가지 방법을 시도하던 중, 우연히 누른 새로고침에 또다른 오류를 발견했다.

Vercel에서 React 프로젝트를 배포하면 발생한다고 알려진 새로고침 오류가 발생했다.. 말로만 듣던 오류가 실제 내 페이지에서 발생하다니... 얼른 고쳐주고 싶어졌다🥲

2. 개념 정리🧐

00. public? 절대경로? 그게 뭐에요?

'Vercel 배포 후 로컬 이미지 로딩'과 관련하여 구글링을 해보았다. public 폴더 안에 이미지 폴더... 절대경로로 재설정... env 변수 사용... 등등 다양한 방법들을 찾아볼 수 있었지만, 이 중 내가 아는 개념이 하나도 없었다. 그래서 우선 원인을 추론하기 위한 기본 개념을 찾아 정리해보았다.

01. public VS src

public 폴더
정적 파일을 저장하는 폴더(index.html, image 등)로, 사용자가 웹페이지 에서 직접 볼 수 있는 파일들이 담기는 공간이다.

src 폴더
개발하면서 작업하는 파일 대부분을 넣는 폴더(컴포넌트.jsx, styles.js 등)이다. public폴더 보다도 src폴더에서 더 많은 작업을 하게 된다.

public/src 참고 사이트

02. 절대경로 VS 상대경로

절대경로
최상위 폴더가 반드시 포함된 경로이다. 즉, root 파일부터 해당 파일까지의 전체 경로(URL)를 의미한다.

<img src='/images/logo.png' alt='logo' />

상대경로
현재 폴더(비교 대상)을 기준으로 작성된 경로이다. 즉, 현재 작성하고 있는 파일의 위치에 따라 달라진다.

<img src='../images/logo.png' alt='logo' />
//현재 파일에서 상위 폴더로 이동 후 images폴더로 이동

경로 작성법

• /: root
• ./: 현재 작성 중인 파일 위치(html, css에선 생략 가능)
• ../: 상위 폴더로 이동

절대경로/상대경로 참고 사이트

03. React는 왜 새로고침 시 문제가 발생하는가?

• React는 SPA(Single Page Application)으로, 1개의 html 파일로 CSR(Client Side Rendering) 동적 라우팅 처리를 한다.
• Vercel은 정적 파일을 제공하는 서버로, SSR(Server Side Rendering)방식으로 웹사이트 호스팅한다.
• React의 동적 경로에서 새로고침을 하면, Vercel은 물리적으로 해당되는 페이지(파일)을 찾는데, 그 페이지가 존재하지 않기 때문에 404 오류가 발생한다.

예를 들어, 아래 트리 구조를 가진 React 프로젝트를 Vercel로 배포해본다고 가정해보자.

📂 Router
├── `/` → <Home />
├── `/dex` → <Dex />
└── `/detail` → <PokemonDetail />

/dex 페이지에서 새로고침을 하면 브라우저는 /dex 경로에 해당하는 HTML 파일을 요청한다. 하지만 React는 SPA이므로 index.html만 존재할 뿐, 각 페이지별 HTML 파일을 가지고 있지 않고, Vercel은 정적 페이지를 제공하기 때문에 /dex 경로에 대해 응답할 수 없다 판단하여 404 에러가 발생하는 것이다.

이를 해결하려면 요청을 index.html로 가리키도록 리다이렉트하는 설정이 필요하다.

React 새로고침 참고 사이트 1
React 새로고침 참고 사이트 2

3. 해결 방안😇

01. 이미지 경로를 절대경로로 수정해보기

이미지 경로가 "상대경로"여서 생긴 문제로 판단하여, 우선 Home.jsx의 로고만 "절대경로"로 수정해보았다.

public 폴더에 있는 이미지는 절대경로(/)를 사용해야 정상적으로 접근할 수 있지만, 내 image 폴더는 public 폴더에 없었다. 그래서 이 방법만으로 해결할 수 없었던 것이다.
문제를 해결할 때, 이 점에 대해 잘 몰랐기 때문에 다른 방법을 찾아보았다.

02. 이미지 경로 import하는 방법으로 시도해보기

이미지 로딩 실패의 원인은 이미지 경로가 중간에 유실되었을 가능성이 높다고 추측된다. 이에 대한 해결방법을 찾아보던 중, import 문법을 활용하면 이미지 경로가 꼬이는 문제를 방지할 수 있다는 점을 알게 되었다. 그래서 바로 코드에 적용해보았다.

위와 같은 Home.jsx의 로고를 import 문법으로 수정해보았다.
Detail.jsx의 background-image 또한 경로를 수정해야 했다. 로고와 다르게 styled-components 문법안에 써야했기 때문에 ${} 안에 작성해야한다.

이제 새로고침 문제를 해결해보자!

02. 새로고침 문제를 해결하기 위한 vercel.json 파일 생성

새로고침 문제는 React 프로젝트를 Vercel로 배포했을 때, 흔히 발생하는 문제였다. 즉, React 앱과 Vercel 서버 특성 때문에 발생한 문제이다. 자세한 내용은 위에 ' 2-03. React는 왜 새로고침 시 문제가 발생하는가? '에 정리해두었다.
해결방법은 간단하다. 최상위 폴더 안에 vercel.json을 생성하고, 아래 코드를 입력해주면 된다.

//vercel.json에 작성해야하는 코드

{
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}

Github pages로 배포할 때는 vite.config.js에서 base를 설정하는 방법도 있는데, 추후에 기회가 있다면 포스팅할 계획이다.
이번 프로젝트에서는 Vercel로 배포했기 때문에, vercel.json 방법으로 해결하였다. 저장 후 github에 push를 해주고 결과를 다시 확인해보자.

4. 결과😎

01. 해결!

코드를 수정한 뒤, 다시 github에 push와 merge를 해주었다. 몇번의 실패 때문에 긴장된 마음으로 재접속해보니...

다행히 정상적으로 이미지가 로딩되었다! 그럼 새로고침도 해결되었는지 테스트해보자.

새로고침을 해도 404 오류가 뜨지 않는다!

02. 최종 코드

• Home.jsx
  

• styles.js (Detail의 background image)
  

• vercel.json