5-4. [React + Express + MongoDB] Perfect Boiler - 회원정보 수정 및 비밀번호 변경

우선은 로컬로 직접 회원가입을 진행한 회원일 경우에만 회원정보를 수정할 수 있도록 구현하였다. 추후 sns 로그인 유저는 이메일만 수정할 수 있도록 구현할 예정. aws 요금 이슈가 발생해서 프로필 사진은 aws가 아닌 다른 루트를 찾아봐야 할 것 같다 ㅠㅠ ............................................................................................................. 다 울었으니 할 일을 해야지 일단 이메일과 닉네임을 변경하는 회원정보 수정 로직을 구현하고, 다른 페이지에서 비밀번호를 변경하는 내용을 구현하여 배포까지 완료했다. 저번에 했던 거라서 금방 슉 진행했다. 이메일 인증 라우터는 회원가입 시 구현했던 미들웨어와..

• format_list_bulleted 프로젝트/풀스택 프로젝트
• · 2023. 2. 1.
• textsms

5-3. [React + Express + MongoDB] Perfect Boiler - SNS 로그인 : passport 를 이용한 카카오, 구글, 네이버, 로그인과 JWT RefreshToken, AccessToken 사용하기

passport-kakao를 사용하면 카카오 전략을 구현하여, 카카오 로그인을 할 수 있다. passport-kakao는 내부적으로 session에 생성된 req.login을 호출하는데, 자동으로 호출되는 req.login은 passport의 기존 session 방식을 사용하기 때문에, 내가 직접 구현한 JWT 로직을 사용할 수 없었다. 이 때문인지 세상 모든 블로그에 세션을 이용한 로그인만 있길래 모험삼아 처음부터 직접 구현해보았다. req.login을 직접 호출하고 세션을 사용하지 않음을 설정한 뒤에, req.login을 로컬 로그인처럼 직접 커스텀하면 passport-kakao를 사용하더라도 세션을 사용하지 않고 JWT와 쿠키를 이용한 로그인을 구현할 수 있다. passport-kakao 를 포함한..

• format_list_bulleted 프로젝트/풀스택 프로젝트
• · 2023. 1. 27.
• textsms

5-2. [React + Express + MongoDB] Perfect Boiler - passport 로컬 로그인과 JWT RefreshToken, AccessToken 발급하고 유저 인증하기 + 로그아웃

구글, 카카오, 네이버 로그인 구현을 편하게 해보기 위해 passport 라이브러리를 사용하였다. 그러나 passport 라이브러리는 기본적으로 Serialize, Deserialize를 통해 세션에 유저의 정보를 저장한다. 내가 배포하는 환경은 아주 작은 무료 서버이고, 서버의 메모리를 사용하는 세션을 사용하는 일은 줄이고 싶어서 쿠키를 이용하는 JWT로 바꾸어 보았다. 도중에 passport-jwt를 이용하다가, 안그래도 라이브러리를 많이 사용하고 있는데 라이브러리 의존성이 너무 높아지는 것 같기도 하고, 그래봤자 jwt 전략을 하나 더 만들게 해줄 뿐이라 코드가 더 복잡해지는 느낌이 들어 바닐라로 리프레시 토큰과 엑세스 토큰을 인증하고 재발급하는 미들웨어를 구현했다. 소요 기간 - 1일 Fronte..

• format_list_bulleted 프로젝트/풀스택 프로젝트
• · 2023. 1. 24.
• textsms

5-1. [React + Express + MongoDB] Perfect Boiler 유지보수 => 로딩창 만들기 + alert창 모달창으로 바꾸기

인증메일 구현을 완성하고 보니, 노드메일러를 통해 메일이 발송되기까지 약 5~10초정도의 딜레이가 걸리는 사실을 알게 되었다. 따라서 로딩 상태를 만들어주고, loading State가 true일 경우에 로딩창을 띄운 뒤 완성되면 사라지도록 하기 위해 loading 스테이트를 추가해 주었다. const [loading, setLoading] = useState(false); 그리고 못생긴 alert창을 바꿔주기 위해 모달을 새로 디자인했다. props를 통해 메세지를 전달받아, 그때그때 재사용 할 수 있도록 만들었다. import React, { useState, useEffect } from "react"; import Button from "react-bootstrap/Button"; import M..

• format_list_bulleted 프로젝트/풀스택 프로젝트
• · 2023. 1. 21.
• textsms

5. [React + Express + MongoDB] Perfect Boiler - 이메일 인증을 하는 로컬(자체 로직) 회원가입 구현

이번에는 제대로된 ! 보일러 플레이트를 만들기 위해, 이메일 인증을 하는 자체 회원가입 로직을 작성하였다. 저번 코드를 요모조모 뜯어보니 엉망진창 . . 인 것 같아서, 해당 프로젝트를 보완할 겸 새 프로젝트를 만들어 시작했다. 이번 글에서 약간 수정하기는 했지만, 프런트엔드는 먼저 완성하였다 : https://make-somthing.tistory.com/84 이 과정을 진행하면 굳이 게시판을 만들지 않아도, 회원가입 하나만으로 CRUD를 한번에 경험할 수 있다. 임시 데이터를 생성했다가 수정했다가 지웠다가 읽었다가 해야하기 때문이다... * express와 mongodb를 사용하는 글이기 때문에, express와 몽고db 연결이 되어있다고 가정하고 진행합니다. 소요 기간 - 1일 Frontend - ..

• format_list_bulleted 프로젝트/풀스택 프로젝트
• · 2023. 1. 20.
• textsms

4. [React + Express] 풀스택 보일러 플레이트 ( 회원가입, 로그인, 로그아웃, 회원 정보 수정, 게시글 CRUD )

무비 API 이용 풀스택 웹 프로젝트 소요 기간 : 12일 겪었던 문제들 : 에러 하나, 에러 둘, 에러 셋, 에러 넷, 에러 다섯 Github : https://github.com/chalinuna/Boiler 실제 사용 데모 영상 사용 언어와 기술, 라이브러리 및 DB Frontend - React (useState, useEffect, useNavigate, useLocation, useParams, useSelector, useDispatch, Axios, Proxy(Http-proxy-middleware), Route, ReduxToolkit, redux-persist, react-quill, ArrayBuffer, Uint8Array, Blop, FormData, 등... ) Backend -..

• format_list_bulleted 프로젝트/풀스택 프로젝트
• · 2022. 12. 18.
• textsms