[React] 웹사이트 배포하기

1. favicon 파일 삽입

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

 

2. title 변경

index.html에서는 title만 변경하면되지만, 각각의 컴포넌트에서의 title 변경하려면 아래처럼 변경해야함

# index.html

<meta name="description" content="나만의 감정 일기장" />

# 각각의 컴포넌트

  useEffect(() => {
    const titleElement = document.getElementsByTagName("title")[0];
    titleElement.innerHTML = `감정 일기장 - ${id}번 일기`;
  }, []);

 

3. OG(Open Graph), twitter 꾸미기

index.hteml > head에 아래 삽입하기

  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="Starbucks" />
  <meta property="og:title" content="Starbucks Coffee Korea" />
  <meta property="og:description" content="스타벅스는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다." />
  <meta property="og:image" content="./images/starbucks_seo.jpg" />
  <meta property="og:url" content="https://starbucks.co.kr" />
 
  <meta property="twitter:card" content="summary" />
  <meta property="twitter:site" content="Starbucks" />
  <meta property="twitter:title" content="Starbucks Coffee Korea" />
  <meta property="twitter:description" content="스타벅스는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다." />
  <meta property="twitter:image" content="./images/starbucks_seo.jpg" />
  <meta property="twitter:url" content="https://starbucks.co.kr" />

 

4. 파일 압축

$ npm i -g server

$ npm run build ; build파일에 압축

$ serve -s build ; 압축한 build파일을 서버로 열기

 

5. firebase에 서버 등록하기

https://firebase.google.com/?hl=ko 

Firebase

 

내가 만든 웹사이트 (아래)

https://guesung-project.web.app/

감정 일기장