자바스크립트 심화

싱글스레드 vs 멀티스레드

싱글스레드(Single-threaded)

• 스레드(Thread) = 일하는 사람
• 싱글스레드 = 일하는사람1명
• 한사람이주어진작업을하나씩처리하는방식

멀티스레드(Multi-threaded)

• 멀티 스레드 = 일하는 사람이 여러명
• 여러 사람이 주어진 작업을 같이 처리하는 방식

싱글스레드 vs 멀티스레드

싱글스레드

• 장점
  • 경쟁상태, 교착상태
  • 멀티스레드 대비코드 복잡도가 낮음
• 단점
  • 여러 명이 일하는 병렬처리보다는 작업 처리 효율이 평균적으로 떨어짐

멀티스레드

• 장점
  • 평균적으로 싱글스레드보다 작업 처리 효율이 높음
• 단점
  • 사용시 경쟁상태, 교착상태를 고려해야함(코드 복잡도가 높음)

경쟁상태?

교착상태?

• 서로가 리소스를 점유하고 있는데 서로가 내놓지 않는 상황!!
  
• 범인이 인질을 풀어주거나 경찰이 돈을 주거나 해야 해결되는데 둘다 놓지 않고 있는 것
• 실행은 되는데 멈춰있는 것이다!!!

정리

• 자바스크립트는 대표적인 싱글스레드로 작동하는 언어
• 싱글스레드인 상황에서 성능을 극대화하기 위해 비동기 처리 방식을 채택
• 자바스크립트 : 싱글스레드로 비동기 환경에서 실행된다??

멀티 스레드인데 비동기 처리 방식을 사용하는 언어 = 아르메니아
https://engineering.linecorp.com/ko/blog/introduce-armeria

블로킹 / 논블로킹

블로킹

• 하나의 작업을 마치고 나서 다음 작업을 시작하는 순차적 실행방식
• 작업이 길어지면 다음 작업이 지연되는 문제
• 자바스크립트 세계에서는 동기라는 용어로 혼용
• await로 다음 동작을 막는 행위도 블로킹이다!!

논블로킹

• 하나의 작업을 실행시키고 그 작업이 마치지 않아도 다음 작업을 실행하는 실행방식
• 작업을 실행시켜 놓기만 하는 행위
• 작업이 길어져도 다음 작업 지연이 되는 문제가 없다.
• 보통 결과값을 return문으로 리턴을 바로 받지 못하며 콜백함수를 통해 받는 경우가 많다.(단, promise의 등장으로 콜백함수가 아닌 다른 방식으로 받게 된다.)
• 자바스크립트 세계에서는 비동기라는 용어와 혼용
• 기술적으로 논블로킹 방식은 싱글스레드만으로는 불가

자바스크립트는 싱글스레드인데 어떻게 동시 작업이 가능??

• setTimeout : 몇 초 후에 특정 작업을 수행할 수 있으며 해당 시간이 경과되기 까지 별도의 작업이 가능
• fetch : 원격 서버에 있는 데이터를 요청하며 응답이 오기 전에도 다른 작업을 수행할 수 있다.
• 마치 스레드가 하나이지 않은 것 처럼 작동 / 자바스크립트는 싱글스레드이면서 멀티스레드이다~!~!~!
• 개발자가 작성한 자바스크립트 코드는 싱글스레드로 순차적으로 실행시키되 특정 비동기 작업(IO작업 또는 CPU연산 작업)에 대해서는 멀티 스레드를 사용한다.

자바스크립트 실행 환경 : Runtime

• 자바스크립트 코드를 실행하기 위한 환경의 구성 요소들

1. 자바스크립트 엔진(V8, SpiderMonkey, JavaScriptCore) - 걍 코드 실행

• 코드를 읽어서 해석하고 작업을 수행하는 역할
• 엔진 자체는 작업을 수행할 뿐 비동기/동기와는 관계 없음

2. 이벤트 루프 + 큐

• 자바스크립트 코드가 비동기로 실행될 수 있도록 하는 역할
• 이벤트 루프가 없으면 자바스크립트 코드는 모두 동기 방식으로 실행
• 실세~~!!!
• 큐
  • 비동기 작업을 마친 후 실행될 콜백 함수가 쌓이는 곳
  • Task Queue, Micro Queue(Promise에 then으로 붙은 애들이 쌓이는 곳)
• 이벤트 루프
  • 큐에 쌓인 콜백함수들을 꺼내서 자바스크립트 엔진에게 전달해주는 역할
  • 엔진은 해당 함수들을 전달 받은 순서대로 실행

3. 플랫폼 API

• 비동기/동기작업들의묶음
• 비동기작업실행은대부분플랫폼API를통해일어난다
• 자바스크립트는플랫폼API를사용해서비동기작업을수행􏰂위임􏰃하며작업이마쳤을때실행되는콜백함수를 대부분 해당 API 매개변수로 전달한다(비동기 API의 경우, Promise, async/await의 경우 제외)
• 작업이완료되면큐에콜백함수를등록한다(비동기API의경우)
• 브라우저의webAPI,Node.jsAPI
• 예)setTimeout,setInterval,fetch,console,fs,path

실행 환경 알기 좋은 사이트~! https://www.jsv9000.app/

자바스크립트에서 비동기 작업을 수행하는 방식

전통 : 콜백 패턴(callback pattern)

• 비동기 작업들은 retur이 아닌 별도의 결과를 반환하는 방식이 필요했고 콜백 패턴이 그 대안
• 만약 콜백 패턴이 없었다면 JS는 비동기 작업의 완료 여부를 수동으로 확인했어야 했을 것 => 이는 프로그램 측면에서 매우 낭비적인 행위
• JS는 함수를 일급 객체로 취급했기에 가능

이벤트 루프

• 큐에 쌓인 콜백함수들을 꺼내서 자바스크립트 엔진에게 전달해주는 역할
• 엔진은 해당 함수들을 전달 받은 순서대로 실행

setTimeout(()=>{
console.log("이 함수는 약 1분 후에 실행이 됩니다!");
}, 60000);
setInterval(()=>{
console.log("이 함수는 약 10초마다 실행이 됩니다!");
}, 10000);

• 콜백 패턴의 문제 : 콜백지옥

혁명 : 프로미스 패턴

• 콜백 지옥에서 벗어나기 위한 움직임
• 로직 상 순차적으로 호출되어야 하는 비동기 함수들을 쉽게 연결해주는 then
• 비동기 함수에서 에러가 발생했을 때 쉽게 에러 처리를 할 수 있도록 해주는 catch
• 비동기 함수를 일관성 있는 형식으로 관리(then, catch, finally)
• DX 향상 : 코드 가독성, chaining 기법
• 기타 비동기 함수의 기능을 추가 : Promise.all, Promise.allSettled, Promise.any, Promise.race

fetch('/data/sample.json')
  .then(response => response.json())
  .then(samples => samples.map(sample => sample.id))
  .catch(error => console.log(error.message));

• Promise의 문제점
  • 많아질수록 길어지는 then 체인
  • JS의 비동기 환경을 처음 접하는 사람들에게는 아직도 복잡한 개념

평정 : async / await

• 비동기 코드를 동기 코드와 같이 보자!
• 가독성 향상, 익숙하지 않은 사람들도 읽기 쉬움, 코드 흐름 보기 쉬움, 많은 사람들이 익숙한 문법
• 높은 호환성 : Promise로 되어있는 비동기 함수들을 async/await만 붙여서 손쉽게 코드를 치환

async function main(){
  try{
    const response = await fetch('data/sample.json');
    const samples = awairesponse.json();
    for (let i = 0;i< samples.lenth; i++){
      /*do something*/
    }
  } catch(error){
     console.lo(erorr.messeg);
   }
 }

Node.js

Node.js 역사

어플리케이션 유행

• 플랫폼에 따라서 다르다. 대표적인 플랫폼: 브라우저, 모바일 OS, 데스크탑 OS, IoT기기용 OS
• 각 플렛폼에서 허용하는 언어를 사용해서 실행가능한 어플리케이션을 개발.
• 또는 중간다리 역할을 하는 실행환경(Runtime, JRE, Node.js)을 두어서 원하는 언어로 어플리케이션을 개발.
• 어플리케이션 !== 시각적으로 보인다, 보이지 않는 어플리케이션도 많음(텍스트 형태로 볼 수는 있음)
• 우리가 배우게 될 Node.js는 보이지 않는 어플리케이션 개발을 할 때 사용함

GUI와 TUI

• GUI : 그래픽, 키보드, 마우스, 기타 IO디바이스로 OS 또는 어플리케이션을 조작할 수 있도록 해주는 인터페이스
• TUI/CLI : 오직 키보드로 명령어를 타이핑해서 OS 또는 어플리케이션을 조작할 ㅜㅅ 있도록 해주는 인터페이스
• GUI: 일반인을 위한 인터페이스.
• TUI/CLI: 소프트웨어 개발과 관련이 있는 사람들이 사용해야하는 인터페이스.
• 웹/모바일 프론트엔드는 GUI용 어플리케이션을 개발하는 것, 즉 시각적인 프로그램을 만드는 것.
• 웹 백엔드는 TUI/CLI용 어플리케이션을 개발하는 것, 즉 유저에게 보이지 않아도 되는 로직을 수행하는 프로그램을 만드는 것.
• 백엔드 개발은 CLI 환경에 익숙해야한다(하다보면 CLI가 더 좋을 때도 있다...)

Node.js 이전 자바스크립트

• 자바스크립트는 브라우저의 전유물
• 웹 페이지 작성에만 사용하는 언어
• 웹 페이지를 조금 더 꾸며주게 만들어주는 언어
• Web2.0, 자바스크립트의 중요도 상승, 여러 개의 브라우저 간의 경쟁.

Node.js 구성

V8 : 자바스크립트 엔진

• 자바스크립트를 읽고 해석하여 작업을 실행시키는 엔진
• 코드를 실행하는 것만 당담

libuv : 이벤트 루프

• C로 작성된 이벤트 루프(브라우저에 탑재된 것과는 다름)
• Node.js API 또는 C/C++ addon으로 실행된 비동기 작업이 마친 후 실행되어야 하는 콜백함수들을 각종 큐에서 정해진 순서에 맞게 꺼내와서 자바스크립트 엔진에게 전달해줌
• 싱글스레드로 장동
• Node.js를 위해 개발되었지만 현재는 다른 언어들도 사용함

Node.js API : JS/C/C++ 기반 라이브러리

• Node.js에서 제공하는 독자적인 API들
• 브라우저가 아닌 일반 OS 환경에서 실행되기 때문에 브라우저의 Web API와는 다른 라이브러리들이 포함되어 있음.
• fs, path, crypto, Stream, zlib, child_process, EventEmitter

모듈 시스템

• 각 소스 코드를 독립적인 개체로 묶어서 관리하는 방식
• 각 소스 코드간의 scope 간섭을 없애고 각자의 소스 코드가 독립적인 scope을 갖도록 해줌
• 용도, 책임, 역할 등에 따라서 코드를 분리해서 관리할 수 있음.

두가지 모듈 방식

• ECMAScript 표준 module system: 비동기(Asynchronous)
• Node.js의 CommonJS: 동기(Synchronous)

출처 : Elice Academy