Node.js가 생긴 이유

HTML (HyperText Markup Language)

HTML Logo

• 웹 페이지를 만들기 위한 마크업 언어.
• 브라우저에 서 보는 웹사이트의 기본 구조는 모두 HTML으로 작성되어 있음.

HTML의 주요 특징

• 마크업 언어 : 데이터를 표현하는 방식(ex, 제목, 문단, 링크 등)을 "태그(tag)"으로 정의하는 언어.
• 구조 설계 : 웹 페이지의 뼈대를 구성할 수 있음. -> 텍스트, 이미지, 표, 동영상 등 다양한 요소를 포함할 수 있음.
• 브라우저 해석 : HTML 파일은 웹 브라우저가 읽고 해석하여 시각적으로 사용자에게 보여 줄 수 있음.

---

CSS (Cascading Style Sheets)

CSS Logo

• 웹 페이지의 스타일(디자인)을 지정하는 언어.
• HTML이 콘텐츠의 구조를 담당한다면, CSS는 해당 구조에 색깔, 글꼴, 레이아웃 등을 입히는 역할을 함.

CSS의 주요 특징

• 디자인 정의 : 색상, 크기, 여백, 폰트, 위치, 애니메이션 등을 설정함.
• 선택자 기반 : 어떤 HTML 요소에 어떤 스타일을 적용할지 선택자를 통해 지정함.
• 재사용 가능 : 한 번 정의한 스타일을 여러 요소에 적용할 수 있어 효율적임.
• 분리된 설계 : HTML과 CSS를 분리하면 코드 유지 보수와 관리가 쉬어짐.

---

JavaScript (JS)

JavaScript Logo

• 웹 페이지에 동적인 기능을 추가하기 위해 사용되는 프로그래밍 언어.
• HTML과 CSS가 각각 구조와 디자인을 담당한다면, JavaScript는 웹 페이지를 다이내믹하게 바꿔줌. 즉 웹 페이지에 생명과 행동을 부여한다고 말할 수 있음.

JavaScript의 주요 특징

• 인터프리터 언어 : 코드를 한 줄씩 해석하며 실행함.
• 클라이언트 사이드 언어 : 대부분 브라우저에서 실행되며, 사용자의 컴퓨터에서 동작함.
• 동적 웹 개발 : 버튼 클릭, 마우스 움직임, 폼 입력 등 사용자와의 상호작용 구현에 적합함.
• 범용성 : Node.js와 함께 사용하면 서버 개발도 가능해짐.

JavaScript를 해석하는 방법

• HTML 파일 하단에, JavaScript code를 입력하면 웹 페이지를 다이내믹하게 바꿔줌.
• HTML 자체에는 JavaScrip 해석 기능이 없기 때문에, 웹 브라우저의 JavaScript 엔진을 이용하여 해석을 함.  

  브라우저	엔진 이름	특징
  Chrome	V8	구글에서 개발, 속도 매우 빠름
  Firefox	SpiderMonkey	모질라에서 개발, 최초의 JS 엔진
  Safari	JavaScriptCore (또는 Nitro)	애플이 개발
  Opera	V8	크로미엄 기반이라 Chrome과 동일

• 개발자들은 웹 페이지의 사용자 인터페이스를 만들기 위해 JavaScript를 사용했지만, 서버 쪽(백엔드)은 PHP, Java, Python 등 다른 언어를 사용해야 함.
• 프런트엔드와 백엔드가 다른 언어로 분리되어 개발 효율성과 유지 보수성이 떨어지게 됨.
  → "JavsScript를 서버에서도 쓸 수 있다면?"이라는 요구에 맞춰, V8을 기반으로 Node.js가 탄생함.

---

Node.js

Node.js Logo

• 브라우저 밖에서도 JavaScript를 실행할 수 있게 해주는 런타임 환경
• 원래는 웹 브라우저 안에서만 실행되던 JavaScript를 서버나 데스크톱에서도 실행할 수 있도록 만든 도구.
  → Node.js 덕분에 JavaScript를 프로그래밍 언어처럼 사용하기 시작함.

Node.js의 주요 특징

• JavScript 실행 환경 : 서버에서도 JavaScript를 사용 가능해짐.
• Non-blocking I/O : 파일, 데이터베이스, 네트워크 작업을 블로킹 없이 처리함.
• 이벤트 기반(Event-driven) : 하나의 스레드로 여러 작업을 동시에 처리 가능함.
• npm (Node Package Manager) : 수십만 개의 외부 라이브러리를 무료로 사용할 수 있는 생태계를 보유함.

Non-Blocking I/O

Blocking I/O와 Non-Blocking I/O의 시퀀스 다이어그램

• I/O : Input/Output, 즉 입출력을 의미함.
  • 입력(Input) : 사용자 요청, 파일 읽기, DB 쿼리, 네트워크 요청 등
  • 출력(Output) : 결과 응답, 파일 쓰기, 로그 기록 등
  • 이런 작업은 보통 시간이 오래 걸리는 경우가 대부분임.
• Blocking I/O
  • 요청을 처리하는 동안 프로그램이 멈춰 기다림.
  • 다음 작업으로 넘어가지 못함.
• Non-Blocking I/O
  • 요청을 보내고 기다리지 않고 다음 작업으로 넘어감.
  • 결과가 준비되면 Callback 또는 Promise를 통해 나중에 처리함.
  • 하나의 스레드로 수많은 요청을 동시에 처리할 수 있어짐.
  • 대기 시간 동안 자원을 낭비하지 않을 수 있음
  • 실시간 처리나 고성능 API 서버에 적합함.
    → Non-Blocking I/O은 효율적인 자원 사용이 가능함.

Node.js 동작 구조

1. 사용자 요청 발생
2. Node.js가 요청을 이벤트 큐에 등록
3. 시간이 오래 걸리는 작업은 백그라운드로 보내고, 다른 작업을 계속 처리함.
4. 작업이 완료되면 콜백 함수를 통해 결과를 전달
   → 이런 구조를 통해 수천 개의 요청도 하나의 스레드로 효율적으로 처리할 수 있음

---

추가 참고 자료

1. 코딩애플, (Ep.2-1) Node.js가 뭔지 알아보자 (Node.js + MongoDB로 2시간 만에 웹서버 만들기)
2. 코딩애플, (Ep.2-2) Node.js를 쓰는 이유 (웹서버 만들기)
3. maketheworldwise, Sync/Async, Blocking/Non-Blocking 무슨 차이일까?