사용자가 보게 될 [감정 일기장] 서비스 페이지의 제목, 페이지 링크 전달 시 노출되는 이미지 선정 등

페이지 제목 설정하기

1) 기본 페이지 제목 설정

public/index.html ⇒ title 태그수정

<title>WDI_감정 일기장</title>

2) 페이지별로 제목을 다르게 설정

페이지 컴포넌트를 마운트할 때 자바스크립트로 title 태그의 값 변경

// src.util.js
export const setPageTitle = (title) => {
    const titleElement = document.getElementsByTagName("title")[0];
    // 인수로 전달한 title를 dom에서 모두 찾아 배열로 반환
    // 반환 배열의 0번 요소에는 페이지 제목을 설정하는 <hede>의 title 태그를 불러온다
    titleElement.innerText = title;
    // innerText 속성으로 title 변경
};

getElementsByTagName 자바스크립트 태그로 요소 찾기 - JavaScript

각 페이지 컴포넌트 마운트할 때마다 함수 **setPageTitle**을 호출하고 인수로 페이지의 제목을 전달

   // Home.js
    (...)
    useEffect(() => {
            setPageTitle("WDI_감정 일기장");
    }, []);
    (...)

// New.js
const New = () => {
    useEffect(() => {
        setPageTitle("WDI_새 일기 쓰기");
    }, []);

   // Diary.js
    useEffect(() => {
        setPageTitle(`WDI_${id}번 일기`);
    });

    // Edit.js
    useEffect(() => {
        setPageTitle(`WDI_${id}번 일기 수정`);
    });

Favicon 설정하기

public 폴더 favicon.ico 덮어쓰기