React/JavaScript

쓰로틀링(throttling)과 디바운싱(debouncing)

디바운싱(debouncing) 새로운 이벤트가 호출 되었을 때, timer가 동작 중이라면 제거하고 새롭게 추가하는 방식이다. 검색어를 검색 창에 입력할 때, 실시간으로 결과가 호출되게 하는 경우 모든 입력이 끝났을 경우에만 API를 호출하는 스킬이다. 네트워크 비용을 크게 절약하고 효율적으로 프로그램이 동작할 수 있다. let timer = null; inputText.onkeydonw = (event) => { if(timer) //이전에 이벤트가 발생했다면 clearTimeout(timer); //이전 이벤트를 지운다. if(event.target.value){ timer = setTimeout(() => { //추천 검색어 API 호출 }, 200); } } 쓰로틀링(throttling) 마지막 ..

[JavaScript] 비동기 처리

비동기 처리 프로그래밍 언어는 동기 적으로 동작한다. '동기적 처리'의 사전적 의미로는 '작업의 요청과 결과가 같은 시간에 발생한다'로 작업이 시작되면 작업이 끝날 때까지 해당 작업의 결과를 기다리는 것을 의미한다. 아래의 그림처럼 먼저 시작된 A가 반환된 이후 B가 실행되는 것이다. A의 수행이 오래 걸린다면 B의 시작도 늦어진다. 비동기적 처리 예를 들어 서버에서 데이터를 받아오는 등의 오래 걸리는 작업을 수행한다면 프로그램이 멈춘 것 처럼 보일 것이다. 비동기적 처리로 메인 스레드가 서버로부터 데이터를 받아올 때까지 기다리지 않고 먼저 함수를 반환하고 그 다음 작업을 수행한다. 서버에서 데이터가 수신되면 이를 처리하는 Callback이 비동기 환경에서 별도로 실행된다. //비동기로 동작하는 함수 ..

[JavaScript] This 포인터 이해하기

This 포인터 앞서 This 포인터가 포함된 실행 Context와 Scope에 대해 알아보았다. This로 특정 위치를 참조 할 수 있다. 클래스 내부를 참조할 때 this를 함께 사용함을 본적이 있을 것이다. 또, 일반 함수형과 화살표 함수의 큰 차이점이 바로 이 this 포인터이다. function myFunc(){ console.log("myFunc called"); } myFunc(); //함수 직접 호출 const o ={ name : 'Daniel', printName : function(){ console.log(this.name)} } o.printName(); //객체릐 메서드를 호출 function Person(name){ this.name = name this.printName = ..

[JavaScript] 호이스팅과 클로저

클로저 자바스크립트에서 함수는 일급 객체(First Class Object)로 취급된다. 일급 객체란? 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 변수에 할당할 수 있으며, 다른 함수를 인자로 전달받는다. 또, 다른 함수의 결과로 return 될 수 있다. 클로저는 Factory 함수가 저장되는 공간이라고 할 수 있으며 일급 객체 성질을 이용한다. 선언된 createCard()를 객체 처럼 다룰 수 있다. 여러 클로저를 생성시에 각각의 스코프가 생성되어, 내부 변수는 공유되지 않는다. Factory 함수란? 함수들을 객체의 형태로 return 하는 함수. 위의 코드의 createCard()도 Factory 함수이다. Class를 return 생성, return하는 경우도..

[JavaScript] 실행 Context와 Scope

자바스크립트 엔진이 어떻게 동작 하는지 알아보자. 실행 컨텍스트 (Execution Context) 자바스크립트 엔진은 실행 컨텍스트 스택의 흐름에 따라 동작한다. 실행 컨텍스트란? 코드의 흐름과 변수 따위 등 함수 동작에 필요한 환경 정보가 담긴 객체를 지칭한다. This this는 기본적으로 window를 가리키고, console.log와 같은 함수는 window에 포함되어 있다. 프로그래밍에서 의도한 위치의 변수나 함수를 사용하기 위해 this를 적절하게 사용해야한다. [JavaScript] This 포인터 이해하기 This 포인터 클래스 내에서 this.변수명 형식으로 변수를 참조하는 것을 보았을 것이다. 앞서 실행 컨텍스트에 this가 포함된 것을 볼 수 있다. this는 스코프 마다 달라질 수..