[WEEK00/DAY03] Jinja2 값을 Javascript에서 사용하기

Jinja2는 python에서 사용할 수 있는 templating engine이다.

자세한 설명은 아래 블로그를 참조하자.

https://frhyme.github.io/python-libs/jinja_basic/

 

이번 웹 사이트에서 구현하려는 기능은

본인이 남긴 댓글에만 수정/삭제가 가능하도록 만들어주는 것이었다.

그러기 위해서 클라이언트에 있는 로그인 ID 정보와 서버 댓글 DB에 있는 댓글 ID 정보를 비교해야 했다.

 

그 과정에서 Jinja2로 전달된 값을 활용해야 했는데, 문제는 Jinja2는 HTML로 만들어주기 때문에 비교 연산자를 쓰기에 부적합했다.

그렇다고 javascript에서 jinja2를 지원하는 것도 아니었다.

그래서 간단한 트릭을 이용했다. 먼저 html로 보내면, 그 값을 javascript에서 사용할 수 있게 옮기는 방식이다.

 

user_info = db.Users.find_one({"id": payload["id"]},{'_id':False})
user_info1 = json.dumps(user_info)
return render_template('Result.html', user_info=user_info, user_info1=user_info1)​

여기서 user_info는 dictionary 형식이다.

user_info == {'id' = 'abc', 'name' = 'def', .....} 이런 식이다.

이것을 JSON.dumps를 이용하여 json 전달 가능한 string 형식으로 바꿔주었다.

그리고 render_template으로 html에 전달해주었다.

 

자, 이제 html에서 javascript로 전달해야 한다.

<script></script> 내부에 다음과 같은 코드를 넣어서 받아온다.

let response = '{{ user_info1 | safe }}';

이때 response의 형식은 string이고, 아직은 dictionary처럼 쓸 수 없다.

그래서 javascript의 기능인 JSON.parse()로 파싱하려 했으나...

조금 이상하게 받아와지는 모양이라, JSON.parse()가 동작하지 않았다.

console.log(response)를 찍어보니

{"nickname": "문준호", "id": "moon", "password": "6b86b273ff34fce19d6b804eff5a3f5747ada4eaa22f1d49c01e52ddb7875b4b"}

javascript에서 dictionary의 key 값은 저렇게 따옴표 안에 들어있으면 안된다. 따옴표가 없어야 하는데.

곤란하다.

 

그래서 또 꼼수를 썼다.

 

큰 따옴표를 기준으로 split 하여 나온 배열 중에서 필요한 값만 이용하는 것이다.

 

0: "{"
1: "nickname"
2: ": "
3: "문준호"
4: ", "
5: "id"
6: ": "
7: "moon"
8: ", "
9: "password"
10: ": "
11: "6b86b273ff34fce19d6b804eff5a3f5747ada4eaa22f1d49c01e52ddb7875b4b"
12: "}"

이렇게 배열로 분리가 되었다. 이제 나는 저 배열[7]에 들어있는 id값을 사용할 수 있게 되었다.

 

 

더 좋은 방법 :
    더 깔끔한 개발 방법을 찾으면 된다.
    이런 꼼수도 가끔은 필요하겠지만...
    시간적 여유가 된다면 다음에는 깔끔한 로직으로 깔끔한 코드를 구현하자.