😂 [팀플] 인스타그램 클론코딩
😭 회원가입 부분 API 작성
- javascript 부분
<script>
function save_user_info() {
const contact = $('#contact').val();
const name = $('#name').val();
const insta_id = $('#user_id').val();
const password = $('#password').val();
$.ajax({
type: 'POST',
url: '/signup',
data: {contact_give: contact, name_give: name, insta_id_give: insta_id, password_give: password},
success: function (response) {
alert(response['msg'])
window.location.reload();
}
});
}
</script>- 실제 회원가입 창을 확인해 보면 이메일 또는 전화번호를 한 칸에 입력하도록 되어 있다. 따라서 처음에 내가 db 구축을 하며 작성했던 서버 부분 API와 다르게
contact라는 변수를 생성해 정보를 받았다. - 회원의 정보를 입력해 가입하는 것이기 때문에
POST형식을 사용하였고, 회원가입을 하기 때문에 경로를 직관적으로 제시하기 위해/signup으로 지정하였다. POST이므로 어떤 정보를 생성할 것인지 제시하며, ajax 콜이 성공하면 진행되는response에 대해 작성하였다. ajax 콜이 성공하게 되면 현 함수에서는 메세지가alert창에 제시되며 현재 화면 자체를 새로고침한다.
- flask 부분
@app.route('/signup')
def signup():
return render_template('sign-up.html')- 앞에서 지정한
/signup경로에sign-up.html템플릿을 렌더링해준다.
# user ###########################################
@app.route("/signup", methods=["POST"])
def sign_up(): # 회원 가입
global email_receive, phone_num_receive # global > 전역변수
email_receive = '' # 변수를 공란으로 만들어 아래의 if문을 돌릴 때 사용
phone_num_receive = ''
domain_list=['naver','kakao','gmail','daum','hanmail']
while True:
contact_receive = request.form['contact_give'] #콘텍트(입력된 값) 값은 하난데, 이메일과 폰번호 중 하나로 들어가기에 밑에 if문을 사용함
if '@' in contact_receive: #콘텍트 값에 '@' 포함되어 있을 경우
if contact_receive.split('@')[1].split('.')[0] in domain_list: #콘텍트의 도메인 값이 domain_list 에 있을 경우
email_receive = request.form['contact_give'] #DB의 email_receive 값에 넣어준다.
break #성공시 break.
else: #도메인 값이 domain_list에 없는 경우
return jsonify({'msg':'도메인을 확인해주세요'}) #해당 메세지 alert. 다시 쓸 수 있도록 유도
elif '-' in contact_receive: #콘텍트 값에 '-'가 포함되어 있을 경우
if len(contact_receive.replace('-', '')) == 11: #만약 '-'를 제외한 길이가 11 일 경우
phone_num_receive = request.form['contact_give'].replace('-', '') #phone_num_receive에 넣어 준다. '-'는 공란처리
break #성공시 break.
else:
return jsonify({'msg': '이메일 또는 핸드폰번호 11자리를 입력해주세요🥰'}) #아니라면 해당 메세지 alert. 다시 쓸 수 있도록 유도
elif '-' not in contact_receive: #콘텍트 값에 '-'가 포함되지 않을 경우
if len(contact_receive) == 11: #그 값의 길이가 11 이라면
phone_num_receive = request.form['contact_give'].replace('-', '') #phone_num_receive에 넣어 준다. '-'는 공란처리
break #성공시 break.
else:
return jsonify({'msg': '이메일 또는 핸드폰번호 11자리를 입력해주세요🥰'}) #아니라면 해당 메세지 alert. 다시 쓸 수 있도록 유도
else: #if, elif에 해당이 되지 않는 콘텍트 값이 입력될 경우,
return jsonify({'msg': '이메일 또는 핸드폰번호 11자리를 입력해주세요🥰'}) #해당 메세지 alert. 다시 쓸 수 있도록 유도
name_receive = request.form['name_give']
insta_id_receive = request.form['insta_id_give']
password_receive = request.form['password_give']
doc = { # db에 입력되는 user의 정보
'phone_num': phone_num_receive,
'email': email_receive,
'name': name_receive,
'insta_id': insta_id_receive,
'password': password_receive
}
db.user_info.insert_one(doc) # user_info 라는 db에 / 딕셔너리 형식으로 / 회원정보 저장!
return jsonify({'msg': '회원가입 완료!'})
- 앞의 javscript를 작성하기 전에 먼저 flask 부분의 API를 작성했었다. 하지만 UI를 보고나서 이메일과 전화번호를 한 칸에 넣는 것을 알게 되었고 이를 해결하기 위해
contact_receive변수를 만들게 되었다. - 해당 변수를 설정하고 코드 체크를 위해 실행을 했는데,
local variable 'email_receive' referenced before assignment오류가 뜨게 되었고, 이를 해결하기 위해 아래와 같이 전역변수를 설정해 주었다.
global email_receive, phone_num_receive
email_receive = ''
phone_num_receive = '' - 앞서 javascript 부분에서 작성한
contact_give를 받기 위해 설정한contact_receive변수를while문에 넣고 사용자가 제대로 된 값을 넣을 때까지 끝까지 받아낼 수 있도록 하였다. - 작성을 하다보니 이메일과 전화번호에 대한 각 조건이 생각났고, 이를
if문을 통해 작성하였다. (자세한 내용 옆의 주석 참조) - 위의 조건을 거친 값들을 db에 저장하였고, 걱정했던 것과 달리 이메일과 전화번호 중 하나의 값만 저장되고 나머지 하나는 빈 칸으로 작성되었다.
- 추가적으로 작성해야 할 부분
- 이메일 중복 체크
- 빈 칸이 있을 시 회원가입이 되지 않도록 막아주는 기능
- 이메일 참조(진짜 존재하는지 확인)
- 이메일과 번호가 같이 있으므로 사용자가 입력하는 것이 문자열인지 숫자인지 확인해주는 로직 추가
- 이메일에
.뒤에 com이 제대로 들어가는지 확인
https://github.com/nikevapormax