🦁 Python Online Store 만들기 13편 - 회원가입

🎈 Front End Developer 의 Back End 도전기 ! 🎈

이 글은 PROJECT LION : 호코치 강사님의 강의를 들으며 참고한 글입니다.

작업 중, 개발과정 정리 및 issue가 되었던 부분들을 공유 및 기록하고자 작성하게 되었습니다.

1. 회원가입

✍ 작업 전, 새로운 상품을 등록하는 로직처럼 새로운 사용자를 등록하면 크게 다를 게 없을 것 같다는 생각이 들었다.

결과적으로 회원가입은 상품 등록과 유사하다. 상품 -> 사용자가 되는 것이고, product에서 사용한 controllers 및 models 도 User로 세팅하면 되는 것이다.

새로운 상품 등록이 아닌, 새로운 사용자가 등록한다고 생각하면 쉽게 해결할 수 있으리라 판단했다.

1. blueprint 경로 세팅
   = products 세팅 시와 동일하게 user도 생성해준다.

---

2. controllers > product.py copy 후 user.py 생성

---

3. 사용하는 import 만 남겨두고, product 값은 user로 변경
   

---

4. models > product.py copy 후 user.py 생성
   = product가 아닌, user class 생성 (3번 항목의 3번째 줄 models > user.py 의 User Class 가 import 되는 것이다.)

---

5. app.py -> user blueprint 등록
   

---

6. 회원가입 등록 페이지 API 생성
   = /users/form 입력 시 users/product_form.html 랜더링

---

7. 회원가입 data 전달 및 요청 API 생성
   = form_data를 User class에 insert 시켜준다.(/models/user.py)

---

8. models > user.py insert_one 수정
   = 지금까지의 흐름도를 이해하고 넘어가려고 한다

회원가입 정보 입력 후 회원가입 버튼 클릭 시 /users/signup 주소로 넘어감과 동시에 post방식(회원정보가 주소창에 보여지는것은 옳지 않음) 으로 User Class에 form_data를 던져준다.

그럼, User Class의 insert_one에서 form_data를 받아 해당 정보들을 users collection으로 생성 후 document를 집어넣어준다.

---

9. templates > user_form.html file 생성
   = 파일 생성 후 form으로 넘어갈 action 값을 signup(controllers/user.py 에 만들어 둔 경로) 로 전송 및 항목에 맞게 form 내부 input 값 변경

---

10. data 전송 후 확인(mongodb compass)
    = 가입하고자 하는 이메일 및 패스워드 입력 후 form값을 전송 시(버튼 클릭 시) db에 users collection 생성 및 전송한 data 값이 들어오게 된다.

하지만, password 와 password 확인이 다를 경우에도 회원가입이 정상적으로 이루어졌을 것이며, 같은 email 로 회원가입 시에도 정상적으로 진행되었을 것이다. 또한 data를 입력하지 않은 상태에서 form 값을 넘길 경우에도 문제가 될 것이다.

당연하다. 내가 별다른 처리를 안했다(?)
이제 처리를 해보겠다 😉

---

11. data 유무 및 중복검사 체크
    = 간단하게 if문으로 일치하지 않을 경우 넘어가지 못하게 방지하였고, html 코드 상에서 required 를 사용함으로 필수적으로 입력하도록 처리해 두었다.

    하지만, 이메일 체크의 경우는 form_data의 이메일 존재여부를 파악한 후 data를 비교하여 처리해야 한다.

    우선, 비교문을 작성한다.

---

= db에 같은 email이 들어온 것이 있는지 파악 후,
만약 있다면 email을 사용하면 안되므로 false 값을 반환하고, 없다면 true를 반환시킨다.

---

12. flash 사용
    
    = 만약 flash를 호출한 message가 존재한다면 해당 message를 alert 창으로 띄워준다. (flash 구문 11번 참조)

    🔖 구문 중 % 와 { 또는 } 사이에 공백이 없어야 한다.

하지만 error 가 발생할 것이다. 😵‍💫

session을 사용하여 작업하는 것인데, secret key가 없기 때문이다.
그러므로, app.py에서 secret_key를 설정해 주어야 한다.
그 후, user_form 에 만든 alert 가 불릴 수 있도록, flash 하단에 각각 render 시켜준다.

---

13. 회원가입 완료 후 list page 이동
    = 우선 product blueprint 를 가져온다. redirect 를 시키기 위해서는 product 가 필요하기 때문이다.

---

= redirect 시 필요한 redirect 및 url_for import

---

= products redirect

이로써 회원가입 버튼을 누를 시 form data가 전송되며 몇가지 구문으로 값 비교 후 db에 저장될 것이다 🎉

다음시간에는 저장된 member 값을 활용하기 위해 로그인을 구현해 보겠다.