Axios란? Axios는 웹 브라우저와 Node.js를 위한 HTTP비동기 통신 라이브러리입니다. 쉽게 말해서 백엔드와 프론트엔드 간 통신을 쉽게 하기 위해 사용되는 것응로 Ajax처럼 사용되는 것입니다. 비동기 통신 라이브러리를 사용하지 않으면 모든 코드가 순차적으로 처리되어야 하므로 코드의 순서를 신경 써서 작성해야 합니다. 즉, 코드 작성이 매우 복잡해집니다. 따라서 비동기 통신을 쉽게 해주는 Axios나 Ajax 같은 것이 자주 사용되는 것입니다. Ajax란? 비동기 자바스크립트란 의미로 Asynchronous JavaScript and XML의 약자입니다. Ajax는 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용하여 화면 전체를 새로 고침 하지 않고 변경된 일부 데이터만 로드하..
JavaScript
디바운싱과 쓰로틀링은 자바스크립트 개념이라기 보다는 두가지 방법 모두 DOM 이벤트를 기반으로 실행하는 자바스크립트의 성능상의 이유로 이벤트(event)를 제어하는 프로그래밍 기법이다. 디바운싱(Debouncing) 연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식으로 주로 그룹에서 마지막 혹은 처음에 처리된 함수를 처리된 함수를 처리하는 방식으로 사용합니다. 디바운싱은 스위치 회로에서 채터링(바운싱) 현상을 해결하기 위해 사용된 개념이라고 합니다. 스위치를 한 먼만 눌렀다 떼는 경우에도 눌림 상태일 때의 지속 시간이나 외부 진동, 충격 등 여러가지 요인에 의해 스위치가 여러 번 눌린 것 처럼 동작하게 되는데 이러한 현상을 바운싱이라고 합니다. 이러한 바운스 구간의 값을 무시하기 위해 처음 스..
01. async/await Promise를 활용한 비동기 코드를 간결하게 작성하는 문법. async/await문법으로 비동기 코드를 동기 코드처럼 간결하게 작성 async 함수와 await 키워드를 이용 await 키워드는 반드시 async함수 안에서만 사용해야함 async로 선언된 함수는 반드시 Promise를 리턴한다. ✔️사용 방법 async function asyncFunc(){ let data = await fetchData(); let user = await fetchUser(data); return user; } async 함수는 function 키워드 앞에 async를 붙여 만든다. async함수 내부에서 await 키워드를 사용한다. fetchData, fetchUser는 Promise..
자바스크립트는 다른 멀티스레드 프로그래밍 언어와 다르게 싱글 스레드 환경에서 비동기 동작을 처리합니다. 싱글 스레드 비동기 환경을 구성하는 중요 요소 중 하나인 이벤트 루프에 대해 이해하면, 자바스크립트 엔진 레벨에서의 비동기 코드 동작을 이해할 수 있습니다. 복잡한 비동기 동작을 이해하고 높은 수준의 비동기 코드를 작성하며, 버그의 원인을 파악할 수 있게 됩니다. 01. 자바스크립트 제어 흐름 ✔️자바스크립트 엔진 자바스크립트 엔진은 하나의 메인 스레드로 구성된다. 메인 스레드는 코드를 읽어 한 줄씩 실행한다. 브라우저 환경에서는 유저 이벤트를 처리하고 화면을 그린다. ✔️동기적 제어 흐름 동기적 제어 흐름은 현재 실행 중인 코드가 종료되기 전까지 다음 줄의 코드를 실행하지 않는 것을 의미한다. 분기문..
✔️코드 실행 시 변수 처리 자바스크립트 엔진이 코드를 읽으면, 생성 단계에서 실행 컨텍스트를 생성한다. 이 때 함수 선언문은 실행 단계에서 함수 전체가 실행 컨텍스트에 저장된다. var 변수는 저장 시 undefined로 초기화된다. let, const는 초기화되지 않는다. console.log(b); //undefined console.log(c); //error var b = 2; let c = 10; ✔️Hoising Hosing은 변수가 선언된 시점보다 앞에서 사용되는 현상이다. 이는 var변수가 생성 단계에서 undefined로 초기화되는 것이 원인이다. 함수는 생성 단계에서 함수 전체가 저장되므로 뒤에서 선언되어도 호출이 가능하다. console.log(callMe()); //undefine..
✔️자바스크립트 엔진 자바스크립트 엔진은 자바스크립트 코드를 읽어 실행하는 프로그램이다. 작성한 자바스크립트 코드는 자바스크립트 엔진을 통해 파싱되고 실행된다. Chrome 브라우저의 경우 V8엔진을 사용한다. ✔️Node.js node.js는 브라우저 외의 환경에서 자바스크립트 코드를 실행하도록 하는 프로그램이다. node.js는 여러 프로그램으로 구성되며, 자바스크립트 코드를 읽는 프로그램으로 V8을 사용한다. 브라우저 환경과 node.js환경은 같은 자바스크립트 코드를 작성해도 다르게 동작할 수 있다. ✔️자바스크립트 코드 실행 자바스크립트 엔진은 코드 실행 전 실행 컨텍스트를 생성한다. 실행 컨텍스트는 두 단계를 통해 생성된다. 생성 단계에서 자바스크립트 엔진은 변수 선언을 읽는다. 실행 단계에서..
✔️함수는 일급 객체(first-class object) 일급 객체란, 다른 변수처럼 대상을 다룰 수 있는 것을 말한다. 자바스크립트에서 함수는 일급 객체이다. 즉, 자바스크립트에서 함수는 변수처럼 다룰 수 있다. ✔️클로저 자바스크립트 클로저는 함수의 일급 객체 성질을 이용한다. 함수가 생성될 때, 함수 내부에서 사용되는 변수들이 외부에 존재하는 경우 그 변수들은 함수의 스코프에 저장된다. 함수와 함수가 사용하는 변수들을 저장한 공간을 클로저(closure)라고 한다. ✔️클로저는 왜 사용하나요? 클로저를 사용하는 이유는 상태를 안전하게 은닉하고 보존시키기 위함입니다. 그리고 이를 수정하는 방법은 특정 함수한테만 그 권한을 줍니다. 즉, 다수의 개발자와 함께 일을 할 때 실수를 방지하고 더 탄탄한 코드..
✔️dynamic binding 함수가 호출되는 상황은 4가지가 있다. 함수 호출 - 함수를 직접 호출한다. 메서드 호출 - 객체의 메서드를 호출한다. 생성자 호출 - 생성자 함수를 호출한다. 간접 호출 - call, apply 등으로 함수를 간접 호출한다. ❗정리 함수는 이렇듯 다양한 상황(환경)에서 호출 될 수 있다. 함수의 호출 환경에 따라 this는 동적으로 세팅된다. 이렇게 this가 환경에 따라 바뀌는 것을 동적 바인딩(dynamic binding)이라 한다. bind, apply, call 등으로 this가 가리키는 것을 조작할 수 있다. 예제 f1은 화살표 함수로 호출 시 this는 함수가 생성된 환경을 가리키도록 고정된다. f2는 일반 함수로 this는 함수를 호출된 환경을 가리키며 th..
실행 컨텍스트란? 실행 컨텍스트 혹은 실행 맥락은, 자바스크립트 코드가 실행되는 환경 코드에서 참조하는 변수, 객체(함수 포함), this 등에 대한 레퍼런스가 있다. 실행 컨텍스트는 전역에서 시작해, 함수가 호출될 때 스택에 쌓이게 된다. ✔️실행 컨텍스트 스택 let a = 10; function f1(){ let b = 20; function print(v) {console.log(v);} function f2(){ let c = 30; print(a + b + c); } f2(); } f1(); 위에 작성된 코드를 실행했을 때 실행 컨텍스트가 어떻게 쌓이는지 다음 단계로 설명할 수 있다. 그림은 변수들의 값을 표현한다. 1단계 : 자바스크립트 엔진은 글로벌 실행 컨텍스트를 생성한다. 2단계 : f..
✔️자바스크립트 코드의 실행 1 어떤 자바스크립트 코드도 작성되지 않은 경우 //어떤 코드도 없는 경우 자바스크립트 엔진은 코드가 없어도 다음 3가지 변수를 초기화하게 됩니다. this 변수들(Variable Object) Scope chain 위 3가지는 다음과 같이 초기화 된다. this : window 변수들(Variable Object) : {} Scope chain : [] ❗정리 자바스크립트 엔진은 코드가 없어도 실행 환경(실행 컨텍스트)를 초기화한다. 스코프(scope)는 코드가 현재 실행되는 환경, 맥락(context)를 의미한다. this 포인터(레퍼런스 변수), 스코프에 저장된 변수들, 스코프 체인 등이 환경에 포함된다. this 포인터의 경우, 글로벌 스코프에서는 window를 가리킨..
