로그인 + 게시판(3: 회원 가입)

로그인화면에서 회원가입 버튼을 누르면 Link 속성을 통해서 회원 가입 url로 이동하게 된다. 

AddLogin.js

회원 가입에는 중복체크 버튼이 있고 비밀번호를 재입력해 확인하는 기능이 있다. 이 과정을 통과하면 가입이 가능하고 다시 로그인화면으로 돌아가는 버튼도 만들었다. 

중복체크 시 호출되는 idCheck 함수부터 살펴보자.

AddLogin.js  idCheck()

로그인과 마찬가지로 fetch를 사용하여 해당 url에 get요청을 하여 받아온 데이터값을 비교한다. 

아이디가 입력되지 않았을 경우 경고창을 띄우고 for문을 사용하여 일치하는 ID값이 있는지 확인한다.

사용가능한 아이디이면 usableID을 true로 변경해주었다

server.js  get: '/api/login/id'

server.js에서는 해당 url에 대한 get 요청은 다음과 같이 실행하였다. 

회원가입은 form태그로 작성되었다. 가입버튼을 누르면 실행되는 handleFormSubmit()에 대해 살펴보도록 하자.

AddLogin.js  handleFormSubmit()

usableID값이 true이면서 비밀번호란과 비밀번호 확인란이 같을 경우 정상적으로 userData에 값을 담아 리액트의 axios를 사용하여 해당 url에 post 요청을 하였다. 정상적으로 이루어지면 history.push를 사용하여 다시 /login 으로 이동하도록 구현하였다.   

server.js  post: '/api/login/id'

'/api/login/id'로 post 요청이 들어왔을 시 처리는 다음과 같다. req.body에 값들을 DB에 추가하였다.