항해 미니프로젝트 3일차(5/11)

미니 프로젝트 3일차
팀원분들중 한분이 인스턴스 issue가 생겼다. 단순 카드 문제였던거 같다.

3일차 목표

• UI 통일성
• 부족한 기능 보완
• 최종 제출 사항 갖추기
• 서로가 구현한 기능과 코드 이해하고 서로 설명해주기
• JWT와 jinja2를 왜 사용했는지 이유 알기

JWT를 쓴 이유
JWT를 이용해서 로그인과 로그아웃을 구현해야하는데 JWT는 토큰을 의미하는 것이고 그 토큰을 이용해 로그인과 로그아웃을 구현한다.

jinja2를 쓴 이유
jinja2를 쓰면 Flask를 구동하기 위해서는 Jinja2를 반드시 설치해야 한다. Jinja2가 필요한 이유는 Flask의 풍부한 기능 확장을 위해서이다. 확장기능은 Jinja2와 의존관계에 있을 수도 있다. 라고한다. Flask서버를 좀 더 다양하게 쓸 수 있어서 쓰는 것이라고 생각한다. 그리고 jinja2를 쓰면 데이터를 바꿔가면서 렌더링을 해주면서 수 백의 페이지들을 나타낼수가 있다고 한다.

3일차까지 완성한 코드

main.html에 필요한 데이터들을 서버에서 클라로 주고 해당 이용자가 토큰이 없을시 
메인 페이지로 이동하는 코드와 토큰을 가지고 있다면 로그인한 상태로 메인페이지로
이동하고 아니면 예외처리를 하였다.
@app.route('/')
def main():
    # 성현님 부분 (하나 안함)
    token_receive = request.cookies.get('mytoken')

    borders = list(db.lol_collection.find({}, {"_id": False}))
    if token_receive is None:
        return render_template('main.html', borders=borders)
    try:
        payload = jwt.decode(token_receive, SECRET_KEY, algorithms=['HS256'])
        user_info = db.user.find_one({"id": payload['id']})
        return render_template('main.html', borders=borders, nickname=user_info["nick"], id=user_info["id"])
    except jwt.ExpiredSignatureError:
        return redirect(url_for("login", msg="로그인 시간이 만료되었습니다."))
    except jwt.exceptions.DecodeError:
        return redirect(url_for("login", msg="로그인 정보가 존재하지 않습니다."))

글쓰기 버튼을 선택했을 떄 페이지를 이동하게 해주고 로그인을 안했을때는 예외처리를 한 코드
@app.route('/write', methods=["GET"])
def get_write_page():
    # 성현님 부분
    token_receive = request.cookies.get('mytoken')
    borders = list(db.lol_collection.find({}, {"_id": False}))
    try:
        payload = jwt.decode(token_receive, SECRET_KEY, algorithms=['HS256'])
        user_info = db.user.find_one({"id": payload['id']})
        return render_template('write_page.html', borders=borders, nickname=user_info["nick"], id=user_info["id"])
    except jwt.ExpiredSignatureError:
        return redirect(url_for("login", msg="로그인 시간이 만료되었습니다."))
    except jwt.exceptions.DecodeError:
        return redirect(url_for("login", msg="로그인 정보가 존재하지 않습니다."))

메인 페이지에 게시판을 보여주는 HTML과 CSS jinja2로 서버에서 보내주는 데이터들을 받아서
표현해주고 있다.border.id는 각각 개인의 id라는 번호를 가지고 있어서 개별로 인식하게 만들어
주었다.
<tbody id="tbody-box">
{% for border in borders %}
    <div class="box" id="{{ border.id }}">
        <div id="border-list" class="box-list" onclick=window.location.href="/board/{{ border.id }}">
            <h1 style="text-align: center"><strong>듀오해듀오</strong></h1>
            <div class="name">
                <p><strong>{{ border.duo_date }}</strong></p>
            </div>
            <div class="tier">
                <p><strong>{{ border.tier }}</strong></p>
                <p><strong>{{ border.content }}</strong></p>
            </div>
        </div>
    </div>
{% endfor %}