Q. ?? 넹? 갑자기 역사요??

A. 라는 질문을 할 수 있겠지만, 저번 세션에서 했던 ajax 를 이해하고자 한다면 왜 태어나게 되었고, 이게 어떤 영향을 줬는지 알면 더 흥미롭게 바라볼 수 있을 것 같아서 준비해봤습니다.

1995년, 당시 네스케이프사의 네비게이터가 웹브라우저 시장을 지배하고 있었는데, 네스케이프는 HTML페이지에 경량의 프로그램 언어를 통하여 인터렉티브한 것을 추가 하기로 결정했다.

그래서 브랜든 아이작(Brendan Erich) 를 고용했다., 그는 10일 만에 언어 (사람 맞아..? 🤢🤮) 를 만들었다. 그 언어의 이름은 '모카'였고, 9월 '라이브스크립트'로 이름을 변경하였다. 그해 12월 네스케이프와 썬은 '라이브스크립트'를 '자바스크립트' 라고 최종 이름을 결정하였다. 이 자바스크립트는 네비게이터 2.0B3에 포함되었다.

자바스크립트에 대해 들어봤거나, 검색해봤으면 ES6 라는 용어를 볼 수 있었을 것이다. 여기서 ES가 바로 ECMAScript의 약어이다.

자바스크립트가 나온 이후 , MS사는 IE 3.0( 3.0..? )에서 동작하는 'JSrcipt'라는 똑같은 언어를 만들어 냈다. 그러자 넷스케이프사는 자바스크립트를 표준화 하기 위해, 표준화 기구인 Ecma International에 요청을 했다.

1996년 11월, ECMA-262 (지금도 존재하고, 이거 보면 JS 동작 원리를 모두 이해할 수 있음)라 불리는 명세서에 대한 작업이 시작했고 그 버전은 1997년 7월에 완성되었다. 당시 Sun사가 'JAVA' 라는 단어를 상표 등록을 해 놨기에 'JavaScript' 라고 부를 수 없었다.

따라서, 다음과 같이 이름이 결정되었다 :

• 표준 언어의 이름은 ECMAScript(a.k.a ES)
• 대외적으로 알리기 위해서 자바스크립트나 J스크립트라고 불렀다. 나중엔 표준 이나 구현 모두 'JavaScript라는 이름으로 불렸다.

이 파트에서는 자바스크립트 탄생 이후 어떠한 일들이 있었는지 설명하고 있다.

1997년 동적인 HTML 동적으로 변하는 컨텐츠와 웹페이지의 외관을 만들 수 있게 되었다. 따라서 페이지의 문서 객체 모델(DOM)을 다루어 컨텐츠와 스타일을 변화하고, 요소를 보여주거나 숨기는 것과 같은 것들을 가능하게 했다.

1999년 XMLHttpRequest 이 API는 클라이언트 측 스크립트를 http 또는 https로 서버에게 요청하고, 텍스트 형식으로(당시엔 xml, html / 지금은 json도 가능) 데이터를 받는 것을 가능하게 했다.

2001년 JSON, 자바스크립트 기반의 데이터 교환 포맷 2001년 더글라스 크락포드(Douglas Crockford) 는 텍스트 형식으로 데이터를 저장하는 자바스크립트 문법을 'JSON' 이라 이름 붙이고 문서화했다. JSON은 객체, 배열, 문자열, 숫자들, 불린 등을 구조적인 데이터로 표현하기 위해 자바스크립트 리터럴로 사용된다.

{
  "firstName": "CHAEMIN",
  "lastName": "IM",
  "function": () => { console.log('function') },
  "array": ["foo", "bar"],
  "object": {
    "key": "value"
  }
}

지금도 JSON은 매우매우매우 많이 쓰이며, 특히 API 통신에 많이 사용된다.

2005년 Ajax 😀, 브라우저 기반의 어플리케이션

Ajax의 두 가지 속성

• 컨텐츠 로딩을 백그라운드에서 비동기적으로 진행한다. (XMLHttpRequest)
• 그 결과물을 가지고 현재 페이지에서 동적으로 업데이트를 한다.(dynamic HTML)

따라서 매번 전체 페이지를 다시 로드하는 것보다 많은 사용성 개선이 되었다.

Ajax는 자바 스크립트와 함께 동적 웹 어플리케이션의 주요 돌파구였다. Ajax가 나온 이후, 이전과 다른 데이터 형식이 인기를 얻게 되었고(XML 대신 JSON), 다른 프로토콜들이 사용되게 되었고(HTTP뿐만 아닌 웹 소캣..), 양방향 통신 또한 가능하게 되었다.

2006년 jQuery, Dom조작을 도와주다. 브라우저 DOM은 클라이언트 사이드 웹 개발에서 가장 힘든 부분이다. jQuery는 브라우저의 차이를 넘어선 추상화 (=모든 브라우저에서 잘 동작을 보장)와 DOM의 쿼리 및 수정을 위한 강력한 API를 제공하여 DOM조작을 쉽게 만든다.

2008년 V8, 더 빨라진 자바스크립트 구글이 크롬 웹브라우저를 소개했을 때, 많은 장점들 중 하나는 V8이라고 불리는 빠른 자바스크립트 엔진이었다. 이는 자바스크립트가 느리다는 인식을 바꾸고, 다른 브라우저 제조사들과의 속도 경쟁을 이끌 수 있게 되었다.

... 나머진 생략 😎

다들 저번 MDL / JS / Ajax 세션에서 JS (+ JQuery) 를 통해 DOM 조작을 해봤을 거에요.

저번 코드를 가지고 하나하나 이해해보는 시간이 있으면 좋을 것 같아서 준비했습니다~

📓 용어 사전 📓

MDL : Material Design Lite - 구글의 디자인 철학을 담아서 만든 UI Library.

UI : User Interface - 폰트, 컬러, 레이아웃과 같이 사용자가 마주하게될 시각적인 디자인.

Library : 특정 기능들을 손쉽게 사용할 수 있도록 구현해놓은 것들.

DOM : Document Object Model - 간단하게 이해하자면, 웹 페이지를 구성하고 있는 요소들(div, p, h1 등등 태그)과 이 요소들을 조작할 수 있는 인터페이스를 통칭해서 DOM이라고 함. (DOM이란?)

아래는 우리가 저번에 댓글 감추기 기능을 구현하기 위해 작성했던 코드입니다.

좀 특이한게 저 $ 표시라고 생각하는데 저만 그런거 아니져..? 저게 뭔지 알아봅시다.

$(document).ready(() => {
    $(".more-comment-btn").on('click', function(event) {
      $(this).toggleClass("showing-comment");
  
      if ($(this).hasClass("showing-comment")) {
        $(this).text("HIDE COMMENTS");
        $(this).parent().find(".toggle-comment").not(".last-comment").show();
      } else {
        $(this).text("MORE COMMENTS");
        $(this).parent().find(".toggle-comment").not(".last-comment").hide();
      }
    });
  }
)

JQuery 를 사용하려면 먼저 JQuery 객체를 만들어야 합니다. 우리가 사용하고 싶은 기능들은 JQuery 객체에 있거든요.

고럼 JQuery 객체는 어떻게 만드냐! 바로 아래 두 함수 중 하나를 사용해서 만듭니다.

• jquery()
• $()

이 두 함수는 완전히 같은 기능을 합니다. jquery() 를 다 쓰기엔 귀찮으니까 그냥 $() 를 써서 쉽게 사용하는 거죠.

$() 함수는 인자로 selector 와 context 배열을 받습니다. (context 배열은 자주 사용되지 않고, optional 값입니다.) selector는 css selector 를 넣어주면 됩니다.

$('.toggle-comment') 라고 쓰면 .toggle-comment 라는 class를 가진 DOM 객체를 jquery 객체로 만들게 되는거죠! 만든 후에 jquery 에서 만들어 놓은 함수들을 사용해서 .toggle-comment class 를 가진 DOM 객체를 손쉽고, 자유롭게 조작할 수 있게 됩니다.

이러한 $()함수를 통해 생성된 요소를 제이쿼리 객체(jQuery Object)라고 합니다.

Document 객체는 웹 페이지 그 자체를 의미합니다. 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 합니다. 뿐만 아니라 Document에는 브라우저에서 지원하는 매우 많은 빌트인 함수(built-in 함수) 가 존재하죠. 요놈이 없으면 JS는 무쓸모 입니다.

방금 위에 Document가 없으면 JS 가 무쓸모라 했죠? 그렇기 때문에!! ⚠️ DOM을 조작하고 싶은 경우! 자바스크립트 코드는 웹브라우저가 문서의 모든 요소를 로드한 뒤에 실행되어야 합니다. ⚠️ 저번 세션에서 제가 <script ...></script> 은 <body> 태그 밑, 혹은 문서 제일아래에 넣어야 한다고 했죠? 그 이유가 바로 이것 때문입니다.

DOM 조작 예시는 다음과 같습니당

1. 아직 생성되지 않은 HTML 요소에 속성을 추가하려고 할 경우
2. 아직 로드되지 않은 이미지, DOM의 레이아웃 정보(크기, 위치 등)를 얻으려고 할 경우

그럼 위에 있는 오류 없이 js를 사용하려면 어떻게 해야해? 라는 질문이 나올 수 있겠죠? 해결법은 아래와 같아요

1. Js 파일을 문서 가장 아래에서 부른다!

가장 간단한 방법입니다. <body> 태그의 가장 아래에 넣어주면 됩니다. HTML은 위에서부터 차근차근 읽기 때문에 <script> 를 가장 아래에 놓고 js를 부르면 DOM이 모두 만들어지고 난 다음 js가 동작하겠죠?

2. document가 로드되고 난 다음 JS가 동작하도록 강제한다!

하지만 JS 로드 시점을 항상 철저하게 지킬 수 없습니다. 그럴 땐 document 객체가 로드 된 다음 js를 실행시키도록 강제해주면 됩니다. 아래와 같이요!

(샤실 document보다 상위에 window 객체가 있습니다) window.onload 는 document 가 모두 로드되고 난 다음 실행되는 함수입니다. 이런걸 이벤트 함수(event function) 라고 하는데, click 처럼 어떤 트리거가 있고, 해당 트리거가 동작할 때 실행되는 함수입니다. 이 window.onload 는 document 객체가 정상적으로 로드 되면 (= DOM 이 정상적으로 생셩되면! ) 실행되기 때문에 맘편히 JS를 사용할 수 있게 됩니다.

바닐라 js와 jquery 가 형식은 쪼오금 다르지만 결과적으로 동일한 기능을 합니다!

• 바닐라 JS를 사용할 경우

window.onload = function(){
	// do something
};
 

• jQurey를 사용할 경우

$(document).ready(function() {
	// do something with jquery
});

다시 우리가 짰던 코드로 와봅시다.

$(document).ready(() => {
    $(".more-comment-btn").on('click', function(event) {
      $(this).toggleClass("showing-comment");
  
      if ($(this).hasClass("showing-comment")) {
        $(this).text("HIDE COMMENTS");
        $(this).parent().find(".toggle-comment").not(".last-comment").show();
      } else {
        $(this).text("MORE COMMENTS");
        $(this).parent().find(".toggle-comment").not(".last-comment").hide();
      }
    });
  }
)

이제 뭔가 좀 이해가 될거라 믿어요.

• $() 를 통해 jquery 객체를 만들어서 우리가 쓰고 싶은 기능들을 쓰고자 한다
• $(document).ready(() => {...}) 를 통해 document 객체가 로드되고 난 다음 함수를 실행시키려 함! 덕분에 DOM 조작에 있어서 문제가 생길일이 없움

맞죠? 맞다고 말해

자 우리는 '댓글 더보기' 버튼을 만들고 해당 버튼을 누르면 다음과 같은 동작을 하게 만들고자 합니다.

• 댓글 더보기 버튼을 눌렀을 경우
  • 버튼 텍스트를 'HIDE COMMENTS' 로 수정 - 댓글을 다 보여줬으니 이젠 숨기는 버튼으로 Change~
  • .last-comment 가 아닌 댓글들을 보여지게 만듦!
• 댓글 숨기기 버튼을 눌렀을 경우
  • 버튼 텍스트를 'MORE COMMENTS' 로 수정 - 댓글을 숨겼으니 이젠 보여주는 버튼으로 Change~
  • .last-comment 만 보여지고 나머지 .toggle-comment 들은 모두 숨김!

여기까지 이해되시죠?

그럼 저 코드에서 위 기능을 구현하기 위해 사용했던 함수들을 하나하나 뜯어봅시다

jquery에서 on 은 이벤트 핸들러를 붙이는 기능을 합니다. 감이 딱 오시는 분도 있겠고 그렇지 않은 분도 있을 것 같은데.

우선 이벤트 핸들러 란 특정 이벤트, 예를 들어 'click', 'scroll', 'load', 'keypress' 등이 발생했을 때 실행시키는 함수를 의미합니다. 말그대로 이벤트가 발생했을 때 핸들링 하는 역할이죠.

.on() 함수는 2개의 인자를 받습니다.

• EventType
  • e.g) click, load, keypress ...
• Callback Function

우리가 위에서 사용했던건 그럼 뭘까요? 클릭 이벤트가 발생하면 function(event) 부분을 실행하라는 거겠죠?

막간 Question! 어떤걸 눌러야 이 이벤트 핸들러가 동작할까요??? 정답은.. 알고 계시겠지만 $(".more-comment-btn") 객체를 클릭했을 때 이벤트가 발생합니다.

JS 에서 this란 ... 매우매우.. 매우...아주... 엄청 괴랄하고 이상하고 극혐이고 이해하기 어려운 부분입니다. 설명하자면 하루 다 쓸 수 있을정도로 극혐이니, 여기선 그냥 $(".more-comment-btn") 객체 각각을 의미한다고 생각하세용.

단 '각각' 이라는 점에 주목하셔야 하는데, $(".more-comment-btn") 는 여러개가 있을 수 있잖아요? .more-comment-btn 이 여러개가 될 수 있으니까요! 그러나 여기서 $(this) 는 딱! 클릭한 그놈! 그 객체! 만을 의미합니다. 고냥 그렇게 알아두세요!~!

ClassName을 붙였다 떼었다 하는 기능입니다! 보통 click 이벤트랑 잘 엮여서 사용됩니다. 여기선 $(".more-comment-btn") 에 .showing-comment class 를 붙였다 떼었다 하겠네요!

해당 class 를 가지고 있는지 여부를 알려줍니다. true / false 값을 리턴하져

DOM 의 텍스트를 바꿔줍니다. <p>this is p tag</p> 에 $('p').text('No this is div') 를 적용하면<p>No this is div</p> 가 되겠죠?

부모 DOM을 리턴합니다.

Css selector 를 인자로 받는데, 자식 DOM 중에서 selector에 부합하는 jquery 객체를 반환해줍니다.

역시 Css selector 를 인자로 받지만, 자식 DOM 중에서 해당 selector가 없는 jquery 객체를 반환해줍니다.

숨기고 보여줍니당!

와! 여기까지 했으면 AJAX를 제외하고 다들 jquery 실버는 되셨습니다. 아직 그랜드 마스터까진 먼 길이 남아있지만, 실버가 반이란 속담도 있잖아요? 벌써 반 왔어요!

Ajax 이론은 어느정도 파악하셨을 거라 믿습니다.

그래도 혹시 몰라 간단히 그림과 함꼐 설명드리겠습니다

여러분 장고는 프론트앤드, 백엔드가 함께있는 프레임워크입니다.

위에 그림을 보면 알 수 있듯, 우리는 인터넷을 통해 장고 서버에 요청을 보내면, 장고는 HTML를 응답으로 주고, 우리는 받은 HTML로 템플릿을 다시 그리게 됩니다. HTML을 받는다는 점에 주목하세요. 우리는 장고 뷰에서 여러 작업을 한 다음 render() 함수 또는 redirect() 함수를 통해서 템플릿을 보여주고, 화면을 그리고 있었죠? 이렇게 HTML을 통으로 받아오는 방법은 새로고침이 된다는 필연적인 특징을 가지고 있습니다. (다만! 줠라 빠르고 검색엔진에 최적화 되어있다는 장점도 있습니다.)

Ajax를 사용하면 어떻게 되나요?? ajax 통신에 대해 자세한 내용을 밑에서 더 설명드릴게요. 우선 전체적인 흐름만 보면 ajax는 JSON 객체를 응답으로 받고 JS를 통해 DOM을 동적으로 조작해서 화면을 수정하게 됩니다. JS를 통해 동적으로 화면을 수정하기 때문에 새로고침이 없죠!! 왜냐? JS는 그냥 그렇게 만들어졌어요... 다른 작업에 영향을 주지 않고 어떤 일을 할 수 있어용..

아 물론..! Ajax 통신도 XML, HTML 을 받을 수 있습니다. HTML을 받아도 JS를 통해 받은 HTML 부분만 갈아끼우면 됩니다만, 지금은 거의 안 쓰이죠..

아래 그림을 보시면 더 잘 이해할 수 있을거에요.

Traditional REQ/RES	AJAX REQ/RES

생각보다 간단하쥬? 다른건 뭐냐? AJAX Request 를 보낸다는 것과, JSON Response 를 받는다는 점 뿐이죠

자 이제 실습시간에 했던 내용을 하나하나 분석해 봅시다.

$.ajax({
  type: '', // 통신 방식입니다. HTTP Method
  url: ``, // api 통신을 할 pathname입니다. 
  data: { 
    // ajax 통신을 위해 서버에 넘겨주는 데이터 입니다.
    // 예를 들어, feed 에 comment를 생성하려면, feed id 와, comment 내용이 있겠죠?
  },
  dataType: 'json',
  success: function(response) { 
    // ajax 통신이 성공하면 실행됨.
  },
  error: function(response, status, error) {
    // ajax 통신 중 오류가 발생했을 때 실행됨
  },
  complete: function(response) {
    // ajax 통신이 끝나고, 성공 / 실패 여부와 관계없이 실행됨.
  },
});

• $.ajax
  • 자 $ 는 jquery의 전역객체입니다. 전역객체.. 이름만 들으면 어려워 보이지만, 그냥 jqeury가 지닌 모든 변수, 함수등을 가지고 있는 객체라고 생각하시면 됩니다. 여기에 ajax 함수가 정의되어있고 우리는 이 함수를 실행시키기만 합니다.
• $.ajax({ ... })
  • 위에 함수를 실행시킨다고 했는데, 함수에는 파라미터를 넣을 수 있쬬? JS는 파라미터로 Object 를 넣을 수 있습니다. 그래서 우리는 ajax 함수가 필요로 하는 여러 파라미터들을 key-value 값으로 해서 넣어주고 있는 것이죠

자 그래서 우린 Ajax 통신을 위해 어떤 파일, 어떤 코드들을 수정을 해야할까요? 딱 정리해드리겠습니다. 여러분의 장고 프로젝트에선 딱 파일 3개만 수정하면 됩니다.

• HTML

  • ajax는 JS를 통해 실행됩니다. 하지만 만약! 우리가 요청을 보내려는 주소가 fid 처럼 장고 뷰로부터 받는 정보가 있다면? /feeds/<int:fid>/comments/ 같은 형태라면? 혹은 보내려는 데이터에 fid 같은 장고 변수가 필요하다면? 자바스크립트는 이 fid 가 뭔지 알 수 있을까여?? 모릅니다. 그럼 어떻게 해야하죠? 알게 해야죠!!
  • HTML Data 속성 이란게 있습니다. 간단히 말해 HTML에 추가적인 정보를 저장할 수 있게 하는 문법이죠. JS는 DOM에 접근할 수 있으니까, 여기에 저장된 정보를 JS는 가져다 사용할 수 있습니다.
  • 고래서! 요청에 필요한 변수정보들은 이 기능을 사용해서 JS가 알 수 있게 해줘야 합니다.

• myjs.js

  • Ajax통신을 할 js 파일

• view.py

  • 통신을 할 API 에 대한 view.py 코드
  • response만 JSON으로 바꿔주면 됩니다

자 장고에선 딱 3개 파일만 바꿔주면 됩니다. 하지만 막상 구현하려 하면, 막막하죠.. 바꾸면 되는 파일은 알겠지만 뭘 어떻게 해야할지 모르겠죠? 그래서 좀 더 자세한 Flow 를 정리해 드리려 합니다.

0. HTML에 필요한 정보를 data- 를 사용해서 주입해주기

   • data-fid : 요청을 보낼 때 필요한 feed의 id
   • data-csrfmiddlewaretoken : POST 요청을 보낼땐 반드시 csrf 토큰이 필요합니다. 그동안은 폼태그 밑에 {% csrf_token %} 를 넣음으로써 장고가 알아서 처리해줬지만, ajax를 위해선 저희가 따로 처리해줘야 하므로 요것도 같이 보내줍니다. (GET 요청에는 필요없슴니다)

   <!-- feepage/templates/feedpage/index.html -->
   <form action="/feeds/{{ feed.id }}/comments/" method="POST" class="comment-submit" data-fid="{{ feed.id }}" data-csrfmiddlewaretoken="{{ csrf_token }}">
     {% csrf_token %}
   	<!-- ... some HTML -->
   </form>

1. myjs.js 파일에 ajax 코드 추가

   아래 코드가 추가해줘야할 가장 기본적인 골자입니다. 먼저 ajax 통신을 발생시킬 이벤트를 걸고, 해당 이벤트 핸들러(콜백함수)에 ajax함수를 실행시키는 겁니다.

   $('selector').sumbit((event) => {
       event.preventDefault();
       $.ajax({
           type: 'GET' | 'POST' | 'PATCH' | 'DELETE',
           url: `API_PATH`, 
           data: { 
           },
           dataType: 'json',
           success: function(response) {},
           error: function(response, status, error) {},
           complete: function(response) {},
       });
   });

2. ajax 내용물을 채워줍시다

   $('.comment-submit').submit((event) => {
    	  event.preventDefault();
     
       const $this = $(event.currentTarget);	// .comment-submit 객체
       const fid = $this.data('fid');	// 앞서 data-fid 로 넣어준 데이터를 이렇게 가져올 수 있습니다.
       const csrfmiddlewaretoken = $this.data('csrfmiddlewaretoken'); // 앞서 data-csrfmiddlewaretoken 로 넣어준 데이터를 이렇게 가져올 수 있습니다.
   
       $.ajax({
           type: 'POST',
           url: `/feeds/${fid}/comments`,  // ``을 사용하면 js변수를 편하게 넣어줄 수 있습니다.
           data: { 
             // data에 들어갈 내용은, comments를 생성하기 위해 필요한 내용들입니다. 우리가 view.py에서 create_comment 를 실행시킬 때 필요한 정보들이죠
             fid: fid,
             csrfmiddlewaretoken: csrfmiddlewaretoken,
             content: $(`input#${fid}[name=content]`).val(), // 여기가 댓글의 내용입니다.
           },	
           dataType: 'json', // json 타입으로 통신하겠다는 의미입니다. 걍 놔두면 됩니다.
           success: function(response) {}, // 성공했을 때 실행되는 함수
           error: function(response, status, error) {}, // 실패했을 떄 실행되는 함수
           complete: function(response) {}, // ajax 통신이 끝나면 항상 실행되는 함수
       });
   });

3. View.py를 수정해줍시다.

   간단합니다. response만 JSON으로 해주면 됩니다.

   # feedpage/views.py
   
   from django.http import JsonResponse # 추가
   ...
   
   def create_comment(request,id):
       content = request.POST['content']
       FeedComment.objects.create(feed_id=id, content=content, author=request.user)
       new_comment = FeedComment.objects.latest('id')
   
       context = {
           'id': new_comment.id,
           'username': new_comment.author.username,
           'content': new_comment.content,
       } # 프론트로 전달해주고 싶은 데이터들
   
       return JsonResponse(context)

4. ajax가 성공했을 때 뭘 할지 정해줍니다.

   ajax가 성공하면 뭘 해줘야 할까요? 우선 3번까지 진행하면서 통신이 성공하면 장고 서버로부터 context 를 받을 겁니다. 그렇게 받은 context 데이터들 (id, username, content) 을 JS를 통해 댓글로 만들고, 추가해주면 됩니다. 즉, DOM 조작을 하는것이죠

   $('.comment-submit').submit((event) => {
       event.preventDefault();
     
       const $this = $(event.currentTarget);	
       const fid = $this.data('fid');
       const csrfmiddlewaretoken = $this.data('csrfmiddlewaretoken'); 
   
       $.ajax({
           type: 'POST',
           url: `/feeds/${fid}/comments`,
           data: { 
             fid: fid,
             csrfmiddlewaretoken: csrfmiddlewaretoken,
             content: $(`input#${fid}[name=content]`).val(),
           },
           dataType: 'json',
           success: function(response) {
   	       // function(response) ... 로 콜백함수를 만들었습니다. 우리가 장고서버에서 보내주는 context는 response라는 이름으로 받아오게 됩니다.
               // 이 response 이름은 자유롭게 수정 가능하고, 어떻게 수정하든 context 데이터가 담겨져 옵니다.
             
               // 받은 response 데이터를 가지고 새로운 댓글 DOM을 만들어 줍시다. 여기는 feedpage에 있는 html을 참고해서 만들어 주면 됩니다
               const str = `
                   <div class="toggle-comment last-comment">
                       <p>${response.username}: ${response.content}</p>
                       <form action="/feeds/${fid}/comments/${response.id}/" method="POST">
                       <input type="hidden" name="csrfmiddlewaretoken" value=${csrfmiddlewaretoken}>
                       <button class="mdl-button mdl-js-button mdl-button--icon">
                           <i class="material-icons">clear</i>
                       </button>
                       </form>
                   </div>
               `;
   
               // 우리가 더보기 버튼을 통해 가장 마지막 댓글만 보여주고 있었죠? 그런데 새로 추가된 댓글이 생겼어요. 
   	       // 그러면 기존에 .last-comment는 더이상 last-comment가 아니게 되고, 새로 추가되는 댓글이 last-comment가 되겠죠?
               // 그런데 위에 새롭게 만들어주는 댓글 DOM을 보니 이미 last-comment class를 가지고 있네요?
               // 그럼 우리는 기존에 있던 last-comment에 .last-comment class만 지워주면 됩니다.
               // 그 부분을 처리해주는 겁니다.
               const $commentBtn = $this.siblings('.more-comment-btn');
               const $lastComment = $this.siblings('.last-comment');
   
               // 만약 지금 상태가 댓글을 다 보여주고 있다면, .last-comment class 만 제거!
               // 만약 지금 상태가 댓글을 숨기고 있다면, .last-comment class 제거함과 동시에 숨겨줘야겠죠?
               if ($commentBtn.hasClass('showing-comment')) {
                   $lastComment.removeClass('last-comment');
               } else {
                   $lastComment.removeClass('last-comment').hide();
               }
   
               // 만든 댓글을 주입해줍시다
               $(str).insertBefore($this);
             
               // 그리고 댓글 입력창을 비워줍시다
               $(`input#${fid}[name=content]`).val('');
           },
           error: function(response, status, error) {},
           complete: function(response) {},
       });
   });

5. 꿑!

고생 많았습니다. 드디어 새로고침 없이 댓글을 달 수 있게 되었습니다~!~! 👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏

네 사실대로 말하면 현재는 저렇게 jquery를 사용해서 Ajax 기능을 구현하진 않습니다. 왜냐구요? 요즘은 프론트앤드는 프론트앤드, 백앤드는 백앤드 각각 프레임워크를 통해 개발하거든요. 가장 유명한 프론트앤드 라이브러리로는 리액트(react) 가 있는데, 리액트는 놀랍게도 ajax를 신경쓸 필요가 없답니다!

그런데 왜 배워야할까? 는 의문이 들 수 있습니다.

(여기부턴 제 개인적인 생각입니다)

Ajax는 API 통신의 새로운 패러다임을 가져왔습니다. 페이지 전체를 주고받는 것이 아닌, 원하는 부분만 주고받거나 혹은 원하는 데이터만 주고받는 형태로 말이죠.

이젠 프론트앤드와 백앤드가 완전 분리되어 프론트앤드는 프론트앤드 서버를 가지고, 백앤드는 백앤드 서버를 가지고 동작하게 됩니다. 아래 그림처럼 말이죠. 프론트앤드에서 백앤드로 데이터와 함께 특정 api를 호출하면 백앤드는 api 호출에 맞는 동작을 수행하고 json으로 결과를 전달해주는 거죠. 그럼 프론트앤드는 받은 결과를 가지고 새롭게 화면을 구성 & 수정하게 됩니다.

뭔가 익숙하죠? ajax 통신 flow와 동일하지 않나요? ajax 는 단순히 새로고침을 하지 않게 해준다는 개념이 아니라! 새로운 통신 패러다임이고, 현재까지 널리널리 쓰이는 일종의 통신방식이라 볼 수 있습니다.

이 개념을 이해하고 있으면 위의 구조도 이해가 갈 것이고, 나중에 프론트앤드와 백앤드가 분리된 프로젝트를 할 때 서로 통신을 어떻게 할 것인가에 대해 보다 빠르게 이해하고 진행할 수 있을 겁니다.

긴 글 읽어주셔서 감사합니다. 뿌듯!~!