I T H

이번 시간에는 styled components를 사용해서 Footer 영역을 간단하게 작성하겠다. styled components는 "Css in Js"에 속한다. 그렇다면 css in js란 무엇인가? 스타일 코드를 작성할때 css파일에 작성을 하는것이 아닌 button과 같은 컴포넌트에 삽입하는 것으로, javaScript 또는 TypeScript 환경에서 스타일을 작성할 수 있다. jsx또한 javaScript안에 html이 있는 문법처럼 Css in Js 또한 javaScript안에 css가 있다고 생각하면 쉽게 이해할 수 있다. - styled components 설치와 import는 작성된 부분이 있어서 아래부분을 참고하면 된다. https://devth.tistory.com/103 { ret..

지난 챕터에서는 캘린더 라이브러리 사용하기에 대한 frontend 로직을 설명했는데, 이번 시간에는 backend로직을 통해 캘린더를 완성해보겠다. Backend [ src / models / Schedule.js] 1. 스키마 만들기 - 캘린더에 대한 데이터를 저장할 스키마를 만든다. - 여기서 userId는 회원가입의 id처럼 unique한 값을 가지면 안된다. 중복된 값을 가져야함. 예를 들어서 "사용자아이디: A, 제목: B", "사용자아이디:A, 제목:C" 와 같이 중복을 허용해야됨. 만약 unique값을 넣으면 바로 에러가 뜰 것이다. - calender의 타입은 스케줄의 주제에 맞게 분배하기 위해서 넣어주었고, start는 스케줄의 시작시간, end는 스케줄의 종료시간이다. 그리고 title..

이번 시간은 react big calendar 라이브러리를 사용해서 스케줄관리에 대한 코드를 작성해 보겠다. 구현에 들어가기 앞서 react-big-calendar 라이브러리를 설치한다. 추가적으로 날짜관리 라이브러리인 moment.js도 같이 설치 해준다. [ 설치 ] npm install --save react-big-calendar npm install moment [ import ] - "react-big-calendar" 라이브러리와 "moment.js"를 설치 했다면 아래 부분을 import 해준다. import { Calendar, View, DateLocalizer } from "react-big-calendar"; import moment from "moment"; import { mom..

- 이 에러는 키가 중복되어서 생긴 에러인데, 이 에러를 해결하기 위해서 먼저 스키마 구조를 살펴보겠다. 스케줄의 타입은 중복될 수 있음에도 unique로 지정되 있는데, 이걸 없애야 된다. - 첫번째로 스키마 구조에 unique 값이 아닌데도 unique가 설정되어 있는지 살펴본다. - 이제 다시 새로고침을 누르고 다시 시도해 보자! - 그런데도 에러가 뜬다면 db에 index기록이 남겨져 있는 경우가 있다. - 여길 보면 불필요한 index가 여러개 설정되어 있었다. 이부분을 모두 없애 주었고, 현재는 해당 컬렉션(테이블)의 필요한 _id 만 남겼다. [ 결과 화면 ] - 정상적으로 데이터가 들어감.

moment.js는 날짜와 시간을 조작할 수 있도록 도와주는 라이브러리다. 현재시간을 출력할 수 있고, 시간을 원하는 형식으로 format하거나 원하는 시간을 추출할 수 있다. 그리고 날짜를 더하거나 뺄 수 있다. [ 설치 ] npm install moment [ 사용법 ] 1. 현재 시간 출력 const time = moment(); 2. Format - 원하는 형식에 맞게 format을 지원한다. const time = moment(); const formatData = time.format(); - 커스텀도 가능함. const formatData2 = moment().format("YYYY년 MM월 DD일 hh시 mm분 ss초"); 3. 시간 하루 전 , 시간 하루 후 - 현재날짜 기준으로 하루 전..