Day11

Week3부터 학습정리하는 과정에서의 기본 지식과 키워드를 제공하는 방법이 달라졌다. 핵심 개념을 익히게 하는 방법도 달라졌지만 무엇보다도 양이 엄청나게 많아진 것이 가장 많이 달라진점이 아닌가 싶다...!😱😱 내부에서 비동기적으로 과정을 처리하는JavaScript 와 Node.js를 사용해서 멀티 스레드 형태의 구조를 구현하기 위해서 필요한 개념들을 정리해 보았다.

 

비동기 처리 문법

• 자바스크립트는 싱글 스레드 프로그래밍 언어 이기 때문에 멀티스레드 작업을 하기 위해서 비동기 처리방식을 사용한다.
• 비동기 처리방식은 백그라운드에서 동작하고, 처리가 완료된 이후에 결과를 반환받아서 처리하는데 이때 JavaScript 에서는 지금까지 callBack 함수와 promise 객체를 사용했다.
• 하지만 callBack 함수와 promise 의 단점을 보완하기 위해서 asynce / await 가 나타나게 되었다.

async / await

기본문법형태

함수 앞에 async라는 예약어를 붙여준다. 이후 서버와의 통신과 같이 비동기 처리를 해야하는 코드의 앞에 await를 붙인다.

async function 함수명(){
  await 비동기처리메서드명();
}

async

• await을 사용하기 위한 선언문
• 함수 앞에 async를 붙여주어서 함수내에서 await을 사용할 수 있게 해준다.
• async 함수에서 어떤 값을 반환하더라도 promise 객체로 감싸져서 반환된다.

await

• promise.then() 을 사용해서 then 핸들러를 복잡하게 처리할 필요 없이, 간단하게 비동기 함수를 처리할 수 있다.

// then 핸들러 방식
fetch(url)
    .then(res => res.json()) // 응답을 JSON으로 파싱
    .then(data => {
      // data 처리
      console.log(data);
    })

// await 방식
async function func() {
    const res = await fetch(url); // 요청을 기다림
    const data = await res.json(); // 응답을 JSON으로 파싱
    // data 처리
    console.log(data);
}
func();

• promise 비동기 처리가 완료될 때까지 코드실행을 멈추고, 기다린다.
  • 이를 통해서 비동기적인 작업을 동기적으로 처리 할 수 있다.

❗️❗️ 비동기 처리 메서드는 반드시 promise객체를 반환해야 await가 의도한 대로 동작한다.❗️❗️

예외처리

• try catch 를 사용해서 예외처리를 한다.

📚 자바스크립트 Async/Await 개념 & 문법 정복

📚 자바스크립트 Async/Await 개념 & 문법 정복

 

[ 비동기 처리 ] async / await

[ 비동기 처리 ] async / await

 

병렬처리와 스레드

병렬처리(Parrelel Processing)란?

• 여러개의 작업을 동시에 실행해서 효율을 높이는것
• 하나의 작업을 부분적으로 나누어서 각각 작업하는것
• 부분적으로 나눈 작은 작업을 순차적으로 각각 다른 스레드에서 실행한다.

프로세스란?

• 단순히 실행중인 프로그램
• 사용자가 작성한 프로그램이 운영체제에 의해 메모리 공간을 할당받아 실행 중인 것

스레드란?

• 프로세스(process) 내에서 실제로 작업을 수행하는 주체

멀티 스레드란?

• 하나의 프로세스를 두 개 이상의 스레드(실행단위)로 구분하여 자원을 공유하면서 작업을 수행하는 과정. 이를 통해서 자원의 생성 및 관리의 중복성을 최소화하여 수행 능력을 향상시킬 수 있다.

• OS로부터 할당받은 프로세스의 메모리를 내부 스레드들이 공유한다.
• code, data, heap은 공유해서 사용하고, 스레드 각각의 stack을 가진다.

멀티 스레드 동작 방식

1. 실행할 프로그램의 데이터가 메모리에 전달된다.
2. 프로그램을 실행할 프로세스가 생성된다.
3. 프로세스는 분리되어있는 작업의 수만큼 스레드를 생성한다.
4. 아주 짧은 시간씩 나누어서 각각의 스레드를 조금씩 실행시키고 멈춘다.  👉 Round Robin 방식이라고 한다.
5. 조금씩 실행히켜서 완료된 스레드는 결과를 반환하고 종료시킨다.
6. 스레드는 stack 영역을 제외하고 자원을 공유하고 있기 때문에, switching 되는 비용발생이 적다.

멀티스레드 장점

• 시스템의 처리율이 향상된다.
• 시스템 자원 소모가 감소된다.
• 프로그램의 응답 시간이 단축된다.
• 프로세스 간 통신 방법(IPC)에 비해 스레드 간 통신 방법이 더 간단하다. (캐시 메모리를 비울 필요도 없어서 더 빠르다)

멀티스레드 단점

• 오류가 발생할 경우 병목현상이 발생해서 성능이 저하될 수 있다.
• 공유된 자원을 사용하기 때문에 동기화 문제를 해결해야한다.

멀티 스레드 / 비동기 병렬 처리

멀티 스레드 / 비동기 병렬 처리

 

스레드 풀(Thread Pool)

스레드 풀이란?

동시에 실행되는 작업을 관리하는데 사용되는 메커니즘

• 미리 일정 개수의 스레드를 생성한 후에 생성되어 있는 스레드를 관리하면선 작업을 수행하는 기법
• 미리 생성된 스레드는 대기상태에 있다가, 작업이 발생했을 경우에 작업을 받아서 수행한다.

스레드풀의 필요성

• 관리 되지 않은 많은 스레드를 만들어서 실행되면 OS의 자원이 빠르게 소모된다.
• 스레드 생성과 삭제에서 발생하는 오버헤드를 줄이고, 작업의 개수를 제한하면서 작업속도를 향상시키기 위해서 필요하다.

스레드풀의 장점

• 스템의 자원을 효율적으로 관리할 수 있고, 불필요한 자원 소모를 방지한다.
• 작업이 발생하면 대기 중인 쓰레드 중 하나를 선택하여 작업을 할당하므로, 작업 처리를 병렬로 진행할 수 있다.
• 시스템의 부하를 조절하고, 과도한 작업 요청으로 인한 성능 저하를 방지한다.
• 스레드의 생성주기를 관리해서 스레드를 안정적으로 운영할 수 있다.

[JAVA] 쓰레드 풀(Thread Pool): 개념, 장점, 사용 방법, 코드 예시 (feat. Baeldung)

[JAVA] 쓰레드 풀(Thread Pool): 개념, 장점, 사용 방법, 코드 예시 (feat. Baeldung)

 

객체지향 설계와 데이터 흐름

객체지향(OOP) 이란?

• 실제 세계의 사물을 객체로 모델링해서 프로그램을 구성하는 방식
• 하나의 객체를 나타내기 위한 데이터와 기능을 하나로 묶어서 관리한다.

객체지향의 장점

• 상속, 다형성, 캡슐화 등의 특징을 활용해서 더 효율적으로 개발을 진행할 수 있다.
• 코드의 중복을 줄이고 유지 보수성을 용이하게 한다.

데이터 흐름

• 절차 지향 프로그래밍에서는 프로그램의 흐름을 중심으로 진행되기 일련의 절차나 함수를 순차적으로 나열해서 진행한다.
  • 그렇기 때문에 함수와 데이터를 별도로 분리해서 관리한다.
• 하지만, 객체지향에서는 객체들간의 상호작용을 통해서 프로그램의 기능을 구현하기 때문에 객체 내에서 데이터와, 그 데이터를 다루는 메서드들을 하나로 묶어서 관리한다.
• 이를 통해서 코드 구조가 더 명확해지고 유지보수가 용이해진다.

12. 객체지향 설계 방법

12. 객체지향 설계 방법

 

객체 지향 프로그래밍의 이해와 실제 적용 사례

객체 지향 프로그래밍의 이해와 실제 적용 사례

 

이벤트 큐

메시지와 이벤트를 보내는 시점과 처리하는 시점을 다르게 처리하기 위한 디자인 패턴

이벤트란?

• 프로그램과 상호작용을 위해서 OS가 이벤트를 발생시켜서 프로그램을 전달하는 것

Task Queue

• setTimeout 이나 setInterval 같은 비동기 함수의 콜백함수, 이벤트 핸들러가 일시적으로 보관되는 영역

Event Loop

• 콜 스택에 현재 실행 중인 실행 컨텍스트가 있는지, 태스크 큐에 대기중인 함수(콜백 함수, 이벤트 핸들러..)가 있는지 반복해서 확인한다.
• 콜스택이 비어 있고 태스크 큐에 대기중인 함수가 있다면 이벤트 루프는 순차적으로 태스크 큐에 대기 중인 함수를 콜스택으로 이동시킨다.
• 스택으로 이동된 함수는 실행된다.

 

이벤트 핸들러

이벤트가 발생했을 때 실행되는 함수

• Javascript에서 이벤트를 다룰 때에 Event handler 를 사용한다.
• 사용자의 동작으로 인해서 어떤 함수를 실행시킬 지 정의해 주는 것

https://tangoo91.tistory.com/31

[JavaScript] 자바스크립트 이벤트 핸들러와 리스너

 

Promise

JavaScript 비동기적 처리에서 사용되는 객체

비동기적이란?

• 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성

Promise가 필요한 이유

• 서버에서 받아온 데이터를 화면에 표시할 때 사용한다.

promise 3가지 상태(states)

promise 객체의 처리과정을을 나타낸다. new Promise() 로 프로미스객체를 생성하고 종료될 때까지 3가지의 상태를 거친다.

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

Pending(대기)

먼저 아래와 같이 new Promise() 메서드를 호출하면 대기(Pending) 상태가 됩니다.

new Promise();

new Promise() 메서드를 호출할 때 콜백 함수를 선언할 수 있고, 콜백 함수의 인자는 resolve, reject입니다.

new Promise(function(resolve, reject) {
// ...});

Fulfilled(이행)

여기서 콜백 함수의 인자 resolve를 아래와 같이 실행하면 이행(Fulfilled) 상태가 됩니다.

new Promise(function(resolve, reject) {
  resolve();
});

그리고 이행 상태가 되면 아래와 같이 then()을 이용하여 처리 결과 값을 받을 수 있습니다.

function getData() {
  return new Promise(function(resolve, reject) {
    var data = 100;
    resolve(data);
  });
}

// resolve()의 결과 값 data를 resolvedData로 받음getData().then(function(resolvedData) {
  console.log(resolvedData);// 100});

※ 프로미스의 '이행' 상태를 좀 다르게 표현해보면 '완료' 입니다.

Rejected(실패)

new Promise()로 프로미스 객체를 생성하면 콜백 함수 인자로 resolve와 reject를 사용할 수 있다고 했습니다. 여기서 reject를 아래와 같이 호출하면 실패(Rejected) 상태가 됩니다.

new Promise(function(resolve, reject) {
  reject();
});

그리고, 실패 상태가 되면 실패한 이유(실패 처리의 결과 값)를 catch()로 받을 수 있습니다.

function getData() {
  return new Promise(function(resolve, reject) {
    reject(new Error("Request is failed"));
  });
}

// reject()의 결과 값 Error를 err에 받음
getData().then().catch(function(err) {
  console.log(err);// Error: Request is failed
  });

자바스크립트 Promise 쉽게 이해하기

자바스크립트 Promise 쉽게 이해하기

 

Event Emitter

Node.js에서 이벤트 기반(Event-driven)으로 프로그래밍을 작성 할 때, 가장 기본적인 이벤트 처리 방식

실행 과정

• EventEmitter 클래스를 상속한 객체를 만든다.
• on() 메서드를 통해서 Event Listenr 를 등록한다.
• 등록된 이벤트가 발생할 때마다 해당 Event Listerner 를 통해서 콜백 함수가 실행된다.
• 이벤트는 문자열 형태의 이름과 함께 발생하고, 이벤트에 대한 데이터를 선택적으로 전달 할 수 있다.

Event Emitter 활용

• EventEmitter 클래스를 사용해서 Node.js에서 이벤트 기반 프로그래밍을 쉽게 구현할 수 있다.
• HTTP 요청, DB query 결과 등의 비동기적 이벤트 처리에 유용하다.

Promise VS Event Emitter

Promise

비동기 작업이 완료될 때 실행할 콜백 함수를 등록하는 방법보다 더 깔끔하고 직관적인 방법으로 비동기 작업을 처리할 수 있다.

• 비동기적 작업을 수행한 함수가 반환하는 객체
• 성공하면 결과값을, 실패하면 에러를 반환한다.

 💡 Promise는 비동기 작업의 성공 또는 실패 상태를 쉽게 확인하고 처리할 수 있다.

Event Emitter

이벤트를 발생시키고, 이벤트가 발생했을 때 처리할 콜백 함수를 등록한다.

• 이벤트 기반 프로그래밍에서 사용되는 객체
• 이벤트 이름과 함께 발생하고 해당 이벤트를 처리하는 모든 Event Listener 에게 알린다.

💡 여러개의 콜백함수를 동시에 처리할 수 있다.

👉 Promise → 비동기 작업의 결과를 처리한다.

👉 Event Emitter → 이벤트 기반 프로그래밍에서 이벤트를 처리한다.

 

Node.js | EventEmitter란? (feat. Promise와의 차이점)

Node.js | EventEmitter란? (feat. Promise와의 차이점)