[React] 배포 준비하기 (vercel을 통해 간단하게 ok)

출처 : 이정환의 한 입 크기로 잘라 먹는 리액트

 

 

배포 준비를 위해 해야할 마지막 작업..

강의에서 간단한 프로젝트 제작 후 localStroage를 이용하여 간단한 데이터 저장까지 구현한 뒤 

간단하게 몇 가지 완성도를 높힌 후 배포를 해보려고 합니다.

 

 

1. 페이지 타이틀 설정하기 ( 웹 브라우저 탭에 표시되는 페이지의 제목 )

 

2. Favicon 설정하기 ( 브라우저 탭에 표시되는 작은 아이콘 )

 

3. 오픈 그래프 태그 설정하기

이것이 오픈 그래프

4. 프로젝트 빌드 (Build) 

 

순으로 진행해 보겠습니다.

 

 

---

 

뭐,, 페이지 제목같은 경우

 

따로 커스텀 훅을 만들어서 재사용할 수 있게 만들었습니다.

import { useEffect } from "react";

const usePageTitle = (title) => {
  useEffect(() => {
    const $title = document.getElementsByTagName("title")[0];
    $title.innerText = title;
  }, [title]);
};
export default usePageTitle;

이런식으로,  불러올 땐 해당 훅만 호출해서 `usePageTitle("타이틀")` 이런식으로 설정해주었구요

 

favicon 과 thumbnail은 index.html에서

<link rel="icon" type="image/svg+xml" href="/favicon.ico" />

 

    <meta property="og:title" content="프로젝트명" />

    <meta property="og:description" content="프로젝트 설명" />

    <meta property="og:image" content="/thumbnail.png" />

 

이런식으로 작성해 주었습니다 

 

그 다음 `npm run build`로 프로젝트 빌드 진행!!! 

 

 

 

 

 

배포가 뭐야 24시간, 365일 내가 만든 서비스에 사용자가 접속 가능하게 서버에 올리는 과정.

 

우리는 여러 클라우드 서비스를 통해 쉽게 배포를 할 수 있는데요

유명한 배포 클라우드 서비스 종류들,,

위의 여러가지가 존재하는데 

 

특히 Vercel이 프론트엔드 개발자를 위한 클라우드 서비스를 제공중..그리고 Next.js를 개발하는 회사라네요

 

저는 이걸로 배포를 진행해 보겠습니다.

 

 

 

먼저 https://vercel.com/ 가셔서 회원가입 합니다 그리고,

 

1. 우리가 작업했던 터미널에서 `npm i -g vercel` 통해 vercel 패키지 설치

2. 이후 `vercel login` 

3. 그러면 아래와 같은 로그인 방법이 있는데 가입한 방식으로 선택하면 됨.  (저는 github로 진행함 )

 

 

4. 로그인 완료 후 `vercel` 명령어 입력하면 확인 사항 물어본다 그럼 `y`

5. 이후 어떤 계정에 배포하길 원하냐고 물어보는데 그냥 enter

6. 링크할 프로젝트가 없으면 n

7. 프로젝트명 기입

8. 어떤 directory에 위치하냐 물어보는데 그냥 enter

9. 알아서 자동으로 설정해주는데 변경하고싶냐? n

10. 배포 완료........

 

emotion-diary-seven-xi.vercel.app...