인프런, 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지의 내용 중 Index.html 파일 수정에 대한 내용을 정리한다.
목차
1. <head> 태그 설정하기
2. Open Graph 설정하기
3. 프로젝트 마무리
<head> 태그 설정하기
프로젝트 사이트의 메타데이터를 수정하기 위해서 index.html의 <head> 부분을 수정해야한다. 기본적으로 사이트 title을 수정하고 description을 수정하여 사이트의 설명을 추가해준다.
title의 경우 페이지마다 이름을 부여하고 싶다면 useEffect를 통해 페이지가 마운트될 때 title 요소에 접근하여 innerHTML을 수정하여 제목을 변경해준다.
추가적으로 <html> 태그의 lang 속성을 ko로 설정해주지 않으면 브라우저로 접속시 번역 기능이 활성화 될 수 있다.
<html lang="ko">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="description" content="나만의 감정 일기장" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<title>감정 일기장</title>
</head>
</html> // 페이지마다 제목을 수정할 경우 각 페이지에서 아래와 같이 설정
useEffect(() => {
const titleElement = document.getElementsByTagName("title")[0];
titleElement.innerHTML = `페이지 제목`;
}, []);
Open Graph 설정하기
프로젝트의 링크를 입력했을 때 사이트에 대한 간략한 썸네일과 제목, 설명을 Open Graph를 통해 설정할 수 있다.
Open Graph를 설정하거나 수정 후 반영되지 않을 때는 Open Graph 캐시를 초기화해야한다.ㅁ
<head>
...
<meta property="og:image" content="%PUBLIC_URL%/thumbnail.png" />
<meta property="og:site_name" content="감정 일기장" />
<meta property="og:discription" content="나만의 작은 감정 일기장" />
...
</head>
프로젝트 마무리
Open Graph 설정까지 하고 프로젝트가 마무리되었다. 프로젝트를 되돌아 보면 그리 어렵지 않았던 것 같다. 핵심 부분을 쉽게 알려 주었고 React.js를 통해 프로젝트를 만들어가는 전체 과정을 쉽게 배웠다. 학기중에 시작해서 프로젝트 마무리까지 시간이 꽤 걸렸지만 정리까지해서 마무리를 할 수 있었다.
이후 계획은 이 프로젝트에서 TypeScript를 적용과 같이 업그레이드할 수 있는 부분은 업그레이드할 예정이다. 또한, 배운 내용을 가지고 프로젝트 기획을 하고 제작해볼 예정이다.
'DEV > WebProgramming' 카테고리의 다른 글
| [React] Table 사용기 (0) | 2022.12.27 |
|---|---|
| [TypeScript] TypeScript란, React에 적용하기 (0) | 2022.07.28 |
| [React] 프로젝트 빌드 및 배포 (0) | 2022.07.12 |
| [React] Local Storage (0) | 2022.07.08 |
| [VSCode] 웹 프로그래밍시 유용한 확장 프로그램(22.05.28) (0) | 2022.05.29 |