일기장 프로젝트에서 구현한 간단한 모달 메뉴 사용을 정리하고자 한다. # 모달 메뉴가 있는 컴포넌트 (부모) : 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 # 라우팅 : 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정 - 경로를 정해주는 행위 자체 # 페이지 라우팅 : 요청에 명시되어 있는 경로에 따라 알맞은 페이지를 선..
프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 자릿수 더하기 문제 설명 자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다. 제한사항 N의 범위 : 100,000,000 이하의 자연수 ▼ 나의 풀이 function solution(n) { var answer = 0; while (n > 0) { answer += n % 10; n = parseInt(n / 10); } return answer; } ▼ 반복문을 이용하지..