무비 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 - Node.js express ( Router, Body-Parser, Cookie-parser, Bctyptjs, multer, ) DB - Mongo DB (Mongoose) |
설명
회원가입 : https://make-somthing.tistory.com/11
4-1. [React + Node.js Express] 회원가입 기능
[React+Node.js Express] 회원가입, 로그인, 회원 정보 수정, 게시판 기능을 구현해 놓고 필요할 때 필요한 기능만 추가해 사용할 수 있는 나만의 보일러 플레이트 토이 프로젝트를 진행하고 있다. 프론
make-somthing.tistory.com
로그인 : https://make-somthing.tistory.com/12
4-2. [React + Node.js Express] 로그인 기능
회원가입을 완성시켰으니 로그인 기능을 만든다. 프론트에서 유저가 폼에 입력한 데이터를 받아 백엔드로 전송하고, 백엔드는 받은 데이터를 DB에 들어있는 데이터와 비교한다. 만일 입력받은
make-somthing.tistory.com
유저 인증 : https://make-somthing.tistory.com/13
4-3. [React + Node.js Express] 유저 인증 기능
예를 들어 쇼핑몰 사이트가 있다고 해 보자. 쇼핑몰 웹사이트는 장바구니 기능을 이용하기 위해 '현재 누가 로그인 되어있는지, 또는 로그인되어있지 않은 상태인지' 를 각 상품 주소를 이동할
make-somthing.tistory.com
로그아웃 : https://make-somthing.tistory.com/14
4-4. [React + Node.js Express] 로그아웃 기능
회원가입과 로그인을 만들었으니 로그아웃을 구현한다. 로그아웃의 기능은 간단하다. 유저 인증을 프론트에서 보낸 JWT토큰을 통해 인증하는 방식으로 진행하고 있으므로, 먼저 db에 있는 JWT 토
make-somthing.tistory.com
회원 정보 수정 : https://make-somthing.tistory.com/18
4-5. [React + Node.js Express] 회원 정보 수정 기능
모든 사이트의 핵심 기능에는 회원가입, 로그인, 로그아웃이 있다. 그리고 회원가입이 가능한 웹사이트는 '아이디 찾기, 비밀번호 찾기, 회원정보 수정'이 가능해야 한다. 이번에는 세가지 중 회
make-somthing.tistory.com
프로필 사진 업로드 : https://make-somthing.tistory.com/22
4-6. [React + Node.js Express] 프로필 사진 업로드
서버에 사진을 업로드하려면 multer 라이브러리를 이용해야 한다. 여기서 서버는 로컬 서버를 가리킨다. 로컬 서버가 아닌 클라우드에 업로드를 하려면 AWS와 같은 클라우드 서비스와 함께 다른
make-somthing.tistory.com
게시판 CRUD : https://make-somthing.tistory.com/24 , https://make-somthing.tistory.com/26
4-7. [React + Node.js Express] 게시판 - 게시글 작성, 이미지 업로드 ( React-Quill )
티스토리나 네이버 블로그처럼, 어떤 글을 작성할 때는 글작성 전용 에디터가 필요하다. 에디터를 직접 만들어도 좋겠지만 그랬다가는 마음에 불화가 일어날 것 같아서 라이브러리를 사용하기
make-somthing.tistory.com
4-8. [React + Node.js Express] 게시판 - 게시글 리스트, 상세보기, 수정, 삭제 ( React-Quill ) CRUD
풀스택 CRUD 포트폴리오의 마지막 단계, 게시글 리스트 불러오기와 상세보기, 수정 및 삭제 단계이다. 간단해 보여도 은근히 처리해야 할 부분들이 자잘하게 많다. 글을 작성한 작성자만 자신의
make-somthing.tistory.com
댓글