minngaeng / make-todolist

[Create todo list - CRUD with axios]

소개

Membership registration and login authentication were implemented and redirected through this. After logging in, you can CRUD the todo list you made.

회원가입 및 로그인 인증을 구현하고 이를 통한 리다이렉트 처리가 가능케 하였습니다. 로그인 후 자신이 만든 toodo list 의 CRUD 가 가능합니다.

시작 가이드

Installation

$ git clone 
$ npm install
$ npm start

주요 기능 📦

• 📝 회원가입

  • axios를 사용해 API와 연동. 성공 시 로그인 페이지로 이동. 중복 가입 시 경고 메시지 출력.

• 📝 로그인

  • axios 를 사용하여 API 와 연동하여 로그인 처리를 진행.

• 📝 Todo List

  • CRUD

• 🔒 리다이렉트 처리 - AuthGuard

  • 토큰 검증 : 사용자의 인증 상태를 확인 후 필요 시 로그인/회원가입/할일 목록 페이지 리다이렉션

디렉토리 구조

📦wanted_api
 ┣ 📂public
 ┃ ┣ 📂data
 ┃ ┣ 📂images
 ┃ ┗ 📜index.html
 ┣ 📂src
 ┃ ┣ 📂assets
 ┃ ┣ 📂components
 ┃ ┃ ┗ 📂AuthGuard : 로그인 여부에 따른 리다이렉트 처리 진행하는 폴어
 ┃ ┃ ┃ ┗ 📜AuthGuard.jsx
 ┃ ┣ 📂pages
 ┃ ┃ ┣ 📂Signin
 ┃ ┃ ┣ 📂Signup
 ┃ ┃ ┗ 📂Todo
 ┃ ┣ 📂styles
 ┃ ┣ 📜Router.js
 ┃ ┣ 📜index.css
 ┃ ┗ 📜index.js
 ┣ 📜.gitignore
 ┣ 📜README.md
 ┣ 📜package-lock.json
 ┗ 📜package.json

🧠 구현 과정에서의 배운 점 벨로그 보러가기

❶ 할 일 수정하기 구현 과정 보러가기
❷ state 렌더링에 따른 UI 변화 벨로그 보러가기
❸ 목록을 재 렌더링 하는 과정에서 map vs filter 선택 하는 고민 과정 보러가기
❹'비동기 상태에 대해 조금 알게 되다!' 보러가기
❺ 새로운 TODO 추가할 때 컴포넌트 렌더링의 과정 이해하는 벨로그 보러가기
❻ 스프레드 연산자로 기존의 목록과 새로운 목록을 합치는 과정 벨로그 보러가기
❼ '리다이렉트 처리에 대해 배웠다!' 벨로그 보러라기