미니 프로젝트 회고

프로젝트 주제 : 미슐랭 사이트의 레스토랑 리뷰 글을 작성하는 웹 사이트 만들기.

항해99 사전 준비 기간의 마지막인 미니 프로젝트를 나름 성공적으로 마무리 했다.

• 구현한 api
  -회원가입
  -로그인 토큰 encode, decode
  -게시물 상세 페이지의 댓글 기능

회원가입 구현에 기여도가 가장 많았다.

회원가입

• 아이디 중복 체크

서버
@app.route('/yummy/check_dup', methods=['POST'])
def yummy_check_dup():
    user_id_receive = request.form['user_id_give']
    isExist = bool(db.user.find_one({"user_id": user_id_receive}))
    return jsonify({'result': isExist})
    
#클라이언트에게 input에 입력된 값을 받아온다. 받아온 값이 db에 존재 한다면 true(중복), 없다면 false(중복x)를 return한다.

클라이언트
function check_dup_id() {
            $('#user_id').change(function () {
                $('#check_dup_id').show()
                $('#user_id').attr("check_result", "again");
            })

            if ($('#user_id').val() == '') {
                alert('아이디를 입력하세요.')
                return;
            }


            let user_id = $("#user_id").val()
            let formData = new FormData()
            formData.append('user_id_give', user_id)
            fetch('/yummy/check_dup', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {
                let check = data['result']
                console.log(check)
                if (check){
                    alert("중복되는 아이디 입니다.")
                    document.getElementById('user_id').value=null
                    document.getElementById('user_id').focus()
                    return
                }else{
                    alert("사용 가능한 아이디 입니다.")
                    $('#user_id').attr("check_result","pass")
                    $('#check_dup_id').hide()
                    return
                }
            })
        }

//input에 user_id라는 id를 부여해서 입력된 값을 가져온다.
//중복을 체크한 후 아이디를 변경할 경우 다시 중복체크를 하도록 변경
//입력값이 없으면 alert
//db에 중복되는 아이디가 있다면 alert출력 후 input칸 초기화
//중복되는 아이디 없다면 check_result를 pass로 변경 후 버튼 숨기기

• 비밀번호 확인

function check_sign_up() {
            let user_id = $('#user_id').val()
            let password = $('#password').val()
            let check_password = $('#check_password').val()
            let check = true
            // id 체크
            if ($('#user_id').attr("check_result") == "again"){
                alert("아이디 중복 검사를 해주세요.")
                check = false
            }else {
                document.getElementById('user_id_error').innerHTML = ""
            }
            if (user_id == "") {
                document.getElementById('user_id_error').innerHTML = "아이디를 입력하세요."
                check = false
            } else {
                document.getElementById('user_id_error').innerHTML = ""
            }
            // 비밀번호 체크 - 동일한지
            if (password != check_password) {
                document.getElementById('password_error').innerHTML = ""
                document.getElementById('check_password_error').innerHTML = "비밀번호가 동일하지 않습니다."
                check = false
            } else {
                document.getElementById('password_error').innerHTML = ""
                document.getElementById('check_password_error').innerHTML = ""
            }
            // 비밀번호 체크 - 비어있는지
            if (password == "") {
                document.getElementById('password_error').innerHTML = "비밀번호를 입력해주세요."
                check = false
            } else {
                document.getElementById('password_error').innerHTML = ""
            }
            // 비밀번호 체크 - 4자리 미만인지
            if (password.length < 4) {
                document.getElementById('password_error').innerHTML = "비밀번호를 4자리 이상 입력해주세요."
                check = false
            } else {
                document.getElementById('password_error').innerHTML = ""
            }


            if (check) {
                document.getElementById('user_id_error').innerHTML = ""
                document.getElementById('password_error').innerHTML = ""
                document.getElementById('check_password_error').innerHTML = ""
                sign_up()
            }
        } 

아이디 중복검사를 거치지 않거나, 비밀번호가 동일하지 않거나, 4자리 미만이라면 문제가 있는 부분에 error 메세지를 보여준다.

• 회원 정보 저장

모든 조건을 만족하면 input에 입력된 값대로 db에 회원 정보를 저장해서 가입을 완료한다.

function sign_up() {
            let user_id = $('#user_id').val()
            let password = $('#password').val()

            let formData = new FormData()
            formData.append('user_id_give', user_id)
            formData.append('password_give', password)
            fetch('/yummy/sign_up', { method: "POST", body: formData, }).then((res) => res.json()).then((data) => {
                alert(data["result"]);
                window.location.replace('/')
            });
        }

비밀번호를 확인하는 값은 db에 저장할 필요가 없으니 id와 password만 서버로 전달한다.
fetch의 POST를 이용해 db에 값을 insert하게 요청했다. insert가 완료 되면 result의 내용을 alert에 출력한다.
마지막으로,

 window.location.replace('/')
 
 -> '/'이라는 주소의 페이지로 넘어가면서 히스토리는 지운다. 뒤로가기를 하면 첫 페이지인 로그인 화면으로 돌아감. 
 회원가입처럼 정보 보안이 필요한 작업에서 쓰면 좋다.
 

-mongodb에 데이터 insert

client.[유저명].insert_one([데이터])

나는 데이터를 딕셔너리 자료형의 doc변수를 생성해서 작업했다.

회고

인생 첫 프로젝트지만 무사히 마칠 수 있어서 다행이다. 기초 강의를 들을 때보다 검색 실력이 조금 좋아진 덕이 있었다. 이번 프로젝트는 front, back 구분 없이 하나의 api를 혼자서 개발했다. 백엔드 개발자를 목표로 하고 있지만, 좋은 기회였다고 생각한다.

아쉬웠던 점

-변수의 자료형을 고려하지 않음.
-패키지 관리를 소홀히 함.
-변수 네이밍이 직관적이지 못함.
-로그인 토큰, 캐쉬에 대해 더 알아보지 못함.
-다른 페이지로 넘어갈 때 특정 값을 가지고 넘어가는 것 스스로 구현하지 못함.

다음엔 더 잘해야지 ..