nodejs 기초 총 정리

nodejs란 Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임이다. 런타임이라는 말은 javascript를 돌아가게 만드는 것이라는 말이다. 그러면 웹사이트에서 서버로 사용되는 건 무슨 말일까? nodejs에 대한 기초 개념을 함께 알아가보자. 이 글을 목적은 초급과 중급을 위한 글이다. 초급의 기준은 express를 들어는 봤다 정도이고, 중급의 기준은 nodejs express를 활용하여 web server를 만들 수 있는 기준이다. 고급의 기준은 프로세스와 스레드 관리는 자유롭게 할 수 있음을 의미한다. 사실 고급은 이 글을 볼 필요가 없으니 초급과 중급 기준으로 기초를 탄탄하게 만들기 위해 작성하였다.

 

지금부터 nodejs 기초에 대해 전체 정리를 해보자. 아래의 내용만 안다면, node에 대한 이해뿐만 아니라 웹 서비스에 대한 총 정리 또한 가능할 수 있도록 적어보겠다. (계속 업데이트 예정)

 

 

 

 

기본적으로 초급자의 단계에서는 express로 서버를 만드는데 많이 쓴다. 기초개념을 공부할 시간이 없고 지금 빠르게 웹사이트를 만들고 싶다면 아래의 링크를 참고하자.

 

---

Backend 백엔드에서의 Nodejs

express를 활용한 웹 서버에 관한 부분이다. npm을 활용한 프로젝트가 아닌 nodejs 자체의 서버를 이해하려면, 아래의 nodejs 설명 부분을 참고하자.

 

express 기초

> [제작중] 처음 웹서버를 만드는 사람을 위한 nodejs express 기초 개념 

 

[Nodejs/express] 핵심 기초 정리

> express와 MySQL연결, express 파일 구조 설명, mybatis 연결,  nodemon, cors, 아키텍처를 포함한 광범위한 범위를 다룬다. 위의 내용만 익혀도 기초는 넘기기 가능하다.

 

[Nodejs] 따라하면 연결되는 몽고 DB와 express

> mongoose를 활용한 MongoDB와 express 연결하기

 

[nodejs] dotenv로 중요키 분리하기

> 보안키 숨기는 방법으로 dotenv를 활용하기

 

캐시와 세션을 활용한 로그인 기초

> [제작 중] 처음 로그인을 구현하는 초급자를 위한 기초 개념

 

passport를 활용한 로그인

> [제작 중] 라이브러리를 활용한 로그인

 

[nodejs/expess] backend에 session 붙여 login 하기

> 로그인 실습 위주의 개념이다.

 

JWT를 활용한 로그인

> [제작 중] JWT를 사용한 nodejs 로그인

 

JWT를 활용한 로그인 확인

> [제작 중] JWT를 활용한 로그인 유저 미들웨어 만들기

 

[React/Nodejs] 카카오 로그인 연결하기

> 카카오 로그인 연결하기

 

[Nodejs] AWS EC2 배포 ALL-IN-ONE

> nodejs 웹서버 배포

 

MERN Stack으로 가장 빠르고 쉽게 Web 만들기

> Mongo DB, Express, React, Nodejs를 활용한 Web 사이트 만들기

 

---

Frontend 프런트엔드에서의 Nodejs

사실 React와 Nextjs도 Nodejs 위에서 실행된다. 그렇다면, 우리는 Frontend를 사용만 할 줄 알면 될까? 아니다. Frontend의 핵심은 화면 렌더라고 할 수 있다. 아래의 링크를 참조하자.

 

CSR 기초 정리

> [제작 중] client side render 기초

 

SSR 기초 정리

> [제작중] server side render 기초

 

SSG 기초 정리

> [제작중] static side generation 기초

 

BFF 기초정리

> [제작중] Backend for Frontend

 

MSA 기초정리

> [제작중] MSA(Micro Service Architecture) 

 

React 기초 정리

> [공식문서 변형] 코드를 치면서  React에서 다루는 핵심 콘셉트를 이해하고 구현하는 방법을 알아보자.

 

[react] 상태관리 기초 - 효율적으로 데이터 저장하고 수정하기

> 데이터 관리리를 위해 어떤 라이브러리를 사용할 것인가(redux, recoil, context API 등)

 

[React] React Router 페이지 이동

> react router 최신 버전 사용방법

 

[React] react router 페이지 이동 세부 정리

> history는 5버전에 사용됐던 것으로 우리는 v6에 맞게 navigate와 location을 활용한 페이지 이동방법

 

react router 페이지 상단으로 올리기

> 마우스 클릭 시 페이지 상단으로 스크롤 올리기

 

[React] 클래스 필드(class field)

> [제작중] 대세인 함수형 컴포넌트가 아닌 class에 대한 개념

 

[React] CSS 배경화면 가운데 글 넣기

> 배경화면 가운데 글 넣기

 

[Web/React] - [youtube api] 유튜브 데이터 가져오기

> 유튜브 데이터 가져오는 방법

 

[react] 데이터 받아와서 보여주기

> react에서 데이터를 API로 가져오는 방법

 

[react] 실무 개발 환경/배포 환경 설정(. env)

> 배포 / 개발 / 테스트 환경을 분리하여 개발하기

 

[React Web] AWS EC2 배포 ALL-IN-ONE

> react 배포하기

 

[react web] mocking 모킹 방법 (msw로 데이터 가져오기)

> 가상의 데이터를 활용하는 방법

 

[react] 아키텍처 기초 정리

> 데이터 가져오는 부분을 service 폴더로 분리하기(폴더 구조화/추상화)

 

[react] CRUD 기초 총 정리

> [제작중] CRUD란 끝이 없는 고민인것 같습니다. 더 좋은 방법이 있다면 남겨주세요~

 

[React] Array method인 map() 사용 잘하기

> react에서 Map 사용하기.

 

CORS에 대한 고찰

> cors에 대한 기초 해결책

 

react 헷갈리는 코드 정리

> [제작 중] 코드를 치면서 자주 확인하는 부분에 대한 정리

 

[Nextjs] 프로젝트 일단 만들면서 시작하기

> nextjs 프로젝트 생성해보기

 

[Nextjs] 데이터 가져오기 기초(SSR, SSG, CSR)

> 렌더 방식에 따라 데이터를 가져오는 방법을 SSR, SSG, CSR로 구현하기

 

Nextjs pages/api

> [제작 중] serverless 기초

 

Nextjs 파일구조

> [제작 중] nextjs에 포함된 react와의 역할 분리

 

Redux-saga

> [제작 중] 상태관리의 기본 redux를 활용한 saga

 

react-query / SWR

> [제작 중] 상태관리 관점의 fetch 라이브러리

 

[React] Webpack-웹팩 기초 정리

> [제작 중] 웹을 구상하는 모듈을 조합해서 하나로 만들어 주는 webpack에 대한 기초

 

ESlint

> [제작 중]

 

---

nodejs

nodejs란 무엇일까? 오해할만한 개념부터 잡고 가겠다. 우리는 보통 nodejs를 웹 서버라고 이해하기도 한다. 하지만, nodejs는 웹 서버를 만들 수 있는 기능을 제공할 뿐이지, 웹 서버가 아니다. 공식문서에 들어가 보면, Node.js는 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임이라는 설명이 있다. 쉽게 말하면, nodejs가 있어야. js 파일을 실행할 수 있다는 말이다.

 

여기서 주의해야 할 점은 html의 javascript와 nodejs가 실행하는 javascript가 다르다는 것을 인지해야 한다. nodejs 이전의 javascript는 .js 파일을 단독으로 실행하지 못했고, 웹의 브라우저에서만 javascript를 실행할 수 있었다. 그러나 nodejs라는 javascript 실행기의 등장으로, 현재 우리가 VScode에서 npm run start / node index.js 와 같은 방식으로 javascript 파일을 실행할 수 있게 된것이다. 정리하면, nodejs이전에는 html에서 브라우저가 javascript를 읽은 것이고, nodejs 이후에는 nodejs 파일명.js 로 javscript도 실행 할 수 있는 방법이 생긴 것이다. 이러한 변화로 인해 javascript를 활용한 웹 서버를 만들 수 있게 되었다.

 

nodejs 특징

 공식문서에서는 아래와 같이 nodejs를 소개한다.

 

 

As an asynchronous event-driven JavaScript runtime, Node.js is designed to build scalable network applications.

 

특징1. 비동기 이벤트 기반의 javascript 실행기 ( asynchronous event-driven FavaScript runtime )

비동기 이벤트 기반이란, 수행할 동작을 메모리에 미리 등록해 두고 이벤트가 발생할 시 지정된 작업을 수행하는 것을 말한다. 이때 이벤트란 특정 행위라고 할 수 있다. API 요청이나 타이머, 버튼 클릭과 같이 nodejs에 입력을 주는 것을 의미한다. 

 

nodejs의 모든 API는 비동기로 non-blocking이라고 할 수 있다. 쉽게 말하면 nodejs에서의 API 요청 시 반환되는 데이터를 기다리지 않고 다음 API 작업을 한다. nodejs는 내부적으로 이전에 보낸 API에 대한 응답을 받는다고 할 수 있다. 아래의 코드만으로 우리는 웹 서버를 만드는 것이 가능하다.

 

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

 

기본적으로 모든 연결(localhost:3000 API 요청)은 동시에 처리된다. 연결 시  콜백 함수가 실행되고, 연결이 없을 때는 노드는 sleep(절전모드)한다.

 

 

특징 2. 빠르다( very fast )

당연한 이야기지만, nodejs는 Google Chrome's V8 JavaScript Engine으로 만들어졌기 때문에 매우 빠르다. ( 물론 다른 빠른 라이브러리와 프레임워크들이 생겨나고 있기 때문에 상대적으로 빠른 것이지 매우 빠르진 않다. )

 

특징 3. 높은 확장성을 가진, 단일 스레드( Single Threaded but Highly Scalable )

nodejs는 http 라이브러리는 제공하기 때문에, 아파치와 같은 별로 소프트웨어가 없어도 웹 서버를 작동시키는 것이 가능하다. 따라서 기존의 웹 서버의 통제 없이 자유롭게 핸들링이 가능하기 때문에 높은 확장성을 가진다고 할 수 있다.

 

nodejs는 단일 스레드를 사용하기 때문에, 기존의 다른 서버보다 더 많은 수의 요청을 처리할 수 있다. 이게 무슨 말일까? 하나만 사용하는데, 더 많이 처리한다는 게 말이 안 되는 것 같다. 이 개념을 이해하려면, 우선 스레드와 프로세스의 차이부터 이해를 해야 한다. 프로세스는 운영체제가 할당하는 작업이고, 스레드는 프로세스 내에서 실행되는 작업단위이다. nodejs가 실행되면, 프로세스가 하나 실행된다. 그리고 프로세스 내부의 스레드가 작업을 하는 것이다. 사실 프로세스 안에는 여러 개의 스레드가 있지만, 우리가 핸들링할 수 있는 스레드는 하나이기 때문에 nodejs를 단일 스레드라 한다. 그렇다면 왜 단일 스레드가 더 많이 처리할까? 사실은 nodejs의 컨셉은 멀티스레드는 구현하기 너무 어렵지만, 효율적으로 쉽고 빠르게 구현하기 위함에 있다. nodejs는 모든 처리를 순차적으로 처리하는 단일 스레드가 아니다. 단일 스레드이지만, 백그라운드 영역에서 동시처리를 진행하기 때문에 일반적인 단일 스레드와 멀티 스레드의 장점을 다 가지고 온 것이라 볼 수 있다.

( 관련 내용을 추가로 다룰 예정)

 

특징 4. No Buffering

데이터를 보낼 때, 한 번에 보내는 방식과 데이터를 쪼개서 여러 번 보내는 방식이 있다. 버퍼 방식은 파일을 한 번에 보내는 방식을 의미한다. nodejs는 데이터를 한번에 보내는 게 아니라 덩어리로 나눠서 보낸다. 이는 우리가 파일 다운로드하는 방식과 비슷하다고 생각하면 된다. 추가로 관련 내용은 다룰 예정이니 이 정도만 이해하고 넘어가거나 구글링을 하자.

( 관련 내용을 추가로 다룰 예정)

 

 

Nodejs 심화 이해하기

express를 활용하는 부분은 윗부분의 백엔드에서의 Nodejs 부분을 참고하자.

 

[nodejs] require 과 import

> [제작 중]

 

[nodejs] 순환참조

> [제작 중]

 

[nodejs] process 고찰

> [제작 중]

 

[nodejs] window와 global

> [제작 중]

 

[nodejs] 암호화

> [제작 중]

 

[nodejs] dotenv와 process.env

> [제작 중]

 

[nodejs] path

> [제작 중]

 

[nodejs] querystring과 searchParams

> [제작 중]

[nodejs] child_process

> [제작 중]

 

[nodejs] 파일 핸들링 fs

> [제작 중]

 

[nodejs] http 모듈을 활용한 웹서버 1. 서버만들기

> [제작 중] 

 

[nodejs] http 모듈을 활용한 웹서버 2. 클라이언트에서 요청하기

> [제작 중]

 

[nodejs] http 모듈을 활용한 웹서버 3. 쿠키와 세션

> [제작 중]

 

[nodejs] http 모듈을 활용한 웹서버 4. redis

> [제작 중]

 

[nodejs] http 모듈을 활용한 웹서버 5. https 적용하기

> [제작 중]

 

[nodejs] http 모듈을 활용한 웹서버 6. http2 모듈 사용해보기

> [제작 중]

 

[nodejs] http 모듈을 활용한 웹서버 7. http3 모듈 사용해보기

> [제작 중]

 

[nodejs] 블로킹/논블로킹 동기/비동기

> [제작 중]

 

[nodejs] buffer와 stream

> [제작 중]

 

[nodejs] 프로세스와 스레드

> [제작 중]

 

[nodejs] cluster

> [제작 중]

 

[nodejs] npm init

> [제작 중] 여기까지 하면, 이제 express로 넘어가면 된다.

 

 

 

 

javascript 복습하기

아래의 개념은 기본적인 javascript에 관련한 키워드이다. 모르는 내용이 있으면 공부해보자. 추후 정리 예정.

var/let/const
템플릿 문자열
객체리터럴
화살표함수
this
구조분해 할당
프로미스
async/await

호출스택/이벤트루트 **

 

 

 

 

잘못된 내용이나 추가가 필요한 부분이 있다면 알려주시면 수정하겠습니다. 감사합니다.