7.기능 구현(4) - 회원가입(실시간 문구, 유효성 체크, 비동기 처리)

🦮 스스로를 위한 프로젝트 일지 가이드

1️⃣ 프로젝트를 진행하며 '왜' 그렇게 했는가

2️⃣ 어떤 문제가 생겼고, 어떻게 해결하였는가

3️⃣ 프로젝트를 되짚어보며 개선할 점이 있는가

 

✅ 실시간 문구

회원가입 시 아이디, 비밀번호 등을 입력하면서 조건을 만족하는지 실시간으로 체크하고 조건을 알려줄 수 있는 문구를 띄우기로 했다.

 

1️⃣ 프로젝트를 진행하며 '왜' 그렇게 했는가

 

회원정보 보안에 있어 아이디나 비밀번호가 한두 자리인 것보다 복잡하고 길이가 긴 정보가 더 좋기 때문에 어느 정도 조건이 필요했다.

그리고 사용자 입장에서 실시간으로 조건을 체크해주는 것이 편리하므로 문구를 구현하고자 했다.

 

2️⃣ 어떤 문제가 생겼고, 어떻게 해결하였는가

 

js에서 이벤트핸들러와 제이쿼리로 아이디, 비밀번호, 비밀번호 재확인, 이름, 연락처 이렇게 총 5칸에 문구를 띄우는 방식이다.

 

칸에서 키 입력 이벤트 / 마우스 클릭했다가 떼는 이벤트가 일어나면 칸의 배경색을 바꾸고 문구를 띄우는 함수인데 이걸 5칸에 적용하려면 함수를 5번 작성해야 해서 중복되는 부분이 많아졌다.

 

 

그래서 if문 조건이 다른 비밀번호 확인 칸을 제외하고는 공통되는 부분을 최대한 추출해 함수로 만들고 다른 부분만 매개변수화하여 코드 중복을 방지했다.

 

이렇게 해서 2개의 함수로 5개의 칸에 대한 로직을 완성할 수 있었다.

 

 

✅ 유효성 체크

실시간 문구에 이어 최종적으로 모든 조건을 만족했는지 확인하는 유효성 체크 기능을 구현했다.

 

1️⃣ 프로젝트를 진행하며 '왜' 그렇게 했는가

 

실시간 안내 문구가 있다고 해도 사용자가 잘못된 조건의 정보를 입력할 가능성이 있기 때문에 최종적인 확인이 필요하다.

 

문구를 띄우는 함수 안에 플래그를 같이 넣고 회원가입 버튼을 눌렀을 때 플래그의 최종 상태를 보고 유효성 체크를 하게끔 구현하였다.

 

 

 

✅ 비동기 처리

유효성 체크를 만족할 경우 비동기 방식으로 데이터를 전송해 회원가입을 진행했다.

 

1️⃣ 프로젝트를 진행하며 '왜' 그렇게 했는가

 

유효성을 체크하는 플래그를 실시간으로 확인한 후 회원가입 진행 여부가 결정되기 때문에 비동기로 구현해야 했다.

 

데이터를 전송하는 과정에서 REST API를 적용했다.

 

REST API 설계 규칙에 따라 url에는 자원만 표시하고, 자원의 상태와 행위는 http 메소드로 분리하여 코드의 가독성을 향상시킬 수 있었다.

 

 

2️⃣ 어떤 문제가 생겼고, 어떻게 해결하였는가

 

@RequestBody를 써도 VO에 매핑이 되지 않는 오류가 발생했었다.

자료 조사 결과 전자정부 프레임워크의 REST API 관련 설정이 원인으로 어노테이션 관련 설정을 수정하여 해결되었다.

 

https://hyewonkim1996.tistory.com/17

[eGov]전자정부 표준프레임워크(3.10.0) RESTful API 설정, @RequestBody 오류, GetMapping 404 오류