axios, ajax 관련 정리

댓글 생성/삭제의 비동기

• response.data 는 서버에서 클라이언트로 응답 보낼 때 전달하는 데이터를 참조

• 서버에서 JsonResponse(context)를 반환하고 있음

• 이는 클라이언트 측에서 AJAX 요청의 결과로 받은 JSON 데이터를 의미

  • 서버에서는 context 라는 이름의 변수를 사용하여 데이터를 정의하고 있지만 클라이언트 측에서 받을 때는 response.data 를 사용하여 참조
  • 이는 서버와 클라이언트 간 통신에서 응답 데이터를 참조하는 표준적인 방법
  • context로 자바스크립트에서 사용해도 상관 없음

• dataset 이란?

  • btn.dataset.commentId = response.data.dog_pk
    • html 요소에서 사용자 정의 데이터 속성을 설정하고 검색하기 위한 방법
    • btn 이라는 버튼 요소에 commentid 라는 사용자 정의 데이터 속성을 추가하고, 서버에서 받은 response.data.dog_pk 값을 저장
    • btn 버튼 요소에 commentId라는 사용자 정의 데이터 속성을 설정하면, 이후에 댓글을 삭제하는 기능을 구현할 때 해당 댓글의 ID를 쉽게 참조
    • btn 요소의 onclick 이벤트 리스너에서 remove 함수가 호출되면, 이 함수는 btn.dataset.commentId를 사용하여 댓글 ID를 가져올 수 있음
    • 이렇게 하면 해당 댓글을 삭제하기 위해 필요한 정보를 쉽게 얻을 수 있습
  • url:/${event.target.dataset.articleId}/dog/comments/`
    • 클릭 이벤트가 발생한 요소의 data-article-id 속성값을 가져옴
    • 이를 통해 해당 게시글 id를 가져와 url을 완성
    • 이 폼 요소의 data-article-id 속성 값을 가져와 AJAX 요청의 URL을 구성할 때 사용
    • 이렇게 하면 게시글에 대한 댓글을 생성할 때 올바른 게시글 ID를 서버에 전달할 수 있음
  • javaScript에서 dataset은 HTML 요소의 data-* 속성에 접근하거나 수정하는 데 사용됨
  • data-* 속성은 웹 개발자가 원하는 데이터를 HTML 요소에 저장할 수 있는 사용자 정의 속성

• const div =document.getElementById(e.target.dataset.commentId) 에서 getElementById는 왜 사용하나요?

  • html문서에서 주어진 id 속성값과 일치하는 요소를 찾아 반환
  • 삭제할 댓글의 div 요소를 선택하기 위함
  • 댓글 id와 일치하는 div요소를 선택

좋아요 버튼 비동기

• getElementById와 querySelector 차이
  • getElementById: 주어진 ID 속성값과 일치하는 요소를 찾아 반환
  • 이 함수는 ID를 기반으로 검색을 수행하며, 속도가 빠릅니다.
  • querySelector: CSS 선택자를 사용하여 문서 내의 요소를 찾습니다
  • 선택자에 일치하는 첫 번째 요소를 반환합니다.
  • 이 함수는 다양한 선택자를 사용할 수 있지만, getElementById에 비해 속도가 느릴 수 있습니다.
• ${event.target.dataset.articleId}이 있는데, html에는 data-article-id 으로 작성되어있습니다. 다른 단어 같은데, 왜 같은 의미로 사용되나요?
  • data-* 형식의 속성을 사용하면 요소에 사용자 정의 데이터를 저장할 수 있음
  • data-article-id라는 속성으로 게시물의 ID를 저장하고 있음
  • data-article-id라는 속성으로 게시물의 ID를 저장
  • 자바스크립트에서는 이러한 사용자 정의 데이터를 dataset 객체를 통해 접근할 수 있음
  • 예를 들어, data-article-id는 자바스크립트에서 articleId로 변환됨
  • 따라서 event.target.dataset.articleId를 사용하면 HTML의 data-article-id 속성 값에 접근할 수 있음
• 좋아요를 추가할때 is_bookmarked = True 로 True가 대문자인데, context.data.isbookmarked === true 여기서는 true가 소문자입니다. 왜그런것일까요?
  • 위의 코드에서 is_bookmarked 변수는 Python에서 정의되어 있습니다. Python에서는 불리언 타입의 참(true)을 대문자 True로 표현합니다. 반면에, context.data.isbookmarked === true 코드는 JavaScript에서 작성된 코드입니다. JavaScript에서는 불리언 타입의 참(true)을 소문자 true로 표현합니다.

제이쿼리 / axios / ajax 차이

• jQuery: 자바스크립트 라이브러리로, DOM 조작, 이벤트 처리, 애니메이션 등 웹 개발을 도와주는 기능들을 제공합니다.
  • 코드의 간결함과 브라우저 간 호환성을 향상시키는 데 도움이 됩니다.
• AJAX (Asynchronous JavaScript and XML): 웹 페이지를 새로 고치지 않고도 서버와 데이터를 교환할 수 있게 해주는 기술
  • 웹 페이지의 일부분만 업데이트할 수 있어 사용자 경험을 향상시킵니다. AJAX는 기본적으로 XMLHttpRequest 객체를 사용하여 비동기 통신을 수행
    
    
• jQuery의 $.ajax() 함수는 AJAX 요청을 쉽게 처리할 수 있게 해주는 래퍼 함수
  • 바이블 성격 프로젝트에서는 jQuery를 사용하여 요소 선택, 이벤트 처리, AJAX 요청 등을 수행
• axios는 HTTP 클라이언트 라이브러리로, AJAX 요청을 쉽게 처리할 수 있습니다. axios는 Promise 기반으로 작동하며, 브라우저와 Node.js에서 모두 사용할 수 있음
• 제이쿼리를 사용한 코드를 아래와 같이 axios로 바꿀 수 있음

document.querySelector('.choice').addEventListener('click', function(event) {
  const chosenId = event.target.id;
  const pk = document.getElementById(chosenId).dataset.value;
  const letter = document.getElementById(chosenId).dataset.letter;
  const mbti = document.getElementById(chosenId).dataset.mbti;
  const progressBar = document.querySelector('.progress-bar');
  progressBar.style.width = (100 / 12) * (pk + 1) + '%';

  axios.post('/nextpage/', {
    pk: pk,
    letter: letter,
    mbti: mbti
  })
  .then(response => {
    const data = response.data;
    progressBar.style.width = (100 / 12) * (data.question_pk + 1) + '%';
    document.getElementById('question-progress').innerText = data.question_pk;
    document.getElementById('question').innerText = data.question;

    const choice1 = document.getElementById('choice1');
    choice1.innerText = data.question_ans1;
    choice1.dataset.value = data.question_pk;
    choice1.dataset.letter = data.question_letter1;
    choice1.dataset.mbti = data.mbti;

    const choice2 = document.getElementById('choice2');
    choice2.innerText = data.question_ans2;
    choice2.dataset.value = data.question_pk;
    choice2.dataset.letter = data.question_letter2;
    choice2.dataset.mbti = data.mbti;
  })
  .catch(error => {
    console.log('finished');
    document.querySelector('div.main').style.display = 'none';
    document.querySelector('div.loader').style.display = 'block';
    mbti += letter;
    setTimeout(() => {
      window.location.href = `/result/${mbti}`;
    }, 3500);
  });
});

• 복잡한 AJAX 요청이 필요하고 브라우저 호환성에 큰 이슈가 없다면 Axios를 사용하는 것이 좋습니다.
  Axios는 Promise 기반이기 때문에 비동기 작업 처리가 간편하고 코드 가독성이 좋습
• 사용하기 쉬움: jQuery는 직관적이고 사용하기 쉬운 API를 제공합니다.

지도 구현 방식

• var latlng = JSON.parse("{{ latlngjson|escapejs }}") 코드는 서버에서 전달한 json형식의 문자열을 웹페이지의 자스에서 처리하기 위해 사용하는 코드
  • {{ latlngjson|escapejs }} 이 부분은 장고 템플릿에서 사용되는 구문으로, latlngjson 변수의 값을 JavaScript에서 안전하게 사용할 수 있는 형태로 변환
  • JSON.parse(): 이 함수는 JavaScript에서 제공되는 함수로, 인자로 전달된 JSON 형식의 문자열을 JavaScript 객체로 변환