portfolio2023

프로젝트 소개

코드스테이츠에서 프론트 엔드 부트 캠프를 수료한 후, 지금까지 배운 것을 더 심화시켜 새로운 프로젝트를 시도해 보고 싶어
작업하게 되었다. GOOGLE OAUTH로 간단한 회원가입, 로그인을 구현을 시도하여 개념이 부족하다고 생각했던 부분을 심화 학습하고
또 실습하여 프론트와 백의 흐름을 이해하는데 많은 도움이 되었다.

사용한 기술

Client

🥦 React

context api로 공통 state 관리

state는 context를 사용, dispatch 부분은 useReducer를 사용

로그인, 로그아웃 하면서 카드 내용이 바뀌는 부분

바뀐 모드의 스타일이 theme로 전달될 수 있도록

canvas 모션이 적용되는 부분과 화면 크기에 반응하는 부분을 분리

🥦 Styled-Component

모드 별로 변하는 스타일을 묶어서 theme provider로 적용

자주 쓰는 스타일 묶음을 mixin으로 변수화 하여 사용

🥦 Canvas

custom hook으로 기본 화면 출력하는 부분을 만들어

실제 모션이 구현되는 부분과 분리

🥦 React-Query

토큰 및 로그인 유지 요청을 위해 custom hook안에 React Query 사용

Server

🥦 Express

Express로 서버 구현

🥦 express-session

회원 정보 및 토큰을 memoryStore에 저장하여 요청하면

서버에서 memoryStore의 정보를 제공하는 방식으로 구현

🥦 Mongoose

mongoDB를 사용하여 회원 가입시 정보 저장

탈퇴하면 정보 삭제

🥦 Google Oauth

구글 클라우드의 api로 구글 계정으로 회원가입, 로그인 구성

구현 화면

회원 가입	로그인
로그 아웃	회원 탈퇴