우선 이전과 같이 상단부분을 만들어주었다. 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...

🚧기초 공사 항목 1. 폰트 세팅 Google Web Fonts를 이용한 프로젝트에 사용되는 폰트 세팅 2. 레이아웃 세팅 모든 페이지에 반영되는 레이아웃 세팅 3. 이미지 에셋 세팅 감정 이미지들을 프로젝트에서 불러와 사용할 수 있는 환경 세팅 4. 공동 컴포넌트 세팅 모든 페이지에 공통으로 사용되는 버튼, 헤더 컴포넌트 세팅 1. 폰트 세팅 Google Web Fonts를 이용한 프로젝트에 사용되는 폰트 세팅 아래는 우리가 활용할 폰트들이다. Open Font License SIL 개방형 글꼴 라이선스(OFL)는 글꼴 디자인 및 언어 소프트웨어 엔지니어링 경험을 바탕으로 글꼴 및 관련 소프트웨어용으로 특별히 설계된 무료 오픈 소스 라이선스입니다. OFL은 협업 방식으로 글꼴 및 관련 소프트웨어의 세계..