[Node.js] JavaScript가 서버에서 돌아가는 이유: Node.js

 

📌 Node.js란?

• 자바스크립트가 원래 브라우저에서만 실행이 가능했지만 동적으로 실행할 수 있는 환경을 만들어 준 것이다.
• V8 엔진은 원래 구글이 웹 브라우저인 Chrome의 성능을 높이려는 목적으로 개발
  • 코드 번역 방식을 바꿔 속도를 획기적으로 개선함, 구글이 이를 오픈소스로 공개하면서 전 세계적으로 V8 엔진을 활용해 웹을 개발할 수 있게 됨.
• 비동기식 이벤트 기반 JavaScript 런타임이다.

2008년 구글이 V8 엔진을 사용하여 크롬을 출시, V8 엔진은 엄청 빨랐고, 오픈 소스로 코드도 공개 되었다. 그 기능을 좀 더 더해서 프로젝트를 시작했고, Node.js(V8)이 등장했다.

---

Node.js를 서버로 만드는 이유?

• JavaScript가 높은 생산성과 편리함을 지녔기 때문
• 프론트엔드 주요 언어이기 때문에 백엔드까지 영역을 확장하게 되면서 풀스택 개발이 훨씬 수월해짐

 

 

Node.js의 핵심은 크게 3가지이다.

1. Non-blocking I/O (I/O 작업이 다른 작업들에게 영향을 미치지 않고 비동기적으로 처리되도록 하는 기술)
2. 코드가 매우 짧고 쉬워서 빠른 개발 가능
3. 웹서비스 제작에 적합

 

Non-blocking I/O 특징을 통해 Node.js로 구현하면, 요청이 많거나 오래 걸리는 요청이 있어도 멈추거나 요청 대기시간이 없다. (비동기식 이벤트 기반 아키텍처)

 

 

비동기식 이벤트 기반 아키텍처란?

• 프로그래밍 모델의 한 형태로, 이벤트가 발생할 때마다 콜백 함수를 실행하여 작업을 처리하는 방식
• 단일 스레드 환경에서 작동하며, 비동기식 프로그래밍을 통해 효율적인 리소스 사용과 높은 성능을 제공
• 기존의 동기식 프로그래밍 모델에서는 작업이 순차적으로 실행되어야 하며, 한 작업이 완료될 때까지 다음 작업을 실행할 수 없음 (동기식)
  • 이는 I/O 작업이나 네트워크 요청과 같은 블로킹 작업을 수행할 때 시스템 성능에 부담을 줄 수 있음
• 반면에, 비동기식 이벤트 기반 아키텍처에서는 작업이 비동기적으로 실행 (작업의 결과를 기다리지 않고 다음 작업을 실행할 수 있음)
• 이벤트가 발생하면 해당 이벤트에 대한 콜백 함수가 호출되어 처리
  • 이러한 방식으로 여러 작업을 동시에 처리할 수 있고, 블로킹 작업이 발생해도 다른 작업에 영향을 미치지 않는다.

 

Node.js는 이러한 비동기식 이벤트 기반 아키텍처를 기반으로 하고 있으며, 이를 통해 많은 동시 요청을 처리하고 높은 성능을 유지할 수 있다.

• JavaScript도 또한 기본적인 표현들로 구현하면 동기식으로 작동하게 된다. 하지만,
  • Node.js : 다양한 내장 함수가 비동기적 처리되도록 설계되어 있음
  • Java : 비동기 처리를 위해 추가적인 라이브러리나 패턴을 사용하여 직접 구성하게 되어, 코드량이 많아질 수 있음

 

---

동기식(Sychronous) VS 비동기식(Asynchronous)

 

 

동기식(Synchronous) 예시

카페에 가서 커피를 주문한다고 가정하면, 동기식으로 주문하면 주문을 한 다음에 커피가 완성될 때까지 기다려야 한다. 다른 손님이 주문한 커피가 완성되기 전에는 새로운 주문은 처리되지 않는다.

 

비동기식(Asynchronous) 예시

주문하고 나면 다른 작업을 할 수 있고, 커피가 완성되면 알림을 받아 처리할 수 있다.

 

---

동기와 비동기를 나누는 가장 큰 차이점을 어떻게 실행 순서를 가지는 지에 있다.

Syncronous 동기는 요청을 보낸 후 해당 요청의 응답을 받아야 다음 동작을 실행하는 방식을,

Asynchronous 비동기는 요청을 보낸 후 응답과 관계없이 다음 동작을 실행할 수 있는 방식을 의미한다.

 

 

 

 

 

동기식 (Synchronous)

먼저 시작된 하나의 작업이 끝날 때까지 다른 작업을 시작하지 않고 기다렸다가 다 끝나면 새로운 작업을 시작하는 방식이다. 위 그림 Synchronous와 같이 작업이 직렬로 배치되어 실행되며 작업 실행의 순서가 확실히 정해져 있는 것을 동기식 처리라 부른다.

장점 : 설계가 매우 간단하고 직관적

단점 : 결과가 주어질 때까지 아무것도 못하고 대기해야 한다. (Block 상태로 대기)

 

비동기식 (Asynchronous)

동기식 방식과는 다르게 먼저 시작된 작업의 완료 여부와는 상관없이 새로운 작업을 시작하는 방식이다. 위 그림 Asynchronous와 같이 작업이 병렬로 배치되어 실행되며 작업의 순서가 확실하지 않아 나중에 시작된 작업이 먼저 끝나는 경우도 발생한다. 이와 같은 방식을 비동기식 처리라 부른다. (그림의 시작점은 1, 2, 3, 4 순서로 동기식으로 시작하기 때문에 시작 부분은 완벽히 동일하지는 않고 순차적이긴 함)

장점 : 결과가 주어지는데 시간이 걸리더라도 그 시간 동안에 다른 작업을 할 수 있으므로 자원들을 효율적으로 사용할 수 있다.

단점 : 동기보다 복잡한 설계

 

 

Node.js는 비동기 I/O를 지원하며 Single-Thread 기반으로 동작하는 서버이기 때문에 요청을 처리하면서 다음 요청을 받을 수 있다.

 

 

병렬처리를 Thread로 처리하지 않으므로 Multi-Thread가 갖는 근원적인 문제에서 자유로운 특징이 있다.

(멀티스레드는 스레드 1개의 오류가 전체 프로세스에 영향을 주는 등)

• 요청 순서 : 코드가 실행되는 순서는 동기적으로 진행
  • 즉, 요청1, 요청2, 요청3, 요청4와 같은 순서로 코드가 작성되면, 이 요청들은 순차적으로 실행
• 비동기 처리 : 하지만 각 요청의 처리 결과는 비동기적으로 처리되기 때문에, 요청이 완료되는 순서는 요청을 보낸 순서와 다를 수 있음. 예를 들어, 요청1이 1초 후에 완료되고, 요청2가 500ms 후에 완료된다면, 요청2의 결과가 먼저 출력될 수 있다.
• 이벤트 루프 : 이벤트 루프는 비동기 작업이 완료되면 해당 작업에 등록된 콜백 함수를 호출합니다. 이때, 비동기 작업의 완료 시점에 따라 콜백의 실행 순서가 결정되므로, 요청의 결과가 도착하는 순서는 요청을 보낸 순서와 다를 수 있다.

 

결론적으로, 요청을 보내는 순서는 동기적으로 진행되지만, 결과가 도착하는 순서는 비동기적으로 처리되기 때문에 다를 수 있음,이러한 비동기 처리 방식이 Node.js의 주요 특징 중 하나이며,

이를 통해 높은 성능과 효율성을 제공

 

 

 

NVM vs NPM?

두 용어가 나타나서 혼동될 수 있지만 풀어쓰면 명확해진다.

 

nvm - Node Version Manager

• nvm은 Node.js를 설치하는 툴이라 이해하자.
• Node.js의 각 버전을 유지하면서 시스템을 구성해야 하는 경우를 위해 사용하는 경우에 많이 이용된다. 다시 말해 같은 시스템 안에서 여러 Node.js를 사용하기 위해 버전별로 Node.js 환경을 격리시키는 역할

 

 

npm - Node Package Manager

node에서 다양한 라이브러리를 다운로드하는 패키지 매니저로 보면 된다.

• 노드 패키지 매니저. 간단하게 얘기하면 npm 서비스를 통하여 Node.js로 개발된 프로그램을(npm 패키지) 편리하게 설치, 업데이트 및 삭제를 해주는 프로그램이다.
• Node.js를 설치하면 npm도 같이 설치된다.
• Java를 기준으로 생각하면 maven과 같이 다양한 패키지들을 다운로드할 수 있는 경로로도 알고 있으면 된다. Java의 MavenCentral처럼 npm에서도 다양한 라이브러리의 의존성(node진영에선 주로 모듈이라고 부르는 것 같다. ) 들을 검색하고 다운로드할 수 있다.
• 모듈과 패키지, 라이브러리 모두 결국 함수의 집합이다. 물론 정확한 개념은 차이가 있지만 메인언어의 진영마다 통상적으로 부르는 용어의 차이가 존재하는것으로 보인다. 자바진영에서는 코드상의 동작과 관련된 개념은 대부분 메서드라는 명칭을 쓰지만, JS진영에서는 대부분 함수(function)이라고 부르는 것처럼 라이브러리나, 모듈이나 결국 특별한 기능을 하는 함수의 집합이라고 보는게 편하다.

 

 

 

 

 

📌 TypeScript?

TypeScript는 타입 구문이 있는 JavaScript이다.

• TypeScript는 JavaScript 기반의 강력한 타입 프로그래밍 언어로 어떤 규모에서도 더 나은 도구를 제공한다.

 

• 정적 VS 동적 프로그래밍 언어(토글)
  • Statically typed language
    • C, C#, C+, Java 등
    • 개발자가 직접 변수에 들어갈 값의 형태에 따라 자료형을 지정해주어야 함
    • 컴파일 시 자료형에 맞지 않은 값이 들어있으면 컴파일 에러가 발생
  • Dynamically typed language
    • JavaScript, Ruby, Python 등
    • 개발자는 변수에 특별한 자료형을 지정하지 않은 상태로 실행 됨
    • 런타임 환경에서 변수에 할당되는 값을 기반으로

 

 

 

‼️Why?

• 동적으로 타입이 결정되면 개발이 편리한 것 아닌가?

 

 

• • 개발은 단순히 개발 과정의 효율만으로 결정되지 않음
  • 모든 기술 선택은 장점과 단점을 가지고 있음
  • 논리적인 기술 선택의 근거 마련과 합리적 설득의 요령 필요
    • 장점 🔼 단점 🔽
  • 규모가 커질수록 안정성, 유지보수성 등 고려해야 함

 

 

 

• TypeScript는 JavaScript의 상위 집합이다.

 

 

ES(ECMAScript)6 이후, 모던 자바스크립트라고 부름

• • TypeScript는 추가적인 구문을 JavaScript에 에디터와 긴밀히 연결되는 기능을 제공함. 에디터에서 일찍 오류를 잡을 수 있음
    • 개발자는 개발 단계에서 코드 작성 중 실시간으로 오류를 발견할 수 있음
  • TypeScript 코드는 JavaScript로 변환되며, JavaScript가 실행되는 모든 곳 (브라우저, Node.js, Deno, Bun 및 앱)에서 실행 됨
    • TypeScript는 JavaScript의 문법과 동작 방식을 완전히 이해하고 있음
    • JavaScript로 작성된 코드가 TypeScript에서도 유효하다는 것

TypeScript는 JavaScript의 유연성, 확장성을 유지하면서도 정적 타입 시스템의 이점을 제공하여, 동적+정적 타입 언어의 특성을 모두 이해하는 더 나은 개발 경험을 제공

---

코드를 통한 확인

 

JavaScript의 코드

📌심플 테스트용 프로젝트 생성

빈 프로젝트 폴더에서 아래 명령어 입력
npm init -y
이 폴더에서 JavaScript 프로젝트를 만든다는 뜻

 

 

• JavaScript에서 참조형 변수는 Object로 읽는다.
• 객체는 key, value로 이루어져 있기 때문에 ' . ' (dot 연산자) 로 호출한다.
• 변수에 할당값에 따라 타입이 동적으로 지정된다.

TypeScript 설치
npm i typescript
i = install

 

• package.json은 간단 명세
• package-lock.json은 자세한 명세
• node_modules까지 이 세개는 패키지를 관리해주는 애들

TypeScript 사용 설정
npx tsc --init

 

• TypeScript는 처음에 변수에 지정한 타입에 대하여 재선언할 때 타입이 달라지면 컴파일 전부터 오류를 알려준다. 강제하지는 않는다.

let a:number = 10;
처럼 타입을 지정해준다.

객체는
let e:(객체이름) = {name : "Tom", age : 35};

interface (객체이름) {
  name:string;
  age:number;
}
interface로 형식을 지정해줘야 한다.

 

명시적 타입 선언 VS 타입 추론

• TypeScript module은 JavaScript처럼 변수를 할당해도 타입을 추론하여 지정한다.
• Type을 우리가 직접 명시하는 것은 명시적 타입 선언이라고 한다.
• 타입 추론은 권장하는 바는 아니다. 간단한 것은 맞을 수 있지만 복잡해지면 내가 원하는 타입으로 추론이 안될 수도 있기 때문이다.
  • 매개변수(파라미터) 부분은 특별히 더 타입을 지정해주어야 한다.
• TypeScript에서 string, number, boolean 앞글자 대문자 실수를 조심해야한다.
  • 앞글자 대문자는 강제 형변환, wrapperClass할 때 사용하는 것이다.

 

마지막으로 내가 항상 헷갈리던 개념

 

📌삼항연산자

const value = Math.random() < 0.5 ? "a" : "b";
조건 ? a : b
조건에 true면 a, false면 b라는 뜻이다.

 

 

 

 

 

오늘도 풀로 집중하여 수업을 다 듣고 운동도 갔다가 블로그 작성까지 맞쳤다.

다 하고 돌아오면 상당히 피곤하지만

돌아오는 만족감 또한 만만치가 않다.

이런 느낌 때문에 다들 하드하게 사는건가 인생을...

 

 

 

근육통 때문에 더 힘든거 같지만 다같이 파이팅합시다..!

저도 끝까지 해낼게요 ㅎㅎ

 

 

 

https://github.com/thisNorm

https://www.instagram.com/this_norm/