[React] 회원가입 컴포넌트, 유저정보 수정 컴포넌트 수정

회원 가입 페이지와 유저 정보 수정 페이지 작업을 진행중 이다.

회원가입페이지

유저정보수정페이지

 

이렇게 비슷한 폼이기 때문에 같은 코드를 재활용 하려고 했다.

이런 형태의 컴포넌트로 구성하려고 했고 이런 형태로 개발 중이었다.

하지만 다시 분리를 해야될 것 같다.

회원가입 페이지와 유저정보 수정페이지의 코드의 모양만 비슷할 뿐 분기처리 및 상태관리는 상당히 다르기 때문이다.

이런 형태로 pageName이 "UserRegister"인지 아닌지 나눠야 될 부분이 한두군데도 아니고 고려해야 될 내용도 다르기 때문이다.

컴포넌트를 다시 분리하려는 이유는,

1. 코드의 가독성이 떨어진다.

 - 루트 컴포넌트가 회원가입페이지인지, 유저정보수정페이지인지에 따라 적용되는 내용은 완전히 다르다.

 - 하지만 작성되는 코드는 비슷한 형태를 띈다.

 - 코드의 가독성이 떨어지고, 다른 작동을 하는 비슷한 "모양"의 코드가 있을 경우 수정하는데 추가적인 오류가 발생할 수 있다.

2. 필요없는 공간의 낭비가 발생한다.

 - 예를 들어 회원가입 페이지는 초기 유저상태가 필요없다.

 - 하지만 유저정보페이지는 초기 유저상태가 필수적이며 바뀔 유저상태도 필요하다.

 - 회원가입페이지에 접속하더라도 이러한 유저정보페이지의 추가적인 상태가 존재하게 된다.

3. 루트 컴포넌트(회원가입페이지, 유저정보수정페이지)에 따라 분기가 발생하는데, 이에 따라 예기치 못한 상황이 생길수도 있다.

 - 말 그대로 예기치 못한 상황이 생겼을 경우, 대처가 어려울 수도 있다.

 - 1번의 문제와 더불어 수정하더라도, 수정된 내용으로 인하여 또다른 오류를 야기할 수도 있다.

 

개발하며 위와 같은 이유 등으로 수많은 문제가 발생될것이라고 생각된다... ㅜㅜ

 

회원가입 컴포넌트

1. 프로필 이미지 업로드 

 - 필수 데이터가 아니다.

 

2. 이메일

 - 필수 데이터이다.

 - 이메일 폼에 맞추어야 한다

 - 중복확인을 해야된다.

 - 중복확인 후 이메일내용이 변경될 경우 중복확인을 다시 해야한다.

 - 위의 조건사항에 맞추어 input box아래에 경고문을 표시한다.

 - 위의 조건사항과 맞지않은게 있다면 빨간색 경고문을 표시하고, 조건사항에 모두 만족한다면 초록색 완료문을 표시한다.

 

3. 닉네임

 - 필수 데이터이다.

 - 중복확인을 해야된다.

 - 중복확인 후 이메일내용이 변경될 경우 중복확인을 다시 해야한다.

 - 위의 조건사항에 맞추어 input box아래에 경고문을 표시한다.

 - 위의 조건사항과 맞지않은게 있다면 빨간색 경고문을 표시하고, 조건사항에 모두 만족한다면 초록색 완료문을 표시한다.

4. 비밀번호

 - 필수 데이터이다.

 - 비밀번호 폼에 맞추어야 한다.

 - 위의 조건사항에 맞추어 input box아래에 경고문을 표시한다.

 - 위의 조건사항과 맞지않은게 있다면 빨간색 경고문을 표시하고, 조건사항에 모두 만족한다면 초록색 완료문을 표시한다.

 

5. 비밀번호 확인

 - 필수 데이터이다.

 - 비밀번호와 일치하여야 한다.

 - 위의 조건사항에 맞추어 input box아래에 경고문을 표시한다. 

 - 위의 조건사항과 맞지않은게 있다면 빨간색 경고문을 표시하고, 조건사항에 모두 만족한다면 초록색 완료문을 표시한다.

 - 비밀번호, 비밀번호 확인 후 모두 조건에 맞족 했지만 두 데이터중 변경이 생겨 조건사항에 맞지 않는게 발생할 경우 고려하여 표시하여야 한다.

 

회원 정보 수정 컴포넌트

 - 회원 정보 수정 컴포넌는 유저데이터를 가지고 있어야 한다

 - 이메일, 별명, 프로필 이미지

 - 기존 유저정보와, 현재 유저 정보와 비교하여 수정된 내용이 없다면 수정된 내용이 없다고 표시를 해주어야 한다.

 - 프로필 이미지, 닉네임, 비밀번호 중 바뀐 내용이 하나라도 있다면 DB의 유저 정보를 수정한다.

 - 수정하기 버튼을 클릭했을때 바뀐 데이터가 있는지 확인을 해야한다.

1. 프로필 이미지 업로드

 - 필수 데이터가 아니다.

 - 기존 유저 프로필 이미지가 있는 경우와 없는 경우로 나뉜다.

 

2. 이메일

 - 바꿀 수 없는 데이터이며 readonly상태여야 한다.

 

3. 별명

 - 필수 데이터가 아니다.

 - 별명을 바꿀 경우 중복확인을 해야한다.

 - 중복 확인 후 별명을 재입력 했는지 확인해야된다.

 - 별명 입력칸이 비어있을 경우 유저정보 수정에 반영하지 않도록 한다.

 - 별명칸이 채워져있고 모든 조건을 만족했을 경우 초록색 완료문을 표시한다.

 

4. 비밀번호

 - 필수 데이터가 아니다.

 - 비어있을 경우 유저정보 수정에 반영하지 않는다.

 - 입력되어 있는 경우 비밀번호 폼에 맞추어야 한다.

 - 비밀번호칸이 채워져있고 모든 조건을 만족했을 경우 초록색 완료문을 표시한다.

 

 

5. 비밀번호 확인

 - 비밀번호 칸이 채워져 있을 경우 필수데이터이며, 채워져 있지 않는 경우 필수데이터가 아니게 된다.

 - 비밀번호 칸이 비어있지 않고 비밀번호 확인 칸이 비어있을 경우 경고문을 표시하여야 한다.

 - 비밀번호 칸이 비어있지 않고 비밀번호와 비밀번호 확인 칸의 데이터가 일치하는지 확인하고 일치할경우 완료문을, 일치하지 않을 경우 경고문을 표시하여야 한다.

 - 비밀번호 칸이 비어져 있는데 비밀번호 확인칸이 채워져 있을 경우에 대한 경고문 표시도 필요하다.

 - 비밀번호 확인칸이 채워져있고 모든 조건을 만족했을 경우 초록색 완료문을 표시한다.

 

 등과 같이 회원가입 컴포넌트와 유저정보수정 컴포넌트의 패턴은 크게 차이가 발생한다.

비슷한 로직과 비슷한 ui를 이용하여 컴포넌트를 재활용 해보려 했지만, 비슷한 폼의 컴포넌트를 따로 작성하여, 사용 하는 cost보다 위와 같은 패널티에 따른 cost가 훨씬 더 클것으로 예상이 되며, 기존 로직은 컴포넌트를 따로 작성하여 수정할 생각이다.