팀프로젝트_기록일지/React_이정환_감정일기장_프로젝트14 (21).이정환_react.js강의_감정일기장_프로젝트_7강_New 페이지 구현2(작성중...) 1_ useNavigate()의 nav(-1) : 페이지의 뒤로 이동 기능2_ 하나의 state 변수에 여러 값 설정하는 방법 => useState({ 속성1, 속성2, ...}) , 초기값 data를 객체로 한다.import {useState} from 'react';function New(){ const [input , setInput] = useState({ id, createDate, emotionState, content }) return( . . )}3_ 에 value값을 넣을 때, new Date()값이 아닌 String으로 'YYYY-MM-DD'으로 넣어야 한다.function formatDate(d.. 2025. 1. 23. (21).이정환_react.js강의_감정일기장_프로젝트_7강_New 페이지 구현(작성중...) 1_ 페이지의 컴포넌트 구조 설계- Heawder - Edior 컴포넌트로 '수정'페이지에도 사용되도록 한다.- Editor 내부의 오늘의 감정 선택 버튼들 하나하나를 EmotionItem 컴포넌트로 한다.2_ 페이지의 컴포넌트 구조 설계- Heawder - Edior 컴포넌트로 '수정'페이지에도 사용되도록 한다.- Editor 내부의 오늘의 감정 선택 버튼들 하나하나를 EmotionItem 컴포넌트로 한다.3_ Editor 컴포넌트에는 4가지 Section으로 나뉘므로, 4개의 태그로 제작하는 전략 사용4_ EmotionItem 컴포넌트 내의 사진 출력 => get-Emotion-images.js import하여, 중복된 함수 호출 코드를 축약▶순서1_ EmotionItem 컴포넌트 작성import .. 2025. 1. 22. (20).이정환_react.js강의_감정일기장_프로젝트_5강_Home 페이지 구현2(작성중..) Home 페이지에 적용해야할 기능 :기능1_ Header 버튼 ''을 누를 시, 저번달, 다음달로 title 변경기능2_ 기능1로 월이 변경될 때마다, 그의 해당월에 만들어진 시기들의 일기들로 items filter 하기기능3_ Home에서 filter된 items를 DiaryList컴포넌트에 전달하여, map rendering 하기기능4_ nav로 각 item의 상세조회, 수정 페이지 이동 nav 걸기 , '새 일기쓰기' 버튼으로 New 페이지 이동 걸기기능5_ section의 '오래된 순' , '최신순' 정렬 기능 적용하기● 어려웠던 항목 :1_ setTitleMonth()로 Date 날짜의 월 값 차감, 추가 핸들러 구현 const onDecreaseMonth = () => { //현재 시기.. 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. 이전 1 2 3 4 다음
