Node.js

공부의 기록·2022년 1월 18일
0

Node.JS

목록 보기
1/32
post-thumbnail

Introduce

본 문서는 2022년 1월 18일 에 작성되었습니다.

작성 당시에는 해당 시리즈는 npm 이라는 이름이었습니다.
하지만, 여러 가지 이유로 기본기가 부족하다고 생각이 되어서 Node + Npm 시리즈로 바꾸게 되었습니다.

또한, 본 문서에서는 Node.js 에 대해서 알아보고자 합니다.

What is Node.JS

Node.JS 란 무엇일까요?
공식 사이트에서는 다음과 같이 설명하고 있습니다.

Node.js 는 Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임입니다.

Structure in Node.JS

Node.JS 는 2개의 라이브러리를 사용하고 있습니다.

  1. V8
  2. libuv

Node as Runtime

Runtime 으로서의 Node.JS 는 다음의 특징을 가지고 있습니다.

  1. 이벤트 기반
  2. 논 블로킹 I/O
  3. 싱글 스레드

✅ 이벤트 기반

이벤트 기반이란 무엇일까요?

이벤트가 발생할 때, 미리 지정해둔 작업을 수행하는 방식을 의미한다.

이해를 돕기 위하여 아래의 코드를 봐주세요.
btn 을 클릭하는 이벤트가 발생하면 "hello" 를 출력하는 코드입니다.

const btn=document.querySelector("button");
btn.addEventListener("click", ()=>{
  console.log("hello");
});

이러한 이벤트 기반 시스템에서는 이벤트 루프 라는 로직이 존재합니다.

  • 이벤트 루프
    이벤트 발생 시 호출할 콜백 함수들을 관리하고 호출된 콜백 함수의 실행 순서를 결정하는 역할을 담당합니다. 노드가 종료될 때까지 이벤트 처리를 위한 작업을 반복하므로 루프라고 부릅니다.
  1. 호출 스택 // 함수가 실제로 실행되는 것
  2. 백그라운드 // setInterval 등으로 호출된 함수가 대기하는 곳
  3. 테스크 큐 // 함수들이 실행을 기다리며 서있는 곳

이러한 이벤트 루프는
호출 스택이 비어있을 때 테스크 큐에 있는 함수를 호출 스택으로 가져옵니다.
따라서 호출 스택에 함수가 많으면 setInterval 등이 부정확 할 수 있습니다.

✅ 논 블로킹 I/O

일반적으로 작업에는 두 가지가 존재합니다.

  1. 논 블로킹 방식 // 동시에 실행될 수 있는 작업.
  2. 블로킹 방식 // 동시에 실행될 수 없는 작업.

Node 는 기본적으로 논 블로킹 방식 으로 구현됩니다.

function process() {
  // 오래 걸리는 작업
  console.log("작업 끝");
}

console.log("시작"); // 1번
process(); // 3번
console.log("다음 작업"); // 2번

그러나 어떠한 경우 블로킹 방식 으로 구현하려면 다음과 같이 처리합니다.

function process() {
  // 오래 걸리는 작업
  console.log("작업 끝");
}

console.log("시작"); // 1번
setTimeout(process, 0); // 2번
console.log("다음 작업"); // 3번

✅ 싱글 스레드

Node 시스템은 스레드를 여러 개 가지고 있지만,
실질적으로 개발자가 사용할 수 있는 것은 싱글 스레드입니다.

하지만 Node 12 버전 이후에는 다음과 같은 경우에는 멀티 스레드가 구동됩니다.

  1. Thread Pool
  2. Worker Thread (130p)

하지만,
멀티 스레드 프로그래밍은 너무 어렵고
따라서 멀티 프로세싱을 제안하는 것 같습니다.

Node as Server

Node 는 서버로 동작할 수 있으며, 다음과 같은 장점, 단점이 존재합니다.

🧡 서버 내장

Node 는 기본적으로 서버를 내장하고 있습니다.
따라서 별도의 웹 서버를 설치해야 할 이유가 없습니다.
노드 외의 서버를 개발 하다보면 Apache, Nginx, IIS 등의 웹 서버를 설치 해야 합니다.
또한 Tomcat 같은 WAS(웹 애플리케이션 서버) 를 추가로 설치해야 하기도 합니다.

🧡 높은 생산성

Node 는 웹 서비스 개발에 있어서 높은 생산성을 가지고 있습니다.

🧡 JSON 과의 호환성

Node 는 I/O 에 특화되어 있기 때문에,
실시간 채팅 애플리케이션, 주식 차트, JSON 데이터를 제공하는 API 서버에 유리합니다.

❌ 어중간한 성능

Go 와 같은 비동기적 강점을 가진 언어 및 로드 밸런싱에 특화된 웹 서버에 비해서 속도가 느립니다.

❌ 서버 다운 위험성

Node 는 기본적으로 싱글 스레드로 돌아갑니다.
따라서 에러가 발생하면 서버가 다운될 위험성이 큽니다.

Installation

Node 14, npm 6 을 사용하고 있습니다.
설치 과정은 구글링으로 해결하였습니다.

Modern Javascript

ES2015+

  • const, let
  • 백틱( ` )
  • 화살표 함수( ()=>{} )
  • 구조분해 할당
  • 프로토타입 클래스
  • 프로미스

ES2017 +

  • async await

Frontend JavaScript

  • AJAX
  • FormData
  • encodeURIComponent, decodeURIComponent
  • 데이터 속성과 dataset

🧡 ES2015, ES2017

자세한 내용은 JavaScript 시리즈 을 참고해주세요

🧡 AJAX

AJAX, Asynchronouse Javascript And XML

일반적으로 웹 서비스 비동기 처리에 대한 개념입니다.
이 개념이 나왔을 당시에는 XML 을 많이 썼으나, 최근에는 JSON 을 많이 쓰고 있습니다.

이러한 AJAX 기술은 새로 고침 없이 새로운 데이터를 불러오는 것 등을 가능하게 만들어줍니다.

이러한 라이브러리 Axios 를 이용한 코드를 통해서 AJAX 를 구현하는 두 가지 방법을 적어 보겠습니다.

// Promise 방식
function getData() {
  axios.get("http://어떠한 API 호출주소")
    .then(result=>{
      console.log(reuslt);
      console.log(result.data);
    })
    .catch(error=>{
      console.log(error);
    };
}

// Async, Await 방식
function async getData() {
  try {
    const result=axios.get("http://어떠한 API 호출주소");
    
    console.log(result);
    console.log(result.data);
  } catch(error) {
    console.log(error);
  }
}

🧡 FromData

const formData=new FormData();

/* formData 내장 함수들
 1. append("키", "값")
 2. has("키")
 3. get("키")
 4. getAll("키")
 5. set("키","값")
 6. delete("키")
*/

💚 encodeURIComponent, decodeURIComponent

const encodedText=encodeURIComponent("한글"); // 암호화된 글자(%43%BD%13 등)
const decodedText=decodeURIComponent(encodedText); // 한글

💚 dataset

비민감성 정보 중의 일부를 HTML Tag 에 저장합니다.
이 Tag 는 프론트 앤드의 Client 에게 보여지지 않고 데이터 형태로 저장됩니다.
이 정보는 Javascript 혹은 개발자 도구에서 쉽게 접근할 수 있습니다.

따라서 민감성 정보(개인정보 등)은 저장해서는 안됩니다.

<li data-id="1" data-user-job="none">Unchaptered</li>

Just Do Node!

위에 대부분은 프로젝트를 진행하고 수업을 들으며 경험하거나 알고 있었던 부분입니다.
간단하게 정리하면서 생각을 정리해보는 시간을 가져서 좋았습니다.

이제 실제로 Node 를 이용해서 코드를 실행해보고자 합니다.

❌ REPT

REPT 를 이용해서 개발자 도구의 console 창 처럼 Javascript 를 실행시킬 수 있습니다.

$ node
> const text="hello, my name is unchaptered"
undefined
> console.logo(text);
hello, my name is unchaptered
undefined
>

⭕ *.JS

따로 Javascript 파일을 만들어서 이를 실행할 수도 있습니다.

// hellooo.js
function sayHello() {
  console.log("hello");
}
sayHello();
$ node hellooo
hello

🧡 Module.JS

Javascript 는 스크립트 언어로써,
Chrome 60 을 제외하고는 브라우저 상에서 import, export 를 지원하지 않습니다.
그러나 Node 를 사용하면 이러한 Javascript 코드들을 모듈 로써 사용할 수 있습니다.

초기에는 다음과 같은 코드의 형태를 가지고 있었습니다.

// 출력하는 부분
const 변수명1=내용;
const 변수명2=내용;
module.exports = { 변수명1, 변수명2 };

혹은

exports.변수명1=내용;
exports.변수명2=내용;

// 받아들이는 부분
const { 변수명1, 변수명2 }=required("./파일명");
// 출력하는 부분
export const 변수명1=내용;
export const 변수명2=내용;

// 받아들이는 부분
import { 변수명1, 변수명2 } from "./파일명";

❓ Node 내장 객체 및 키워드

이미 사요앟고 있는데, 이 부분을 더 자세하게 사용할 이유가 있는 지는 아직 모르겠습니다.
따라서, 각 부분에 대한 자세한 설명은 Dev 모듈 중 Node.js 내장 모듈 을 참고해주세요.

  1. Global 객체
    Node 에는 windows 와 같은 전역 내장 객체가 존재합니다.
    주의 할 점은, Node 를 사용하면 windows 나 document 를 사용할 수 없다는 점입니다.

  2. console 객체
    Node 에도 console 객체가 있으나,
    이는 windows 가 아닌 global 객체에 존재합니다.

  3. __fildename, __dirname 키워드

  4. process 객체는 노드와 관련된 키워드들을 가지고 있는데,
    process.cwd() 및 process.env 를 사용합니다.
    cwd() 는 현재 프로세스 실행 위치를 의미하며,
    env 는 환경변수 파일로 노드 및 서버 구동에 관련된 파일 정보를 의미합니다.

👀 Node 내장 모듈

사실 실제로 사용할 일이 있는지, 잘 모르겠습니다.
하지만, 역시나 포함하고 있는 개념이기에 정리하기만 하고 넘어가기로 하였습니다.
각 모듈에 대한 자세한 설명은 Dev 모듈 중 Node.js 내장 모듈 을 참고해주세요.
1. os 모듈 (113p)
2. path 모듈 (115p)
3. url 모듈 (119p)
4. queryString 모듈 (123p)
5. crypto 모듈 (124p)
6. util 모듈 (129p)
7. worker_threads 모듈 (130p)
8. child_process 모듈 (135p)
9. fs 모듈 (138p)
8. Buffer, Stream (145p)

profile
공부의 기록
2022년 12월 9일 부터 노션 페이지에서 작성을 이어가고 있습니다.
다음 포스트

Node.js 내장객체

0개의 댓글