팀프로젝트_기록일지/React_이정환_감정일기장_프로젝트14 (25).이정환_react.js강의_감정일기장_프로젝트_11강_ 배포 준비 및 배포하기 1_ 웹페이지의 Title 변경 방법 :● 종류1_ main페이지의 title 변경하기 => : [index.html]의 textContent값을 변경하기- index.html ● 종류2_ main 와의 다른 페이지 접속 시, title 명 변경하기○순서1_ [hooks]폴더에서 [usePageTitle.jsx] 생성 후, title을 변경하는 커스텀 훅 작성하기- usePageTitle.jsximport { useEffect } from "react";const usePageTitle = (titleText) => { useEffect(() => { const $title = document.querySelector("title"); $title.textContent.. 2025. 1. 28. (24).이정환_react.js강의_감정일기장_프로젝트_10강_ 웹스토리지 사용, 적용방법 ● 순서1_ 데이터를 수정 삭제 생성을 담당하는 reducer() 에 데이터가 수정될 때마다, 웹스토리지에도 반영되도록 코드 수정function reducer(diaries, action) { let nextDiaries; switch (action.type) { case "CREATE": { nextDiaries = [action.data, ...diaries]; break; } case "UPDATE": { nextDiaries = diaries.map((diary) => diary.id === action.data.id ? action.data : diary ); break; } case "DELETE": { .. 2025. 1. 28. (23).이정환_react.js강의_감정일기장_프로젝트_9강_Diary 상세조회 페이지 구현 //util 폴더에 데이터 추출하여 사용하는 코드 작성, 저장 ★ [hooks]폴더의 [useDiary.jsx]를 생성해, 커스텀 useHook 만들어, params.id를 넣을 시, diaries들 중 해당 id의 diary를 반환하는 메소드 작성하기useDiary.jsximport { useContext, useEffect, useState } from "react";import { DiaryStateContext } from "../App";import { useNavigate } from "react-router-dom";export const useDiary = (id) => { //StateContext에서 Diaries들 불러오기 const diaries = useContext(DiaryStateContext); //찾았을 떄, 임시 보관할 dia.. 2025. 1. 27. (22).이정환_react.js강의_감정일기장_프로젝트_7강_Edit페이지 구현 //일기 삭제, 수정 기능 (작성중..) 1_ 일단, Edit페이지의 기능을 적용하기 위한 이론들을 정리해봤음 //꽤 어려워서 노트를 먼저 해봄 2025. 1. 26. 이전 1 2 3 4 다음
