[JS] 비동기는 왜 중요할까 - 비동기 프로그래밍

y1nlog·2025년 1월 10일
JavaScriptTILasync내일배움캠프네트워크
0
post-thumbnail

용어 이해

동기

: 작업이 순차적으로, 한 번에! 요청을 보낸 후 결과를 기다리는 방식
Synchronous
순차적으로 처리되고, 이전 작업이 완료될 때까지 다음 작업을 시작하지 않는다.

비동기

: 병렬처리 요청을 보낸 후 응답을 기다리지 않는 방식
Asynchronous
작업이 결과를 기다리지 않고 다른 작업을 동시에 처리할 수 있는 방식.
실행 시점과 완료 시점이 달라진다.(setTimeout, setInterval, ...)

[비동기의 장점]
- 비효율적인 대기시간을 줄일 수 있음.
- 실행 자원의 효율적 사용

[비동기의 단점]
- 응답의 도착 시점을 예측 불가하므로, 적절한 콜백함수나 프로미스 사용이 요구됨


출처 : PoienmaWeb

논-블로킹

NonBlocking.
: 작업이 실행되는 동안 다른 작업의 실행을 막지 않는 것. 비동기 작업을 통해 구현됨.

자바스크립트는 Non-Blocking I/O 를 가진 비동기를 지원하는 언어

cf. 동기 프로그래밍은 코드 실행 시, 다음 코드의 실행을 막고(Blocking) 실행한다.

// 블로킹 예시
a = a+b
b = a+3 // a의 작업이 끝날 때까지 b는 실행되지 않는다.

이벤트 루프

: 자바스크립트의 비동기 작업을 관리하고, 콜백 큐에 있는 작업을 콜 스택에 추가해 실행하는 메커니즘

프로미스(Promise)

: 프로미스는 자바스크립트에서 비동기 작업의 완료 또는 실패를 나타내는 객체.
비동기 작업의 성공 또는 실패를 나타내는 자바스크립트 객체로, 비동기 작업의 결과를 처리하는 데 사용됨.

- 프로미스가 가질 수 있는 상태
1. **대기 중 (Pending)**: 아직 결과를 받지 못한 상태.
2. **이행됨 (Fulfilled)**: 작업이 성공적으로 완료된 상태.
3. **거부됨 (Rejected)**: 작업이 실패한 상태.

프로미스 사용 방법.
작업이 성공하면 -> then / 실패하면(throw error) -> catch

promise
  .then(result => {
    console.log(result); // "작업 완료"
  })
  .catch(error => {
    console.error(error); // "작업 실패"
  });

프로미스의 생성은 동기적으로 실행되고 프로미스의 생성이후의 콜백들이 비동기적으로 실행

console.log('1');
const promise = new Promise((resolve, reject) => {
	console.log('2');
	resolve('3');
});
console.log('4');

실행결과 : 1 2 4
프로미스를 생성하는 것 또한 비동기는 아니다. 

console.log('1');
const promise = new Promise((resolve, reject) => {
	console.log('2');
	setTimeout(()=>{resolve('3');},2000);
});
console.log('4');
console.log(promise);
promise.then(()=>console.log(promise));

실행결과 : 1 2 4 3

프로미스 체이닝 : 각 then 메서드는 새로운 프로미스를 반환해서 체이닝이 가능
catch 를 사용하면 프로미스의 결과가 실패일 때(에러발생 시) 에러를 잡아서 처리할 수 있게 한다.

  • 반환을 하는 게 프로미스면, 뒤에서도 프로미스 메소드를 사용할 수 있다.

async/await

: Promise를 보다 쉽게 쓸 수 있도록 도와주는 역할
프로미스를 보다 직관적으로 처리할 수 있게 해주는 자바스크립트 구문으로, 비동기 코드를 동기 코드처럼 작성할 수 있게 함.
구문 상에 존재하는 친구!

async

: async 함수는 항상 프로미스를 반환.
함수 내부에서 return되는 값은 자동으로 Promise 를 반환, => Promise.resolve()를 통해 감싸진다.

async function myAsyncFunction() {
  return "Hello, Async!";
}
// 아래 코드와 동일한 거
// myAsyncFunction = () => new Promise((res) => res("Hello, Async!"))

myAsyncFunction().then(result => {
  console.log(result); // "Hello, Async!"
});

new Promise를 안 써도 되게끔 바꿔주는 게 async이다. 훨씬 간결한 코드!

await

await 키워드는 프로미스가 해결될 때까지 비동기 함수의 실행을 일시 중지한다.
await은 오직 async 함수 내에서만 사용할 수 있다.

async function fetchData() {
  const response = await fetch("~");
  const data = await response.json();
  console.log(data);
}

fetchData();

.then()을 생략할 수 있게 된다. await은 '기다린다'는 뜻으로 뒤에 있는 코드를 block하게 된다.
위 코드에서는 fetch, response.json()의 작업을 기다렸다가 console.log(data)를 출력하게끔 블로킹하고 있다.

new Promise(()=>{}).then(()=>{}).then(()=>{}).then(console.log)

이 코드가 async / await으로 매우 간단해 지는 것을 알 수 있다 🥹

에러 핸들링

try ... catch 사용!

async function fetchData() {
  try {
    const response = await fetch("~");
    if (!response.ok) {
      throw new Error("네트워크 응답이 올바르지 않습니다.");
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("에러 발생:", error);
  }
}

fetchData();

리팩토링

new Promise((resolve, reject) => {
  console.log("아빠 출장 갔다오면 바로 놀이동산 가자!");
  setTimeout(() => {
    //resolve("아빠 출장 잘 다녀왔어! 홈 스윗 홈!");
    reject("아빠가 미안해..");
  }, 3000);
})
  .then((result) => console.log(result, "아빠랑 놀이동산 출발 바로 가즈아!"))
  .catch((err) => console.error(err, "놀이동산은 다음에 가자.."));f

const fatherPromise = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("아빠 출장 잘 다녀왔어! 홈 스윗 홈!");
        // reject("아빠가 미안해..");
      }, 3000);
    });

async function goToAmusementPark() {
  try {
    console.log("아빠 출장 갔다오면 바로 놀이동산 가자!");
    const result = await fatherPromise;
    console.log(result, "아빠랑 놀이동산 출발 바로 가즈아!");
  } catch (err) {
    console.error(err, "놀이동산은 다음에 가자..");
  }
}

// 비동기 함수 실행
goToAmusementPark();
  • 여러개의 비동기 작업을 한 번에 처리하는 법 : Promise.all

URL / 네트워크 요청

URL

Uniform Resource Locator.

URL은 인터넷 상의 자원의 위치를 나타내는 주소. 간단하게 주소라고 많이 부른다.

URL의 구성 요소

  1. 프로토콜 (Protocol):
    • 자원(리소스)에 접근하기 위해 사용되는 통신 규약
    • http, https등
    • http: Hypertext Transfer Protocol, 웹 페이지를 전송하는 프로토콜
    • https: Hypertext Transfer Protocol Secure, 보안이 강화된 http
  2. 도메인 이름 (Domain Name):
    • 자원이 위치한 웹 서버의 이름
    • example.com
    • 도메인 이름은 사람이 읽을 수 있는 주소로, 기계한테는 IP 주소를 가리키고 있는 것.
  3. 경로 (Path):
    • 서버 내에서 리소스의 위치
    • /path/to/resource
    • 경로는 서버의 디렉토리 구조를 따른다.
      • 서버 안에도 컴퓨터 폴더구조 처럼 되어있음. File System
  4. 쿼리 문자열 (Query String):
    • 리소스에 접근할때 필요한 대한 추가 매개변수
      • ex) 검색할때 몇페이지 몇개
    • ?query=string
    • 쿼리 문자열은 키-값 쌍으로 구성되고, 여러 매개변수는 &로 구분됨.
    • ?key1=value1&key2=value2

우리는 네트워크 통신을 통해 타인의 서버/컴퓨터에 접근한다.
도메인 이름은 컴퓨터 까지의 주소, 경로는 컴퓨터 안의 주소(path, pathname)
동적 Path = path parameter, path variable 등등
?뒤에 들어가는 것 = Query string, search, query param
위 구성요소들을 조합한 1개의 주소가 URL이 되는 것

네트워크 요청

  • XMLHttpQequest
    오래된 방식의 네트워크 요청 방법

  • fetch
    최신 방식. 간단하고 직관적인 API 제공

fetch("https://jsonplaceholder.typicode.com/todos/1")
        .then((response) => response.json())
        .then((data) => console.log(data))
        .catch((error) => console.err("Error:", error));
  • fetch(url): 지정된 URL로 네트워크 요청을 보냅니다.
  • .then(response => response.json()): 응답을 JSON 형식으로 파싱합니다.
  • .then(data => console.log(data)): 파싱된 데이터를 처리합니다.
  • .catch(error => console.error("Error:", error)): 요청 중 발생한 에러를 처리합니다.

fetch 옵션

  • GET
  • POST
  • PUT
  • PATCH
  • DELETE

네트워크 요청의 흐름

  1. 요청 생성: fetch 함수를 사용하여 네트워크 요청을 생성
  2. 요청 전송: 서버로 요청을 전송 ← 비동기 시작
  3. 응답 수신: 서버로부터 응답을 수신
  4. 응답 처리: 응답 데이터 처리 (map, filter 계산, DOM 업데이트 등) ← 비동기 끝! 여기가 await, then 에서 처리하는 것들
  5. 에러 처리: 요청 중 발생한 에러를 처리
profile
y1nlog
FrontEnd Developer
이전 포스트

Programmers / 이상한 문자 만들기 - 12930

다음 포스트

Programmers / 크기가 작은 부분문자열 - 147355

0개의 댓글