Node.js 동기/비동기, 블로킹/논블로킹, 이벤트루프

시작하기 전에 왜 프론트를 공부하다가 NodeJs를 공부하게 되었는지 설명하자면

프론트를 공부하면서 백엔드와 함께 2번정도 프로젝트를 진행했는데, 백엔드에 대해 전혀 아는게 없다보니 서비스를 기획 할 때도 이 기능 구현이 가능한지, 구현이 힘든건지 모를 때가 많았다. + 소통할 때 모르는 부분이 나오면 답답함...

그래서 백엔드를 공부하면 앞으로 프론트 개발자를 공부하고 일하는데 큰 도움이 될 것 같다는 생각이 들었다!

그리고 뭔가 프론트 쵸큼 할 줄 아니까... 백엔드도 공부하면 프로젝트를 할 기회가 더 많이 생기지 않을까? 하는 생각도 들고, 혼자서 백과 프론트를 모두 맡아서 프로젝트를 진행하는 사람들을 봤는데 멋있다고 느껴져서 이렇게 공부를 시작하게 되었다.

⭐목표⭐

가능한 목표인지 모르겠지만... 서버와 api를 다룰 줄 알면 프로젝트를 할 수 있지 않을까...

1. 혼자 프론트, 백엔드 맡아서 프로젝트 하기

2. 프로젝트에 백엔드로 참여하기

---

NodeJs는 서버 앱을 실행시키는데 가장 많이 사용된다.

서버란?

- 네트워크를 통해 클라이언트에 정보나 서비스를 제공하는 컴퓨터나 프로그램

- 웹이나 앱에서 사용자나 서비스 데이터를 저장하고 클라이언트가 요청하여 받아와야 할 곳

클라이언트란?

- 요청을 보내는 주체로 브라우저, 프로그램, 앱, 서버 등

요런 느낌

---

1. 동기/비동기

동기(Synchronous): 현재 작업의 응답과 다음 작업의 요청이 동시에 발생

비동기(Asynchronous): 동시에 발생하지 않고 종료여부와 무관하게 다음 작업 실행

=> 요청한 작업에 대한 완료 여부에 초점을 둠

2. 블로킹/논블로킹

블로킹(Blocking): 현재 작업의 응답이 오기 전까지 다른 요청을 차단

논블로킹(non-blocking): 타이머 작업 수행되더라고 메인함수를 차단하지 않고 백그라운드에서 별도 처리

=> 현재 작업의 차단/대기 유무에 초점 & Process의 실행 방식

3. Node.js === 싱글스레드

하나의 프로세스에서 하나의 스레드만 실행

왼쪽이 싱글 스레드 오른쪽이 멀티 스레드

JS 런타임

런타임: 특정 언어로 만든 프로그램들을 실행할 수 있는 환경
노드: JS 런타임
즉, node는 JS 실행기
libluv과 V8 라이브러리 사용

브라우저 엔진과 렌더링 엔진

브라우저 엔진 = 크롬
렌더링 엔진 = 블링크

브라우저 엔진은 렌더링 엔진과 유저 인터페이스 연결
렌더링 엔진은 HTML과 CSS를 파싱하여 트리를 만드는 역할

실행 컨텍스트

소스코드를 실행하는데 필요한 환경 제공
코드의 실행 결과를 실제로 관리하는 영역
코드 실행 순서는 실행 컨텍스트 스택으로 관리
콜스텍으로 관리한다는거임
JS엔진은 필요한 정보를 수집해서 실행 컨텍스트 생성 후 콜스택에 저장

콜스택이란?
코드가 실행되면서 생성되는 실행 컨텍스트를 저장하는 자료구조

JS 엔진

콜 스택: 코드 실행에 따라 호출 스택이 쌓이는 곳
메모리 힙: 메모리 할당이 일어나는 곳
위 두가지로 나누어져 있다!

JS = 싱글 스레드 언어라고 위에서도 얘기했는데, 이 의미는

스레드가 하나라는 것은 콜스택을 하나밖에 못쓴다.
한 번에 한가지 작업만 수행할 수 있어서 하나의 작업이 끝나지 않았는데, 다른 작업 요청이 콜스택에 계속해서 들어온다면 Overflow가 일어난다.
이런 문제를 해결하기 위해!

비동기 콜백함수 등장

브라우저 비동기 처리 순서

1. 실행할 함수들이 순서대로 콜스택에 쌓임(위와 동일)
2. 비동기 JS코드는 멀티스레드인 Web APIs가 실행
3. 작업이 끝난 결과를 콜백 함수 형태로 Callback Queue에 넣음
4. 콜스택이 비면 이벤트루프가 콜스택에 넣어서 실행

브라우저 비동기 처리 순서

1. 함수가 순서대로 콜스택에 저장
2. 비동기는 멀티스레드인 Web APIs가 실행
3. 결과를 콜백 함수 형태로 콜백 큐에 넣음
4. 콜스택이 비면 이벤트루프가 콜스택에 넣어서 실행

이벤트 루프란?

브라우저 동작을 제어하는 관리자

콜백 큐에 함수가 존재하는데, 콜스택이 비어있다면?

콜백큐에서 콜백함수를 콜스택으로 전송하는 역할

 

콜백 큐

1. Task Queue: setTimeout(), addEventListner();
2. Microtask Queue: Promise
3. Animation Frames: 브라우저 렌더링과 관련된 테스크를 넘겨받는 큐

우선순위

Microtask Queue > Animation Frames > Task Queue

우선순위 예시

 

 

⭐느낀점⭐

허허,, 백엔드 역시 쉽지않다.... 프론트도 물론 중요하고 어렵지만 이론적인 부분에서는 백엔드가 좀 더 어려운 것 같다.... 하지말까...
⭐과제하면서 느낀점⭐

아니다... 이론만 어려운게 아니었다... 백엔드 하지말까.... 백엔드 사람들 존경한다.