[React] 미니프로젝트 - 일기장 상세 페이지 구현하기
2022. 8. 15. 20:39
개발/Inafolio
헤더만들기 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..
[혼공단 8기] 5주차 미션
2022. 8. 14. 00:29
개발/Inafolio
비새는거 치우느라 평일에 포스팅 못하고 토요일날 헐레벌떡 올리는 혼공학습단 미션 Map은 정리를 못해서 나중에 따로 포스팅 할 예정 ;-; [Java] 컬렉션 프레임워크 - List, Set 컬렉션 프레임워크? - 컬렉션 (객체의 저장) + 프레임워크(사용방법을 정해둔 라이브러리) - 자바가 널리 알려져 있는 자료구조를 사용해 객체들을 효율적으로 추가, 삭제, 검색할 수 있도록 인 h-owo-ld.tistory.com
[React] 미니프로젝트 - 일기장 글 수정 화면 구현하기
2022. 8. 11. 23:30
개발/Inafolio
원본 일기 데이터 가져오기 앱컴포넌트 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..
[React] 미니프로젝트 - 일기장 글 작성/수정 화면 구현하기
2022. 8. 9. 21:48
개발/Inafolio
글작성과 수정이 겹치는 부분이 많아서 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..
[React] 미니프로젝트 - 일기장 Home 화면 구현하기
2022. 8. 5. 23:16
개발/Inafolio
수정 전/ 후 홈 모습 날짜헤더 등록하기 mount가 됨과 동시에 날짜가 표시되어야 하고 월을 이동할 버튼이 필요함 import { useState } from "react"; import MyHeader from './../components/MyHeader' const Home = () => { const [curDate, setCurDate] = useState(new Date()); const headText = `${curDate.getFullYear()}년 ${curDate.getMonth() + 1}월` return ( ); }; export default Home; useState를 통해 날짜를 set해준다. 전에 헤더로 만들어두었던 MyHeader 컴포넌트를 import 해주고 MyHea..