230120 - 페어코딩 - 토큰을 이용한 로그인

GitHub

https://github.com/100space/friday_local

GitHub - 100space/friday_local

 

 

STEP 1. 기본 라우터 설계

 

STEP 1-1 테이블 설계

STEP 1. 

회원가입 및 로그인 구현하는 목표가 주어졌고, 협업을 위한 기본 라우터를 설계하고 문서화하는 작업을 함. 라우터를 설계하면서 DB 테이블도 설계한 후에 문서로 남겨놓았다. 흔히 api document 라고 하는 것을 해보려 했는데 처음해보는 거라 어떻게 얼마나 적어둬야 하는 몰라서 간단하게만 적어봤다.

 

나는 front-end 영역을 맡았다.

 

STEP2. 기본페이지 구현

STEP 2.

메인페이지 구성 및 gnb를 만들고 처음 설계했던 라우터에 맞게 링크 걸기

 

STEP3. 로그인 페이지

STEP 3.

메인 페이지에서 gnb를 통해서 로그인 페이지로 진입, 화면은 HTTP통신을 이용한 render 방식으로 하였고,

모든 페이지를 보면 알겠지만 고정 되어있는 로고 부분이 있다. 이 부분은 nunjucks 문법을 이용한 블록지정으로 layout을 설정함

아이디가 없는 사람은 회원가입을 할 수 있게 회원가입 페이지를 추가함.

STEP 4.

STEP 4. 

회원가입 페이지, 기본적인 정보를 받고 post를 이용하여 백엔드로 데이터를 보내줌.

아이디와 닉네임은 중복되지 못하게 중복체크 구현 (밑에서 설명)

STEP 5.

STEP 5.

회원가입에 완료가 되면 welcome 페이지를 통해 본인이 기입한 정보에 대해 다시 확인할 수 있게 함.

 

STEP 6-1.

STEP 6-2.

STEP 6.

아이디와 닉네임은 중복이 되지 않도록 중복체크를 함.

여기서 AXIOS를 통해 비동기통신을 하고 input 이벤트를 이용해 input박스 내에 데이터의 변화에 따라 중복체크를 할 수 있게함.

예를 들어 123 을 중복체크한다고 하면, 1일때, 12일 때, 123일 때, 계속 중복체크를 하여 별도의 버튼을 한번 더 누르는 과정을 없앴다.

 

 

STEP 7.

STEP 7.

회원가입 후 메인페이지로 돌아와 다시 로그인을 하게 되면 쿠키에 back-end에서 처리한 jwt 값이 들어가게 되고,

토큰 값 유무를 통해 sign in, sign up 버튼이 logout 버튼으로 바뀌게 되고, username값을 이용해 환영멘트를 보여 줌.

 

 

---

기본적인 내용만 작성한 것이라 CSS도 많이 안 넣었지만 기본적인 기능 구현에 초점을 두며 작업했다.

필요한 라우터만 그냥 마구잡이로 만들었던 이전과 달리 설계부분도 시도를 해봤는데, 생각보다 어렵고 부족한게 느껴졌으며, 어떤식으로 해야할지 더 많은 문서들을 봐야 감이 잡힐 것 같다.

그래도 협업을 하는 느낌으로 2인이서 작업을 해봤는데, 문서가 있고 없고의 차이가 큰 것 같다. 문서가 있다면 서로 작업에 집중 할 수 있으며, 무엇을 작업해야하는지 하나하나 서로 상의할 필요가 없어진 느낌이 였다.

 

 

---