Ajax를 통한 좋아요, 댓글 구현 이론

개인적인 사정으로 인해서 세션에 직접 가지 못해서 미안하고..

그래도 뛰어난 우리 민석이, 신웅이, 정수가 잘 해줄거라 생각함..

Ajax 간단하게 설명 하겠음.

Ajax란 무엇일까?

Ajax는 위에 나와있는 그대로이다. 이니셜을 따서 붙인 이름임.

근데 비동기? XML? 저 각각이 뭘 말하는 걸까?

사실 정확한 정의는 나도 모름..

하지만 대강 어떠한 건지 개념은 알아둬야 Ajax를 이해할 수 있다!

우리가 지금까지 해온 django 개발은 위와 같이 브라우저와 서버 간에 Data를 주고 받는 과정이었다.

VScode를 통해 Django 서버를 개발했고, runserver를 해서 서버를 실행시킨 후 Chrome이라는 브라우저를 켜서 우리 서버에 접속을 했다. 즉, 브라우저와 서버 통신을 했던 것이다.

서버에 접속할 때에는 url을 입력해서 서버에 데이터를 요청했고, 서버는 이에 응답하여 데이터를 제공했다.

여기서 데이터는 그림에 나와있듯이 HTML 파일, CSS 파일, JPG 파일 등 이다.

우리가 blog라는 앱 아래에 templates라는 폴더를 만들고 그 밑에 만들었던 html 파일들이 브라우저에게 전송이 되고, 브라우저는 해당 파일을 해석하여 우리의 컴퓨터 화면에 띄워주는 것(rendering하는 것)이다.

이 때 화면이 바뀔 때 우리는 전체 페이지를 새로고침 했다.

예를 들어서 detail.html 파일에서 댓글을 작성하고, 버튼을 누르면, detail.html 페이지가 새로고침 되면서 댓글이 작성된다. 이것이 지금까지의 동기적 통신이었다.

그러면 비동기 통신은 무엇인가?

instagram에 댓글을 달아서 확인해보자.

호우! 형이 올린 게시물에 댓글을 달아 보았다.

우리가 지금까지 만든 서버와 다르게 전체 페이지가 새로고침되지 않고, 필요한 댓글 작성 부분만 조금 바뀌면서 댓글이 달렸다.

이것이 비동기 통신이다.

왜 비동기 통신이 필요한가?

HTML 파일을 전체 새로고침하게 되면 그 안에 있는 많은 script, jpg 등의 컨텐츠를 새로 불러와야 한다. CDN이나 많은 javascript 이벤트가 있을 경우 서버가 매우 버벅거릴 것이다.

댓글을 다는 경우에는 해당 댓글 파트만 변경이 되면 되는데 굳이 다른 파트까지 변경시키게 되는 것이다. 이는 심각한 자원 낭비이다. 따라서 비동기 통신으로 이를 처리한다.

그리고 지금까지 배웠던 것과 다르게 비동기 통신을 하면 뭔가 기술적으로 있어 보인다. 아니면 말고.

지금까지 Django 서버 개발을 위해서 javascript를 굳이 사용하지 않았다.

하지만 이제 민석이 세션에서 javascript를 배웠을 것이다.

Javascipt는 웹 개발에 있어서 절대로 빠질 수 없는 것이다. 따라서 익혀두면 좋은 것이 아니라 반드시 익혀야만 하는 것이다.

Ajax도 Javascript 코드를 통해서 구현한다.

먼저, Ajax가 동작하는 방식을 알아보겠다.

브라우저가 Data를 요청 및 전송한다.(댓글로 예를 들면, 댓글 내용과 해당 댓글이 달린 글의 id값을 서버로 보낸다. 그리고 처리 결과를 받기를 기다린다.)

서버는 받은 Data를 views.py에서 처리한다. 그리고 Json이라는 형식으로 다시 브라우저에게 Data를 전송한다.

브라우저는 처리 결과를 받고 event를 발생시켜 비동기적으로 html 파일의 일부를 변경시킨다.

이 때 Json 형식이라는 건 무엇일까?

일단은 위와 같이 데이터를 전달할 목적으로 사용하는 하나의 '형식'이다.

XML은 나도 써보지 않아서 모르겠다.. 그리고 아직은 몰라도 될 것 같다.

Json은 위의 그림과 같이 생겼다.

어디서 많이 본 것 같지 않은가?

python의 dictionary 자료형과 비슷하다.

사용 법도 거의 비슷하다고 생각하면 된다.

더 나아가서 보면

테이블 구조와도 비슷하다고 생각된다.

더 쉽게 받아들이고 이해할 수 있는 쪽으로 생각하면 되겠다.

실습을 다음 글에서 이어가도록 하겠다.