본문 바로가기

팀프로젝트_기록일지/React_이정환_감정일기장_프로젝트14

(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.
(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.
(15).이정환_react.js강의_감정일기장_프로젝트_2강_Link태그 ● 1_ Link 컴포넌트 태그 :○ 복습 : Rouutes 컴포넌트 + Route태그 : Route태그의 path={"경로"}, element 속성 = {컴포넌트}- App.jsimport {Routes , Route} from 'react-router-dom';function App(){ return ( }> )}○ Link 태그 사용 : to속성={"경로"}- App.jsimport {Routes , Route, Link} from 'react-router-dom';//import에 Link 컴포넌트 추가function App(){ return ( Home .. 2025. 1. 20.

티스토리툴바