dataId 시작 정하기 우선 일기를 새로 작성을 2개를 하게 된다면 아래와 같은 에러가 나게 된다. 이는 두개의 자식이 똑같은 트리를 가지고 있다라는 것인데, 컴포넌트 탭에 들어가서 확인해 보니 똑깉아 key가 1인 것들이 두개가 있었다. 이렇게 계속 새로운 글을 작성하면 2, 3, 4 계속 버ㅓ그가 발생하게 될 것이다. 이전에 App.js에서 dataId를 useRef(0)으로 설정해 두었었다. 근데 dummydata로 등록해 놓은것들이 1부터 5까지 있다. 그래서 우리는 dataId를 6번부터 시작했어야하는데 0부터 시작해서 에러가 난것이다! React를 사용하다 보면 이러한 에러를 많이 접하는데 이를 주의해서 개발하면 좋다! 근데 31일 일자로 일기를 등록하면 컴포넌트 영역에는 출력이 되나, 리스..

우선 이전과 같이 상단부분을 만들어주었다. import { useContext, useEffect, useState } from "react"; import { useNavigate, useParams } from "react-router-dom"; import { DiaryStateContext } from "../App"; import { getStringDate } from "../util/date"; import MyHeader from "../components/MyHeader"; import MyButton from "../components/MyButton"; const Diary = () => { const { id } = useParams(); const diaryList = useCon..

일기를 수정하는 기능을 만들어보자. 먼저 원본 데이터를 가져오는 기능을 구현해보자. 아래와 같이 Edit.js페이지에 h2를 입력해도 아무것도 출력되지 않는데, 콘솔창을 이용해 확인해 보면 아래와 같이 No routes matched location "/edit/5"라고 출력된다. 그래서 Route를 어떻게 했는지 체크해보면 아래와 같이 하였다. 그래서 edit에도 path variable을 설정해놓으면 된다. 그럼 다음과 같이 Edit이 잘 출력되는 것을 확인할 수 있다. 그럼 이제 useParams로 id를 받아오자. 그럼 id를 받아오는 것을 console을 통해 알 수 있다. 그럼 이 id를 가지고 수정할 데이터를 들고와보자. 우선 data는 App.js에서 data를 가지고 있다. 그래서 Edi..

자 먼저 새 일기쓰기 버튼을 클릭해서 나오게되는 New페이지를 한번 제작해보자. 먼저 상단의 헤더를 아래의 코드와 같이 구현해보자. import { useNavigate } from "react-router-dom"; import MyHeader from "./../components/MyHeader"; import MyButton from "./../components/MyButton"; const New = () => { const navigate = useNavigate(); return ( } /> ); }; export default New; 그럼 다음으로 오늘은 언제인가요의 부분을 제작해보자. 먼저 날짜를 들고오기위해 아래를 알아보자. Date.prototype.toISOString() toI..

먼저 Home페이지의 상단을 구현해보겠다. 먼저 Home에서 아래와 같이 가운데 날짜를 들고와보자. import { useState } from "react"; const Home = () => { // 날짜를 저장하는 state (기본값 - 현재시간) const [curDate, setCurDate] = useState(new Date()); console.log(curDate); return ( ) } export default Home; 그럼 아래와 같이 날짜와 시간이 잘 출력되는 것을 확인할 수 있다. 다음으로는 Header를 만들어보자. import { useState } from "react"; import MyHeader from "./../components/MyHeader" const H..

🚧기초 공사 항목 1. 상태 관리 세팅하기 프로젝트 전반적으로 사용 될 일기 데이터 Satate 관리 로직 작성하기 2. 프로젝트 State Context 세팅하기 일기 데이터 State를 공급할 Context를 생성하고 Provider로 공급하기 3. 프로젝트 Dispatch context 세팅하기 일기 데이터 State의 Dispatch 함수들을 공급할 Context를 생성하고 Provider로 공급하기 1. 상태 관리 세팅하기 프로젝트 전반적으로 사용 될 일기 데이터 Satate 관리 로직 작성하기 자 일기데이터에 각각 적용할 state들을 작성해보자. useReducer를 사용해서 작성해보자. import { useReducer, useRef } from 'react'; import './App...