I T H

- Calender 작업중 데이터를 useState의 배열로 담아 파라미터로 백앤드에 보내야 되는데, 전달이 제대로 되지 않았다. - newEvent는 정상적으로 뜨고있음. - 하지만 밑에 스케줄 데이터를 state값에 넣어서 전달될 때에는 값이 뜨지 않았다. - 당연히 백앤드 로직에서도 파라미터를 제대로 받지 못하고 있음. [ 해결방법 ] - 이전 코드는 파라미터를 백앤드에 전달할 dateInsert함수를 캘린더 클릭 이벤트시에 호출하게 하였지만, useEffect에서 전달할 데이터(파라미터)의 값이 변할 때에 호출되게 수정하였다. // 데이터 입력 start useEffect(() => { dataInsert(); }, [newDateInsert]); [ 결과화면 ] - 배열 데이터가 잘 뜨고있고, ..

- Calender의 데이터 값을 관리하는 useState 부분에서 다음과 같은 에러가 발생했다. [ 에러 해결 전 코드 ] [ 해결 방법 ] - calenderEvent의 start와 end의 타입이 Date로 되어있다. - 데이터 상태값을 관리하는 useState의 start와 end의 값에 "toDate()"를 넣어주었다. const [events, setEvents] = useState([ { start: moment().toDate(), end: moment().add(1, "hours").toDate(), title: "default", }, ] as unknown as CalendarEvent[]); [ 에러 해결 후 코드 ]

이번 챕터는 카카오와 로그아웃, 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키를 가져온..