순수 자바스크립트 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

v-bind와 v-model의 간단 차이점

v-bind와 v-model의 차이점 v-bind는 단방향, v-model은 양방향 바인딩. 양방향이면 그저 좋을 거라 무식한 생각을 했지만, 당연하게도 역할에 맞게 써야 한다. 각각의 기능과 역할을 알아보고 쓰임새에 맞게 쓰도록 하자... v-bind v-bind는 데이터를 DOM 요소의 속성에 동적으로 바인딩하는 데 사용된다. export default { data() { return { myData: 'initial value' }; } }; :value는 v-bind:value의 단축 표현이다. :value는 input 요소의 value 속성을 myData에 동적으로 바인딩한다. 그러나 이것은 양방향 바인딩이 아니기 때문에 사용자의 입력은 myData에 반영되지 않는다. 주로 form 요소에 초기..

• format_list_bulleted 🧠 저장/Vue
• · 2024. 1. 27.
• textsms

vue2 watch와 computed의 차이점

vue를 배우기 시작했을 무렵 watch와 computed의 역할에 대해서 감이 잡히지 않았다. watch.. 단어 그대로 감시하고 있다는 점이 더 직관적이라 computed 더 쉽게 사용할 수 있는 걸 watch로만 개발하기도 했다. (졸라 혼남) 아무튼 지금은 어느정도 감이 잡혔지만 명확하게 설명할 수 있지는 않았기에 watch 와 computed의 차이점에 대해 정리할 필요가 있었다. watch와 computed의 차이점 watch와 computed는 둘 다 상태 변화를 감지하고 그에 따른 행동을 수행하는 데 사용되는 옵션이다. 그러나 각각의 목적과 동작 방식에는 몇 가지 차이가 있다. watch watch 옵션은 데이터의 변화를 감지하고, 특정 데이터가 변경될 때 특정 동작을 수행할 수 있게 한다..

• format_list_bulleted 🧠 저장/Vue
• · 2024. 1. 24.
• textsms

vue2 네비게이션 가드 간단 정리

네비게이션 가드 네비게이션 가드는 주로 탐색을 리디렉션하거나 취소하여 탐색을 막는데 사용된다. 주로 사용자의 권한과 인증 정보를 확인하여 특정 페이지에 접근하지 못하게 할 때 사용한다. 가드 연결 방법은 전역, 경로별, 컴포넌트 내부가 있다. 1. 전역으로 연결하기 비포 가드 beforeEach() : 라우터 인스턴스의 beforeEach() 메서드에 콜백함수를 전달하여, 비포 가드를 전역으로 등록할 수 있다. 탐색이 트리거 될 때마다 등록 순서대로 비포 가드가 호출된다. 가드는 비동기식으로 해결될 수 있고 탐색은 모든 훅이 해결되기 전까지 대기중으로 간주한다. const router = createRouter({ ... }) router.beforeEach((to, from, next) => { // ..

• format_list_bulleted 🧠 저장/Vue
• · 2024. 1. 21.
• textsms

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

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

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