async/await 와 Promise 는 비동기 처리를 위한 Javascript 의 핵심 개념이다. 🧩 Promise란? Promise 는 비동기 작업의 완료(또는 실패)를 나타내는 객체다. Promise 는 3가지 상태를 가진다. ⏳ pending (대기 중) ✅ fulfilled (성공) ❌ rejected (실패) function getData() { return new Promise((resolve, reject) => { setTimeout(() => { resolve("데이터 로드 완료!"); }, 1000); });}getData() .then((result) => console.log(result)) .catch((error) => console.erro..

🧩 기본 개념 요약콜 스택(Call Stack)"지금 실행중인 함수들의 순서" 를 관리하는 실행 컨텍스트 스택LIPO (Last In, First Out) 마이크로태스크 큐(Microtask Queue)Promise .then() / await 이후 코드가 들어간다.콜 스택이 비면, 바로 이 큐에 작업이 우선 실행된다. 태스크 큐(Task Queue)setTimeout, setInterval 같은 일반 비동기 콜백이 들어간다.마이크로태스크보다 나중에 실행된다. 실행 컨텍스트우리가 작성한 Javascript 가 실행되는 환경을 실행 컨텍스트 환경이라고 한다.실행 컨텍스트는 콜 스택(Call Stack) 위에서 관리된다. 실행 컨텍스트는 두가지의 실행 컨텍스트가 존재한다.전역 실행 컨텍스트(Global E..

Jquery 로 .html() 을 사용하여 동적 HTML 삽입 시 기존 노드와 기존 이벤트 리스너가 삭제되지만.on() 으로 등록했던 이벤트 리스너들은 Jquery 가 재 바인딩을 해줘 이벤트를 사용할 수 있었다. 하지만 vanilla JS 의 .innerHTML 을 통해 동적 HTML 삽입 시 기존 노드 및 기존 이벤트 리스너가 삭제된 후.addEventListener() 를 통해 이벤트를 수동으로 재등록 해줘야 사용할 수 있다. 이때 vanilla JS 로 동적 HTML 삽입 시 이벤트 리스너 및 스크립트를 실행할 수 있는 방법은공통 함수를 호출하여 함수 내 스크립트 태그내용을 불러와서 재등록 해주면 된다. 본인은 모달창을 띄울때 모달창 내용을 동적 HTML 삽입하여 띄웠다. const initial..

모달창을 띄울때 서버단에서 HTML 파일 자체를 가져와 Dom 에 직접 넣었다.아래처럼 되어있는 div 태그내용에 모달창의 내용인 HTML 파일을 직접 받아와 넣었으나Jquery 를 사용할때와 vanilla js 를 사용할때 문제점이 있었다. 문제점 : Jquery 의 .html 을 통해 HTML 내용 자체를 넣었을 때는 HTML 파일 내 이벤트리스너가 정상적으로 동작했으나vanilla js 인 .innerHTML 을 사용했을 때는 이벤트리스너가 동작하지 않았다.// Javascriptaxios({ url : menu_href, method : 'post', header : { 'Content-Type' : 'application/json' }}).then(functi..

Javascript 를 사용하여 화면 내 scroll 을 이동 해야해서 찾아봤다. 브라우저 창 너비와 높이브라우저 창 화면에 보이는 너비와 높이를 알려면 document.documentElement 의clientWidth 와 clientHeight 를 사용한다.  사용방법document.documentElement.clientWidthdocument.documentElement.clientHeight 또 다른 확인 방법은 관리자도구(F12) 를 키고 모바일로 봤을 때 확인 가능하다.   window.innerWidth 와 document.documentElement.clientWidth 의 차이점너비와 높이를 구하는 방법중에 window.innerWidth 와 window.innerHeight 도 있다...

환경 = Spring Boot, JQuery, thymeleaf Spring Boot 와 Thymeleaf  환경에서 JQuery Ajax 요청 중 Spring Security 의 CSRF Token을 헤더에 기본적으로설정하기 위해 찾아보다가 ajaxSend 함수와 ajaxSetup() 의 beforeSend 를 보아 정리한다.  .ajaxSend(function(e, xhr, options){ ... })ajaxSend 는 JQuery 에서 Ajax 요청을 보내기 전에 실행시킬 함수를 정의한다.즉, Ajax 이벤트 처리기이다. Ajax 요청을 보내기 전에 매번 ajaxSend() 함수 이벤트를 발생시킨다. Ajax 요청을 서버에 보내기전에 공통적으로 처리해야할 것이 있을 때 사용한다. 사용법// JQu..