[Project] Westagram 회원 가입 & 로그인

이태권 (Taekwon Lee)·2022년 6월 15일
RequestResponsedjangohttpprojectpythonstatus codewestagram로그인협업회원 가입

[Project] Westagram

목록 보기
3/3
post-thumbnail

"아담의 창조" (미켈란젤로, 1512)

원래는 신이 아담을 창조하는 장면이지만, 서로 손가락을 접촉하는 게 프론트엔드-백엔드의 통신 같아서 해당 그림을 가져 왔다.

Westagram 회원 가입 & 로그인 (feat. 협업)

아래 글에서 프론트엔드와 백엔드를 때때로 각각 FE, BE로 바꾸어 표현했다.

회원 가입 & 로그인 실습

오늘 Client 간 Server 간 요청, 응답을 처음으로 실습했다.

여태까지는 각자 공부를 하다가
FE와 BE가 만나 팀을 이루어 처음으로 같이 작업을 하였다.
협업을 체감할 수 있어서 인상적이었다.

🖥 0. 사전 작업

Django 초기 세팅

Django의 구체적인 초기 세팅에 대한 내용은 이 곳을 참고하기를

서버 실행

초기 세팅을 무사히 마쳤다면 아래와 같이 정상적으로 서버가 실행될 것이다.

  • 이제는 BE-FE 간에 통신을 해야 하기에
  • BE의 PC의 IP 주소를 받아서 접속을 할 수 있다.
  • 따라서 runserver 뒤에 0:8000을 입력하는 걸 잊지 말자.

MySQL Database 생성

POST 테스트

POST가 작동하는지를 보기 위해
임의의 데이터(이메일, 비밀번호)를 생성하였다.

아래와 같이 생성하였다

  • email: exam@naver.com
  • password: Exam123!

성공적으로 SUCCESS가 떠서 생성되었다.

MySQL Database table 확인

MySQL에도 성공적으로 생성 되었다.

서버 외부 접속 허용

(주의) 동일한 와이파이로 접속을 해야 외부 접속을 할 수 있다.

아래의 명령어를 입력하면 내 고유의 ip 주소를 알 수 있다.

ipconfig getifaddr en0

이제부터 아래의 0:8000에서 0은 바로 위에서 언급한 고유의 ip 주소를 통해 접속 할 수 있다.

python manage.py runserver 0:8000

🖥 1. 회원 가입

  1. FE에게 API와 연결 되어 있는 엔드포인트와 서버의 IP 주소를 알려 준다
  2. 해당 엔드포인트로 Client에서 필요한 값(이메일, 비밀번호 등)을 body에 담아 request를 보낸다.
  3. 받은 이메일의 중복 여부를 database 조회를 통해 확인한다.
  4. 존재하는 이메일일 경우 Response로 에러 메시지와 에러 코드를 반환한다.
  5. 입력 받은 이메일과 비밀번호의 형식이 사이트의 기준과 부합하는지 확인한다.
    • 부합할 경우 database에 해당 회원의 정보를 저장하고 SUCCESS 메시지와 상태코드 201을 Response로 반환한다
    • 부합하지 않을 경우 Response로 에러 메시지와 에러 코드를 반환한다.

(성공) Created 201

201 상태 코드는 Client의 요청을 Server가 정상적으로 처리했고 새로운 자원이 생겼음을 의미 한다.

database에도 무사히 쌓였다!

(에러 1) Bad Request 400

400 상태 코드는 Client의 요청이 유효하지 않아 더 이상 작업을 진행하지 않는 경우 나타난다

Client에서 위의 비밀번호 조건에 부합하지 않아 아래와 같이 에러 메시지를 반환 했다.

비밀 번호 조건

  • 비밀번호 8자 이상
  • 영어 대문자 포함
  • 영어 소문자 포함
  • 숫자 포함
  • 특수 문자 포함

이것 말고도 다른 여럿 경우에서 400을 반환하도록 했다.

(에러 2) Conflict 409

409 상태 코드는 서버의 현재 상태와 요청이 충돌했을 때 나타난다.

코드에서 해당 이메일이 이미 존재할 경우 409 상태 코드를 반환하도록 했다.

if User.objects.filter(email=email).exists():
    return JsonResponse({"message" : "EMAIL_ALREADY_EXISTS"}, status=409)

🖥 2. 로그인

  1. FE에게 API와 연결되어있는 엔드포인트와 server의 IP 주소를 알려 준다.

  2. 해당 엔드포인트로 Client에서 필요한 값(이메일, 비밀번호 등)을 body에 담아 request를 보낸다.

  3. 받은 이메일의 중복 여부를 database 조회를 통해 확인한다.

  4. 존재하는 이메일일 경우 Response로 에러메시지와 에러코드를 반환 한다.

  5. 입력 받은 이메일과 비밀번호의 형식이 사이트의 기준과 부합 하는지 확인한다.

    • 부합하지 않을 경우 Response로 에러 메시지와 에러 코드를 반환합니다.

    • 부합할 경우 database에 해당 회원의 정보를 저장하고 SUCCESS 메시지와 상태코드 201을 Response로 반환합니다.

(FE) 로그인 화면

로그인에서 생성한 데이터를 입력했다 (엄밀히 말하면 POST로 구현)

  • email: exam@naver.com
  • password: Exam123!

(FE) 메인 화면

별 문제가 없다면 로그인 화면에서 입력한 이메일과 비밀번호로
아래와 같이 접속이 될 것이다.

(성공) Success 200

200 상태 코드는 Client의 요청을 Server가 정상적으로 처리했을 때 나타난다.

서버 실행이 되는 터미널 창에서 아래와 같이 정상적으로 접속했음을 알 수 있다

추가 공부 사항

프론트에서는 아래와 같이 토큰을 발급 받았는데,
백엔드 입장에서는 토큰을 갖고 어떻게 코드로 구현을 해서 활용을 할지
추가 학습이 필요하다.

🔖 참고 자료

profile
이태권 (Taekwon Lee)
(Backend Dev.) One step at a time
이전 포스트

[Project] Westagram Kickoff (1. 모델링)

0개의 댓글