BODYLIKE 로그인/회원가입 창 구현

 

 

 

👆 로그인-회원가입 구현 움짤 

 

 

 

BODYLIKE Project

 

 

 

 

총 5명이서 구성된 Team coner ( FE : 3, BE : 2 )에서

2주간 오로지 학습용으로 bodylike구현했는데

그 중 로그인, 회원가입 창 / 상세 페이지 구현을 맡은 기록을 적습니다.

 

로그인/회원가입 창

 

 

 

 

 

---

 

 

 

구현한 기능

 

 

 

• 로그인창에서 회원가입 버튼 누를시 회원가입 창으로 넘어감
• 회원가입창/ 로그인창에서 아이디 창 '@', 5글자 && 비밀번호 창 5글자 이상 입력시 회원가입 버튼 활성화 (비밀번호 영문 소대문자 없을 시 알림창 뜸)
• 로그인창에서 id, pw 기입 후 로그인 버튼 누를 시 서버와 통신 후 로컬 스토리지에 토큰 발급, 메인창으로 넘어감
• 왼측 상단 로고 클릭시 메인으로 이동

 

 

 

---

 

 

 

 

로그인창 / 회원가입창은 레이아웃은 거의 비슷하다

 

큰 사진이 왼쪽에 위치하고 

인풋 2개가 있는 것 까지!

 

(사실 처음에 회원가입창에 이름 인풋까지 만들었다가 데이터 들어오는 것이 없다는 백엔드 측과의 소통 오류로 인해 없앴다)

 

 

 

로그인 / 회원가입 창의 다른 점은

 

 

왼쪽 사진

로그인/회원가입 title

회원가입 버튼/ 로그인 버튼

 

 

정도였는데

로그인 회원 가입 창 둘 다 '회원가입 하기' 버튼이 있지만 기능은 다르다

 

로그인 창의 회원가입 버튼은 회원가입 창으로 가는 버튼이고

회원가입 창의 회원가입 버튼은 유저의 정보를 받아 토큰을 발급하는,  정말 '회원가입을 위한 버튼' 이다

 

 

 

 

로그인 창 / 회원 가입은 총 두 개의 js 파일로 만들었고 (scss 제외)

이 login.js 파일엔 같은 html 안에서 location을 써 다른 url을 가질 수 있도록 했다

 

LOGIN_DATA/ SIGNUP_DATA를 상수 데이터로 만들어 페이지가 바뀌면 각각 객체에 담긴 값을 보이게끔 했고

한 버튼에 각각 다른 기능이 들어가야 하므로 이를 isSelectLogin 에 담아 User.js에 넘겨주었다

 

 

 

👆 User.js 가 받은 형태

 

title, btnText, img 라는 이름으로 다시 구조분해할당을 해주었다

 

 

 

 

 

 

다른 파일은 User.js 라는 파일인데 html 과 각각 input 과 버튼이 가진 기능을 담았다

 

Fetch 함수를 써 서버와 통신하고

로그인하는 버튼 (서버에게 Input 값을 보내어 회원 여부를 판단하고 일치하다면 토큰을 발급해 로컬스토리지에 넣게 함)과 

회원가입 하는 버튼 (서버에게 input 값을 보내어 JWT를 이용해 토큰을 발급하게 함) 을 페이지 URL마다 다르게 넣었다

 

이는 onClick {isSelectLogin ? toLogin : toSignup} 으로 기능 구현했다

 

 

 

가장 어려웠던 건 바로 로그인 fetch 함수였는데

.then 에서 if() 문을 어떤 기준으로 짜야하는지 매우 난감했다

 

초반엔 response.message === 'login success' 로  짰으나 메세지로 판단할 경우

백엔드 측에서 메세지 문구만 바꾸면 오류가 쉽게 날 수 있다는 피드백을 받아

 

두번째 .then 에서 response.status === 200 로 짰으나

첫번째 .then 에서 json 형태로 변환한 탓에, status === 200 을 읽지 못해 자꾸 오류가 났다

 

 

그래서 이를 멘토님의 도움을 받아 response.status === 200 로 판별한 후에 json() 객체로 변환하는 식을 짰는데

 

 

이런 형태가 되었다 🤔

통신은 가능하지만 뭔가 찝찝한...

 

 

 

 

그래서 후에 다시 리팩토링을 했는데

 

 

 

이렇게 최종본이 나왔다

response 에 accessToken 이 있는지 없는지 여부만 판단하는 것!

코드가 훨씬 깔끔해졌다

 

 

 

 

 

---

 

 

 

그리고 로그인/ 회원 가입창을 만들며 든 의문 한 가지

 

 

서버와 연결하기 전에 만들었던 로그인창은 반드시 유효성 검사가 필요했는데

이번 프로젝트를 통해서 서버에서는 정규식을 써서 유효성 검사를 더욱 치밀하게 한다는 것을 알았다

 

 

 

 

그렇다면 굳이 프론트엔드 / 백엔드 둘 다 유효성 검사를 하는 이유는 무엇일까? 🤔 

 

 

 

이를 우아한 형제들 기술 블로그에서 알 수 있었다

 

 

출처 : https://techblog.woowahan.com/2645/

 

줄이자면

 

 

 

 

사용자의 입력은 무조건 검증해야한다는 것!

 

그렇지 않을시 나쁜 예로 값을 개발에 간단한 상식을 가진 사람이 900만원 어치 상품을 주문하면서

주문 폼의 결제 가격을 폼 전송 직전에 9,000원으로 바꿔쳤다고 한다 🙀

 

이 일을 알아낼 동안 얼마나 많은 사람들이 가격을 조작해서 주문했을까? 

 

 

 

개발은 결국 사람이 하는 것이기 때문에

유효성 관련해선 언제가 실수가 날 수 있다

 

그래서 유효성 검증은 이중 삼중으로 걸어놓을 정도로 정말 중요한 것 같다

 

 

 

 

 

 

 

 

👇 github readme 용 움짤