[React][Nestjs] 유저정보수정, 회원탈퇴기능 구현

React에서 유저 정보 수정기능과 회원 탈퇴 기능을 만들었다.

우측 상단 회원 대표사진을 누르면 회원이름 및 정보수정, 로그아웃, 탈퇴를 선택할 수 있다.

1. 회원탈퇴를 선택하였을 경우 token이 삭제되고, DB에 저장되어 있는 유저가 없어진다.

server에 post로 logout, delete(+ 파라미터email) 2가지 요청을 한다.

server의 유저 삭제 코드는 다음과 같이 간단하게 구현되어 있다.

 

2. 유저정보수정

ui는 회원가입 페이지의 모양을 그대로 가져왔다.

하지만 대표 이미지, 이메일. 유저명은 입력이 되어 있는 상태이며 이메일은 수정할 수 없다.

현재 가입되어있는 유저의 정보를 수정 하면 수정된 정보가 화면에 출력된다.

간단하게 유저이름과 사진을 수정하였다.

수정 전

수정 전 DB 테이블

수정 후

수정 후 DB 테이블

 

 

유저 정보수정에 대한 소스코드는 회원가입페이지 구현할 때 사용한 소스코드에서 수정하여 사용하였다.

 

일단 bolier-plate프로젝트에서 구현하고 싶은 기능은 모두 구현하였다.

그 다음 프로젝트로 진행하기 전,

1. React에 대한 기본적인 내용을 다시 정리

2. 현재 화면에서 더 나은 UI를 위해 Bootstrap html css 정리

3. server, client의 소스코드를 점검 및 정리(재사용성을 위하여)

3가지를 진행할 것이다.