우선 버튼을 클릭했을 때, 특정 콘텐츠만 새로고침 하도록 HTML 코드에 HTMX를 설정하여 줍니다.새로고침 버튼을 클릭하면 tag-list-container가 innerHTML swap 설정으로 변경됩니다. 새로고침 {% include "blog/_tag_list.html" %} 이후 views.py에서 요청 헤더에 hx_reuqest가 존재하는지 판단하고, 존재하면 부분 템플릿, 존재하지 않으면 전체 템플릿을 사용합니다. is_htmx = request.META.get("HTTP_HX_REQUEST") == "true" if is_htmx: template_name = "blog/_tag_list.html" else: ..
FrontEnd
HTMXhtmx를 사용하면 자바스크립트 코드를 거의 작성하지 안혹 Ajax 요청과 페이지 갱신 처리를 할 수 있다. 라이브러리 추가 hx-get지정 주소로 GET 요청을 보냅니다.hx-gethx-posthx-puthx-patchhx-delete htmx ~ hx-get Attribute" data-og-description="" data-og-host="htmx.org" data-og-source-url="https://htmx.org/attributes/hx-get/" data-og-url="https://htmx.org/attributes/hx-get/" data-og-image="https://scrap.kakaocdn.net/dn/AnWQv/hyWztRpSjq/vqkvo5KBzVTkhDkmop..
고차함수의 기본 개념고차함수는 다른 함수를 인자로 받거나 함수를 반환하는 함수를 말한다. JavaScript에서 함수는 일급 객체로 취급되기 때문에 함수를 다루는 고차함수를 자주 활용할 수 있다. 함수를 인자로 받는 고차함수아래의 예제에서 higherOrderFunction은 콜백함수 callback을 인자로 받는 고차함수이다.function higherOrderFunction(callback) { console.log('Executing higher order function'); callback(); // 콜백 함수 호출}function callbackFunction() { console.log('Executing callback function');}higherOrderFunctio..
클래스의 경우 파이썬이나 다른 언어를 다뤄본 사람이라면 쉽게 다뤄 볼 수 있다고 생각하여, 간단한 예시들만 정리하였다. 클래스 선언'class' 키워드를 이용하여 선언한다. 클래스 내부에는 생성자 메서드와 클래스 멤버를 정의할 수 있다.class Animal { constructor(name) { this.name = name; } speak() { console.log(`${this.name} makes a noise.`); }}const myAnimal = new Animal('Dog');myAnimal.speak(); // "Dog makes a noise." 클래스 상속클래스 상속은 기존 클래스를 확장하여 새로운 클래스를 정의하는 것을 말합니다. e..
화살표 함수화살표 함수는 ES6에서 도입된 새로운 함수 표현 방식으로 함수를 간결하게 정의할 수 있다. 주로 익명 함수의 사용을 줄이고 코드를 간결하게 만드는데 사용된다. 아래의 예시처럼 => 기호로 정의되며, 매개변수 하나인 경우 괄호를 생략할 수 있다. 함수의 몸체가 한줄인 경우 중괄호 {}와 return 키워드를 생략할 수 있다.// 기본 구문const add = (a, b) => { return a + b;};// 한 줄 표현 시 중괄호와 return 생략 가능const multiply = (a, b) => a * b;console.log(add(2, 3)); // 5console.log(multiply(2, 3)); // 6 화살표 함수와 Scope함수 내부에서의 this 바인딩 ..
