현재는 자바스크립트데이터 >> 휘발성 데이터 이기때문에 현재 더미데이터+새로 추가한데이터들도 새로고침을 하면 다시 더미데이터만 남게된다. Web Storage API - Web API | MDN Web Storage API는 브라우저에서 키/값 쌍을 쿠키 (en-US)보다 훨씬 직관적으로 저장할 수 있는 방법을 제공합니다. developer.mozilla.org 서버에 DB를 관리 할 수도 있지만 복잡해지므로 지금은 데이터 유지를 위해 WebStorage API중 로컬스토리지를 적용해 볼 것이다. 사용법 useEffect(() => { localStorage.setItem('key', 10); }, []) useEffect를 통해 불러올 데이터를 지정해주고 개발자콘솔에서 확인해본다 useEffect(()..

헤더만들기 import { useContext, useEffect, useState } from "react"; import { useNavigate, useParams } from "react-router-dom"; import { DiaryStateContext } from "../App"; import MyButton from "../components/MyButton"; import MyHeader from "../components/MyHeader"; import { getStringDate } from "../util/date"; const Diary = () => { const { id } = useParams(); const diaryList = useContext(DiaryStateCon..

비새는거 치우느라 평일에 포스팅 못하고 토요일날 헐레벌떡 올리는 혼공학습단 미션 Map은 정리를 못해서 나중에 따로 포스팅 할 예정 ;-; [Java] 컬렉션 프레임워크 - List, Set 컬렉션 프레임워크? - 컬렉션 (객체의 저장) + 프레임워크(사용방법을 정해둔 라이브러리) - 자바가 널리 알려져 있는 자료구조를 사용해 객체들을 효율적으로 추가, 삭제, 검색할 수 있도록 인 h-owo-ld.tistory.com

원본 일기 데이터 가져오기 앱컴포넌트 Routes안에 edit루트에 id url을 지정해줬다 import { useContext, useEffect, useState } from "react"; import { useNavigate, useParams } from "react-router-dom"; import { DiaryStateContext } from "../App"; import DiaryEditor from "../components/DiaryEditor"; const Edit = () => { const [originData, setOriginData] = useState(); const navigate = useNavigate(); const { id } = useParams(); cons..

글작성과 수정이 겹치는 부분이 많아서 DiaryEditor 컴포넌트를 따로 만들었다 import DiaryEditor from "../components/DiaryEditor" const New = () => { return ( ) }; export default New; 그리고 New컴포넌트에서 DiaryEditor를 불러와주었따 헤더 만들기 import { useNavigate } from "react-router-dom"; import MyHeader from "./components/MyHeader" import MyButton from "./components/MyButton" const DiaryEditor = () => { const navigate = useNavigate(); return..