Asynchronous Javascript (1)

| Asynchronous Javascript, AJAX and APIs

대부분의 코드는 동기코드이다. 동기 코드는 코드 한 줄씩 실행된다. 즉, 동기적으로 실행되는 코드는 이전 코드 라인이 끝나길 기다리며, 순차적으로 실행된다. 이러한 동기 코드는 대부분 문제 없이 작동하지만, 실행 시간이 긴 작업은 프로그램의 다른 코드 실행을 차단하기 때문에, 특정 작업을 수행하는 몇몇 코드는 비동기적으로 실행될 필요가 있다.

비동기 코드는 즉시 실행되지 않고, 작업을 먼저 시작해 둔 뒤에 다음 코드를 계속 실행한다. 그러다 비동기 작업이 완료되면 그 시점에 실행 결과가 처리된다. 즉, 실행쓰레드는 비동기 코드가 해당 작업을 끝날 때까지 기다려주지 않기 때문에 non-blocking으로 실행되는데, 이것이 동기 코드와의 큰 차이점이다.

아래와 같이 타이머 함수인 setTimeout()은 대표적인 비동기 함수로, 코드가 차례대로 동기적으로 실행되다가, setTimeout()을 만나는 순간에 실행 쓰레드는 5초라는 시간이 지나고 나서 실행시켜야 한다고 판단하여 바로 다음 코드로 넘어가게 되고, 5초가 지난 시점에 다시 돌아와 해당 콜백 함수를 실행시킨다.

자바스크립트에서 이미지의 소스를 지정하는 코드는 비동기적으로 실행된다.
-> 이미지 용량이 클 경우 오래걸리기 때문

addEventListener()는 해당 이미지의 load 이벤트가 발생했을 때, 즉 이미지 로드가 완료됐을 시점에 실행되는 콜백함수를 가지고 있기 때문에, 비동기적으로 실행되는 src 지정 코드가 완료되고 난 후에 실행된다.

*addEventListener() 호출은 동기적으로 바로 실행되어 등록이 끝나지만, 콜백 실행은 나중에(비동기적으로) 일어납니다.

addEventListener() 함수 자체 = 동기적 (즉시 실행되어 리스너 등록만 함)
리스너 콜백 실행 = 비동기적 (이벤트가 발생하면 브라우저가 이벤트 큐(Event Queue)에 콜백을 넣고, 콜스택이 비었을 때, 이벤트 루프에 의해 콜스택으로 옮겨져 실행됨)

☝️ 이때, 콜백 함수 자체( ex.addEventListener() )가 해당 작업을 비동기적으로 실행되게끔 만드는 것이 아니다!

setTimeout()과 같은 특정 몇몇 개의 함수만이 비동기적으로 실행되며, 두번째 코드가 비동기적으로 실행되는 이유는, load 이벤트가 일어날 때까지 기다리고 있기 때문이 아니라, 단순히 이미지의 load 이벤트가 비동기적으로 일어날 수 있기 때문이다.

비동기 함수: Geolocation API, AJAX calls

AJAX (Asynchronous JavaScript And XML)

: 가장 중요한 비동기 자바스크립트 사용 예시

Allows us to communicate with remote web servers in an asynchronous way. With AJAX calls, we can request data from web servers dynamically.

XML: 과거에 데이터 전송 시 널리 사용되던 데이터 포맷 중 하나 -> 하지만 현재는 대부분의 API에서 XML 대신 JSON(JavaScript Object Notation)*을 사용한다. -> JSON은 XML과 달리 문자열로 변환된 자바스크립트 객체 형태(이기 때문에, 웹에서 데이터를 주고받거나 자바스크립트로 활용하기 훨씬 편리하다.
JSON: 원래는 자바스크립트 문법에서 파생된 데이터 포맷이지만, 지금은 언어에 상관없이 거의 모든 API와 프로그램에서 가볍고 읽기 쉬운 데이터 교환 형식으로 사용됩니다.

APIs (Application Programming Interface)

Piece of software that can be used by another piece of software, in order to allow applications to talk to each other

웹 개발에서의 API 종류는 매우 다양하다. : DOM API, Geolocation API, Own Class API, "Oneline" API
Oneline API: 데이터 요청을 받아들이고 그에 대한 데이터를 응답으로 보내는 서버(에서 실행되는) 애플리케이션
우리도 우리만의 APIs를 만들 수 있지만, Node.js와 같은 백엔드 개발 지식이 필요하다.
보통은 제 3자가 만든 API를 활용할 때가 많다.
API를 활용하여 대부분의 모든 기능을 구현할 수 있다.

웹 서버 접근 시, 동작원리

1. DNS lookup:
도메인은 웹 서버의 진짜 주소가 아니고, DNS(Domain Name Server)를 통해 진짜 IP주소를 찾아야 한다.

*DNS: Internet의 주소록 개념

2. TCP/IP socket connection: 웹을 통해 데이터가 이동하는 방법을 정의해놓은 프로토콜로, 데이터가 어떻게 이동하는지에 관한 룰을 규정하기 때문에, 사실상 인터넷의 기초적인 컨트롤 시스템으로 작용한다.
먼저 TCP가 요청과 응답을 몇 천개의 작은 packets라고 불리는 조각으로 나눈다.
작은 Packets들이 최종 목적지에 도착하는 순간, TCP는 이러한 수많은 조각들을 다시 합쳐서 본래 요청/응답을 완성한다.

이러한 작업은 별 것 아닌 것 같아 보이지만, 필수적인데, 작게 잘라진 조각들이 인터넷의 각기 다른 루트를 통해 전송되어 가장 빠르게 메시지가 도착할 수 있도록 하기 때문이다.

IP의 역할은 TCP에 의해 잘라진 packets들을 인터넷을 통해 이동시키는 것이다. 각 패킷의 IP 주소를 확인하여 각 패킷의 목적지에 도달할 수 있도록 길잡이 역할을 한다고 볼 수 있다.

*TCP: Transmission Control Protocol *IP: Internet Protocol

3. HTTP request:
HTTP(HyperText Transfer Protocol)을 통해 우리가 원하는 데이터를 요청하게 된다.

웹에서 데이터를 주고받기 위한 기본 통신 규약(프로토콜)으로, TCP, IP와는 또 다른 Communication protocol (= 두 개 이상의 당사자가 서로 소통할 수 있도록 해주는 규칙 체계)
👉 HTTP 프로토콜의 경우, 클라이언트와 웹 서버가 서로 소통할 수 있도록 해준다.

📌 요청 메시지는 다음과 같이 구성되어 있다. ✅ HTTP method: GET / POST / PUT / PATCH / DELETE

HTTP vs HTTPs (HyperText Transfer Protocol Secure):
TLS, SSL로 암호화된 버전으로, 데이터를 전송하기 전에 암호화함으로써 해커가 가로채더라도 내용을 알 수 없다.
👉 보안성 덕분에 로그인, 결제, 개인정보 입력이 필요한 서비스는 필수적으로 사용

✅ 요청 BODY: POST 요청 시에만 필수!