프론트엔드 면접을 대비하여 지식 요약2(JavaScript 관련)

안녕하세요. 좋아요요정입니다.

오늘은 JavaScript의 요약을 정리해봅니다. 

면접 전 준비기간에 보고, 헷깔리는 개념에 대해서는 한번 더 공부하기 위해서 만든 게시글입니다. :) 

 

 

 

[Javascript 관련 목차]

- 함수

- 스코프

- let, const

- 객체

- 원시값&참조타입

- 실행 컨텍스트

- 프로토타입

- this

- 클래스

-  DOM

- Map/Set

- 브라우저 랜더링

- 이벤트

- AJAX

- 비동기프로그래밍

- Async/await

- Promise

- REST API

 

---

함수

프로그래밍에서 함수란?

입력되는 값으로 특정 로직을 실행하고, 그에 대한 값, 결과물을 출력하는 코드 블록

• 선언 : function add(x, y) { return x + y; }
• 호출 : add(2,5)

함수 리터럴

자바스크립트는 함수도 리터럴로 생성이 가능합니다. 자바스크립트 엔진은 문맥에 따라 식이 아닌 값으로 평가되는 경우 함수 리터럴로 생성합니다. 변수에 할당하는 식으로 생성이 가능하고, ES6에서는 () => {} 축약된 방식으로 사용 가능합니다.

함수의 정의

함수를 사용하기 위해서는 미리 정의를 해둬야 합니다. 함수를 정의할 때 개발자가 고려해야하는 사항은 매개변수와 실행문 그리고 반환할 값이 있습니다. 함수의 정의 방법으로는 네가지가 있습니다.

1. 함수 선언문: function 식별자(매개변수) { 실행문; 리턴;}
2. 함수 표현식: const 변수 = function(매개변수) {실행문; 리턴;}
3. Function 생성자 함수: cosnt 변수 = new Function('매개','변수','실행문;')
4. 화살표 함수: const 변수 = (매개변수) => 실행문;

함수 생성 시점과 호이스팅

• function 키워드를 사용한 함수 선언문은 프로그램이 실행되면 호이스팅되어 함수 선언 전에 호출할 수 있습니다.
• 함수 표현식으로 선언한 경우는 변수가 정의된 후 코드블럭에 도달했을 때 함수가 할당되기 떄문에 포현식 이전에 호출이 불가능합니다.

함수의 매개변수

• 함수의 매개변수는 데이터타입이나 양 상관 없이 가능합니다.
• 함수를 호출할 때 ()안에 인자목록을 전달하고, 함수가 실행되면 매개변수 목록에 작성되어 있는 변수명으로 메모리에 저장됩니다.
• 전달받은 인자 목록은 함수 내에서 argments객체를 통해서도 확인할 수 있습니다.
• 3개 이하의 매개변수 사용이 권장되어 집니다.
• 매개변수로 전달된 객체는 힙메모리 주소가 전달되기 때문에 원본 객체가 영향을 받습니다.

다양한 함수의 형태

• 즉시 실행 함수 : (함수)
  • IIFE, 즉시 실행 함수는 함수의 정의와 동시에 즉시 실행되고 이후 다시 호출할 수 없는 함수를 뜻합니다.
  • 즉시 실행 함수는 각각의 스코프가 존재하여 함수 내부에 모여있는 변수들이나 함수의 이름이 충돌하지 않습니다.
• 재귀 함수
  • 함수가 자기 자신을 호출하는 경우를 뜻합니다.
  • 문제를 해결할 때 작은 단위의 반복으로 해결할 때 사용되지만, 함수의 호출로 콜스택이 쌓여 스택 오버플러우가 발생할 수 있기 떄문에 반복문보다 재귀문을 사용하는게 더 이해가 편할 떄에 활용됩니다.
• 중첩함수
  • 함수 내부에 다른 함수가 정의된 경우를 뜻합니다.
  • 중첩 함수들은 중첩 함수 내부에서만 호출이 가능하고, 주로 스코프를 활용하기 위해 사용되는 함수입니다.
• 콜백 함수
  • 특정 시점에 다시 불러와 실행시키는 함수입니다.
  • 자바스크립트는 함수를 순차적으로 처리하는 것이 아니라 이벤트가 발생하면 즉시 처리하게 됩니다.
  • 특정 로직을 실행시킨 뒤에 완료 후 다른 함수를 실행시키고 싶을 때 함수를 매개변수로 전달해 특정 로직이 종료되고 실행시키도록 할 수 있습니다.
  • 함수를 전달할 때에는 () 없이 식별자명으로 전달합니다.

순수 함수와 비순수 함수

• 순수함수란 외부 상태에 의존하지도 않고 변경하지도 않아 사이트 이펙트 발생 확률이 없는 함수를 뜻합니다.
• 비순수 함수는 외부상태에 의존하거나 변경하기에 사이드 이펙트가 발생하는 함수입니다.

 

---

스코프

스코프는 변수와 함수, 객체들의 생명주기와 접근성 등을 결정하는 아주 중요한 요소입니다. 유효 범위로써 변수와 매개변수가 어디까지 유효한지 나타냅니다.

스코프는 현재 실행되는 컨텍스트를 말하며, 값과 표현식이 표현되거나 참조될 수 있음을 의미합니다. 스코프는 계층적인 구졸르 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만, 반대는 불가합니다.

자바스크립트 엔진은 스코프를 활용하여 어떤 변수를 참조해야할 지 결정합니다. 스코프는 식별자 검색 시 활용되는 규칙이라도고 할 수 있습니다.

스코프의 종류

• 스코프는 전역과 지역으로 구분이 가능합니다.
• 코드의 가장 바깥 영역에서 선언된 변수는(전역 실행 컨텍스트에 저장) 어디서든 활용이 가능합니다.
• 지역 스코프는 예를 들어 함수 실행문 내부에서 생성된 변수는 외부에서 활용이 불가능하고, 함수 실행문 내부에서만 참조할 수 있습니다.

스코프체인

• 중첩 함수가 가능하기 때문에 스코프도 중첩 스코프가 생성될 수 있습니다.
• 전역 - outer() - inner() 함수가 실행이 된 경우 각각의 스코프영역을 가지며, 내부슬롯을 통해 연결되어 있습니다.
• inner에서 변수를 찾을 때 inner를 확인 후 없으면 outer, outer에 없으면 전역 .. 전역의 scope는 null이므로 변수가 없음, 방향으로 식별자를 찾습니다.
• 스코프 체인은 실행 컨텍스트의 렉시컬 환경을 단방향으로 연결된 것입니다.

렉시컬 스코프

렉시컬 스코프는 내부 함수가 상위 스코프에 접근할 수 있는 능력입니다. 함수를 어디에 정의했는지에 따라 함수의 상위 스코프를 결정하는 방식을 렉시컬 스코프라고 합니다.

자바스크립트 엔진은 함수가 호출된 위치가 아닌 정의된 위치에 따라 상위 스코프를 결정합니다.

 

---

let, const

자바스크립트에서는 ES5전까지는 var를 사용하여 변수를 선언할 수 있었습니다. 하지만 var는 변수 중복선언이 가능하고, 함수 레벨 스코프만 인정하고, 변수 호이스팅으로 선언되기 전에 호출이 가능한 이유로 새로운 변수 선언 방법인 let과 const가 개발되었습니다.

let과 const

let과 const의 특징

특징	let	const
변수 중복 선언시 문법 에러 발생	O	O
블록레벨 스코프 인정	O	O
변수 선언 전 참조시 에러 발생	O	O
전역 변수로 선언해도 전역객체에 등록되지 않음	O	O
선언시 값을 할당해야 함		O
재할당 금지(단 불변객체가 되는 것은 아님)		O

• 호이스팅은 되지만, 참조될 수 없도록 에러를 발생합니다.
• const는 constant의 약어로 상수를 의미하며 변치 않는 원시타입이나, 재할당이 되어야하는 변수가 아닌 경우 사용합니다.
• 꼭 변한다는 의미를 주고싶을 때에만 let을 사용해 까다로운 코딩을 할 수 있습니다.

 

---

객체(Object)

자바스크립트는 원시값을 제외한 모든 것은 값의 메모리 주소를 참조하는 참조 타입의 객체로 이루어져 있습니다.

객체란?

• 키와 값들을 그룹으로 묶은 데이터 모음입니다.
• {key:value, key:value ...} 의 형태로 이루어져있으면 키와 값을 한 쌍으로 정의하여 속성(Properties)이라고 부릅니다.
• 하나의 키에는 하나의 값을 매핑합니다.
• 키 이름은 중복으로 불가합니다.(나중에 온 값으로 대치되어 저장)
• 키 네이밍 규칙
  • 키는 데이터에 접근하기 위한 식별자로 빈 문자열을 포함한 모든 문자열 또는 심볼 사용 가능합니다.
  • 숫자로 시작할 수 없고 연산자 등도 사용할 수 없습니다.
• 값은 모든 값을 사용 가능합니다.(함수도 가능)

메서드

• 객체의 값으로 존재하는 함수를 일반 함수와 구분하기 위해 메서드라고 칭합니다.
• 객체 안에 선언된 객체의 상태를 조작하고 관리하기 위해서 사용합니다.

객체 리터럴

• 리터럴(literal)이란 단순하게 우리가 특정 데이터의 모양을 직접 구현해 만든 데이터를 뜻합니다.
• 생성자 함수나 클래스 없이 직접 만들어내는 것을 객체 리터럴에 의해 객체를 생성했다고 표현합니다.

객체의 프로퍼티

프로퍼티에 접근

• 점 표기법 object.name : 키 네이밍 규칙에 맞지 않을경우 에러가 납니다.
• 괄호 표기법 object[name] : 문자열로 작성되기 때문에 네이밍 규칙에 권장되지 않는 문자열도 사용 가능하고 변수를 넣어 동적이게 활용이 가능합니다.

프로퍼티 값 갱신

• 객체명.키 = 데이터 혹은 객체명['키'] = 데이터 를 할당해줄 수 있으며, 존재하지 않는 키값에 할당하면 새로운 프로퍼티가 추가됩니다.

프로퍼티 삭제

• delete 객체명.키 , delete 객체명['키']로 삭제합니다.

ES6

• 프로퍼티 축약 표현 : 변수가 미리 준비되어 있고 값을 할당할 때 키와 값이 같은 경우 축약해 한번에 정의할 수 있습니다.
• 메서드 축약 : 키:함수()의 형태가 아닌, 함수(){} 로 키값 없이 메서드를 바로 등록해줄 수 있으며, 함수 식별자가 키값으로 사용됩니다.
• 계산된 프로퍼티 이름: []안에 문자열 뿐만 아니라 변수, 계산식([key+i] 등)형태로 생성할 수 있습니다.

---

primitive & Reference

자바스크립트의 자료형에는 원시타입과 객체타입이 있습니다. (원시값을 제외한 모든 값은 객체 타입으로 이루어져 있습니다.)

둘의 가장 큰 차이점은 메모리에 저장된 값을 변경이 가능한지에 대한 여부입니다.

원시값

• 원시값은 String, Number, Bigint, Boolean, Undefined, Symbol, 그리고 Null이 존재하며 프로그래밍에서 미리 사용할 수 있도록 만들어준 데이터입니다.
• 원시값은 immutable, 불변성의 특징을 가집니다.
• 원시값을 변수에 할당하면 실제 값이 복사되어 저장됩니다.
• 변수에 새로운 값을 할당하는 경우 자바스크립트는 새로운 메모리 공간에 새로 할당하는 값을 복사해 입력하고, 기존에 사용하던 변수명이 새로운 공간을 가리키게 합니다.
• 원시 값 그 자체를 변경하는 것은 불가능합니다.

참조 타입

• 자바스크립트 엔진은 동적인 참초 타입을 원시값과는 다른 방식으로 관리합니다.
• 힙 메모리에 참조타입을 저장하고, 그 위치를 스택 메모리에 기록하여서 사용합니다. 저장되어있는 주소를 기록하는 것이죠.
• 참조 타입 특징
  • 같은 값을 서로 다른 변수에 저장할 경우 값이 같아도 다른 주소를 가지고 있기 때문에 일치연산자에서 다르다고 출력된다. 일치연산자는 스택메모리에 저장된 주소를 비교한다.
  • 복제를 하는 경우 스택메모리에서 복제가 이루어지며, 주소를 복제한다. 같은 힙메모리를 가리키며 수정이 일어나면 같은 주소를 가진 데이터는 동일하게 수정된 것을 볼 수 있다.
• 객체 타입을 변경하게 되면 스택메모리의 주소를 참조해서 힙메모리의 값을 변경합니다.

 

---

실행 컨텍스트

실행 컨텍스트는 scope, hoisting, this, function, closure등의 자바스크립트 동작원리를 가능하게하는 자바스크립트의 핵심원리입니다. 실행 컨텍스트는 실행이 가능한 코드를 형상화하고 구분하는 추상적인 개념이라고 정의합니다.
자바스크립트 엔진은 코드를 실행시키기 위하여 변수, 함수의 선언, 변수의 유효범위, this 등 실행에 필요한 정보를 알고 있어야 합니다. 코드가 실행이 되기 위해서는 필요한 정보들이 준비되어있어야 합니다. 자바스크립트는 코드 실행에 필요한 환경을 실행컨텍스트라는 개념으로 물리적 객체의 형태로 관리하게 됩니다.

실행 컨텍스트는 전역 컨텍스트, 함수 컨텍스트 등이 있으며, 코드의 실행 환경이 필요한 상황에서 생성되고, 스택에 쌓이게 되며 LIFO(last in ferst Out)으로 나중의 실행컨텍스트가 소멸이 된 후 이전 컨텍스트를 마저 진행하게 됩니다. 이 때 동시에 진행되지 않습니다.

현재 실행중인 실행 컨텍스트가 끝이 나야 이전 컨텍스트를 마저 진행하고, 새로운 실행 컨텍스트가 생성되면 새로운 실행 컨텍스트가 종료되어야 이전 작업이 이어집니다.

실행 컨텍스트에는 코드를 한줄 씩 받아와 실행시키는 역할의 쓰레드 영역과 스코프체인, 변수, this의 값을 할당할 수 있는 메모리영역이 있습니다.

코드를 실행하면?

작업한 코드를 실행하게 되면, 자바스크립트 엔진은 소스코드를 평가하여 전역 실행 컨텍스트를 먼저 생성합니다.
scope, 변수 객체화, this value를 할당합니다. 그리고 실행 컨텍스트의 쓰레드 영역에서 코드를 한줄씩 읽으며 실행합니다.

함수가 호출되면 함수를 위한 새로운 실행 컨텍스트가 생성됩니다. 이 실행 컨텍스트는 스택에 쌓이고 코드를 읽어와 평가하는 쓰레드 영역과 변수, scope, this value를 저장하는 메모리 영역이 함께 생성되어지고 값이 할당됩니다. 그리고 함수 영역의 코드블럭을 한줄씩 실행한 후 함수가 종료되면 실행 컨텍스트도 소멸합니다.

함수의 실행 컨텍스트가 소멸하고 다시 전역 실행컨텍스트의 코드블럭이 실행됩니다. 전역 실행 컨텍스트의 코드블럭이 모드 실행되면 전역 실행 컨텍스트도 소멸하고 프로그램이 종료됩니다.

 

[참고]
자바스크립트 기초 - 세션 16. Execution Conext / Call Stack / Closure
실행 컨텍스트와 자바스크립트의 동작 원리

 

 

---

프로토타입(Prototype)

자바스크립트는 프로토타입 기반 객체지향 프로그래밍 언어입니다.
프로토타입의 사전적인 의미는 원래의 형태, 또는 전형적인 예, 기초 또는 표준이라고 되어있습니다. 자바스크립트에서 프로토타입은 객체간의 상속, 부모 역할을 하는 객체가 갖고있는 프로퍼티들을 자식 객체들이 활용할 수 있게 해주는 기능을 구현하기 위해 사용됩니다.

[[Prototype]]

자바스크립트의 모든 객체는 [[Prototype]]이라는 내부 슬롯을 가지고 있습니다. [[Prototype]]이라는 내부 슬롯은 자기 자신의 원형이 되는 객체를 가리킵니다. 프로토타입의 원형이 되는 객체도 자신의 프로토타입이 되는 객체를 가리키고, Object객체에서 null값으로 끝나게 됩니다. 이 내부 슬롯을 통해 스코프처럼 원형이 되는 객체와 단방향으로 연결되어 있습니다.

프로토타입은 생성자 함수를 생성하게 되면 생성자함수를 위한 prototype도 함께 생성됩니다. prototype객체의 constructor항목을 통해 생성자함수를 가리키고 있으며 서로를 참조하고 있습니다.

생성자함수에서 메서드를 등록하게 되면 prototype의 프로퍼티로 등록이 되고, 자식 객체 인스턴스들이 사용 가능합니다.

프로토타입 체인

스코프처럼 원형이 되는 객체로 단방향 연결되어있는 것을 뜻합니다. 스코프가 식별자를 찾는 것처럼 프로토타입 객체에 등록된 메서드를 찾을 때 이용됩니다.

non-constructor

축약표현으로 생성된 함수나 화살표 함수로 정의된 함수는 prototype 프로퍼티가 존재하지 않습니다. 즉, prototype 객체는 constructor 함수만 가지고 있는 프로퍼티입니다.

객체 리터럴의 prototype은?

자바스크립트가 객체를 생성하는 방법은 객체 리터럴, new Object(), 생성자 함수, 사용자정의 생성자 함수, 클래스, Object.create메서드 5가지가 있습니다. 각 생성 방식에는 차이가 있으나 자바스크립트 엔진은 객체를 생성할 때 추상연산에 의해 생성된다는 공통점이 있습니다. 추상연산은 자신이 생성할 객체를 인수로 받고 전달받은 값이 있으면 그 데이터의 Prototype객체, 없으면 {} 빈 객체를 할당하고 Object.prototype을 등록합니다. 이 추상연산을 통해 객체 리터럴도 Object의 기능을 상속받을 수 있습니다.

 

---

This

this는 자기참조 변수입니다. 호출하는 대상이 속한 객체나, 생성자 함수로 만들어지는 인스턴스를 가리키는 등 호출되는 상황에 따라 다르게 해석됩니다.

상황에 따른 객체

• 전역 실행 컨텍스트 : 전역 객체를 참조
• 일반 함수 : strict mode에 따라 아닌 경우 전역 객체, strict mode인 경우 undefined
• 생성자 함수 : 생성자 함수가 반환하는 객체 인스턴스를 참조
• 메서드 : 메서드를 호출한 객체
• 화살표 함수 : 해당 함수가 구현된 객체에 연결

직접 할당하는 방법

Function 생성자함수의 prototype에 존재하는 apply, call, bind 메서드를 이용해 모든 함수는 this를 직접 할당해 사용할 수 있습니다.

• apply : 함수를 호출할 때 this로 사용될 객체의 값과 인수리스트배열을 전달합니다.
• call : 함수를 호출할 때 this로 사용될 객체의 값과 인수 리스트를 전달합니다.(배열이 아님)
• bind : this로 사용될 객체와 인수값을 바인딩해 함수를 만듭니다. 즉시 실행되지 않습니다. 변수에 할당할 수도 있고, 전달하는 목적으로 사용될 수도 있습니다.

apply와 call의 차이 : 인수값을 전달하는 형태(배열, 나열) apply,call과 bind의 차이 : 함수를 즉시 실행하는가 차이. bind의 경우 변수에 할당, 전달할 수 있음.

 

---

Class

자바스크립트에서는 ES6부터 클래스 키워드로 객체를 생성할 수 있도록 제공합니다.

클래스를 이용해 객체 인스턴스를 생성할 수 있으며, 클래스 내부에 constructor, 메서드, static 메서드, 클래스필드 등을 작성할 수 있습니다.

상속을 이용해 클래스 확장이 가능하고 상속은 extends 키워드와 super 메서드를 이용해 할 수 있습니다.

class Person {
	  #weight; //privite
    isAlive = true;
    constructor(name) {
        this.name = name;
    }

    sayHi() {
    	console.log(`[${this.name}]: 안녕하세요!`);
    }
    static verson = 2022;
    static sayGoodnight() {
        console.log(`[공지]: 안녕히 주무세요!`);
    }
    get introduce() {
        console.log(`나는 ${this._name}입니다.`);
    }
    set name(name) {
        this._name = name
    }
}

const mom = new Person("엄마");
mom.name //"엄마"

---

DOM

• Document Object Model의 약어
• 브라우저 렌더링 시 HTML을 받아서 파싱해 브라우저가 이해할 수 있는 구조로 메모리에 등록시켜야 합니다.
• DOM은 트리형태로 이루어져 있습니다.
• 텍스트와 주석도 DOM트리에 포함됩니다.

자바스크립트에서는 DOM을 다루기 위해 getElementsById, querySelector 등과 같이 브라우저가 제공하는 DOM API를 사용해 접근할 수 있습니다.

CSSOM

스타일시트를 참조해 브라우저가 이해할 수 있는 방식으로 변환하고 DOM과 같이 트리 구조로 구현됩니다.

• 트리구조인 이유는 페이지에 있는 객체의 최종 스타일을 계산할 때 브라우저는 하향식으로 규칙을 적용하는 방식으로 계산된 스타일을 세분화합니다.

Rendering Tree

CSSOM 및 DOM 트리를 결합하여 렌더링 트리를 형성합니다.

 

 

---

Map, Set

ES6부터 도입된 자료구조.

Map

• 키-값 쌍을 보유하고 원래의 삽입 순서를 기억합니다.
• Key에 다양한 자료형을 사용할 수 있습니다.
• 객체와 다르게 메서드를 이용해 값에 접근할 수 있습니다.
• 객체를 생성할 때에는 new 키워드를 이용해 생성할 수 있습니다.

const map = new Map()

메서드 종류

이름기능

set	데이터 저장
get	데이터 가져오기
has	key 유무 확인
delete	key-value삭제
clear	모든 key-value 삭제
size	개수 확인
keys	key 나열(순회시 이용)
values	value 나열(순회시 이용)
entries	key-value 쌍 나열로 next()로 다음항목 반환, 순회가 끝나면 done:true 반환

Set

• 값으로만 이루어진 형태의 컬렉션입니다.
• 같은 값을 한개 이상 포함할 수 없습니다.(중복되는 값을 입력은 가능하지만 2개가 들어가지 않음)
• 중복값 제거시 사용하기 용이
• Map과 마찬가지로 new 키워드로 생성하고, 메서드를 이용해 값에 전근할 수 있습니다.

 

---

브라우저 렌더링의 이해

브라우저의 URL을 통해 웹사이트에 접근을 하면 브라우저는 아래의 순서로 작동합니다.

• requests/response : 서버에게 HTML파일을 요청
• loading : 받아온 파일을 로딩해 코드를 해석
• scripting : DOM/CSSOM으로 변환
• rendering : 랜더링 트리 생성
• layout : 크기,위치 계산
• painting : 계산된 요소를 구분해 나누어 그림을 그린 뒤(레이어별로) 브라우저가 출력됩니다.

 

---

Event

클릭, 스크롤 등 웹 브라우저 상에서 발생하는 모든 일을 뜻합니다. 또한 모든 요소는 이벤트를 발생합니다.

addEventListener를 통해서 해당 요소에서 발생하는 이벤트를 확인하고 원하는 로직을 수행할 수 있습니다. addEventListener는 이벤트 종류와 이벤트가 발생할 경우 호출될 함수를 전달합니다.

이벤트가 발생하면 addEventListener에 등록된 함수가 Task Queue에 등록되고, 이벤트 루프를 통해 콜스택으로 이동해 함수가 실행됩니다.

이벤트 캡쳐링, 버블링

DOM은 트리형태로 구성되어 있습니다. 최상단의 HTML 태그부터 트리형태로 하단으로 계층적 구조를 가지고 있습니다. 이벤트가 발생하고 흐름에 따라 부모요소에서 자식요소로 도달하는 것을 이벤트 캡쳐링, 자식 요소에서 부모요소로 전파되는 것을 이벤트 버블링 이라고 합니다.
이벤트가 발생하게 되면 이벤트는 무조건 캡쳐랑으로 시작하여 버블링으로 종료합니다.

이벤트 위임

이벤트 캡쳐링과 버블링을 고려하지 않고 이벤트 핸들러를 등록하면 원치 않는 요소에서 해당 이벤트를 받아와 처리하게 되는 상황이 발생할 수 있습니다. 따라서 이벤트를 위임하는 식으로 구현을 해서 정말 이벤트가 처리되길 원하는 요소에서만 이벤트를 처리하도록 구현할 수 있습니다. 부모 요소에 이벤트 핸들러를 등록시켜놓고 실제로 이벤트를 발생시킨 요소를 찾아서 해당 이벤트 핸들러를 실행하도록 구현할 수 있습니다.

 

---

Ajax

Asynchronons JavaScript and XML의 줄인말로 비동기적으로 자바스크립트를 사용해서 데이터를 받아와 브라우저를 갱신 또는 조작하는 것입니다.

Ajax는 비동기적으로 이루어지며, 데이터가 바뀐 부분 일부만 업데이트 하는 방식입니다.

최근은 XML대신 JSON, Ajax 대신 ES6에서 표준이 된 Fetch API를 사용합니다.

 

---

 

비동기 프로그래밍

동기적은 순서대로 처리되며 이전에 실행했던 작업이 끝나면 그 다음 작업을 처리합니다. 비동기적은 특정 작업이 실행되고, 완료되기까지 기다리지 않고 다음 작업을 처리합니다. 그 후 이전 작업이 완료가 되면 완성물을 가져와 이후 로직을 처리합니다.

자바스크립트 엔진은 비동기적으로 처리한다고 명시하지 않으면 동기적으로 처리하게 됩니다. 개발자는 비동기적으로 처리할 수 있도록 코드를 작성할 수 있습니다.

이벤트 루프

자바스크립트는 싱글 스레드 언어입니다. 하나의 스택을 가지고 있습니다. 이벤트 루프는 자바스크립트 엔진이 비동기 처리를 할 때 병렬적으로 진행할 수 있도록 합니다. 콜 스택에서 비동기 처리가 필요한 타이머, fetch, DOM API event listener 등이 실행이 되면 Web APIs로 위임되어 실행됩니다. 그리고 완료가 되면 tesk Queue에 콜백 함수가 전달되어 보관되어집니다.

이벤트 루프는 콜스택과 테스트큐를 관찰하며 콜 스택이 비어지면 테스크 큐 내의 작업을 콜스택으로 이관해 실행합니다.

 

---

async/await

async와 await는 ES8에서 등장했으며, 비동기 처리를 동기처럼 동작하도로 구현할 수 있습니다. 기본적으로 Promise를 기반으로 동작합니다.

const getData = async () => {
  return await getDataAPI()
}

코드를 실행하면 await가 처리될 때 까지 기다린 뒤 반환합니다. than, catch를 이용하지 않아도 되고, 코드도 직관적입니다.

async로 함수를 감싸서 Promise를 만들어줄 수 있고, await는 async 함수 내에서만 사용 가능합니다.

 

---

Promise

프로미스는 비동기를 간편하게 처리할 수 있도록 도와주는 오브젝트입니다. 프로미스는 비동기 작업을 수행할 콜백 함수를 인자로 받고, 이 콜백 함수는 성공 시 호출될 resolve와 실패시 호출될 reject를 인자로 받아서 결과에 따라 반환합니다.

const result = new Promise((res, rej) => {
  /** 비동기 작업 실행 */
  ...
  if( /** 작업 성공시 */ ) {
    res('result')
  } else {
    rej('error!')
  }
})

프로미스의 경우 비동기 처리가 성공했는지 실패했는지 상태정보를 제공합니다.

 

프로미스 상태

상태	의미
pending	비동기 처리가 수행되지 않은 상태
fulfilled	비동기 처리가 성공한 상태
rejected	비동기 처리가 실패한 상태
settled	비동기 처리가 수행된 상태

프로미스 결과 받아오기

프로미스의 결과를 then(), catch()를 통해 받아올 수 있습니다. 성공 시 then()을 통해 res를 받아오고, catch()로 rej를 받아 에러 핸들링을 처리할 수 있습니다.

프로미스 체이닝

프로미스의 큰 장점으로 여러개의 비동기 처리를 구현할 때 한 비동기 처리가 성공한 후 그 결과값을 토대로 또 다른 비동기를 처리할 수 있도록 체이팅해 구현할 수 있습니다.

 

---

REST API

REST는 HTTP를 기반으로 클라이언트가 서버에 리소스를 접근하는 방식을 규정한 아키텍쳐입니다. 데이터를 주고받는 웹 상에서의 통신 체계에 있어서 범용적인 스타일을 규정한 것입니다.

API는 기존에 있는 응용 프로그램을 통해서 데이터를 제공받거나 기능을 사용하고자 할 때 사용하는 인터페이스 및 규격을 말합니다.

따라서 REST API는 REST 원칙을 적용하여 서비스 API를 설계한 것을 말합니다.

REST API의 구성

REST는 자원, 행위, 표현으로 구성되어 있으며 REST API만으로 HTTP요청의 내용을 이해할 수 있게 해줍니다.

• 자원 : 자원 자체를 뜻하며 URI(Uniform Resource Identifier)의 엔드포인트로 표현됩니다.
• 행위 : 자원에 대한 행위로 HTTP요청 메서드로 표현됩니다. GET, POST, PATCH, PUT, DELETE 등이 있습니다.
• 표현 : 자원에 대한 행위의 구체적 내용으로 페이로드로 표현됩니다.

REST API 설계 원칙

1. URI는 리로스를 표현해야 한다.
   • 리로스를 식별할수 있는 이름으로 동사보다는 명사를 사용합니다.
2. 행위에 대한 정의는 HTTP 요청메서드를 통해 해야한다. HTTP요청 메서드는 클라이언트가 서버에게 요청의 종류와 리소스에 대한 행위를 알리는 방법입니다. 따라서 리소스에 대한 행위는 HTTP요청 메서드를 통해 표현해야 합니다.
   - GET : 리소스 조회
   - POST : 리소스 생성
   - PUT : 리소스 교체
   - PATCH : 리소스 일부 수정
   - DELETE : 리소스 삭제