비동기 처리
비동기 처리는 작업이 완료될 때까지 기다리지 않고 잠재적으로 오래 실행되는 작업을 시작하여 해당 작업이 실행되는 동안에도 다른 이벤트에 응답할 수 있게 하는 기술이다. 동시에 여러가지 작업을 처리할 수 있고 기다리는 과정에서 다른 함수를 호출할수도 있다.
콜백 함수
콜백은 태스크가 끝나기 전에 함수가 실행되지 않는 것을 보장한다. 다르게 말하자면 콜백은 현재 태스크가 끝난 직후에 실행될 것이다. 콜백은 비동기 자바스크립트 코드를 작성할 수 있도록 해주고 여러 문제와 에러들로부터 안전하게 지켜준다.
콜백 함수란 파라미터로 일반적인 변수나 값을 전달하는 것이 아닌 함수 자체를 전달하는 것을 말한다. 매개변수에 함수를 전달해 일회용으로 사용하기 때문에 굳이 함수의 이름을 명시할 필요가 없어 보통 콜백 함수 형태로 함수를 넘겨줄때 함수의 이름이 없는 익명 함수 형태로 넣어주게 된다.
Promise
프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다. 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다.
API가 실행되어 서버에 데이터를 보내달라는 요청을 했을 때, 데이터를 받아오기도 전에 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 뜬다. 이와 같은 문제점을 해결하기 위한 방법 중 하나가 프로미스이다.
프로미스의 3가지 상태
프로미스는 new Promise()로 프로미스를 생성하고 종료될 때까지 3가지 상태를 갖는다.
- Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
- Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
- Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태
async, await
async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법으로 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 사용법이 간단하다. await 키워드를 사용하면 일반 비동기 처리처럼 바로 실행이 다음 라인으로 넘어가는 것이 아니라 결과값을 얻을 수 있을 때까지 기다려준다. 따라서 일반적인 동기 코드 처리와 동일한 흐름으로 (함수 호출 후 결과값을 변수에 할당하는 식으로) 코드를 작성할 수 있다.
DOM
문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다.
이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공다.
이러한 DOM은 W3C의 표준 객체 모델이며, 다음과 같이 계층 구조로 표현됩니다.
DOM의 종류
- Core DOM : 모든 문서 타입을 위한 DOM 모델
- HTML DOM : HTML 문서를 위한 DOM 모델
- XML DOM : XML 문서를 위한 DOM 모델
WEB API
Ajax 요청, setTimeout(), 이벤트 핸들러의 등록과 같이 웹 브라우저에서 제공하는 기능들을 말한다.
이러한 요청들의 처리는 JavaScript 엔진의 스레드와는 다른 스레드들에서 이뤄진다. JavaScript 엔진의 스택에서 실행된 비동기 함수가 요청하는 비동기 작업에 대한 정보와 콜백 함수를 웹 API를 통해 브라우저에게 넘기면, 브라우저는 이러한 요청들을 별도의 스레드에 위임하게 된다. 이후 스레드는 해당 요청이 완료되는 순간 전달받았던 콜백 함수를 JavaScript 엔진의 태스크 큐에 집어넣는다.
비동기 통신
비동기 통신은 웹 브라우저에서 서버에 요청을 보내고 응답에 상관하지 방식이다. 그렇기 때문에 화면이 하얗게 되는 것도 없고, 서버로부터 응답이 끝나지 않더라도 다른 작업을 할 수 있다.
비동기 통신을 사용하면 유저가 조작한 상태를 그대로 유지하면서 일부분만 데이터를 받아올 수 있다는 장점이 있다.
비동기식 통신 방법
AJAX
빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나로 jQuery를 통해 쉽게 구현 가능하다.
Fetch
JavaScript의 내장 API로 jQuery가 필요 없고, 속도가 빠르다.
스코프와 호이스팅
스코프
JavaScript에서 변수의 유효범위 라고 할 수 있으며 var는 함수 스코프, let과 const는 블록스코프를 갖는다. 스코프는 크게 Local Scope와 Global Scope로 나눌 수 있다.
호이스팅
코드에 선언된 변수 및 함수를 끌어올려 유효 범위의 최상단에 선언하는 것을 말한다. 즉 함수 내에서 선언한 함수 범위의 변수는 해당 함수의 최상단으로, 함수 밖에서 선언한 전역 범위의 전역 변수는 스크립트 단위의 최상단으로 끌어올려지게 된다.
자바스크립트가 지원하는 내장 함수
- 타이머 함수
- setTimeout(function, millisecond) : 지정된 시간 후 함수를 한 번 실행(밀리초 단위)
- setInterval(function, millisecond) : 지정된 시간마다 함수를 반복 실행
- clearTimeout(id) : setTimeout 함수 중지
- clearInterval(id) : setInterval 함수 중지 - 인코딩과 디코딩 함수
- escape(), unescape() - 코드 실행 함수
- eval - 숫자 관련 함수
숫자 확인 함수
- isFinite() : 무한한 값인지 확인
- isNaN() : NaN인지 확인
숫자 변환 함수
- Number(string) : 문자열을 정수값으로 변환(숫자로 변환할 수 없을 때 NaN 반환)
- parseInt(string) : 문자열을 정수값으로 변환(숫자로 변환할 수 있을 때 까지만 변환)
- parseFloat(string) : 문자열을 실수값으로 변환
