2022-08-29 월요일 회고록

<아래 코드에서 app.py는 첨부하지 않았다>

복잡한 하루였다고 할까. .

미니 프로젝트를 진행 중에 있어서 주말 동안 로그인과 회원가입을 구현했다. 

자바스크립트로 회원가입 시 정규표현식을 넣고 유효성검사까지 추가했다.

정규표현식에 특수문자도 넣을까 생각했지만 미니프로젝트에 넣기는 무거울 것 같아 넣지는 않았다.

정규표현식 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions

로그인과 비밀번호를 잘못 입력하면 아래 밑에 메시지로 알려준다. html로는 <p>태그에 id값을 넣어 add,remove를 잘 활용하니 깔끔하게 나온 것 같다. 아이디를 입력할 때 db에서 중복검사로 확인 후 db에 저장되게 한다.

//아이디,비밀번호 정규표현식
            function is_id(asValue) {
                var regExp = /^[a-zA-Z0-9]{4,10}$/;
                return regExp.test(asValue);
            }

            function is_pw(asValue) {
                var regExp = /^[a-zA-Z0-9]{8,20}$/;
                return regExp.test(asValue);
            }

            //아이디 유효성 검사 및 중복검사
            function check_dup() {
                let username = $("#input-username").val()
                console.log(username)
                if (username == "") {
                    $("#help-id")
                        .text("아이디를 입력해주세요.")
                        .removeClass("is-safe")
                        .addClass("is-danger")
                    $("#input-username").focus()
                    return;
                }
                if (!is_id(username)) {
                    $("#help-id")
                        .text("아이디의 형식을 확인해주세요. 영문과 숫자 사용 가능. 2-10자 길이")
                        .removeClass("is-safe")
                        .addClass("is-danger")
                    $("#input-username").focus()
                    return;
                }
                $("#help-id").addClass("is-loading")
                $.ajax({
                    type: "POST",
                    url: "/sign_up/check_dup",
                    data: {
                        username_give: username
                    },
                    success: function (response) {

                        if (response["exists"]) {
                            $("#help-id")
                                .text("이미 존재하는 아이디입니다.")
                                .removeClass("is-safe")
                                .addClass("is-danger")
                            $("#input-username").focus()
                        } else {
                            $("#help-id")
                                .text("사용할 수 있는 아이디입니다.")
                                .removeClass("is-danger")
                                .addClass("is-success")
                        }
                        $("#help-id").removeClass("is-loading")

                    }
                });
            }
            //아이디 및 비밀번호 유효성 검사
            function sign_up() {
                let id = $("#input-username").val()
                let pw = $("#input-pw").val()
                let repw = $("#input-repw").val()
                console.log(id, pw, repw)

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

                if (pw == "") {
                    $("#help-password")
                        .text("비밀번호를 입력해주세요.")
                        .removeClass("is-safe")
                        .addClass("is-danger")
                    $("#input-pw").focus()
                    return;
                } else if (!is_pw(pw)) {
                    $("#help-password")
                        .text("비밀번호의 형식을 확인해주세요. 영문과 숫자 사용가능 8-20자")
                        .removeClass("is-safe")
                        .addClass("is-danger")
                    $("#input-pw").focus()
                    return
                } else {
                    $("#help-password")
                        .text("사용할 수 있는 비밀번호입니다.")
                        .removeClass("is-danger")
                        .addClass("is-success")
                }
                if (repw == "") {
                    $("#help-password2")
                        .text("비밀번호를 입력해주세요.")
                        .removeClass("is-safe")
                        .addClass("is-danger")
                    $("#input-repw").focus()
                    return;
                } else if (repw != pw) {
                    $("#help-password2")
                        .text("비밀번호가 일치하지 않습니다.")
                        .removeClass("is-safe")
                        .addClass("is-danger")
                    $("#input-repw").focus()
                    return;
                } else {
                    $("#help-password2")
                        .text("비밀번호가 일치합니다.")
                        .removeClass("is-danger")
                        .addClass("is-success")
                }
                $.ajax({
                    type: "POST",
                    url: "/sign_up/save",
                    data: {
                        id_give: id,
                        pw_give: pw
                    },
                    success: function (response) {
                        alert("회원가입을 축하드립니다!")
                        window
                            .location
                            .replace("/user")
                    }
                });

 

로그인 기능도 보자면 로그인 유효성검사와 로그아웃(이미지밖에 있어 안보인다)을 넣었다

회원가입 기능에 비해 로그인 기능은 너무 쉬웠다. 로그아웃도 토큰 값이 없으면 로그인이 필요하며 있으면 로그아웃되게 쿠키값을 없애주었다. 쿠키에 대해 정확히 알고 싶다면 아래 출처로 이동바란다.

[Flask] 웹페이지 회원가입, 로그인 기능 구현하기(원리) - hashlib, JWT, Token, Cookie (tistory.com)

 

로그인 페이지

//로그인 유효성 검사
            function sign_in() {
                let username = $("#input-id").val()
                let password = $("#input-pw3").val()

                if (username == "") {
                    $("#help-id-login").text("아이디를 입력해주세요.")
                    $("#input-username").focus()
                    return;
                } else {
                    $("#help-id-login").text("")
                }

                if (password == "") {
                    $("#help-password-login").text("비밀번호를 입력해주세요.")
                    $("#input-password").focus()
                    return;
                } else {
                    $("#help-password-login").text("")
                }
                $.ajax({
                    type: "POST",
                    url: "/sign_in",
                    data: {
                        username_give: username,
                        password_give: password
                    },
                    success: function (response) {
                        if (response['result'] == 'success') {
                            $.cookie('mytoken', response['token'], {path: '/'});
                            window
                                .location
                                .replace("/")
                        } else {
                            alert(response['msg'])
                        }
                    }
                });
            }

            //로그아웃 , 토큰이 없으면 로그인이 필요
            function sign_out() {
                if ($.removeCookie('mytoken', {path: '/'}) == true) {
                    alert('로그아웃이 되었습니다.')
                    window.location.href = "/user"
                } else {
                    alert('로그인이 필요합니다.')
                    window.location.href = "/user"
                }
            }

 

그치만 이것들을 어떻게 활용하면 좋을까 하다가 댓글 수정과 삭제 기능을 넣으려고 했다. 결론적으로는 실패다. 

댓글 수정과 삭제 기능을 넣으려고 했으면 처음부터 id값을 활용하여 댓글 목록을 ajax로 불러왔어야 했다. 그치만 단순하게 생각하여 지금 상황에서는 시간이 부족하여 구현이 어려울 것 같다. comment 버튼을 누를 시 openclose로 닫고 열기를 할 수 있도록 만들고 db에서 각 페이지에 각자 db 연결하여 댓글과 연동 시켰다

 

 

 

 

            $(document).ready(function () {
                sacommentread();

            });

            // comment 박스 열고 닫는 기능
            function openclose() {
                // id 값 post-box의 display 값이 block 이면
                if ($('#post-box').css('display') == 'block') {
                    // post-box를 가리고
                    $('#post-box').hide();
                } else {
                    // 아니면 post-box를 펴라
                    $('#post-box').show();
                }
            }

            function sacommentwrite() {
                let name = $('#name1').val()
                let comment = $('#comment1').val()
                $.ajax({
                    type: "POST",
                    url: "/sa",
                    data: {
                        name_give: name,
                        comment_give: comment
                    },
                    success: function (response) {
                        if (response["result"] == "success") {
                            alert(response["msg"]);
                            window
                                .location
                                .reload();

                        }
                    }
                })
            }

            function sacommentread() {
                // 서버의 데이터를 받아오기
                $.ajax({
                    type: "GET",
                    url: "/sa",
                    data: {},
                    success: function (response) {
                        let comments = response['all_comment']
                        for (let i = 0; i < comments.length; i++) {
                            let comment = comments[i]['comment']
                            let name = comments[i]['name']

                            let temp_html = `<div class="card">
                                <div class="card-body"">
                                    <blockquote class="blockquote mb-0 ">
                                        <p>${comment}</p>
                                        <footer class="blockquote-footer">${name}</footer>
                                    </blockquote>
                                </div>
                            </div>`
                            $('#comment-box1').append(temp_html)
                        }
                    }
                })
            }

처음 미니 프로젝트를 만들 때 기획을 엉망으로 하여 기획 단계에서 정확히 프로토타입을 구현한 다음 api를 제대로 설계하고 거기서 오류가 생기지 않게 기능을 추가하는게 맞았다. 초기에 모든 것을 완벽하게 진행하려고 하니 이런 시간낭비를 하는 것 같다. 기획 단계에서 확실하게 하고 가야겠다.