JWT, Jinja2를 이용한 웹 게임 개발일지 (+세션과 토큰)

이 웹 게임은 플래피 버드처럼 space bar를 누를 때마다 위로 오르고 가만히 있으면 새가 점점 아래로 내려가는 게임이다.

좌측 상단에 있는 퀴즈를 보고 정답 표지판을 들고 있는 원숭이에게 새를 닿게하면 점수가 오르고 최대 점수인 8점을 득점하는 것이 게임의 목표다.

 

 

JWT는 JSON Web Tokens의 약자로, HEADER:ALGORITHM & TOKEN TYPE, PAYLOAD:DATA, VERIFY SIGNATURE로 구분된다. 나는 이 게임을 만들면서 HS256이라는 대칭키 해싱 알고리즘을 사용하여 보안을 강화시켰다.

 

 

세션과 토큰은 사용자 인증 방식에서 자주 사용되는 두 가지 개념이다. 둘 다 사용자의 로그인 상태를 관리하는 데 사용되지만, 관리 방식에 차이가 있다. 세션과 토큰의 차이점은 무엇이 있을까?

 

세션은 서버 기반 인증 시스템에서 사용된다. 사용자가 로그인하면 서버는 사용자에 대한 세션을 생성하고 세션 ID를 발급한다. 이 세션 ID는 사용자의 브라우저에 쿠키로 저장되며, 사용자가 서버에 요청할 때마다 이 쿠키를 통해 서버는 사용자를 식별한다. 세션 정보는 서버의 메모리나 데이터베이스에 저장된다.

 

토큰은 사용자가 로그인하면 서버는 특정 정보를 포함한 토큰을 생성하고 이를 사용자에게 발급한다. 사용자는 이 토큰을 저장해두었다가, 서버에 요청할 때마다 헤더에 토큰을 포함시켜 서버에 전송한다. 서버는 토큰의 유효성을 검증하여, 사용자를 식별한다. 토큰은 클라이언트 측에서 관리되며, 서버는 상태를 유지할 필요가 없어서 무상태 통신이 가능하다.

 

 

jinja2는 flask의 render_template 라는 기능을 사용하여 데이터를 넘겨 html로 구현하는 것이다. 웹 페이지를 동적으로 생성하는 데 유용하다.

 

function showRanking(ranking_list) {
    $("#modalBackground").addClass("opacity-100", "z-1000", "transition-all", "duration-500");
    $("#modalBackground").removeClass("-z-10");
    $("#ranking-list").empty();

    for (var i = 0; i < ranking_list.length; i++) {
        var rank = i + 1;
        var id = ranking_list[i]['id'];
        var score = ranking_list[i]['score'];
        $("#ranking-list").append("<li class='mx-20 px-10 pl-40 text-customListFontSize1 text-nowrap font-jgF1'>" + rank + "위 " + id + "      " + score + "점" + "</li>");
    }
}

function closeRanking() {
    $("#modalBackground").removeClass("opacity-100", "z-1000", "transition-all", "duration-500");
    $("#modalBackground").addClass("-z-10");
}

window.onload = function () {
    $("#ranking").click(function () {
        showRanking(ranking_list);
    });
    $("#close").click(closeRanking);
}

 

Jinja2의 서버 사이드 렌더링 방식

1. 사용자가 웹 페이지를 요청하면 서버는 해당 요청을 받아 처리한다.

2. 필요한 데이터는 데이터베이스나 다른 서비스로부터 로드된다.

3. 로드된 데이터를 Jinja2 템플릿에 삽입하여 HTML을 동적을 생성한다.

4. 생성된 HTML 페이지는 사용자의 브라우저로 전송되어 표시된다

 

 <script type=text/javascript>
    var ranking_list = JSON.parse({{ ranker | tojson | safe}});
  </script>

 

jinja2는 javascript 코드를 직접 실행하거나 조작하는 기능은 지원이 안 되기 때문에 위 코드처럼 구현하여야한다.

 

해당 게임 github URL

GitHub - JeongJongMun/JungleGap: 크래프톤 4기 미니프로젝트 - 정글차이