순수 자바스크립트 ajax 간단 정리 ( feat. XMLHttpRequest )

애증의 AJAX개발 학원을 다니며 프로젝트를 하던 시기에 다른 기능들은 전부 구현했지만 ajax만이 유일하게 구현하지 못했다.며칠을 해결해보려 했지만 끝내 실패하여 지금까지도 ajax는 트라우마처럼 자리잡았다. ^^지금이라도 ajax를 간단하게 정리하면서 이제 그만 보내주려한다. 😭 AjaxAsynchronous Javascript And Xml자바스크립트로 HTTP 요청을 보내서 응답을 받아오는 기술웹 브라우저에 내장되어 있는 XMLHttpRequest 객체를 사용이름에 Xml이 있지만 사실 모든 종류의 데이터 가져올 수 있다 참고로 ajax는 라이브러리같은 개념이 아니다.그냥 비동기 통신 기술이라고 보면 될 듯??? ajax는 XMLHttpRequest 객체가 핵심이다.  XMLHttpRequest..

• format_list_bulleted 🧠 저장/Javascript
• · 2024. 1. 29.
• textsms

디바운스(debounce)와 쓰로틀링(throttle)

스크롤을 맨 위로 이동하게 하는 버튼을 만드는 중에 알게 된 내용이다. 어느정도 화면을 내리면 버튼이 생겨야했기 때문에 스크롤 값을 저장해야했다. 로그를 찍어보니 스크롤 할때마다 과하게; 함수를 호출해서 사용하게 됐다. 디바운스(debounce)과 쓰로틀링(throttle) 둘 다 DOM 이벤트에 함수를 첨부 할 때 특히 유용하다. 그 이유는 이벤트와 함수 실행 사이에 제어 계층을 제공하기 때문이다. 둘 다 시간에 따라 함수를 얼마나 실행 할지를 제어하지만 서로 다르다. DOM 이벤트를 제어하지는 않는다고한다. Debounce Debounce는 이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술입니다. 즉, 순차적 호출을 하나의 그룹으로 그룹화할 수 있다. Throttle Thr..

• format_list_bulleted 🧠 저장/Javascript
• · 2024. 1. 18.
• textsms

webkit scroll freeze 이슈

문제 ios에서 스크롤의 맨 위나 아래에서 각각 스크롤업이나 다운시 스크롤이 freezing 되는 현상 해결 방법 이벤트끼리 충돌나서 생기는 문제라 그냥 touchstart, touchmove에 대한 listener 몇 개 추가하고 에러가 생기는 케이스들에 event.preventDefault() 하여 이벤트를 막았음 var lastY = 0; var targetElt = document.querySelector(".scroller"); targetElt.addEventListener('touchstart', function(event) { lastY = event.touches[0].clientY; }); targetElt.addEventListener('touchmove', function(event..

• format_list_bulleted 🧠 저장/Javascript
• · 2023. 11. 27.
• textsms

Promise.allSettled 초간단 사용법 + Promiss.all 차이점

맨날 헷갈려서 찾아보는 allSettled 이자식 아주 편리한 자식 Promise.all() 메서드는 객체에 주어진 모든 프로미스 중 하나라도 거절되면 모두 거절됨 한개 실패했을 뿐인데 엮여있는 애들 다 실패되면 세상 억울ㅜ Promise.allSettled 얘는 all 처럼 여러 프로미스를 처리하면서 성공을 하든 실패를 하든 일단 진행함 필요에따라 구분하여 쓰자 공통점 : 여러 프로미스의 결과를 비동기로 모두 이행하여 집계할 때 사용 아무튼 초간단 사용법 const promiseList = [ ]; primiseList.push( 함수1() ); primiseList.push( 함수2() ); primiseList.push( 함수3() ); //... 이렇게 차곡차곡 push ^^ Promise.all..

• format_list_bulleted 🧠 저장/Javascript
• · 2023. 11. 2.
• textsms

function을 변수에 넣는 이유

변수에 function 기본적인 자바스크립트에서 변수 사용법 function a() {} 변수에 넣어서 사용하는 방법 const a = () => { return '어쩌구' } 변수에 넣는 이유 (1) 오버라이딩을 막을 수 있다 (2) function이 먼저 정의된다 (top of scope) 참고로 자바스크립트에서 함수는 사실은 변수에 담겨진 함수 변수인 점! function a() {} 이렇게 작성해도 사실 var a = function() {} 이라고 한다! 그냥 코드 취향이라 생각한 무지함에 셀프반성^^ 일하면서 배우는 코딩 ^.^ㅜ 메모해둔거 조금씩 올려야지 ...

• format_list_bulleted 🧠 저장/Javascript
• · 2023. 11. 1.
• textsms