프로젝트/풀스택 프로젝트16

• 

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

• 

  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 를 포함한.. 프로젝트/풀스택 프로젝트 2023. 1. 27.

• 

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

• 

  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.. 프로젝트/풀스택 프로젝트 2023. 1. 21.

• 

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

• 

  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 -.. 프로젝트/풀스택 프로젝트 2022. 12. 18.

• 

  4-8. [React + Node.js Express] 게시판 - 게시글 리스트, 상세보기, 수정, 삭제 ( React-Quill ) CRUD 풀스택 CRUD 포트폴리오의 마지막 단계, 게시글 리스트 불러오기와 상세보기, 수정 및 삭제 단계이다. 간단해 보여도 은근히 처리해야 할 부분들이 자잘하게 많다. 글을 작성한 작성자만 자신의 글을 수정 및 삭제할 수 있도록 버튼 노출 여부를 설정해 주어야 하고, 데이터가 렌더링 된 이후에 컴포넌트가 그려지도록 해야 한다. 또 ref를 이용해 저장했던 정보는 어떻게 참조해야 하는지도 알아보자. Frontend 먼저 게시글 리스트를 보여주는 페이지를 만든다. 각 제목을 클릭하면, 포스트의 _id를 백엔드로 보내 게시글 상세보기 페이지로 진입시킬 것이다. 하단의 페이지네이션은 아래 코드를 사용했다. 별도의 컴포넌트로 만들고 props를 이용해 값을 전달한 뒤, 게시글의 수에 맞는 만큼만 수를 증가시킨다. 온전.. 프로젝트/풀스택 프로젝트 2022. 12. 15.

• 

  4-7. [React + Node.js Express] 게시판 - 게시글 작성, 이미지 업로드 ( React-Quill ) 티스토리나 네이버 블로그처럼, 어떤 글을 작성할 때는 글작성 전용 에디터가 필요하다. 에디터를 직접 만들어도 좋겠지만 그랬다가는 마음에 불화가 일어날 것 같아서 라이브러리를 사용하기로 했다. 누구나가 사용하는 위지윅 에디터를 사용했다면 속편했을텐데 Quill을 사용하겠다는 객기를 부려서 강제로 js실력이 업그레이드 되었다. (속터짐은 덤) Quill은 에디터에 이미지를 삽입하면 base64로 이미지에 src를 저장한다. 그러나 base64는 1000자가 넘는 문자열이므로 그대로 db에 저장하기에는 너무나 거대하다. 그렇다고 일반적인 방식으로 handles: { image: imageHandler } 를 커스텀하여 사용하면, 이미지를 업로드 할 때마다 서버에 업로드하게 된다. 이럴 경우 에디터에서 필요없는.. 프로젝트/풀스택 프로젝트 2022. 12. 14.

• 

  4-6. [React + Node.js Express] 프로필 사진 업로드 서버에 사진을 업로드하려면 multer 라이브러리를 이용해야 한다. 여기서 서버는 로컬 서버를 가리킨다. 로컬 서버가 아닌 클라우드에 업로드를 하려면 AWS와 같은 클라우드 서비스와 함께 다른 라이브러리를 사용해야 한다. 일단은 로컬 서버, 즉 서버를 만든 폴더에 업로드하는 것으로 진행해본다. Frontend input태그에 type 속성을 file로 설정했을 경우, 크롬에서의 기본 스타일은 이렇게 생겼다. 파일 선택 버튼을 기본으로 제공해주고, 파일을 업로드하면 파일의 정보가 오른쪽에 뜨는 형태이다. 하지만 프로필 업로드를 위해 사용하기에는 너무나 못생겼다. React는 uesRef()라는 훅을 가지고 있는데, 이 훅을 이용하면 다른 DOM 요소에 접근할 수 있다. 따라서 태그와 태그를 사용하여, 태그.. 프로젝트/풀스택 프로젝트 2022. 12. 10.

• 

  4-5. [React + Node.js Express] 회원 정보 수정 기능 모든 사이트의 핵심 기능에는 회원가입, 로그인, 로그아웃이 있다. 그리고 회원가입이 가능한 웹사이트는 '아이디 찾기, 비밀번호 찾기, 회원정보 수정'이 가능해야 한다. 이번에는 세가지 중 회원정보 수정 기능을 만들어본다. 프로필 사진은 multer 등을 이용하여 여러가지 복잡한 과정을 거쳐야 하기 때문에, 틀만 만들어놓고 다음에 구현할 것이다. Frontend Topbar의 닉네임을 클릭하면 회원 정보를 누를 수 있는 메뉴가 뜬다. 회원 정보는 /user/about 라우터로 구현했다. Redux에 저장된 회원 정보를 불러오는 식이다. 저번에는 localStorage에 redux의 내용을 모두 저장했는데, 혹시 모를 위험을 방지하기 위해 브라우저가 꺼지면 회원 정보가 브라우저에서 지워지도록 하기 위해 Re.. 프로젝트/풀스택 프로젝트 2022. 12. 6.

• 

  4-4. [React + Node.js Express] 로그아웃 기능 회원가입과 로그인을 만들었으니 로그아웃을 구현한다. 로그아웃의 기능은 간단하다. 유저 인증을 프론트에서 보낸 JWT토큰을 통해 인증하는 방식으로 진행하고 있으므로, 먼저 db에 있는 JWT 토큰을 파기하여 유저 인증 절차가 불가능하게 만들어주면 된다. 그 후 Redux를 통해 사용한 LocalStorage(또는 SessionStorage)를 비워주고, 혹시 모르니 브라우저 쿠키도 파기해준다. Redux는 새로고침하면 사라지기 때문에 굳이 지워주지 않아도 되는데, 그냥 연습용으로 dispatch 한번 더 불러와 사용해본다. 모든 절차가 완료되면 새로고침 코드를 적용하여 페이지를 정돈해준다. 새로고침을 하면 모든 컴포넌트가 다시 마운트되기 때문에, 유저가 새로고침 할 필요 없이 메인 페이지가 바뀌는 모습을 .. 프로젝트/풀스택 프로젝트 2022. 12. 5.

• 

  4-3. [React + Node.js Express] 유저 인증 기능 예를 들어 쇼핑몰 사이트가 있다고 해 보자. 쇼핑몰 웹사이트는 장바구니 기능을 이용하기 위해 '현재 누가 로그인 되어있는지, 또는 로그인되어있지 않은 상태인지' 를 각 상품 주소를 이동할 때 마다 알아내야 한다. 또한 로그인되어 있는 상태라면 해당 유저의 정보를 매번 불러와야 한다. 지난 시간에 로그인을 구현하면서, 로그인을 하면 jwt 토큰을 발급해 쿠키에 저장하기로 했다. jwt 토큰은 암호화된 토큰인데, 반대로 말하면 복호화했을 경우 처음 토큰으로 이용된 값을 알아낼 수 있다. 우리는 user_id를 이용해 jwt토큰을 만들었으므로, 토큰을 복호화하면 user의 _id가 나오게 된다. 따라서 매 페이지를 이동할 때 마다 토큰을 복호화하여 db에 등록된 _id인지를 검사하면 로그인된 유저의 정보를 알.. 프로젝트/풀스택 프로젝트 2022. 12. 5.