▶ 버블링을 활용하지 않은 경우 1. querySelectorAll()을 사용해서 전체 좋아요 버튼 선택하기 2. forEach()를 사용해서 전체 좋아요 버튼을 순회하면서 진행하기  ▶ querySelectorAll() 선택을 위한 class 적용 ▶ forEach()를 사용해전체 좋아요 버튼을 순회하면서 진행하기

▶ 좋아요 + ajax기본적인 큰 로직은 팔로우와 동일 차이점 : 좋아요 버튼은 팔로우 버튼과 달리 한 페이지에 여러 개가 존재한다그래서★ 어떤 좋아요 버튼이 눌린건지 알아야한다 ★ 근데 모든 좋아요 버튼에 이벤트 리스너를 할당해야 할까?아니다, 그럴 필요는 없음 버블링을 쓰면 된다 => 버블링 event.currentTarget 핸들러가 부착된 대상event.target 실제 이벤트가 발생한 지점공통된 부모의 역할을 할 수 있는 부모 태그에만이벤트 핸들러를 부착한다 * 버블링 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고 이어서 부모 요소의 핸들러가 동작하는 현상가장 최상단의 조상 요소 (document)를 만날 때까지 이 과정이 반복되면서, 요소 각각에 할당된 핸들러가 동작한다 Q..

# accounts > views.py follow 함수  from django.http import JsonResponse@login_requireddef follow(request, user_pk): me = request.user you = get_user_model().objects.get(pk=user_pk) if me != you: if me in you.followers.all(): you.followers.remove(me) is_followed = False else: you.followers.add(me) is_followed = True context =..

# accounts > templates > accounts > profile.html 더보기  {{ person.username }}님의 프로필 페이지 {% comment %} 13. 팔로잉/팔로워 수 비동기 적용 선택을 위해 span 태그 지정 {% endcomment %} 팔로잉 : {{ person.followings.all|length }} / 팔로워 : {{ person.followers.all|length }} {% if request.user != person %} {% comment %} 1. 요청은 axios로 대체되기 때문에 form 태그의 action과 method를 삭제 {% endcomment %} {% comment %} 6. ..

* Axios 홈페이지 들어가서, CDN 코드 하나 복사하기https://axios-http.com/kr/docs/intro 시작하기 | Axios Docs시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코axios-http.com # accounts > templates > accounts > profile.html 이제 form이 아니라 axios를 통해서 요청을 보내겠다 더 이상 form의 action과 method가 필요가 없어진다 더보기 {{ person.username }}님의 프로필 페이지 팔로..

▶ 목표지금까지 배운 JavaScript를 모두 사용해서 Django에서 비동기적인 요청과 응답을 구현하기 Ajax와 서버 새로고침 없이 특정한 부분만을 다시 들일 수 있다왜냐하면, 우리는 데이터를 받기 때문에데이터를 활용해서 페이지에서 필요한 부분만 변경시킬 수 있다  * Ajax (Asynchronous JavaScript ans XML)비동기적인 웹 어플리케이션 개발에 사용하는 전체적인 기술 Javascript를 사용해서, 비동기적으로 어떤 어플을 만드는 기술  Ajax with follow 비동기 팔로우 구현 Ajax with likes비동기 좋아요 구현

▶ then & catch의 chaining axios로 처리한 비동기 로직은 항상 promise 객체를 반환한다즉, then과 catch는 모두 항상 promise 객체를 반환한다=> 계속해서 chaining을 할 수 있다. then을 계속 이어 나가면서 작성할 수 있게 된다  ▶ then 매서드 chaining의 목적 비동기 작업의 "순차적인" 처리가 가능하다 코드를 보다 직관적이고 가독성 좋게 작성할 수 있도록 도움  ▶ then 매서드 chaining의 장점가독성비동기 작업의 순서와 의존 관계를 명확히 표현할 수 있어 코드의 가독성이 향상된다 에러 처리각각의 비동기 작업 단계에서 발생하는 에러를 분할해서 처리할 수 있다 유연성각 단계마다 필요한 데이터를 가공하거나다른 비동기 작업을 수행할 수 있어..

▶ PromiseJavaScript에서 비동기 작업 결과를 나타내는 객체이다비동기 작업이 완료되었을 때 결과 값을 반환하거나실패 시 에러를 처리할 수 있는 기능을 제공한다  ▶ Promise Object자바스크립트에서 비동기 작업을 처리하기 위한 객체 비동기 작업의 성공 또는 실패와 관련된 결과나 값을 나타낸다 콜백 지옥 문제를 해결하기 위해서 등장한 비동기 처리를 위한 객체이다. " 작업이 끝나면 실행시켜줄게" 라는 약속 Promise 기반의 HTTP 클라이언트 라이브러리가 바로 Axios이다성공에 대한 약속 then()실패에 대한 약속 catch() ▶ Axios JavaScript에서 사용되는 Promise 기반 HTTP 클라이언트 라이브러리 비동기 콜백Promise  ▷ Promise가 보장하는 ..

문제의식)▶ 비동기 처리의 단점 비동기 처리의 핵심은 Web API로 들어오는 순서가 아니라 작업이 완료되는 순서에 따라 처리한다는 것이다. 그런데 이는 개발자 입장에서 보면코드의 실행 순서가 불명확하다는 단점이 존재한다 이와 같은 단점은실행 결과를 예상하면서 코드를 작성할 수 없게 한다 해결방안)콜백 함수 활용하기 ▶ 비동기 콜백 처리하는 작업이 비동기적으로 완료되었을 때 실행되는 함수 연쇄적으로 발생하는 비동기 작업을 순차적으로 동작할 수 있게 해준다 => 작업의 순서와 동작을 제어하거나, 결과를 처리하는 데 사용한다 ▶ 비동기 콜백의 한계비동기 콜백 함수는 보통 어떤 기능의 실행 결과를 받아서 다른 기능을 수행하기 위해 많이 사용된다 이 과정을 작성하다 보면, 비슷한 패턴이 계속 발생한다 A를 처리..

AjaxAxios특정한 기술 하나를 의미하는 것이 아님비동기적인 웹 어플리케이션 개발에 사용하는 기술들의 묶음클라이언트 및 서버 사이에 HTTP 요청을 만들고응답을 처리하는 데 사용되는 자바스크립트 라이브러리 (Promise API 지원) 프론트엔드에서는 Axios를 활용해 DRF로 만든 API 서버로 요청을 보내서 데이터를 받아온 후 처리하는 로직을 작성하게 된다.