🌊 210919 WIL

첫째 날 TIL을 적은 후 1주차 프로젝트 마무리와 웹개발 강의 수강에 치여 결국 WIL로 바로 건너오게 되었다..
프로젝트 제출일엔 화이자 2차 접종 후유증으로 온종일 두통에 시달렸지만 팀원들의 도움으로 무사히 제출할 수 있었다..
서론이 핑계로 길어졌는데.. 우선 1주차 동안 내가 배웠던 것들을 정리해보고자 한다!

웹개발 플러스 강의

1주차

왕초보반의 과정들을 빠르게 훑어보는 시간이었다. 기본 틀을 짜는 것에서 시작해, 사진 업로드 같은 디테일을 추가하고 서버에 배포하는 과정까지 프로젝트를 위한 기본적인 준비를 하는 과정이었던 것 같다. 특히 서버와 클라이언트 간의 핑퐁을 신경쓰는 것이 중요하다고 느껴졌다.

2주차

1주차 미니 프로젝트의 주요 포인트 중 하나인 Jinja2를 처음 마주했던 시간이었다. ajax를 이용해 값을 불러오는 것에 익숙했던지라 초반에는 이해하기 쉽지 않았다. 그러나 강의를 따라 직접 코딩을 해보며 웹페이지의 성격에 따라 ajax와 Jinja2가 적절히 쓰일 수 있다는 사실을 알게 되었고, 비로소 프로젝트에 직접 적용할 수 있었다.

띄워지고 난 뒤 바뀔 일이 없는 페이지 같은 경우에는 html을 완성해서 보내주는 서버사이드렌더링(SSR) 방식의 Jinja2 템플릿을 사용하는 것이 적절하다.

3주차

셀레니움을 이용해 스크래핑을 익혀보는 시간이었다. 네이버 지도 API를 직접 써보면서 API의 정보를 끌어오는 방법도 실습해볼 수 있었다. 사실 우리 조의 프로젝트에서는 쓰이지 않는 기능이라 꼼꼼하게 살펴보지 못했다. 추석 연휴를 이용해 다시 한 번 복습할 것이다.

4주차

내가 이번 팀 프로젝트에서 맡은 부분인 회원가입과 로그인 기능 제작을 배울 수 있었던 강의였다. Jinja2와 함께 1주차 프로젝트의 주요 포인트였던 JWT를 다루는 강의이기도 했기에 더 열심히 공부했다. 보안에 취약하지 않으면서 간편하고 빠른 인증 덕분에 서버의 부하도 줄일 수 있다는 것이 JWT의 큰 장점으로 느껴졌다.

회원 로그인 시스템을 다룰 때, 기존의 서버 사이드 세션의 방식을 이용한다면 로그인 세션 정보를 서버나 DB에 저장한다. 단일 서버이거나 동시 접속자 수가 적은 경우에는 문제가 되지 않을 수 있다. 그러나 동시 접속자 수가 늘어나고 서버의 갯수가 늘어난다면 DB가 부담하는 회원 데이터의 양도 늘어날 뿐더러, 로그인 이후 로그인 정보가 저장되지 않은 서버로 접속할 시 재접속을 해야하는 불편함을 감수해야한다. 추가적으로 매 요청 마다 아이디나 비밀번호와 같은 정보들이 오가는 것은 보안적인 측면에서도 취약하다.

JWT(JSON Web Token)은 header . payload . signature 세 부분으로 이루어져있다. 우선 payload 안에는 이 토큰의 발급 정보, 유효 기간, 사용자의 서비스 이용 권한과 같은 데이터가 JSON 파일 형식으로 base64 인코딩되어 담겨있다. payload 부분만 보았을 때는 누구나 디코딩과 인코딩 과정을 통해 값을 조작할 수 있어보이기 때문에 보안에 취약할 것이라고 생각할 수 있지만 그렇지 않다. 나머지 두 부분이 남아있기 때문이다. header 부분을 살펴보면, 여기엔 JWT를 지정하는 고정값인 type과 signature 값을 만드는데에 사용되는 알고리즘 지정값이 들어있는데, 세번째 부분인 signature값은 바로 이 header의 알고리즘 지정값을 바탕으로 payload 값과 서버만이 알고있는 SECRET KEY 데이터가 암호화되어 만들어진다. 그렇기 때문에 만약 임의의 사용자가 payload의 값이 조작된 토큰으로 서비스에 접근을 시도할지라도 고유의 SECRET KEY 값을 대입해 나온 signature 값이 다르다면 서버는 조작된 토큰의 접근을 거부할 수 있다.

여기서 JWT의 장점이 보이기 시작한다. 예전부터 쓰이던 세션이나 인가(authorization) 토큰의 경우에는 사용자의 권한 정보를 DB에 저장해놓고 로그인 정보를 받을 때 마다 DB를 확인하는 과정을 거쳐야했다. 그러나 JWT는 각 사용자의 브라우저에 cookie의 형태로 저장되고 이를 서버로 보낸다. 서버는 받은 토큰의 정보를 고유 SECRET KEY 값을 이용해 검증하고, signature 값이 변했는지의 여부를 판단하는 것 만으로 인증 과정을 수행할 수가 있다. DB를 거치는 수고없이 인증과 권한확인 과정을 수행할 수 있다. 물론 언젠가는 높은 수준의 암호화 해독법을 이용하여 JWT의 고유 키값을 알아낼 수도 있다. 그러나 아무리 고도화된 암호 해독 기술일지라도 절대적인 시간을 필요로 하기 때문에 이는 payload 값 안의 토큰 유효 기간을 짧게 설정하여 해독되기 전에 토큰이 무효화되도록 하는 방법으로 해결이 가능하다고 생각한다.

미니 프로젝트 SCRUM!

로그인 회원가입 기능 구현

강의를 바탕으로 구현했었는데, 기존 강의에서 만들었던 SWEETER 서비스는 회원가입 정보가 아이디와 비밀번호에 그쳤던 반면, 우리의 SCRUM 서비스에서는 닉네임과 이메일, 그리고 간단한 소개글이 추가 됐다. 닉네임 입력창에서는 아이디와 같이 중복확인을 필요로 했고, 한글로만 닉네임을 만들 수 있게 하기 위해 한글인지 판단하는 정규식도 만들어야 했다. 이메일도 마찬가지로 이메일 형식이 맞는지를 판단하는 정규식을 만들어야했다. 1주차 강의에서 강조하셨던 서버와 클라이언트 간의 핑퐁을 주의하며 코드를 작성했고 무리없이 기능을 만들 수 있었다.

서버 코드

@app.route('/sign_in', methods=['POST'])
def sign_in():
    # 로그인
    # 클라이언트에서 받아온 값을 각 변수에 담기
    username_receive = request.form['username_give']
    password_receive = request.form['password_give']
    # 패스워드는 해쉬함수를 이용하여 암호화 하고 그 값을 pw_hash 변수에 담는다
    pw_hash = hashlib.sha256(password_receive.encode('utf-8')).hexdigest()
    # DB의 회원 정보와 맞는지 확인
    result = db.users.find_one({'username': username_receive, 'password': pw_hash})

    if check_today(username_receive):
        status = 'posted' # 당일 각오 이미 작성했을 시에는 메인 페이지
    else:
        status = 'not_yet' # 아니라면 작성 페이지로
    if result is not None:
        payload = {
            'id': username_receive,
            'exp': datetime.utcnow() + timedelta(seconds=60 * 60 * 3)  # 로그인 3시간 유지
        }
        token = jwt.encode(payload, SECRET_KEY, algorithm='HS256').decode('utf-8')
        # 로그인 정보를 암호화한 JWT

        # DB의 정보와 맞다면 로그인 성공
        return jsonify({'result': 'success', 'token': token, 'post_state': status})
    # 찾지 못하면
    else:
        return jsonify({'result': 'fail', 'msg': '아이디/비밀번호가 일치하지 않습니다.'})


@app.route('/sign_up/save', methods=['POST'])
def sign_up():
    # 회원가입
    # 클라이언트에서 받아온 값을 각 변수에 담기
    username_receive = request.form['username_give']
    password_receive = request.form['password_give']
    # 패스워드는 DB에 그대로 담지 않고 아래의 해시함수를 이용하여 암호화한 값을 대신 담는다
    password_hash = hashlib.sha256(password_receive.encode('utf-8')).hexdigest()
    email_receive = request.form['email_give']
    nickname_receive = request.form['nickname_give']
    profile_info_receive = request.form['profile_info_give']

    # 받아온 값을 DB에 저장
    doc = {
        "username": username_receive,                               # 아이디
        "password": password_hash,                                  # 비밀번호
        "nickname": nickname_receive,                               # 닉네임
        "profile_pic": "",                                          # 프로필 사진 파일 이름
        "profile_pic_real": "profile_pics/profile_placeholder.png", # 프로필 사진 기본 이미지
        "profile_info": profile_info_receive,                       # 프로필 소개글
        "email": email_receive                                      # 이메일
    }
    db.users.insert_one(doc)
    return jsonify({'result': 'success'})

# 아이디 중복확인
@app.route('/sign_up/check_dup', methods=['POST'])
def check_dup():
    username_receive = request.form['username_give']
    # 클라이언트로부터 받아온 값이 DB에 존재하는지 존재하지 않는지 파악
    exists = bool(db.users.find_one({"username": username_receive}))
    return jsonify({'result': 'success', 'exists': exists})

# 닉네임 중복확인
@app.route('/sign_up/check_dup_nick', methods=['POST'])
def check_dup_nick():
    nickname_receive = request.form['nickname_give']
    # 클라이언트로부터 받아온 값이 DB에 존재하는지 존재하지 않는지 파악
    exists = bool(db.users.find_one({"nickname": nickname_receive}))
    return jsonify({'result': 'success', 'exists': exists})
코드를 입력하세요

클라이언트 script

<script>
        {#로그인 기능 함수#}
        function sign_in() {
            let username = $("#input-username").val() {#아이디 값을 username이라는 변수에 담기#}
            let password = $("#input-password").val() {#패스워드 값을 password라는 변수에 담기#}

            {#아이디, 패스워드 미입력 시 경고 문구 노출, input 박스에 값이 있다면 경고 문구 숨김#}
            if (username == "") {
                $("#help-id-login").text("아이디를 입력해주세요.").removeClass("is-safe").addClass("is-danger")
                $("#input-username").focus()
                return;
            } else {
                $("#help-id-login").text("")
            }

            if (password == "") {
                $("#help-password-login").text("비밀번호를 입력해주세요.").removeClass("is-safe").addClass("is-danger")
                $("#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: '/'});
                        let post_state = response['post_state']
                        window.localStorage.setItem('post_state', post_state)
                        if (post_state == 'posted') {
                            window.location.replace("/")
                        } else {
                            window.location.href = "/boards/form"
                        }
                    } else {
                        alert(response['msg'])
                    }
                }
            });
        }

        {# 회원가입 기능 함수 #}
        function sign_up() {
            {# 각 회원정보 값을 변수에 담기 #}
            let username = $("#input-username").val()
            let password = $("#input-password").val()
            let password2 = $("#input-password2").val()
            let nickname = $("#input-nickname").val()
            let email = $("#input-email").val()
            let profile_info = $("#input-profile_info").val()

            console.log(username, password, password2, nickname, email, profile_info)

            {# 아이디값이 없는 상태에서 로그인을 시도하면 경고 문구 표시#}
            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")
            }

            if ($("#help-nickname").hasClass("is-danger")) {
                alert("닉네임을 다시 확인해주세요.")
                return;
            {# 중복확인을 하지않고 회원가입을 진행할 시 경고 문구 표시#}
            } else if (!$("#help-nickname").hasClass("is-success")) {
                alert("닉네임 중복확인을 해주세요.")
                return;
            }

            if (email == "") {
                $("#help-email").text("이메일을 입력해주세요.").removeClass("is-safe").addClass("is-danger")
                $("#input-email").focus()
                return;
            } else if (!is_email(email)) {
                $("#help-email").text("이메일 형식(scrum@email.com)이 맞는지 확인해주세요.").removeClass("is-safe").addClass("is-danger")
                $("#input-email").focus()
                return
            } else {
                $("#help-email").text("사용할 수 있는 이메일입니다.").removeClass("is-danger").addClass("is-success")
            }
            {# 입력받은 값들을 서버의 sign_up()으로 보냄 #}
            $.ajax({
                type: "POST",
                url: "/sign_up/save",
                data: {
                    username_give: username,
                    password_give: password,
                    nickname_give: nickname,
                    email_give: email,
                    profile_info_give: profile_info
                },
                {# 정상 작동되었을 시 아래 문구 출력 #}
                success: function (response) {
                    alert("회원가입을 축하드립니다!")
                    window.location.replace("/login")
                }
            });

        }
        {# 로그인 창과 회원가입 창은 "회원가입하러가기"와 "취소" 버튼 클릭으로 전환되는데, toggleClass기능을 통해
            로그인 화면에서 보여야하는 입력칸과 회원가입에서 보여야하는 입력칸을 때에 따라 노출/숨김#}
        function toggle_sign_up() {
            $("#sign-up-box").toggleClass("is-hidden")
            $("#div-sign-in-or-up").toggleClass("is-hidden")
            $("#btn-check-dup").toggleClass("is-hidden")
            $("#btn-check-dup_nick").toggleClass("is-hidden")
            $("#help-id").toggleClass("is-hidden")
            $("#help-password").toggleClass("is-hidden")
            $("#help-password2").toggleClass("is-hidden")
            $("#help-email").toggleClass("is-hidden")
            $("#help-profile_info").toggleClass("is-hidden")
            $("#help-nickname").toggleClass("is-hidden")
            $("#help-id-login").toggleClass("is-hidden")
            $("#help-password-login").toggleClass("is-hidden")
        }

            {# 아이디 형식을 검사하는 정규식 #}
            function is_username(asValue) {
                var regExp = /^(?=.*[a-zA-Z])[-a-zA-Z0-9_.]{2,10}$/;
                return regExp.test(asValue);
            }
            {# 패스워드 형식을 검사하는 정규식 #}
            function is_password(asValue) {
                var regExp = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z!@#$%^&*]{8,20}$/;
                return regExp.test(asValue);
            }
            {# 이메일 형식을 검사하는 정규식 #}
            function is_email(asValue) {
                var regExp = /^[a-zA-Z0-9+-_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
                return regExp.test(asValue);
            }
            {# 닉네임 형식을 검사하는 정규식 #}
            function is_nickname(asValue) {
                var regExp = /^[가-힣]{2,6}$/;
                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_username(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) {
                        {# 서버로부터의 응답이 exists 라면 이미 존재하는 아이디라는 경고문구 노출과 함께 입력칸 이동 #}
                        if (respose["exists"]) {
                            $("#help-id").text("이미 존재하는 아이디입니다.").removeClass("is-safe").addClass("is-danger")
                            $("#input-username").focus()
                        } else { {# 서버로부터의 응답이 exists가 아니면 사용 가능하다는 문구 노출 #}
                            $("#help-id").text("사용할 수 있는 아이디입니다.").removeClass("is-danger").addClass("is-success")
                        }
                        $("#help-id").removeClass("is-loading")

                    }
                });
            }
            {# 닉네임 형식 검사, 아이디 중복확인 기능을 담당하는 함수 #}
            function check_dup_nick() {
                let nickname = $("#input-nickname").val()
                console.log(nickname)
                if (nickname == "") {
                    $("#help-nickname").text("닉네임을 입력해주세요.").removeClass("is-safe").addClass("is-danger")
                    $("#input-nickname").focus()
                    return;
                }
                if (!is_nickname(nickname)) {
                    $("#help-nickname").text("닉네임의 형식을 확인해주세요. 한글만 사용 가능. 2-6자 길이").removeClass("is-safe").addClass("is-danger")
                    $("#input-nickname").focus()
                    return;
                }
                $("#help-nickname").addClass("is-loading")
                $.ajax({
                    type: "POST",
                    url: "/sign_up/check_dup_nick",
                    data: {
                        nickname_give: nickname
                    },
                    success: function (response) {

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

                    }
                });
            }
    </script>코드를 입력하세요

아쉬웠던 점

프로젝트 초기 설계의 아쉬움 (Git 충돌)

각자 페이지 별로 기능을 맡았던 것은 과정적으로 풀스택으로 코드를 짜면서 서버와 클라이언트의 관계를 이해하는데에 도움이 되었다. 그러나 아쉬웠던 점은 각자의 기능을 합치는 과정에서 Git을 사용했는데, 겹치는 부분이 많다보니 코드를 commit하고 push하는 과정, pull을 받아오는 과정 모두에서 코드 간의 충돌이 잦았고, 팀 전체적으로 workflow를 해치게 되었다. 팀원들 모두 이 점에 아쉬움을 느꼈고, 다음 프로젝트에서는 기초 설계 단계에서부터 꼼꼼하게 시작하자는 다짐을 하게 되었다.

첫 WIL을 마무리 하면서...

첫 날부터 TIL을 꾸준히 작성해보리란 각오를 지키지 못한 것이 부끄럽다.. 오늘 WIL도 잘 작성했는지는 모르겠지만.. 이미 1주차는 지나갔다! 다시금 꾸준함을 이어나가겠다는 다짐을 하며 첫 WIL을 마무리한다. 내일 부터는 꼭! 1일 1TIL! (초딩일기 같더라도 괜찮아😅)