망고

디바운싱과 쓰로틀링 둘은 모두 웹에서 발생하는 이벤트를 제어하는 방법이다. 예를 들어 스크롤 이벤트의 경우 스크롤링 할 때마다 발생하는데, 그 때마다 같은 작업을 실행하게 되면 성능 문제가 발생할 수 있다. 디바운스와 쓰로틀링을 적절한 상황에서 사용하여 이러한 성능상의 이슈를 막을 수 있다. 📍 디바운싱 (Debouncing) 연속으로 호출되는 함수들 중에 마지막에 호출되는 함수(또는 제일 처음 함수)만 실행되도록 하는 것 예를 들어 검색 버튼을 누르지 않아도 사용자가 입력한 값이 변경될 때마다 자동으로 검색 요청을 보내는 기능을 만든다고 한다면, 사용자가 입력하는 value 값 마다 계속해서 요청이 보내지게 되므로 비효율적이다. 이러한 경우에 디바운싱을 적용하면 사용자의 입력이 끝나고 일정 시간이 지난..

프로토타입과 클래스에 대해 알아보기 전 우선 객체 생성자라는 것을 먼저 알아야한다. 객체 생성자 함수를 통해서 새로운 객체를 만들고 그 안에 넣고싶은 값 혹은 함수들을 구현 할 수 있게 해준다. function Animal(type, name, sound) { this.type = type; this.name = name; this.sound = sound; this.say = function() { console.log(this.sound); }; } const dog = new Animal('개', '멍멍이', '멍멍'); const cat = new Animal('고양이', '야옹이', '야옹'); dog.say(); cat.say(); 결과: 멍멍 야옹 객체 생성자를 사용할 때는 보통 함수의 이름..

📌AXIOS란? 👉axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP비동기 통신 라이브러리이다. 👉쉽게 말해서 백엔드와 프론트엔드가 통신을 쉽게하기 위해 Ajax와 더불어 사용한다. 👉이미 자바스크립트에는 fetch api가 있지만, 프레임워크에서 ajax를 구현할 땐 axios를 쓰는 편이라고 보면 된다. 📌AXIOS특징 👉운영 환경에 따라 브라우저의 XMLHyypRequest 객체 또는 Node.js의 http의 http api사용 👉Promise(ES6) API 사용 👉요청과 응답 데이터의 변형 👉HTTP 요청 취소 👉HTTP 요청과 응답을 JSON 형태로 자동 변경 axios fetch 써드파티 라이브러리로 설치가 필요하다. 현대 브라우저 빌트인이라 설치가 필요 ..

📌자바스크립트의 비동기 (1)SetTimeout Web API의 한 종류인 setTimeout() 함수를 통해 비동기 처리를 적용해보자. HTML 삽입 미리보기할 수 없는 소스 코드를 살펴보면 동기적으로 코드가 진행되면서 콘솔창에 보이는 1,2,3 이라는 결과를 얻게 된다. 이제 중간의 2를 비동기적으로 처리하면 아래와 같다. HTML 삽입 미리보기할 수 없는 소스 아까와 같이 순차적으로 1,2,3 이라는 결과가 나오지 않고 1,3,2라는 결과를 얻게 되었는데, 이는 바로 setTimeout()이라는 비동기 함수를 통해 2를 2초 뒤에 출력하게 하는 명령을 주어서 2가 출력될 때까지 3이 기다리지 않고 먼저 출력된 후에 2초가 지나서 2가 출력되었기 때문이다. (2)콜백함수 콜백함수란 다른 코드의 인수로..

📌자바스크립트의 비동기 자바스크립트는 대표적인 싱글 스레드 언어이다. 현재 많은 컴퓨터들은 여러개의 CPU 코어를 가지고 있기 떄문에 한 번에 여러가지의 일을 수행할 수 있다. 하지만 여러가지의 일을 수행하려면 멀티스레드를 지원하는 프로그램 언어일 때 가능하다. 스레드1: 작업A -> 작업B -> 작업C 이러한 면에서 JS는 아무리 CPU코어를 많이 가지고 있더라도 싱글 스레드 언어이기 때문에 한가지의 작업이 끝난후에 다음 작업을 수행할 수 있다. 하나의 작업만 수행할 수 밖에 없는 자바스크립트 동작을 여러 작업이 동시에 일어나는 것처럼 보이게 하는 것이 이벤트 루프라는 개념을 통해서 동시성을 구현하는 것이다. 비동기로 동작하는 핵심요소는 자바스크립트 엔진이 아니라 브라우저 또는 node.js가 지원하는..

📌이벤트 핸들러 사용자가 웹 페이지의 HTML과 상호작용할 때 이벤트를 핸들링하도록 프로그래밍 할 수 있다. 이벤트 핸들링하는 방법에는 크게 3가지가 있다. 1.HTML 이벤트 핸들러 2. 전통적인 DOM 이벤트 핸들러 3.이벤트리스너 📌이벤트 리스너(Event Listner) 그러나 1,2번의 방법의 경우 잘 사요되지 않고, 3번의 방법으로 가장 많이 이벤트를 바인딩한다. 따라서 이 글에서는 3번째 방법만 소개를 하겠다. 👉이벤트 리스너(Event Listener) 활용 function onAddStationHandler() { // 이벤트 처리 로직을 구현한다. } // 지하철 역 추가 버튼의 요소를 가져온다. const $stationAddButton = document.querySelector("..