본문 바로가기

팀프로젝트_기록일지31

(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.
(17).이정환_react.js강의_감정일기장_프로젝트_4강_공통 컴포넌트 구현하기(작성중) ● React 프로젝트를 작성 순서 : 페이지 라우팅 => 글로벌 레이아웃 설정 => 공통 컴포넌트 구현 => 개별 페이지 및 기능 구현● 감정일기장 프로젝트의 공통 컴포넌트는?○ 1. Header :○ 2. 버튼 :▶ 순서1_ 스타일 시트▶ 순서2_ Props 설정 :1_ 버튼 내부 Text2_ 경우에 따른 버튼에 적용될 스타일 Type3_ 버튼에 적용할 핸들러★ 버튼의 Type은 3가지 : 긍정(초록) , 부정(뻘겅) , 일반(회색)버튼 type에 따라 적용법 (참고 : classList 이지랄이랑은 다른거임) :- App.js- Button.jsimport "./Button.css";function Button({ text, onClick, type }) { return ( {te.. 2025. 1. 20.
(16).이정환_react.js강의_감정일기장_프로젝트_3강_폰트,이미지,레이아웃 설정 ● 1_ Font 사용하기 : 전체 페이지에 font 적용하기▶순서1_ 위의 파일을 다운 받은 뒤, [public] 폴더에 font 파일을 저장한다.▶순서2_ 그리고 전체 페이지에 적용해야 하므로, [index.css]에 아래와 같은 스타일 시트 추가하기-index.css#font-face{ font-family : "NanumPenScript"; //니가 적고싶은 명을 자유롭게 적으셈 src : url(`폰트파일의 상대경로`);}body * {//전체 웹페이지에 적용하기 font-family : "NanumPenScript";}● 2_ 이미지 적용하기 : import로 불러와 변수로 사용한다.▶순서1_ 위의 파일을 다운 받은 뒤, [src] 폴더내의 [assets]에 이미지 파일들을 저.. 2025. 1. 20.

티스토리툴바