[TIL 항해 9일 차] 미니 프로젝트!!! ( feat. 회원가입 )

미니 프로젝트 2일 차!!!

 

 

 

회원가입 페이지를 맡기로 했다!

다른 기능을 구현하고 싶었지만(예를 들어 JWT?)

다른 팀원과 겹치게 되어서,

"음... 회원가입을 사전 프로젝트 때 구현하면서 아쉬운점이 많았으니 보완해볼까?"

하는 생각을 가지고 양보를 하게 되었다!

 

---

일단 오늘의 결과물!!

사전 프로젝트 때 아쉬웠던 부분

• 가장 크게 아쉬웠던 부분

각 중복체크에 관한 부분 (아이디, 닉네임, 이메일) 아쉬웠다.

그때는 어떻게든 일단 회원가입이라은 기능을 껍데기로나마 완성을 시켜야지라는 생각으로

코드를 치다보니 중복확인 버튼을 한 번 눌러 사용가능하다는 서버의 response를 받으면 그 값이 고정되어,

중복된 아이디로 수정을 하여도 회원가입이 되었다.

(가입가능한 아이디로 중복확인 통과 -> 중복된 아이디로 수정 -> 회원가입가능)

이부분을 조금더 회원가입 스럽게 고치고 싶었다.

(닉네임, 이메일, 비밀번호가 비슷한 느낌으로 실행되어 아이디 코드만 살펴보겠음)

 

app.py

# 아이디 중복검사
@app.route('/api/checkid', methods=['POST'])
def check_id():
    status_name = True
    id_receive = request.form['id_give']
    users = list(db.user.find({}, {'_id': False}))
    for user in users:
        user_id = user['id']
        if user_id == id_receive:
            status_name = False
    return jsonify({'result': 'success', 'status': status_name})

signupjs.js

// ID 유효성 검사
function check_id() {
    let user_id = $("#floatingId").val()
    let pattern1 = /[0-9]/; // 숫자
    let pattern2 = /[a-zA-Z]/; // 문자

    if (user_id === '') {
        alert('아이디를 입력하세요.')
    } else if (user_id.length < 8 || user_id.length > 20
        || !pattern1.test(user_id) || !pattern2.test(user_id)) {
        alert('아이디는 8~20자리 이내의 영문과 숫자로 입력해주세요.')
        document.getElementById('floatingId').value = null;
    } else {
        $.ajax({
            type: "POST",
            url: "/api/checkid",
            data: {
                id_give: user_id
            },
            success: function (response) {
                if (response['status']) {
                    c_id = 1
                    alert('사용 가능한 아이디 입니다.');
                } else {
                    alert('이미 존재하는 아이디 입니다.')
                    document.getElementById('floatingId').value = null;
                    document.getElementById("floatingId").focus()
                }
            }
        })
    }
}

→ 일단 기본적인 코드구성은 진행하다보니 별차이가 없었다.

그냥 내가 조금 더 포기 편하게 작성했다 정도???

위의 코드로는 사전 프로젝트 때 느꼈던 문제점을 다시 한 번 느낄 수 밖에 없었고,

최소한의 기능을 구현한 후, 문제 사항을 해결하기 위해 필요한게 뭐가 있을까? 생각을 해보았다.

 

signupjs.js

// 유효성 결과값 저장
let c_id = 0

// 각 input value 수정 시에 유효성 결과값 초기화.
function change_id() {
    c_id = 0
}

→ 생각을 하다보니 생각보다 되게 간단하여, 내가 느꼇던 문제점을 해결하기 까지 그리 오래걸리지 않았다.

중복확인 후 input 값이 변경되면 다시 중복확인이 필요한 상태로 되돌려주면되지 않은가?

이리 간단한 걸 그때는 생각해보지 못했다니...

시간이 없었던걸로 치자구

signup.html

<div class="form-floating mb-3 check-area-1">
    <input type="text" class="form-control" id="floatingId" placeholder="placeholder"
           onchange="change_id()">
    <label for="floatingId">아이디</label>
    <button type="button" class="btn btn-secondary" onclick="check_id()">중복확인</button>
</div>

→ html의 body를 보면 input에 onchange라는 function을 부여해주었다.

처음에 만약 input에 값이 변경된 것을 감지하면 검사 값을 초기값으로 돌려줘!!! 라는

의미로 썻는데, 다행히 아주 잘 작동하였다.

(중복확인 완료 값 부여 받고 -> input을 수정하면 -> 다시 중복확인 검사를 받도록)

되게 간단했고, 내가 아쉬웠던 마음의 크기보다 빠르고 쉽게 해결되버려서 아주 좋았다 ㅋㅋㅋㅋㅋㅋ

내가 내 머리로 생각하고 그려내고 그게 구현됫다는 재미를 또 한 번 느끼게 되었다.

 

오늘 구현해보면서 다양한 시도를 해보았지만 가장 기억에 남는 코딩은 이거였다는 것~

 

견디고 즐기자!! 이 때 머리 써보지 언제 쓸래!!

 

• 내일 구현해 볼 것!!! 그리고 공부할 것!!!

1. 일단 중복확인이 되면, 뭔가 사용자가 알아볼 수 있게 표현해주고 싶다.

멘토링을 하면서 질문을 통해 다양한 자료를 받았으니, 직접! 스스로! 해결해보자!

[Javascript] class 추가/변경/삭제/읽기 (className, classList)

 

Style disabled button with CSS

 

(즐거웅코드) 제이쿼리 display block(보이기)/none(숨기기) 제어하기

 

 

2. 이건 공부라기 보단 JS에서는 정규 표현식을 이렇게 사용한다? 정도만 알아두면 좋겠다고 생각했다.

정규 표현식 - JavaScript | MDN

 

 

3. 서버 통신 methods에 get과 push 밖에 몰랐는데, 웬일 put/patch, delete도 있데!

용도에 따라 사용이 된다고하니 알아두자!!

[REST API] REST API 규칙/PUT과 POST 차이/PUT과 PATCH 차이

 

 

4. 이건 gitignore 하는 방법... 아직 아래의 자료 말고도 더 알아봐야할 것 같다.

협업을 하는데 환경 설정을 통일을 진행하지 않고 시작해서

소스 파일만 올라갈 수 있게 나머지 파일은 gitignore로 올려주지 않는게 맞다는 생각이랄까

SourceTree 에서 수정하는 gitignore

---

항해99, 99일의 여정, 지금 1/10 지점에 도달했다.

더 노력하고, 더 발전하는 김형준이 되자!!!!!!!!!!!!!!

주저앉지 말자.

나의 부족함을 인지하자.

부러워하되, 질투하지 말자. 아니 부러워하지도 말자. 본 받아야 겠다는 생각만 가지자.

 

불안해도 불안해하지말고, 항상 겸손히 자만하지 말자.