한인호님 강의
자바스크립트 비동기
싱글스레드 vs 멀티스레드
싱글스레드
장점
- 경쟁상태 (race condition) x
- 멀티스레드 대비 코드 복잡도가 낮음
단점 - 여러명이 일하는 병렬처리보다는 평균적으로 성능이 떨어짐
멀티스레드
장점
- 평균적으로 싱글스레드보다 성능이 매우 좋음
단점 - 사용시 경쟁 상태를 고려해야함 (코드 복잡도가 높음)
경쟁상태에서는 lock을 걸어서 동시작업을 방지할 수 있다.
funtion hello() {
while (lock === 1) {}
lock = 1
~~
~~
~~
lock = 0
}이 코드에서 hello function을 실행하면 lock = 1이 되어 작업을 마치기 전까지 hello함수를 또 실행하면 while문에 갇혀 작업을 진행하지 않게 한다.
blocking vs non-blocking
blocking
- 하나의 작업을 마치고 다음 작업을 실행하는 순차적 실행 방식
- 작업이 길어지면 다음 작업이 지연된다.
- js에서는 동기라는 단어와 혼용한다.
non-blocking
- 하나의 작업을 실행시킨 후 그 작업이 완료되지 않아도 다음 작업을 실행하는 방식
- 작업을 실행시켜 놓기만 하는 행위
- 작업이 길어져도 다음 작업이 지연되는 문제가 없음
- 보통 결과값을 return문으로 리턴을 바로 받지 못하며 콜백 함수를 통해 받는 경우가 많음 (단, Promise의 등장으로 콜백함수가 아닌 다른 방식으로 받게 됨)
- js에서는 비동기라는 단어와 혼용한다.
자바스크립트 실행환경(runtime)
- 자바스크립트 엔진 : 자바스크립트 코드를 읽어서 해석하고 작업을 수행, 비동기/동기와는 관계 없음 ex) V8, SpiderMonkey, JavaScriptcore
- 이벤트루프 + 큐: 자바스크립트 코드가 비동기 실행될 수 있도록 도와주는 중심적인 역할
- 큐: 비동기 작업을 마친 후 실행될 콜백함수가 쌓이는 곳 ex) Task Qeueu(MacroTask Queue), MicroTask Queue
- 이벤트루프: 큐에 쌓인 콜백함수들을 꺼내서 자바스크립트 엔진에게 전달, 전달받은 순서대로 실행 ex) Node.js의 libuv
- 외부 API: 비동기/동기 작업들의 묶음, 비동기 작업 실행은 대부분 외부 API를 통해 일어난다.
자바스크립트는 외부 API를 사용해서 비동기 작업을 수행(위임)하며 작업을 마쳤을때 실행되는 콜백함수를 대부분 해당 API 매개변수로 전달한다.
ex) 브라우저의 web API, Node.js의 기본 라이브러리
ex2) setTimeout, setInterval, fetch, console, fs, path
js에서 비동기작업을 수행하는 방식
전통: 콜백패턴
- 비동기 작업들은 return이 아닌 별도의 결과를 반환하는 방식이 필요했고 콜백패턴이 그 대안
- 만약 콜백 패턴이 없었따면 js는 비동기 작업의 완료 여부를 수동으로 확인했어야 했음 -> 낭비
- js는 함수를 객체로 취급했어서 가능
콜백패턴의 문제: 콜백 지옥
- 중첩함수로 인해 가로로 길어지는 코드 -> 매우 안좋은 DX
혁명: Promise 패턴
- 로직 상 순차적으로 호출되어야 하는 비동기 함수들을 쉽게 연결해주는 then
- 비동기 함수에서 에러가 발생했을 때 쉽게 에러 처리를 할 수 있게 해주는 catch
- 비동기 함수를 일관성 있는 형식으로 관리(then, catch, finally)
- DX향상: 코드 가독성, chaining 기법
- 기타 비동기 함수의 기능을 추가: Promise.all, PRomise.allSettled, PRomise.any, Promise.race
Promise패턴의 문제
1. 호환성문제: Promise가 ECMAScript 표준이 되기 전에 만들어진 비동기 함수들
2. 아쉬운 DX: 연결되는 비동기 함수가 많아질수록 길어지는 then 체인
3. js의 비동기 환경을 처음 접하는 사람들에게 복잡한 개념
평정: async/await패턴(문법)
- 비동기 코드를 동기코드와 같이 보자
- 가독성 향상, 익숙하지 않아도 읽기 쉬움, 코드 흐름 보기 쉬움, 익숙한 문법
- 높은 호환성: Promise로 되어있는 비동기 함수들을 async/await만 붙여서 손쉽게 코드 치환
오늘날 자바스크립트는 멀티스레드 지원함(worker thread)
Node.js 입문
Node.js란?
Node.js 이전의 자바스크립트
- 자바스크립트는 브라우저의 전유물
- 웹페이지 작성에만 사용하는 언어
- 웹페이지를 더 interactive 하게 만들어주는 언어
- Web3.0, 자바스크립트의 중요도 상승, 여러개의 브라우저 간 경쟁
- 예전부터 server-side 자바스크립트와 관련된 움직임이 있었음 (Netscape LiveWire -> 망함)
V8엔진이 가져온 파급효과
- 오픈소스로 만들어진 js엔진 (chromium 프로젝트)
- V8을 이용해서 브라우저 없이 js를 실행할 수 있게 만들면 server-side 프로그램 가능
Ryan Dahl의 Node.js
- 2009년 출시
- V8, libuv, Node bindings로 이루어진 자바스크립트 runtime
- 현 시점 가장 인기있는 server-side 자바스크립트 runtime
- 여태까지의 runtime과는 다르게 비동기 실행방식(event loop와 os커널에서 지원하는 low-level IO API활용)을 기본적으로 지원하여 IO 관련 작업시 최고의 성능을 보여줌 : Web proxy 등
- Node.js의 비동기 모델은 다른 언어에도 큰 영향을 주게 됨
- 적절한 시점과 적절한 성능 그리고 npm으로 구성된 생태계로 인해 인기 얻음
Node.js 구성
자바스크립트 엔진
- 코드 실행만 함
libuv
- C로 작성된 이벤트 루프
- 비동기 작업을 마친 후 실행되는 콜백함수들을 각종 큐에서 우선순위에 맞게 꺼내와서 자바스크립트 엔진에게 전달해준다.
- 싱글스레드로 작동
- Node.js를 위해 개발되었지만 현재는 다른 언어들(Julia등)도 사용한다.
Node.js 기본 라이브러리
- 브라우저가 아닌 일반 머신 환경에서 실행되기 때문에 브라우저의 Web API와는 다른 라이브러리들이 포함되어 있음
- fs, path, crypto, Stream, zlib, child_process, EventEmitter
Node.js 기본 생태계
Node.js runtime
패키지 매니저: npm, yarn, pnpm
npm registry(public, private)
패키지매니저
- node.js 프로젝트의 의존성 관리, 테스크 작성, npm registry 배포, 프로젝트에 관련된 메타데이터 작성 등을 담당
- 3rd party library/ module을 npm registry로부터 다운받아 개발중인 프로젝트에 사용할 수 있게 해줌 <-> 업로드도 가능
- package.json이라는 프로젝트 명세 파일에 따라 기능 수행
- npm, yarn, pnpm
npm registry
- Node.js/VanillaJS로 작성한 3rd party library/module 업로드하는 공간
- Microsoft의 자회사인 Github에서 인수하여 운영중
정리
- server-side 자바스크립트의 문을 연 Node.js
- 비동기 방식
- Web API와는 다른 기본 라이브러리 제공
- Node.js는 IO 관련 작업(file, network)이 많을수록 효율이 좋고 반대로 싱글스레드 특성상 cpu를 많이 사용하는 작업(고차원 연산)이 많을수록 효율이 극단적으로 떨어진다.
공부일기