Ajax를 통한 좋아요, 댓글 구현 실습

당연히 가상 환경을 먼저 실행시켜 준다.

잘못된 디렉토리에서 실행시키려는 친구들이 종종 보이는데, 그럴 때는 ls 명령어를 통해서 myvenv 즉, 가상환경 폴더가 있는 디렉토리에서 진행하고 있는지 먼저 확인하기 바람.

그리고 좋아요와 댓글 버튼이 detail.html에 있기 때문에 blog 앱 폴더 밑에 있는 detail.html을 켜준다.

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

위의 코드를 detail.html에 endblock 위에 다가 넣어준다.

이는 javascript 기반의 라이브러리인 Jquery를 사용하기 위해 넣어주는 것.

간단히 말하면 Javascript의 기능을 좀 더 편하게 사용할 수 있도록 도와주는 기술인 Jquery를 사용하는 것이다.

그리고 그 바로 밑에 위와 같은 코드를 넣어준다.

코드를 따로 올려줄 수도 있지만, 한 번 쳐보는 게 도움이 많이 되기 때문에 직접 쳐보라는 의미에서 사진만 올리겠음.

위에 설명한 것처럼 javascript의 주석은 '//'와 '/* */'가 있다. 헷갈리지 않도록 주의하길 바람.

그리고 html파일에서 작성 중인데, 기본적으로 html 파일이기 때문에 html 코드만 적용이 된다. 하지만 여기에 javascript 코드를 적용시키기 위해 <script>라는 태그를 사용했고, 이 태그 안에서는 javascript 코드를 사용할 수 있게 된다.

 

function은 python에서

def 블라블라(): 

와 같은 모양으로 선언한 함수와 같다.

해당 함수가 실행되면 그 밑에 있는 코드들을 실행시키는 것이다.

그리고 이 함수에서 실행시키는 내용이 바로 보이는 대로 ajax이다.

 

request를 보내는 방식으로 GET과 POST를 배웠었다. type에는 브라우저에서 서버로 어떤 형식으로 request를 보내는 것인지를 작성한다. 여기서는 POST를 사용한다.

다음으로 해당 request를 어떤 url로 보낼 것인지 작성한다.

그리고 data 필드에는 '브라우저'에서 '서버'로 보낼 데이터를 json형식으로 작성한다.

아직 함수가 어떻게 실행이 되는지 말하지 않았지만, 함수가 실행되면서 blog_id라는 인자로 값을 받을 것이고, 이를 blog_id라는 이름으로 서버에 전송할 것이다. 그리고 저번에 보안을 위해서 csrf 토큰을 넣어줬듯이 넣어준다.

마지막으로 datatype이 json임을 알려준다.

 

여기까지의 코드를 통해서 브라우저에서 서버로 데이터가 전송되고 데이터를 기다린다.

success 부터는 이후에 다시 설명하겠다.

그리고 blog_project 폴더 밑의 urls.py로 간다.

ajax 코드에서 blog/like url로 데이터를 보내기로 했으니 그에 맞는 url을 추가해줘야 하는 것이다.

그래서 기존에 좋아요 기능을 처리하던 url을 주석처리 했다.(바로 위에 줄)

url에 추가를 했으니 당연히 다음에는 이 url에 들어왔을 시 실행될 코드를 views.py에 작성해야 한다.

 

하지만 그 전에 detail.html에 좋아요 버튼과 관련된 태그를 조금 바꾸고 가도록 하겠다.

아래 주석처리된 부분이 기존에 있던 코드이고 위에 있는 코드가 새롭게 추가된 코드이다.

일단, html에서 사용된 템플릿 태그를 주석처리 하기 위해서는 '{'과 '%' 사이에 '#'을 넣어 주어야 한다. 그래야 html 파일을 rendering 했을 때 이를 인식하지 않아 에러가 뜨지 않는다.

 

새롭게 추가던 코드는 button 태그를 추가했다. 그리고 javascript 세션 때 배웠겠지만, 해당 태그를 클릭하면 detail.html파일의 밑에 정의했던 like 함수가 실행되도록 코드를 만들었다. 그리고 like 함수에서 blog_id라는 인자로 값을 받게 되어 있었기 때문에, 템플릿 변수를 통해서 {{blog.id}}로 id값을 함수에 전달해주었다.

 

p태그와 span 태그를 추가한 것은 javascript로 이벤트를 발생시켜 해당 내용을 변경시키기 위함이다.

즉, document.getElementsById('like')나 $('#like')로 해당 태그의 내용을 변경시켜 주기 위함이다.(해당 코드가 정확한지는 모르겠음 막 적은거라..)

 

이제 views.py를 보자

먼저, views.py 상단에 해당 코드 2줄을 넣어줘야 한다. json을 사용하고, 비동기로 데이터를 보내기 위함이다.

그리고 가장 아래에 다음 코드를 추가한다.

url에서 views에서 like라는 이름으로 함수를 정의하기로 했으니까 like라는 이름으로 함수를 만든다.

 

먼저, user와 blog를 가져와서 M:N 관계를 맺는 것은 이미 진행한 세션이기 때문에 언급하지 않겠다.

 

변경된 부분은 원래 detail 함수에만 있던 message 변수를 사용한다는 것과 ret이라는 dictionary 변수를 사용하는 것 그리고 return 부분의 변화이다.

 

기존 like 함수에서는 M:N 관계만 변경시켜 주고, detail 함수를 실행시키는 url로 redirect 했기 때문에 굳이 함수 내에서 message 변수를 사용할 필요가 없었다.

 

하지만 ajax로 비동기 통신을 하는 경우 url을 통해 들어가는 것이 아니라 비동기적으로 json 데이터를 보내주고 일부만 변경시키는 것이기 때문에 message 변수를 사용해서 html에서 띄워줄 message를 변경시켜줘야 한다.

 

몇 명이 좋아요를 눌렀는지 또한 변경되는 데이터기 때문에 ret이라는 dictionary에 넣어준다.

 

그리고 return에서 json 형식으로 데이터를 보내겠다고 작성한다.

 

위 코드는 아까 detail.html에 작성했던 ajax 코드의 일부이다. 추가로 작성한게 아니니까 헷갈리지 말기를..

 

보면 blog/like라는 url로 들어와서 like라는 함수를 수행하고 다시 json 형식으로 return을 하고 다시 html파일로 돌아온 것이라 생각하면 된다.

이 때 제대로 json 형식의 데이터가 '서버'에서 '브라우저'로 전송되었다면 success 부분이 실행된다. 실패 했다면 error 부분이 실행된다. 따라서 alert를 통해 어떤 메세지가 뜬다면 error가 발생한 것임을 알 수 있다.(왜냐하면 error 부분에 alert 코드가 있기 때문)

 

만약 성공적으로 서버에서 브라우저로 json 형식의 데이터가 전송되었다면, 아래 javascript 코드 2줄을 통해서 html 파일의 해당 태그를 바꿔준다.

 

한 번 실행시켜 보도록 하자.

cd 명령어를 통해 manage.py 파일이 있는 디렉토리로 이동한다.

제대로 들어갔는지 보려면 ls를 활용해라.

 

로그인 하거나 회원가입을 해서 글 하나를 작성한 상태이다.

좋아요를 누른 상태이다. 페이지가 새로고침 되지 않고, 필요한 부분들만 변경된 것을 알 수 있다.

좋아요 구현 끝!

 

다음은 댓글을 ajax로 구현하는 것이다. 코드만 올리도록 하겠다.(절대 귀찮아서 그런거 아님! 아무튼 아님! 공부하라는 의미임)

우선 detail.html에 like 함수 밑에 이어서 위의 코드를 넣는다.

 

그리고 중간에 코드들을 수정했는데, 주석처리하거나 추가된 부분을 밑줄 쳐 놓았으니 주의하길 바람.

똑같은 순서로 urls.py에 들어가서 이전 comment를 create하던 url은 주석처리하고 새로운 url을 추가한다.

그리고 views.py에 ajax로 댓글을 달기위한 함수를 추가한다.

그리고 댓글을 달아보면 새로고침 없이 댓글이 달리는 것을 볼 수 있다.

 

여기까지 ajax 비동기 통신을 통해서 좋아요 기능과 댓글 기능을 구현해 보았다.

올려준 코드를 그대로 따라하면 되니까 작동이 안된다면 왠만하면 오타라고 생각된다.

천천히 따라해보면서 오타 없이 따라해 보기를 바란다.

 

그리고 따라서 타자만 치지 말고, 무슨 말인지 최대한 이해하려고 하면서 봤으면 좋겠다.

물론 내가 횡설수설해서 알아듣기 힘들 거라고 생각되는데, 이해 안되는 게 있으면 물어봐도 되니까 걱정 ㄴㄴ

그리고 처음에는 당연히 이해가 안되는 게 당연함.

 

나도 처음에 ajax 배울 때 며칠씩 밤 새면서 해도 안되서 탈모 올뻔 함. 진짜로.

 

아무튼, 세션에 직접 가지 못하고 이렇게 글만 쓰게 되서 미안하고, 열심히 해서 해커톤까지 잘 마무리하자 얘들아..

(물론 이 글을 다 볼꺼라고 생각하진 않지만, 이거를 다 본 사람이 있으면 애들한테 꼭! 꼭! 꼭! 좀 보라고 말좀 해줘 제발.. 힘들게 썼다..)