[python][JQuery] 회원가입 코드리뷰

1. [클라이언트]

회원가입 html

<button onclick="sign_up()">
        회원가입
</button>

회원가입 JQuery

//회원가입
function sign_up() {
    let username = $("#input-username").val()
    let password = $("#input-password").val()
    let password2 = $("#input-password2").val()
    console.log(username, password, password2)


    if ($("#help-id").hasClass("is-danger")) {
        alert("아이디를 다시 확인해주세요.")
        return;
    } else if (!$("#help-id").hasClass("is-success")) {
        alert("아이디 중복확인을 해주세요.")
        return;
    }

    if (password == "") {
        $("#help-password").text("비밀번호를 입력해주세요.").removeClass("is-safe").addClass("is-danger")
        $("#input-password").focus()
        return;
    } else if (!is_password(password)) {
        $("#help-password").text("비밀번호의 형식을 확인해주세요. 영문과 숫자 필수 포함, 특수문자(!@#$%^&*) 사용가능 8-20자").removeClass("is-safe").addClass("is-danger")
        $("#input-password").focus()
        return
    } else {
        $("#help-password").text("사용할 수 있는 비밀번호입니다.").removeClass("is-danger").addClass("is-success")
    }

    if (password2 == "") {
        $("#help-password2").text("비밀번호를 입력해주세요.").removeClass("is-safe").addClass("is-danger")
        $("#input-password2").focus()
        return;
    } else if (password2 != password) {
        $("#help-password2").text("비밀번호가 일치하지 않습니다.").removeClass("is-safe").addClass("is-danger")
        $("#input-password2").focus()
        return;
    } else {
        $("#help-password2").text("비밀번호가 일치합니다.").removeClass("is-danger").addClass("is-success")
    }

    $.ajax({
        type: "POST",
        url: "/sign_up/save",
        data: {
            username_give: username,
            password_give: password
        },
        success: function (response) {
            alert("회원가입을 축하드립니다!")
            window.location.replace("/login")
        }
    });

}

정규식

            function is_password(asValue) {
                var regExp = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z!@#$%^&*]{8,20}$/;
                return regExp.test(asValue);


            }

-> 회원가입이라는 버튼 클릭 시 toggle_sign_up 이라는 function으로 이동된다.

-> class 선택자를 통해 각 클래스에 담긴 val를 가져와 변수에 담아준다.

-> if문의 조건문으로 help_id라는 클래스가 is-danger 라는 클래스를 가지고 있는지 확인해준다.

-> 만약 가지고 있다면 '아이디를 다시 확인해 달라는 alert을 띄워준다'

-> else if 문의 조건으로 help_id 라는 클래스가 is-success라는 클래스를 가지고 있지 않은지 확인해준다.

-> 만약 없다면 '아이디 중복확인을 해주세요' 라는 alert 창을 띄워준다.

 

->if 문의 조건으로 pw가 비워져있을 경우 help-password 라는 클래스에 비밀번호를 입력해주세요 라는 text를 띄워주고 class를 지워주는 removeClass 메서드와 클래스를 추가해 주는 addClass라는 메서드를 사용하여 is-safe 클래스를 지워주고 is-danger 클래스를 추가해준다. 그리고 input-password라는 클래스에 focus를 가져다 표시해준다.

-> 또는 password의 정규식을 확인했을 때 일치하지 않는경우 해당 text를 추가해 주고 위와 같이 클래스를 지워주고 추가해준다. 그리고 input-password라는 클래그에 포커스를 가져간다.

 

 

잠깐 위의 조건인 정규식을 살펴보자면

앞의 표시는

// /^(시작) $/(끝) 을 나타내고

//() => 하나의 문자열로 인식

//(?=) => 문자가 0번이나 1번 발생해야하고

// .*\d => 임의의 한 문자가 반드시 들어가야 하는데 그 범위가 [0-9] 숫자 0-9이다

//(?=.*[a-zA-Z]) => 영문 소문자와, 영문 대문자가 0번이나 1번은 꼭 있어야한다.

//[0-9a-zA-Z!@#$%^&*] => 그리고 그 이외로 숫자, 영문소문자와, 대문자, 특수문자 등을 사용가능하다.

//{8,20} => 8글자 ~ 20글자

그리고 마지막으로 asValue 변수에 담긴 값이 조건에 일치하는지 확인하는 test라는 함수에 담아 일치하면 true 불일치하면 false 를 return해준다.

 

 

다시 올라가서

-> 위에 조건 값들에 일치하지 않을 경우 사용할 수 있는 비밀번호이기 때문에 is-danger라는 클래스가 있으면 지워주고 is-succes라는 클래스로 바꿔준다.

-> 그리고 위와 비슷하게 비밀번호 확인 클래스에 if문에 걸리는 예외 사항이 있을 경우 is-success클래스를 지워주고 is-danger클래스를 추가해준다. 만약 다 올바르게 했다면 반대로 is-danger 클래스를 지워주고 is-success라는 클래스를 추가해준다.

-> 이렇게 모든 값이 성공할 경우 /sign_up/save 라는 주소에 username_give 라는 변수와 password_give라는 변수로 위의 변수들을 담아 보내준다.

 

2. [서버]

@app.route('/sign_up/save', methods=['POST'])
def sign_up():
    username_receive = request.form['username_give']
    password_receive = request.form['password_give']
    password_hash = hashlib.sha256(password_receive.encode('utf-8')).hexdigest()
    doc = {
        "username": username_receive,                               # 아이디
        "password": password_hash,                                  # 비밀번호
        "profile_name": username_receive,                           # 프로필 이름 기본값은 아이디
        "profile_pic": "",                                          # 프로필 사진 파일 이름
        "profile_pic_real": "profile_pics/profile_placeholder.png", # 프로필 사진 기본 이미지
        "profile_info": ""                                          # 프로필 한 마디
    }
    db.users.insert_one(doc)
    return jsonify({'result': 'success'})

-> /sign_up/save과 url주소가 일치하는 @app.route 를 찾아 매칭시키고

-> request.form을 사용해 username값과 password 값을 가져온다.

-> password_receive에 담긴 값을 encode라는 함수로 UTF-8 형식으로 인코딩해주고

-> hashlib에 있는 sha256이라는 함수에 담고 hexdigest 함수에 담아 함호화를 시켜줍니다.

-> 그리고 그 값들을 doc라는 document에 담아 DB에 넣어줍니다.

-> 이 과정이 성공했을 경우 json형식에 result라는 값에 success라는 값을 넣어 보내줍니다.

 

 

3. [클라이언트]

                $.ajax({
                    type: "POST",
                    url: "/sign_up/save",
                    data: {
                        username_give: username,
                        password_give: password
                    },
                    success: function (response) {
                        alert("회원가입을 축하드립니다!")
                        window.location.replace("/login")
                    }
                });

-> 성공했을 경우 alert으로 회원가입을 축하한다는 알림을 보내고

-> window.location.replace를 통해 /login 이라는 url에 있는 주소로 이동 시킵니다.

 

4. [서버]

@app.route('/login')
def login():
    return render_template('login.html')

-> login url에 있는 render_template 의 login.html 로 이동시킵니다.