[2] 늘 헷갈리는 동기(Sync)와 비동기(Async) 차이 / 객체 리터럴 / Error handling

프로그래밍/Node.js

[2] 늘 헷갈리는 동기(Sync)와 비동기(Async) 차이 / 객체 리터럴 / Error handling _JavaScript

제이스톨 2023. 6. 12. 22:11

728x90

1. 동기와 비동기 차이..??

- 동기 (Sync)

: "동기로 실행된다 = 먼저 실행된 코드의 결과가 나올때까지는 대기하는 것"

- 비동기 (Async)

: "비동기로 실행된다 = 실행된 순서와 관계없이 결과가 나오는 것"

- 비동기 함수 (Async Function)

: await 연산자를 비동기 함수 안에서만 사용할 수 있는데, 이를 활용하면 문법이 훨씬 간결해질 수 있기 때문에 비동기 함수를 사용한다.

여기서 await 연산자를 간단하게 설명하면,

// 비동기 + 일반함수
async function 함수이름() {
	// 명령문
}

// 비동기 + 익명함수
async function() {
	// 명령문
}

// 비동기 + 화살표 함수
async () => {
	// 명령문
}

이런 느낌이다.

- Non-Blocking Model :

▽ 블로킹모델 & 논블로킹 모델 참고 ▽

https://jh-healing-place.tistory.com/73

[1] node.js 란 무엇인가 (+ node.js 장단점 / 논블로킹 모델 / runtime?)

Node.js 정의 : node.js는 Chrome V8 Javascript 엔진으로 빌드된 자바스크립트 런타임입니다. Node.js는 이벤트 기반, 논 블로킹 I/O 모델을 사용해 가볍고 효율적입니다. Node.js 패키지 생태계인 npm은 세계에

jh-healing-place.tistory.com

- 프로미스 (Promise)

: 자바스크립트에서 비동기 처리를 동기로 처리할 수 있게 돕는 Built-in(미리 내부적으로 정의된) 객체 유형이다.

이 객체를 사용하면 비동기 처리를 손쉽게 할 수 있게 된다..!

✔ 왜 비동기처리를 동기적으로 처리해야하는가..?
A.
정확히 말하자면 Javascript 관점에서 비동기적인 코드를 동기적인 것 처럼 처리한다는 것입니다. 왜 이런 동작이 필요할까요? 이전에 setTimeout 비동기 함수 처리 예제를 통해 비동기 함수보다 동기 명령이 우선적으로 처리되는 상황을 살펴보았죠? 예제에서 살펴본 내용은 지극히 합리적입니다. 왜냐면 ‘그렇게 의도’ 했기 때문입니다.

First를 출력하는 것이 Middle과 Last보다 늦는 것이 의도적이라는 것입니다. 그러나 First-Middle-Last를 순서대로 출력하고 싶다면 상황이 달라집니다. 이 때는 First가 출력될 때 까지 얼마가 걸리던 Middle과 Last는 출력되어선 안됩니다. 이럴 때 필요한 것이 동기적인 것 처럼 출력하는 방법입니다. 첫 번째로 내릴 수 있는 결론은, 비동기적 진행의 선택은 개발자의 의도에 따라 결정된다는 것입니다.

조금 더 현실적인 예를 들어보겠습니다. 데이터베이스의 데이터를 먼저 가져온 후, 그 데이터를 가공하여 반환하는 함수가 존재한다고 가정해보겠습니다. 데이터베이스와의 소통은 I/O이고, Javascript 에서 거의 모든 I/O는 비동기적이므로 아마도 데이터를 가져오기도 전에 데이터 가공 명령이 실행되버리고 말 것입니다(에러 발생!). 이런 상황에서 매우 유용하게 쓰일 수 있는 방법이 Promise입니다. 단어 그대로 ‘언제 진행할지 약속’한다고 생각하시면 좋습니다. 언제 진행할지란, 바로 비동기 명령의 실행이 완료된 이후를 말하는 것입니다. 데이터베이스의 예로 돌아가서, 데이터를 가져온 이후 데이터를 처리하는 명령어들을 Promise 이후에 진행하도록 작성한다면 데이터를 가져오지도 않았는데 처리가 시작되는 오류상황을 회피할 수 있을 것 입니다.

참고로, Promise를 떠난다면 전통적으로 이런 비동기적인 상황을 회피하는 조금 더 일반적인 감각은 callback이라는 방식입니다. 정확히 말하면, Promise도 callback으로 작동하고 있습니다. 다만 callback이 무엇인지, 왜 Promise가 callback보다 선호되는지 찾아보시길 바랍니다. 😊
- Promise 생성자 인터페이스
new Promise(executor);

// 예제
new Promise((resolve, reject) => {
	//명령문
})

2. 객체 리터럴

- 객체란? Javascript의 데이터 타입은 크게 원시 타입과 객체 타입으로 분류가 된다.

원시 타입 : 단 한나의 값만을 나타내고 변경이 불가능한 값
객체 타입 : 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료 구조, 변경이 가능한 값

Javascript는 객체(Object) 기반의 프로그래밍 언어이고, Javascript를 구성하는 거의 모든 것은 객체로 구성되어있다. 객체 는 0개 이상의 프로퍼티로 구성된 집합이며, 하나의 프로퍼티는 Key와 Value로 구성되어 있다.

- 객체 리터럴이란? 객체를 생성하기 위한 표기법을 의미한다.

let objectLiteral = {
    key: 'Value', // 프로퍼티 (key, value)
    helloWorld: function () { // 메서드
        return "Hello world"; 
    }
};

3. Error Handling

: 에러 핸들링은 에러를 관리하는 방법이고, 예상치 못한 상황에 대처하는 방식을 말한다.

에러는 예상할 수 있는 에러와 예상치 못한 에러로 구분할 수 있는데, 일반적인 어플리케이션을 설계할 때에는 예상치 못한 에러 상황이 더욱 많이 일어날 것으로 가정해야한다.

(프로그래머가 작성한 코드에서 예상치 못한 에러가 일어날 가능성은 언제나 존재하고, 이러한 에러 상황을 대비해 언제든지 처리할 수 있어야한다.)

- try ~ catch :

const users = ["Lee", "Kim", "Park", 2];

try {
  for (const user of users) {
    console.log(user.toUpperCase());
  }
} catch (err) {
  console.error(`Error: ${err.message}`);
}

// LEE
// KIM
// PARK
// Error: user.toUpperCase is not a function

users에 들어있는 이름들을 String.toUpperCase()를 이용하여 대문자로 변경하려할 때 **문자열(String)**이 아닌 데이터가 들어온다면 에러가 발생된다.

이렇게 예상치 못한 에러에 대처하기 위해선 try … catch 문으로 코드 전체를 감쌀 수 있다.

- throw : 호출하면 그 즉시 현재 실행되고 있는 함수는 실행을 멈추게 된다.

function withdraw(amount, account) {
  if (amount > account.balance)
    throw new Error("잔고가 부족합니다.");
  account.balance -= amount;
	console.log(`현재 잔고가 ${account.balance}남았습니다.`); // 출력되지 않음
}

const account = { balance: 1000 };
withdraw(2000, account);