간단한 회원가입 서비스 만들기

 

* 전문지식 없음, 코드 없음. 생각의 흐름에 가까움-

 

스프링부트와 vue js 3.0을 이용해 회원가입 서비스를 만들게 되었다.

요건은 없다.

그저 유저 등록, 수정 기능만 제공하면 된다.

풀스택이라고 하기도 뭐 하게 약간의 화면만 만져봤고, 그 마저도 컴포넌트를 드래그 앤 드롭으로 제공하는 프레임워크로 만들고 복붙한 자바 스크립트를 수정한 게 전부다.

그래서 뷰로 화면을 그려야 한다고 했을 때 막막했는데 우리의 gpt와 함께라면 못할 게 없다.

 

다행히 내가 처음은 아니고 남들이 이미 맨땅에 헤딩해서 살짝 편평해진 땅에 같이 헤딩을 하면 되는 상황이었다.

표준도 없고 요건도 없고 가진 건 남이 만들어 놓은 화면 몇 개와 api 몇 개, DB 정보였지만 왠지 모르게 자신이 있었다.

복붙은 내 특기이니까 ~!

 

무엇을 생각해야 할까?

멋지게 화면정의서와 기능정의서를 작성하고 시작하면 좋겠지만 유저 등록, 수정 서비스에 기교가 필요하지 않을 것 같았다. 우선 DB에 접속해 봤다. 유저테이블은 유저 ID, 이름, 비밀번호, 등록인, 등록일자, 수정인, 수정일자, 이메일, 상태코드, 역할코드 등 아주 간단한 컬럼으로만 이루어져 있었고, 앞서 시작한 사람들이 DB에 밀어서 등록한 테스트용 유저 3개뿐이었다.

 

그러면 DB에 등록을 위해서는 최소한 유저 ID, 이름, 비밀번호, 이메일은 입력받아야 한다.

그래서 화면에 해당 항목들을 입력받는 v-text-field를 추가했다. 

상태코드는 '0', 역할코드는 남들과 똑같이 '00'을 세팅하기로 했다.

API를 만들어야 하니까 다시 스프링으로 넘어와서, 정말 최소한의 정보만 입력받아 해당 테이블에 저장하는 서비스를 만들었다. 등록인, 수정인은 이름과 같게, 등록일자, 수정일자는 LocalDate.now()로 넣었다.

그리고 등록버튼을 클릭 시 등록 API를 호출하게 했더니 등록이 된다! 자신감이 생겼다.

비밀번호는 입력받은 그대로 저장하면 위험하니까 암호화를 해야겠지? 하고 알아보니 BCryptPasswordEncoder로 하면 된다고 해서 적용해 봤다. encode를 하면 암호화가 되고, decode는 안되지만 matches로 검증도 가능하다. 대박!!

다음은 화면에서 입력받는 필드의 값이 입력되지 않을 때 필수 값 검증을 적용했다. 

서버에서 검증을 해도 되지만 api 호출 이전에 화면에서 걸러졌으면 좋겠어서 찾아보니 watch로 검증할 수 있어서 추가했다. 

 

완전 기본적인 등록 기능은 구현했으니 수정 기능을 추가해야 했다.

 v-if를 사용하면 v-card를 전환할 수 있다는 걸 알게 되었고, 한 화면에서 라디오 버튼으로 등록/수정 양식을 선택하도록 하기로 했다.

사실 내가 만든 회원가입 페이지는 로그인 후 보이는 곳에 있었다. 로그인을 하기 위해 회원 가입을 하는 건데, 로그인을 해야지 그 창이 보이는 게 아이러니한 상황. 하지만 우리가 만드는 시스템은 일반인(?)이 아닌 관리자용이기 때문에, 아무나 원한다고 회원가입을 할 수 있는 게 아니었다. 그래서 이미 가입이 되어있는 다른 관리자가 계정을 추가해 준다는 개념으로 내부에 만들었다가 결국 바깥으로 꺼내기로 했다. 꺼낼 때는 라디오가 등록으로 선택된 것처럼 해서 그 v-card만 팝업으로 띄워주면 돼서 오히려 좋았다.

우선 수정을 하려면 기존 유저를 조회해야 하니 유저 ID로 조회하는 api를 만들었고, 비밀번호와 등록/수정인 등 내가 임의로 세팅한 정보 말고 사용자가 입력했던 정보만 조회해 오도록 텍스트 필드로 구성했다.

이름이나 이메일은 그냥 바꿀 수 있도록 하는 api를 먼저 만들었다. 비밀번호도 변경을 해야 하는데.. 다른 사이트의 비밀번호 변경 창을 보니 별도로 있는 경우가 많은 것 같아 v-checkbox로 비밀번호 변경 여부를 선택하기로 했다. 

선택하는 경우 우선 3개의 필드를 추가로 보여줌!

현재 비밀번호, 변경할 비밀번호, 변경할 비밀번호 확인

셋 다 화면에서 필수값 검증을 해야 하고, 변경할 비밀번호와 확인이 일치하는지도 검증했다.

수정 버튼을 클릭 시 호출하는 api에서 비밀번호 변경 여부가 true인 경우에는 BCryptPasswordEncoder.matches로 현재 비밀번호를 검증하는 로직을 추가했다. 그리고 key값인 id 기준으로 입력으로 들어오는 항목들만(empty가 아닌 것) SQL 업데이트문에 적용하는 로직을 작성했다.

 

그렇게 정말 최소한의 기능만을 가진 회원가입 기능을 만들었다.

외부에서 Sign in 버튼을 누르면 등록 창을 팝업으로 띄워줬고, 유저 테이블에 등록이 되는 걸 확인했다.

 

로그인 후 유저관리 페이지에 접속하면, 로그인한 유저 ID 기준으로 정보를 가져와서 보여준다.

유저 ID를 제외한 모든 정보는 (비밀번호 포함) 변경이 가능하다.

되긴 되는데.. 영 찜찜한 게 있었는데 오늘 그 화면을 사용하던 과장님이 정규식 좀 넣자~ 라며 당연한 걸 빠트렸다는 말투로 말했다. 정규식을 넣어야 하는구나...........! 내가 느꼈던 찜찜함은 input으로 한글 특수문자 공백 등이 전부 들어갈 수 있다는 것. 난 정말로 몰라서 안 넣은 건데 아는 사람이 보기엔 너무 당연한 게 맞는구나 싶었다.

그리고 지금은 다른 걸 하고 있는데 다시 저 페이지를 개선할 때에는 원할 때는 입력한 비밀번호 마스킹을 해제하는 눈 버튼을 넣을 거다. 

뷰와 자바스크립트에 대한 지식이 거의 없지만 적절한 복붙과 gpt 선생님의 도움만 있다면 할 수 있 다 !

주중에 다른 비전공자 친구와 이야기하다가 잘 몰라도 일단 해보는 것의 중요함?에 대해 이야기를 나눴었다.

내가 지금 찍고 있는 점들이 나중에 이어져서 선이 되는 순간이 오겠지?!

그런데 뷰티파이의 컴포넌트들에 대해서는 시간을 갖고 공부해봐야겠다.