웹개발 플러스 4주차 개발일지

Bulma>

Bulma는 Bootstrap과 비슷한 css framework다.
순수 CSS이기 때문에 사용과 수정이 용이하다.

Bulma의 import 코드는 다음과 같다.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">

Bulma에 다음과 같이 CSS를 수정해줄 수 있다.

.section {
    width: 600px;
    max-width: 100vw;
    margin: auto;
}

.is-hidden이라는 코드를 사용해 CSS를 숨길 수도 있다.
이 코드는 이미 다음과 같이 설정되어 있다.

.is-hidden {
	display: none!important;
}

.toggleClass를 사용하면 class에 적용된 코드를 on-off시킬 수 있다.

$("#id").toggleClass("is-hidden")

.is-active를 사용해 모달을 추가 가능하다.
아래 코드를 넣어 onclick 시 모달이 나오도록 한다.

onclick='$("#modal-post").addClass("is-active")'

해시함수>

임의의 값을 고정된 길이의 암호화 된 값으로 변환해주는 함수다.

import hashlib

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

JWT>

JSON Web Token의 약자, 로그인 후 회원만 페이지에 접속할 수 있게 해주는 토큰과도 같다.
토큰의 유지시간은 datetime으로 설정한다.

payload = {
            'id': id_receive,
            'exp': datetime.utcnow() + timedelta(seconds='유지시간')
        }

SECRET_KEY = '값'

token = jwt.encode(payload, SECRET_KEY, algorithm='HS256')

웹페이지의 쿠키를 사용하기 위해서 서버에서 다음 코드를 쓸 수 있다.

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

html에서는 쿠키를 다음과 같이 주고, 삭제한다.

$.cookie('mytoken', response['token']);

$.removeCookie('mytoken');

Regular Expression>

정규표현식은 아래와 같다.

닉네임은 a-z까지, A-Z까지는 필수, 대시와 언더바와 .을 포함할 수 있으며 최소 2자에서 최대 10자까지.

패스워드는 a-z까지, A-Z까지는 필수, 기재된 특수문자들을 포함하여 최소 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);
}

웹페이지>

• pymongo에서 bool(db.~)는 DB에 해당 데이터가 있는지를 확인해주는 코드다.

bool(db.users.find_one({"username": username_receive}))

• .hasClass는 해당 class를 갖고 있는지 확인해주는 코드다.

$("#id").hasClass('class');

• 시간을 표시할 때 한 방법으로 .toISOString()이 있다.

let today = new Date().toISOString()

• 태그를 찾을 때는 .find()를 사용한다. 아래는 i 태그를 찾는다.

$a_like.find("i")

• 해당 데이터를 포함하는 오브젝트의 갯수를 찾을 때는 .count_documents를 사용한다.

db.~.count_documents({"post_id": post["_id"], "type": ""})

• 조건부 삼항 연산자를 쓰면 if / else를 사용한 값 변경 코드를 한줄로 처리할 수 있다.
  :의 왼쪽이 true 오른쪽이 false다.

let class_heart = post['heart_by_me'] ? "fa-heart": "fa-heart-o"