[Youtube 클론코딩] 중복 회원가입 방지, 상태 코드 및 로그인 기능 구현하기

중복 회원가입 방지

우리는 앞서 schema에 email과 username을 unique로 설정했다.

이 unique key는 무엇을 의미할까. 바로 해당 데이터베이스 테이블에 해당 값들이 중복되지 않는다는 것이다.

따라서 우리가 같은 email 또는 username으로 데이터베이스에 저장하려고 시도하면 DB측에서 에러가 발생한다.

(dup key Error)

 

우리는 이러한 에러가 발생하면 사용자에게 피드백을 주어야 한다.

그러기 위해선 클라이언트 사이드에서 에러를 감지한 뒤, 그 에러를 화면에 표시해주어야 하는데

이는 Model.exists()를 통해서 구현할 수 있다.

그런데 자세히 보면, 위 두 함수는 변수명만 조금 다를 뿐 같은 구조를 취하는 것을 볼 수 있다.

이를 합쳐주려면 어떻게 해야할까. 바로 mongo DB의 $or 를 사용하면 된다.

$or — MongoDB Manual

$or — MongoDB Manual

우리가 만약 다음처럼 username과 email을 같이 쓴다면 and의 개념으로 받아들인다.

그런데 $or를 이용하면 둘 중 하나만 있어도 exist는 true를 반환하게 될 것이다.

따라서 위처럼 구조를 간소화할 수 있다.

 

비밀번호 확인 기능 넣기

우리는 보통 회원가입을 할 때, 비밀번호에 오타를 입력할 경우를 대비하여 같은 비밀번호를 한번 더 입력받도록 만든다.

이는 간단히 비밀번호 확인란을 하나 더 구현한 뒤 값이 일치하는지만 확인하면 된다.

상태 코드

우리는 종종 회원가입을 하거나 로그인을 하면 브라우저에서 '이 계정을 저장하시겠습니까?' 라며 제안하는 모습을 본다.

그런데 과연 브라우저는 이 값들이 유효한 값인지 알고서 제안하는 것일까?

정답은 '아니오'이다.

 

이 제안의 비밀은 바로 '상태코드'에 숨겨져 있다.

HTTP response status codes - HTTP | MDN (mozilla.org)

HTTP response status codes - HTTP | MDN

우리는 서버에 페이지를 요청하게 되면, 페이지 정보와 함께 '상태 코드'를 받는다.

상태 코드를 검색해보면 200 일 때는 '정상', 400일 때는 '에러'를 의미한다.

브라우저는 username과 password에 값이 입력된 뒤, 'form submit'이벤트를 감지하고 status code가 200인 경우 정상적으로 request가 완료된 것으로 간주하고 이러한 제안을 하는 것이다.

 

그러므로 우리는 상태코드를 400으로 고쳐서 브라우저가 제안하지 않도록 막아줄 필요가 있다.

status code를 수정하기 위해선 response.status(Number)를 이용한다.

기존에 에러를 감지하던 코드들에도 전부 status코드를 삽입해준다.

 

그렇다면 잘못된 경로로 접근했을 때 상태코드가 200이면 어떤 일이 발생할까.

브라우저는 history 객체가 존재한다. 이 객체는 브라우저가 그동안 방문한 페이지들의 정보를 담고 있는데,

상태코드 200을 받았으므로 잘못된 페이지에 접근한 기록또한 저장하게 된다.

따라서 이번에는 404 코드를 반환해서 이곳이 잘못된 접근 경로임을 브라우저에게 알려주어야 한다.

그 유명한 404 Not Found

로그인 기능

이제 드디어 대망의 로그인 기능이다.

우리는 앞서 비밀번호를 해싱하여 암호화된 문자열을 DB에 저장했다.

로그인 할 때는 입력받은 문자열을 해싱했을 때 결과물이 DB에 저장된 문자열과 같으면 올바른 비밀번호를 입력한 게 된다.

 

이렇게 비교해주는 메소드도 bcypt에 내장돼있는데 바로 bcypt.compare()이다.

bcrypt - npm (npmjs.com)

bcrypt

myPlaintextPassword는 입력한 문자열을, hash에는 기존에 해싱된 문자열을 넣어주면 된다.