Vercel 배포, 누르기 전에 딱 5분만 확인!

DEVELOPMENT/PROJECT NOTES

Vercel 배포, 누르기 전에 딱 5분만 확인!

Watnu 2025. 2. 17. 00:01

React 프로젝트를 배포하기 전에 반드시 체크해야 할 사항들이 있습니다.

이 과정을 건너뛰면 배포 후에 제목이 이상하게 나오거나, 썸네일이 안 뜨거나, 파비콘이 적용되지 않는 문제가 생길 수 있습니다.
이 글에서는 배포 전 사전 작업부터 Vercel을 이용한 배포 과정까지 한 번에 정리해 보겠습니다!

배포 전 작업

1. 페이지 타이틀 설정하기

브라우저 탭에 표시되는 제목은 기본적으로 index.html의 <title> 태그에서 설정됩니다.

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>감정일기장</title>
  </head>

하지만 React는 SPA(Single Page Application)이므로,

각 페이지마다 다른 타이틀을 설정하려면 추가 작업이 필요합니다.
이를 위해 커스텀 훅을 사용하여 페이지별로 동적으로 타이틀을 변경할 수 있습니다.

import { useEffect } from "react";

const usePageTitle = (title) => {
  useEffect(() => {
    document.title = title;
  }, [title]);
};

export default usePageTitle;

이제 필요한 곳에서 아래와 같이 사용하면 됩니다.

import usePageTitle from "../hooks/usePageTitle";

usePageTitle("감정 일기장");

2. Favicon 설정하기

파비콘(favicon)은 브라우저 탭에 표시되는 작은 아이콘입니다.

✅ 설정 방법

favicon.ico 파일을 public 폴더에 저장합니다.
index.html의 <head> 태그 안에 아래 코드를 추가합니다.

  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>감정일기장</title>
  </head>

이제 브라우저에서 새로고침 하면 파비콘이 정상적으로 적용됩니다.

3. 오픈 그래프(OG) 설정하기

웹사이트 링크를 공유할 때 썸네일 이미지와 제목, 설명이 제대로 표시되려면 Open Graph(OG) 태그를 설정해야 합니다.

✅ 설정 방법

1) index.html의 <head> 태그 안에 다음 코드를 추가합니다.

  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>감정일기장</title>
    <meta property="og:title" content="감정 일기장">
    <meta property="og:description" content="나만의 작은 감정 일기장">
    <meta property="og:image" content="/thumbnail.png">
  </head>

2) thumbnail.png 이미지를 public 폴더에 넣어둡니다.

3) 배포 후에도 썸네일이 보이지 않으면, SNS 캐시를 삭제해야 합니다.

✅ 캐시 초기화 링크: