1_ 웹페이지의 Title 변경 방법 :
● 종류1_ main페이지의 title 변경하기 => : [index.html]의 textContent값을 변경하기
- index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/public/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="/public/thumbnail.png" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
● 종류2_ main 와의 다른 페이지 접속 시, title 명 변경하기
○순서1_ [hooks]폴더에서 [usePageTitle.jsx] 생성 후, title을 변경하는 커스텀 훅 작성하기
- usePageTitle.jsx
import { useEffect } from "react";
const usePageTitle = (titleText) => {
useEffect(() => {
const $title = document.querySelector("title");
$title.textContent = `감정쓰레기통-${titleText}`;
}, [titleText]);
};
export default usePageTitle;- Home.jsx //메인 페이지로 돌아올시는 추가될게 없으므로, 다시 원상복구 만들어야한다.
function Home(){
const $titke = document.querySelector('title');
$title.textContent = "감정 쓰레기통";
}○순서2_ [pages]폴더의 jsx파일들에 usePageTitle 메소드 호출하기
예) Edit.jsx
function Edit() {
const { onDelete, onUpdate } = useContext(DiaryDisPatchContext);
const params = useParams();
usePageTitle(`${params.id}번 쓰레기 편집하기`);
const nav = useNavigate();
.
.
.
.
}
2_ favicon 수정하기
○순서1 : 설정할 icon 파일을 [public] 폴더에 저장
○순서2 : [index.html]의 <head>태그의 href 속성값을 icon파일의 경로를 대입하면 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/public/favicon.ico" />//여 태그의 href에 icon파일 경로 대입
<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="/public/thumbnail.png" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>3_ 해당 프로젝트 링크의 썸네일 설정하기 :
○순서1 : 설정할 썸네일 사진 파일을 [public] 폴더에 저장
○순서2 : [index.html]의 <head>태그의 맨밑에 <meta> 태그의 property , content 속성으로 3개 추가
§ property :
- og : title
- og : description
- og : image
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/public/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="/public/thumbnail.png" />//썸네일의 사진을 담당함
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>그러면, 출력화면 브라우저에 F12를 눌러 element탭창을 열어 잘 되어있는지 점검한다.
4_ 프로젝트 빌드하여, 배포 가능한지 체크 :
=> 터미널에 아래의 명령어 작성후, check
npm run build
5_ vercel 사이트 가입 후, vscode의 해당 프로젝트 터미널에 vercel 연동 후, 배포하기
○순서1 : vercel 사이트 가입 하기
https://vercel.com/login?next=%2Fhome
[Dashboard
vercel.com](https://vercel.com/login?next=%2Fhome)
○순서2 : vscode의 해당 프로젝트 터미널에 아래의 명령어 작성으로 연동
npm i -g vercel○순서3 : vscode의 해당 프로젝트 터미널에 아래의 명령어 작성으로 계정 로그인 하기
vercel login○순서4 : vscode의 해당 프로젝트 터미널에 아래의 명령어 작성으로 배포하기
vercel그리고 사진과 같이, 선택사항을 순서대로 선택하여, 배포를 완료한다.
참고로, 터미널의 url이 아닌, 사이트에 들어가 위의 사진의 링크로 들어가거나, 카카오톡에 올려야 정상적인 썸네일이 올라와진다.
https://emotion-trash.vercel.app/
감정 쓰레기통
우울증 병신 정병의 일기장
emotion-trash.vercel.app
'팀프로젝트_기록일지 > React_이정환_감정일기장_프로젝트' 카테고리의 다른 글
| (24).이정환_react.js강의_감정일기장_프로젝트_10강_ 웹스토리지 사용, 적용방법 (0) | 2025.01.28 |
|---|---|
| (23).이정환_react.js강의_감정일기장_프로젝트_9강_Diary 상세조회 페이지 구현 //util 폴더에 데이터 추출하여 사용하는 코드 작성, 저장 (0) | 2025.01.27 |
| (22).이정환_react.js강의_감정일기장_프로젝트_7강_Edit페이지 구현 //일기 삭제, 수정 기능 (작성중..) (0) | 2025.01.26 |
| (21).이정환_react.js강의_감정일기장_프로젝트_7강_New 페이지 구현2(작성중...) (0) | 2025.01.23 |
| (21).이정환_react.js강의_감정일기장_프로젝트_7강_New 페이지 구현(작성중...) (0) | 2025.01.22 |
