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

[cloudType] Boiler - 클라우드 타입에서 React 프런트와 Express 백엔드 배포하고, 연결하기

EB_썼으면_압축만_450번함 aws는 안정성이 뛰어나고 효율적인 관리가 가능한데다 유명하지만, 나같은 프리티어 개발자에게는 언제 과금의 위험이 생길지 모른다는 크나큰 두려움이 있다. 배포 자동화를 해도 되는데 그럼 과금당할 여지가 너무 커짐.. 그렇다고 백엔드를 수정할 때마다 압축파일을 업로드하자니 너무 번거롭다. 예전에는 이런 과정을 해결해주는 헤로쿠를 통해 배포가 가능했지만, 프리티어 서비스를 종료한 헤로쿠로는 더이상 백엔드를 무료로 배포할 수 없다. 헤로쿠의 차세대로 요즘은 Fly.io 를 많이 선택하는 것 같았는데, 찾아보니 국내에! 일정 용량의 무료 배포를 지원하는 클라우드 서비스가 있다고 해서 한번 사용해 보기로 했다. 깃허브 연결도 되고, 깃허브 액션을 통해 배포 자동화도 할 수 있다고 한..

• 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

[React] 보일러 프로젝트 - 프론트 완성 , + (01.20 회원가입 백엔드까지 완성)

My Boiler Project 프론트엔드 완성 : 소요기간 : 1.5일 기획 및 디자인 : https://make-somthing.tistory.com/83 Demo : https://web-boiler-frontend-1jx7m2gld43p7bv.gksl2.cloudtype.app/ CHALIE BOILER web-boiler-frontend-1jx7m2gld43p7bv.gksl2.cloudtype.app 사용 언어와 기술, 라이브러리 및 DB Frontend - React, Figma (useNavigator, useState, React-Router-Dom@6, useRef, SCSS(node-sass 라이브러리)) 배포 - Cloudtype 프로젝트 제작 계기 passport, react-que..

• format_list_bulleted 프로젝트/React 프론트 프로젝트
• · 2023. 1. 19.
• textsms

[프로젝트 기획 - 풀스택] 회원가입, 로그인, 이메일 인증, 회원 정보 수정 보일러 플레이트 UI 디자인

보일러 플레이트 - 풀스택 프로젝트 express의 passport 라이브러리를 사용하고, React의 redux와 JWT의 refresh Token을 사용해 네이버, 구글, 카카오 로그인이 포함된 더 완벽한 보일러 플레이트를 만들고자 UI를 디자인하였다. 모바일 페이지에서는 화면이 모바일 비율에 맞게 보이도록, 웹앱 디자인으로 구성하였다. 사용할 툴 Frontend - React Backend - Node.js Express DB - MongoDB 와 MySql Figma 와이어프레임 회원가입, 로그인, 아이디/비밀번호 찾기, 회원 정보 수정, 비밀번호 수정, 회원 탈퇴 기능을 제공한다. 프로토타입 https://www.figma.com/file/7kRAyMDHczs7AFVh5tuHXP/%EB%B3%B..

• format_list_bulleted 프로젝트/프로젝트 기획
• · 2023. 1. 17.
• textsms