API를 연동해서 키워드 검색 등을 구현할 때 콘솔에 한 글자, 한 글자 정성스럽게 찍히는 것을 경험해보았을 것이다. (하게 될 것이다.) 이런 경우 API는 매 타이핑마다 호출이 되고 이는 곧 리소스 낭비와 성능 저하로 이어진다.이럴 때 자주 발생하는 이벤트들을 적절히 Filtering 해야할 필요가 있다. Debounce와 Throttle 기법은 이러한 이벤트들을 Flitering하는 기법의 종류이다.💡 먼저 Debounce는- 회원가입 필드 유효성 검사- 키워드 검색 혹은 자동 완성 기능에서 API 함수 호출 횟수를 최대한 줄이고 싶을때많이 사용된다.왜 저런 상황에 많이 사용되느냐?일정 시간 동안 연속적으로 발생했던 이벤트들 중 마지막만 실행시켜 과도한 호출이나 렌더를 막아 주기 때문이다.?..
FE/JavaScript
Async & Await 은 Promise를 한단계 감싸서 더 보기 편하게 만들어주는 문법 promise chaining 같은 복잡한 체이닝 없이 마치 동기적인 코드를 작성하는 것처럼 간편하게 코드를 작성할 수 있다. (내부적으로 promise를 쓰기 때문에 promise의 연장선이라 볼 수 있다.) Async 함수를 작성할때 function을 쓰는데 그 앞에 async를 작성해주면 항상 promise를 리턴하는 비동기 함수로 변한다. async function getUser() { return '윤구'; } const user = getUser(); console.log(user); // promise {: '윤구'} 값을 리턴하는 비동기 함수를 출력해보면 값 대신 promise 객체로 출력되는 것을 ..
자바스크립트는 비동기 처리를 위해 콜백함수를 사용한다. 하지만 콜백을 너무 남용하게 되면 우리가 흔히 부르는 콜백 지옥에 빠질 수가 있다. 이러한 단점을 보완해서 사용하는 것이 Promise 이다. Promise는 비동기 처리에 사용되는 자바스크립트 객체 비동기 작업이 맞이할 성공 혹은 실패를 나타냄 promise에 대해 이론적으로 접근하면 어려우니 추상적으로 접근해보자. 여기 비동기 작업이 시작될때 생성되는 promise라는 상자가 있다. 이 상자는 처음에 텅 비어있다가 비동기 작업이 완료될때 결과물로 가득 차있게 된다. 이처럼 promise는 비동기 작업의 상태를 나타낸다. 비동기 작업에는 시간이 걸리고 언젠가 끝나게 된다. 이 작업에는 성공할 때도 있고 실패할 때도 있는데 예를 들어 서버로부터 데이..
콜백 패턴에 대해 알기 전에 동기와 비동기에 대해 짚고 넘어가자. 동기 비동기 순차적으로 실행 한 작업이 완료 되어야 다음 작업 시작 장점: 프로그램의 흐름을 이해하고 예측하기 쉬움 단점: 작업이 끝나기를 기다리는 동안 다른 작업을 수행할 수 없어 효율성 떨어짐 각각 독립적으로 실행 완료를 기다리지 않고 다른 작업 시작 장점: 효율적으로 작동하며 여러 작업을 동시에 처리 단점: 프로그램의 흐름을 추적하고 관리가 복잡함 비동기 코드가 어려운 이유 일반적인 js코드 작성 방식은 동기식 (자바스크립트는 위에서 아래로 순차적으로 코드를 실행하기 때문) 비동기는 내부적으로 비동기 메커니즘 ( 예: 이벤트루프 )을 통해서 도익와는 다른 방식으로 처리 개발자는 코드를 동기적으로 작성하지만, 비동기 코드는 시스템의 내..
버블링과는 반대로 최상위 요소에서 시작하여 발생한 요소로 내려가는 과정 addEventListener 함수의 세 번째 인자로 true를 설정함으로써 이벤트 캡처링을 활성화 (세번째 인자의 기본 값은 false로 이벤트 캡처링을 활성화 할건지 여부를 정한다.) 일반적이지 않으며 특별한 경우에 사용한다. ( 하위 요소의 이벤트 처리 방지) DIV1 코드의 addEventListener 세번째 인자에 true로 설정한다. 그 다음 버튼을 클릭하면 버블링과 다르게 DIV1에 대한 alert만 뜨게 된다. ex) 버튼을 클릭하면 button alert 대신 '로그인을 먼저 해주세요' 라는 alert이 먼저 뜨게 하고 싶다. 그럴때 button을 감싸고 있는 최상위 요소 div에 이벤트리스너를 추가하면서 세번째 인..
이벤트가 가장 깊은 요소에서 시작하여 점차 상위 요소들로 전파되는 과정 웹 브라우저에서 이벤트를 처리하는 기본 메커니즘 각 Div1 , Div2, button 을 클릭했을때 alert이 뜨게 만들어본다. 그 후 제일 안쪽에 있는 button을 클릭하면 button에 대한 alert, Div2에 대한 alert, Div1에 대한 alert이 차례로 뜬다. 이것이 이벤트 버블링. 실제 이벤트가 발생한 요소부터 시작해서 트리를 따라 상위 요소들로 전파 됨. 이 과정은 보통 해당 요소의 부모 요소에서 시작해서 최상위 요소인 body, html에 도달할 때 까지 계속 된다. 장점 중복 감소 - 하위 요소에서 발생하는 이벤트를 상위에서 한 번에 처리 동적인 요소 처리 - 페이지가 로드된 이후 추가되는 요소에 대해서..
기본형 데이터와 다른 메모리 할당 매커니즘을 가지고 있어 데이터 가변성을 나타내고 있다. 참조형 데이터의 종류에는 아래와 같다. object array, function, RegExp, Set / WeakSet Map / WeakMap 1. let a = { name: "Kim" } 이라는 객체 선언 변수 영역 변수명 a 주소 @201 데이터 영역 (Stack) 주소 201 202 데이터 @401~? "Kim" 데이터 영역 (Heap) 주소 401 402 이름 name 데이터 @202 객체의 경우 여러개의 변수와 값을 모아놓은 그룹이기 때문에 기본형과는 다르게 데이터 영역 주소 201에 모든 데이터 값을 저장할 수가 없다. 또 특이하게 주소 201의 데이터에 ~? 라고 표시가 되어있는데 이는 이 객체가 ..
데이터 타입에는 기본형 타입, 참조형 타입이 있으며 이 방식은 저장 방식, 접근 방식, 복사 방식에서 차이를 보인다. 이번에 알아볼 기본형 타입은 변경할 수 없는 불변성을 가지고 있으며 아래의 종류와 같은 타입이 포함 된다. string nunber boolean null undefined symbol Bigint 위 타입들의 데이터를 복사할때는 값 자체가 복사된다. 그럼 기본형 데이터가 메모리 할당될 때 어떤 일이 일어나는지 알아보자. 1. 여기 let a= 1; 이라고 선언하는 순간 변수 영역과 데이터 영역에 저장된다. 변수영역 변수명 a 주소 @201 데이터 영역 주소 201 202 데이터 1 이렇게 변수 영역에서는 식별자를 위한 공간으로, 데이터 영역에서는 실제 값을 저장하는 역할을 하여 서로가 ..
