20210304 16일차 회원가입 로직 구현(미완)

회원가입 로직 구현

 

회원가입 정보 작성

모든 기입 정보를 형식에 맞게 작성해야 회원가입이 가능하다.

만약 하나라도 잘못된 부분이 있거나 누락된 경우, 아래와 같은 notification 모달창이 나오며 에러처리한다.

약관도 마찬가지.

그리고 적절히 기입 했더라도 중복되는 email/mobile/nickname 이 있을경우의 결과를 서버로부터 받아 에러처리한다.

 

 

회원가입 정상 처리

회원가입이 정상적으로 처리되면 accessToken 을 받아오는데, 이를 세션 스토리지에 저장할 생각이다. 즉, 페이지를 닫으면 세션 스토리지에 있는 토큰 은 사라진다. 다시 로그인, 회원가입을 하면 토큰을 받을 수 있다.

 

 

개선할점

 

• 모달창이 너무 많이 뜬다. 중복되는 이메일/닉네임/휴대폰번호가 있을 경우에만 모달이 나타나도록 변경해야 한다. 그 이외의 기입 형식이 잘못된 경우는 말풍선 을 띄워 주의를 주는게 나을 것 같다.
• 타입스크립트를 사용하며 any type 을 남발하며 사용했다. 적절히 변경해줘야겠다. 뿐만 아니라 타입스크립트 공부가 더 필요하다. 개념이해가 부족하니 어떻게든 되면 그만이라는 잘못된 생각이 든다.
• 스타일드 컴포넌트 안에 있는 일반 엘리먼트들의 스타일 정리가 필요하다. const style = {key: value} 형식 말고, 스타일드 컴포넌트 내부에서 div { color: red;} 이런식으로 작성해야겠다.

그이외에도...

	.catch((error) => {
		const errResponse = error.response.data.message;
		if (errResponse === "mobile already exists") {
			setModalMessage("전화번호가 이미 존재합니다.");
			setModalVisible(true);
		} else if (errResponse === "email already exists") {
			setModalMessage("이메일이 이미 존재합니다.");
			setModalVisible(true);
		} else if (errResponse === "nickname already exists") {
			setModalMessage("별명이 존재합니다. 변경해주세요!");
			setModalVisible(true);
		}
	});

서버로 회원 가입 제출 버튼을 누르게 되면 서버에서 모바일/이메일/별명 을 확인하여 에러메세지를 보내주기 때문에

위와 같이 응답에 맞는 모달을 띄워주기는 하는데... 맞는 방법인지는 의문이 든다.

 

casting operator

TypeScript allows you to override its inferred and analyzed view of types in any way you want to. This is done by a mechanism called "type assertion". TypeScript's type assertion is purely you telling the compiler that you know about the types better than it does, and that it should not second guess you.

 

 

In react,

var inputValue = (<HTMLInputElement>document.getElementById(elementId)).value;

In tsx,

let inputValue = (document.getElementById(elementId) as HTMLInputElement).value;

 

 

출처: stackoverflow.com/questions/12989741/the-property-value-does-not-exist-on-value-of-type-htmlelement

 

Typescript input onchange event.target.value

 

: stackoverflow.com/questions/40676343/typescript-input-onchange-event-target-value