[내배캠/TIL(5/3)]웹개발 플러스 4주차

손홍서·2022년 5월 3일

WEB

목록 보기

5/5

day12(5/3) TIL

day12 느낀점

로그인, 회원가입이 신경쓸 부분이 많다는 것을 알게 되었고 아직 생소해 더 많이 연습해보고싶다.
좋아요 기능도 신경쓸 부분이 많아 계속 하나 건드리고 작동이 안되니 어딜 또 건드려야되는지 우왕좌왕한다.
앞으로 더 체계적으로 정리해 이러한 문제를 잡아야겠다.
이번 강의느는 새로운 부분을 더 많이 알게된 것 같아 좋았다.

Bulma

미리 정해진 모습의 클래스를 가져다쓸 수 있는 무료 CSS 프레임워크이다.
순수한 CSS 프레임워크이기 때문에 기능을 직접 구현해야되지만 더 자유롭게 커스터마이징이 가능하다.
Bulma에서는 is-hidden이라는 클래스를 이용해서 요소를 숨길 수 있습니다.

is-hidden {
	display: none!important;
}

숨겨져 있으면 드러내고, 드러나 있으면 숨겨주는 함수를 jQuery에서 간단히 도와줌 : toggleClass()

function toggle_sign_up() {  
    $("#sign-up-box").toggleClass("is-hidden")
}

Bulma는 사용하기위해서 딱 한 줄 적어주면된다.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">

Bulam의 사이트 이 곳에서 원하는 요소를 골라 사용하면 된다.
https://bulma.io/documentation/elements/

회원가입

해시함수

알고리즘의 한 종류로서 임의의 데이터를 입력 받아 항상 고정된 길이의 임의의 값으로 변환해주는 함수
우리가 회원가입에 사용할 해시함수 SHA256은 어떤 길이의 입력값을 넣어도 항상 256바이트의 결과값이 나온다.
동일한 입력값은 항상 같은 결과값이 나오고, 입력값은 조금이라도 달라지면 완전히 다른 값이 나온다. 그리고 결과값을 통해 입력값을 알아내는 것이 불가능하다.

pw_hash = hashlib.sha256(pw_receive.encode('utf-8')).hexdigest()

정규표현식

아이디: 영문과 숫자, 일부 특수문자(._-)만 사용 가능, 2-10자 길이. 영문 무조건 포함
비밀번호: 영문, 숫자는 1개 씩 무조건 포함, 일부 특수문자 사용 가능, 8-20자 길이

function is_nickname(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);
}

더 자세하게 알고싶으면 이 블로그들을 참고하면 좋다.

https://hamait.tistory.com/342
https://blog.hexabrain.net/205

JSON 객체를 사용해 정보를 안정성 있게 전달하는 웹표준
예를 들어, 로그인 기능을 생각해보면 사용자가 로그인하면 서버에서 회원임을 인증하는 토큰을 넘겨줌으로써 이후 회원만 접근할 수 있는 서비스 영역에서 신분을 확인하는 데 쓰일 수 있다.

토큰을 만들기 위해서는 크게 3가지, Header,Payload, Verify Signature가 필요하다.
Header : 위 3가지 정보를 암호화할 방식(alg), 타입(type) 등
Payload : 서버에서 보낼 데이터가 들어갑니다. 일반적으로 유저의 고유 ID값, 유효기간
Verify Signature : Base64 방식으로 인코딩한 Header,payload 그리고 SECRET KEY를 더한 후 서명된다.

Header, Payload는 인코딩될 뿐(16진수로 변경), 따로 암호화되지 않습니다. 따라서 JWT 토큰에서 Header, Payload는 누구나 디코딩하여 확인할 수 있다. 따라서 Payload에는 유저의 중요한 정보(비밀번호)가 들어가면 쉽게 노출될 수 있다.
하지만 Verify Signature는 SECRET KEY를 알지 못하면 복호화할 수 없습니다.

로그인 시, 비밀번호를 같은 방법으로 암호화한 후, DB에서 해당 아이디와 비밀번호를 갖는 회원이 있는지 찾습니다. 회원 정보가 없는 경우 실패 메시지를 보내고, 찾은 경우 아이디와 토큰 만료 시간을 저장하는 토큰을 만들어 넘겨줍니다.

 payload = {
            'id': username_receive,
            'exp': datetime.utcnow() + timedelta(seconds=60 * 60 * 24)  # 로그인 24시간 유지
        }
        token = jwt.encode(payload, SECRET_KEY, algorithm='HS256')

로그인 성공 메시지를 받으면 건네받은 토큰을 쿠키로 저장하여 만료되기 전까지 갖고 있으면서, API 요청을 보낼 때마다 회원임을 확인받습니다.

$.cookie('mytoken', response['token'], {path: '/'});

token_receive = request.cookies.get('mytoken')

로그아웃 시 해당 토큰을 삭제합니다.

 $.removeCookie('mytoken', {path: '/'});

pymongo

mongodb에서 자동으로 생기는 _id 속성을 앱에서 처리하기위해서 문자열 타입으로 일일이 변경 필요

for post in posts:  # 각각의 _id를 문자열로 변경
	post["_id"] = str(post["_id"])

데코레이터

데코레이터란?
어떤 함수를 받아 명령을 추가한 뒤 이를 다시 함수의 형태로 반환하는 함수.
어떤 함수의 내부를 수정하지 않고 기능에 변화를 주고 싶을 때 사용한다.
말그대로 다른 함수를 꾸며주는 함수.

from functools import wraps  # functools 모듈로부터 wraps 데코레이터를 가져온다.


def decorator2(func):
    @wraps(func)  # wrapper2에 붙여준다.
    def wrapper2(*args, **kwargs):
        print(f'{func.__name__} has been decorated again by decorator2')
        return func(*args, **kwargs)
    return wrapper2


def decorator1(func):
    @wraps(func)  # wrapper1에 붙여준다.
    def wrapper1(*args, **kwargs):
        print(f'{func.__name__} has been decorated by decorator1')
        return func(*args, **kwargs)
    return wrapper1

@decorator2
@decorator1
def function():
    print(f'This is original function')