I T H

지난 챕터에서는 캘린더 라이브러리 사용하기에 대한 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..

이번 챕터는 카카오와 로그아웃, unlink 로직을 구현할 것이다. 지난 챕터 카카오 로그인(2) - backend에서 토큰과 사용자데이터를 받았는데, 그 토큰을 가지고 로그아웃과 unlink기능을 만들어 보겠다. Frontend [ src / layout / Header ] - 코드 수정 및 추가 - 지난 챕터에서 kakao Login을 할때는 loginType이 1로 들어가게 처리했고, 데이터를 프론트로 보내 리덕스 스토어에 저장했다. - loginType을 리덕스에서 가져와서 조건식으로 loginType이 1일 경우에는 다른 로그아웃 함수를 타도록 구현한다. const loginType = useAddSelector((state) => state.user?.userData?.loginType); /..

이번 챕터는 카카오로 로그인하기 backend 로직을 구현하겠다. - frontend에서 받아온 인가코드를 가지고 토큰을 받아오고, 그 토큰을 가지고 사용자 데이터를 받아온다. - 카카오 공식문서 참고 - 코드 작성에 들어가기 앞서 User 컬렉션( = 테이블)에 컬럼 "loginType"을 추가했다. Backend [ src / models / User.js ] - 코드추가 loginType: { type: Number, default: 0, }, [ src / routes / login.js ] - 코드추가 1. 토큰 발급 - 카카오 공식문서에 있는 예제이다. rest_api_key와 redirect_uri 그리고 인가코드를 axios를 통해 post 방식으로 보내주면 토큰을 발급 받을 수 있다. -..

이번 챕터에서는 소셜 로그인에 대한 로직을 구현할 것이다. 그중에서 '카카오로 로그인하기'에 대한 flow를 공식문서를 통해 작성해 봤다. 방식 : REST API 준비과정 - Kakao Developer https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com - 코드 구현에 들어가기 앞서 rest api key, redirect url을 준비하자! 1. 애플리케이션 추가 2. 앱 키 - REST API키 발급 - 앱 키를 발급받는데 rest api방식으로 구현할 것이므로, REST API키를 가져온..