TIL 2022.05.06 클론코딩 팀프로젝트(BE) - 3 (중간점검, 중복확인, 입력값 확인, 타임어택)

오늘은 프로젝트 중간 점검 발표가 있었던 날이다. 중간 점검뿐만아니라 전체적인 프로젝트의 완성도 및 일정 관리를 위해서라도 전체적인 프로젝트를 정리할 필요가 있었다. 이번에 정리했던 도구나 방식들을 기록해둬서 앞으로도 새로운 프로젝트를 시작할 때 또 작성, 정리하는 실력을 키워 나가야겠다.

1. figma 

2. 갠트차트(구글드라이브 시트)

3. ER다이어그램(draw.io)

4. API설계서(notion)

5. git hub issue

 

중복확인, 정규표현식을 이용한 입력 값 확인

1. 비동기식 입력 값 판별을 위해서 $('선택자').blur(function() {...} ) 함수를 통해 입력했을 때 {...} 안의 함수가 작동함

2. 판별을 위해 입력값을 가져오기 위해서 $('선택자').val() 함수로 입력 값 변수에 저장

3. 공백 즉, 입력하지않는 경우는 판별하기 위해 id == "" 널스트링 이용하여 판별

4. 중복확인을 위해 서버에 저장되어있는 아이디와 비교하여야하므로 ajax 통해 연결하여 중복 값 여부 리턴 받기

5. 중복되지않으면 이어서 정규표현식을 이용하여 입력값 형식 제한 처리

6. 모든 조건이 달성 되면 입력한 id의 값이 문제없음을 표시하기 위해 hidden-id 값을 true로 리턴

// id 값을 입력했을 때
$('#id').blur(function () {
    let id = $('#id').val()
    // 입력받은 값 중 입력하지 않은 값이 있을 경우
    if (id == "") {
        $('#id_check').html('<i class="fa-solid fa-circle-exclamation"></i>')
        $('#hidden-id').val('false')
    } else {
        // 아이디 중복 확인
        $.ajax({
            type: "POST",
            url: '/api/id_dup',
            data: {'id_give': id},
            success: function (response) {
                if (response['duplicate']) {
                    $('#id_check').html('<i class="fa-regular fa-circle-xmark"></i>')
                    $('#hidden-id').val('false')
                } else {
                    // 정규 표현식을 이용한 아이디 형식 제한 영문 소문자, 대문자, 숫자, 4-30자
                    let id_regExp = /^[a-zA-Z0-9]([a-zA-Z0-9]*)(@)([a-zA-Z0-9]*)(\.)([a-zA-Z]*){4,40}$/;
                    if (!id_regExp.test(id)) {
                        $('#id_check').html('<i class="fa-regular fa-circle-xmark"></i>')
                        $('#hidden-id').val('false')
                    } else {
                        $('#id_check').html('<i class=\"fa-regular fa-circle-check\"></i>')
                        $('#hidden-id').val('true')
                    }
                }
            }
        })
    }
})

# ajax에서 비동기식으로 아이디 중복 확인을 위해 따로 함수 정의
@app.route("/api/id_dup", methods=["POST"])
def id_dup():
    id_receive = request.form['id_give']
    id_dup = bool(db.USER.find_one({'id': id_receive}))
    return jsonify({'duplicate': id_dup})

이런 식으로 pwd, name, nickname 등 입력 값에 대한 형식 확인 및 중복 확인한 뒤 join() 호출 될 때 

각각의 hidden-* 태그의 내용을 판별한 뒤 입력된 값을 전부 가져가서 회원가입이 완료되도록 함

function join() {
    if ($('#hidden-id').val() == 'true') {
        if ($('#hidden-nick').val() == 'true') {
            if ($('#hidden-name').val() == 'true') {
                if ($('#hidden-pwd').val() == 'true') {
                    // 입력한 값들 가져와 변수에 저장
                    let id = $('#id').val()
                    let name = $('#name').val()
                    let nick = $('#nickname').val()
                    let pwd = $('#pwd').val()
                    $.ajax({
                        type: "POST",
                        url: "/api/join",
                        data: {'id_give': id, 'name_give': name, 'nick_give': nick, 'pwd_give': pwd},
                        success: function (response) {
                            alert(response["msg"])
                            window.location.href = '/login'
                        }
                    })
                } else {
                    alert('패스워드는 영대소문자, 숫자 특수문자 8-20자 입니다.!')
                }
            } else {
                alert('이름은 한글, 영문 2-20자입니다.')
            }
        } else {
          alert('닉네임이 중복이거나 영대소문자,한글,숫자, 4-12자에 맞지않습니다.')
        }
    } else {
        alert('아이디가 중복 또는 이메일 형식이 아닙니다.')
    }
}

git hub issue 주소

https://github.com/SeonminKim1/lucky-seven/issues

GitHub - SeonminKim1/lucky-seven

 

타임어택 후기

추가로 타임어택으로 회원가입/로그인/로그아웃/게시글작성/게시글출력/페이징/ 을 구현하는 과제를 받았다.

1시간만에 이미 해보았던 회원가입, 로그인, 로그아웃 기능은 완성하였으나, 그 뒤로부터는 구현하지 못했고

종료 후 과제 해석을 통해서 배운 포인트 3가지

 

1. request 의 data 함수를 통해서 get()을 호출하여 가져오는 방식

# data = json.loads(request.data)
# id_receive = data.get('id_give')

다른 것보다 get()함수를 써서 json 데이터를 가져와야 값이 없을 경우 None을 반환하도록 하는 것이 포인트다.

만약 그냥 request.form(['id_give']) 형태로 가져오는 데 값이 없을 경우 아예 오류가 나기 때문에 문제가 생긴다.

현재 우리 팀프로젝트에서는 request.form 형태로 데이터들을 가져오지만 FE단에서 데이터를 입력해야만 하도록

설계를 해두었기때문에 큰 문제는 발생하지 않을 수 있으나 추후에는 get() 함수를 통해서 오류 대신 None을 반환

하도록 코드를 재구성 해봐야겠다.

 

2. 데코레이션 펑션

token을 발급하여 cookie에 저장을 하는데 이후 사이트를 돌아다니면서 계속해서 로그인 되어있는지에 대한 판별코드를 똑같이 계속해서 작성을 해야하는데 '데코레이션 펑션' 이라는 기능이 있어서 이를 작성해두면 디코딩하는 작업을 간단하게 코드 한줄로 함수처럼 불러와서 사용하여 코드의 중복을 줄이고 길이도 줄일 수 있다. 내일은 데코레이션 펑션에 대해서 한번 더 찾아보고 프로젝트에 적용할 수 있으면 적용해봐야겠다.

 

3. abort(code)함수

또 로그인하지않고 게시판 페이지로 이동 시 unauthorized 페이지가 뜨도록 하려면 abort()함수를 이용하는 간단한 방법이 있다는 것도 배웠다. 간단히 400번대 오류를 응답으로 보낼 수 있다.

400 : 잘못된 요청

401 : 권한 없음

403 : Forbidden 금지됨

404 : Not Found 찾을 수 없음

406 : 허용되지 않음

415 : 지원되지 않는 미디어 유형

429 : 너무 많은 요청, RFC 6585