본문 바로가기

팀프로젝트_기록일지25

(20).이정환_react.js강의_감정일기장_프로젝트_5강_Home 페이지 구현2(작성중..) Home 페이지에 적용해야할 기능 :기능1_ Header 버튼 ''을 누를 시, 저번달, 다음달로 title 변경기능2_ 기능1로 월이 변경될 때마다, 그의 해당월에 만들어진 시기들의 일기들로 items filter 하기기능3_ Home에서 filter된 items를 DiaryList컴포넌트에 전달하여, map rendering 하기기능4_ section의 '오래된 순' , '최신순' 정렬 기능 적용하기 2025. 1. 21.
(19).이정환_react.js강의_감정일기장_프로젝트_5강_Home 페이지 구현1 1_ 컴포넌트 구조 설계 :2_ Home 컴포넌트에 전 수업때 만들어놨던 Header 컴포넌트 import + 배치 :○ Header 컴포넌트의 props에 대입할 값들 :- text : '2024년 2월'- LeftChild : Button 컴포넌트 '- RighttChild : Button 컴포넌트 '>'3_ DiaryList 컴포넌트 구현 : //내가 부족한 부분만 기록함○ DiaryList 컴포넌트 내부에 : 최신순 , 정렬 순 메뉴바 , '새 일기쓰기' 버튼 || items 들 render 부분 으로 한꺼번에 했음내가 한 코드function Home() { const diaries = useContext(DiaryContext) || []; return ( .. 2025. 1. 21.
(18).이정환_react.js강의_감정일기장_프로젝트_5강_기능구현설계, 일기 생성 ,수정 , 삭제의 useRuder, dispatch 작성, Context 생성(작성중) 1_ 각 페이지 당 어떤 기능을 적용해야할지 설계- Home : 일기 리스트 렌더링- Diary : 일기 상세 조회- New : 일기 생성 페이지- Edit : 기존 일기 수정 페이지2_ Context를 어디다 배치할지 대략 정하기시발3_ 데이터 설계 구축▶ 순서1_ 초기 mockData 프로퍼티 설정const mockData = [ { id : , //일기 id createDate :, //생성 날짜 emotionState : new Date().getTime(), //일기의 감정 content : ,//일기 내용 }]▶ 순서2_ useReducer()로 State 변수 , dispatch() 메소드 작성작성1_ 일기 생성 메소드 부분func.. 2025. 1. 21.
감정일기장_복습노트_1 : useParams() , useSearchParams(), 공통 컴포넌트 Header 1_ useParams() 사용하기 : 주로 동적경로 페이지 다룰 떄, 사용import { useParams } from "react-router-dom";function Component(){ const {id} = useParams(); return ({`Component_${id}의 페이지`})}2_ useSearchParams() 사용하기 : 주로 주소 링크 맨마지막 queryString 추출 시, 사용http://localhost:5173/diary/2?value=3import { useSearchParams } from "react-router-dom";function Component(){ const [params, setParams] = useSearchParams(); .. 2025. 1. 21.

티스토리툴바