일기장 프로젝트에서 구현한 간단한 모달 메뉴 사용을 정리하고자 한다. # 모달 메뉴가 있는 컴포넌트 (부모) : Diary.js # 모달 메뉴 버튼 컴포넌트 (하위자식) : ToggleMenu.js # 모달 메뉴 버튼을 클릭했을 때 나오는 메뉴 컴포넌트 (최하위 자식) : EditAndRemove.js 순으로 컴포넌트가 이루어져 있다. 부모 컴포넌트 -> id props를 넘겨주면서 자식 컴포넌트를 호출한다. import ToggleMenu from "../components/ToggleMenu"; const Diary = () => { ... return ( ... ... ) }; export default Diary; 자식 컴포넌트 - open의 값이 true이면 메뉴가 열리고, false이면 닫히도..

이번 감정 일기장 프로젝트에 moment.js 라이브러리를 사용한 내용을 정리하고자 한다. 한국어로 사용하기 - 요일이나 시간 사용 시 영어로 뜨게 되는데, 한국어로 뜨게 하고 싶으면 따로 import 문을 추가해주면 된다. import moment from "moment"; import "moment/locale/ko"; format 형식 지정 - 원하는 방식으로 format을 설정할 수 있어 매우 편하다. - 아래는 프로젝트에서 사용했던 format 설정 코드들이다. format("YYYY-MM-DDTHH:mm") // 2023-01-15T23:00 -> datetime-local input의 형식 format("MM월 DD일 dddd") // 01월 15일 일요일 format("LT") // 오후 ..

인프런 이정한님의 한입크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 ] 강의 수강 후 강의의 내용을 정리하며 공부한 것을 쓴 게시글입니다. 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, - 강의 소개 | 인프런... www.inflearn.com 최종 결과물 : https://cjy00n-emotion-diary.web.app/ Emotion Diary What's your today emotion? cjy00n-emotion-diary.web.app 소스코드 : https://g..

인프런 이정한님의 한입크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 ] 강의 수강 후 강의의 내용을 정리하며 공부한 것을 쓴 게시글입니다. 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, - 강의 소개 | 인프런... www.inflearn.com 삭제 기능 구현 - 일기 아이템 클릭 후 수정하기 페이지에서 삭제 기능 구현 - 추후 홈 화면에서도 삭제 가능하도록 구현할 예정 - diaryEditor의 헤더의 rightChild에 삭제 버튼 추가 - 새 일기 쓸 때에는 삭제 기능이 구..

인프런 이정한님의 한입크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 ] 강의 수강 후 강의의 내용을 정리하며 공부한 것을 쓴 게시글입니다. 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, - 강의 소개 | 인프런... www.inflearn.com 페이지 구현 - 일기쓰기 ( /New ) - 일기 새로 쓰기 기능과 일기 수정하기 기능의 editor 부분은 동일하기 때문에 DiaryEditor 컴포넌트를 생성하고 각각의 컴포넌트에서 불러오기 할 것 Header - < 버튼은 뒤로가기 ..

인프런 이정한님의 한입크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 ] 강의 수강 후 강의의 내용을 정리하며 공부한 것을 쓴 게시글입니다. 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, - 강의 소개 | 인프런... www.inflearn.com 페이지 구현 - 홈(/) Header 세팅하기 - Home의 헤더에는 가운데 텍스트로 현재 리스트의 년/월이 있고, 왼쪽에는 이전 월로 이동하는 버튼, 오른쪽에는 이후 월로 이동하는 버튼이 있다. - 현재 리스트의 날짜 (curDate) ..

인프런 이정한님의 한입크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 ] 강의 수강 후 강의의 내용을 정리하며 공부한 것을 쓴 게시글입니다. 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, - 강의 소개 | 인프런... www.inflearn.com 페이지 라우팅 0 - React SPA & CSR # 라우팅 : 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정 - 경로를 정해주는 행위 자체 # 페이지 라우팅 : 요청에 명시되어 있는 경로에 따라 알맞은 페이지를 선..

인프런 이정한님의 한입크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 ] 강의 수강 후 강의의 내용을 정리하며 공부한 것을 쓴 게시글입니다. 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, - 강의 소개 | 인프런... www.inflearn.com - 소스코드 : https://github.com/cjy921004/reactDiary GitHub - cjy921004/reactDiary Contribute to cjy921004/reactDiary development by crea..

인프런 이정한님의 한입크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 ] 강의 수강 후 강의의 내용을 정리하며 공부한 것을 쓴 게시글입니다. 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, - 강의 소개 | 인프런... www.inflearn.com React에서 사용자 입력 처리하기 - DiaryEditor 컴포넌트가 필요한 것 작성자 일기본문 감정 점수 - 작성자, 일기 본문, 감정 점수를 state로 저장하고 변경한다. - 하나의 state로 객체 배열을 관리할 수 있다. - 초..

인프런 이정한님의 [ 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 ] 강의 수강 후 강의의 내용을 정리하며 공부한 것을 쓴 게시글입니다. 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, - 강의 소개 | 인프런... www.inflearn.com Why React? React는 Component 기반의 UI 라이브러리이기 때문이다. React는 선언형 프로그래밍 방식이다. React는 Virtual DOM을 사용한다. Create React App # React.js : No..