Fundamentals/Web Architecture

프론트엔드를 위한 Node.js 이해

sod0l 2024. 10. 1. 16:51

1. Node.js란?

  • Node.js는 자바스크립트를 웹 브라우저가 아닌 컴퓨터(서버)에서도 실행할 수 있게 해주는 도구(실행환경 = 런타임)이다.
  • 원래 자바스크립트는 브라우저에서만 실행되도록 설계되었지만, Node.js는 자바스크립트의 사용 범위를 확장하여 브라우저 외부에서도 자바스크립트를 구동할 수 있게 만들어졌다.
    (웹 페이지의 버튼을 클릭하거나 이미지를 보여주는 등의 작업을 할 때만 사용되었다가 Node.js 덕분에, 브라우저가 없이도 서버라는 곳에서 자바스크립트를 사용할 수 있게 되었다.)
  • Node.js를 사용하면 서버에서 자바스크립트를 실행할 수 있어, 웹사이트의 데이터를 처리하거나 요청을 처리하는 역할을 수행하게 되는데, 특히 비동기 처리와 서버 구축에 최적화된 구조 덕분에, 많은 요청을 동시에 처리하는 데 매우 효율적이다.
  • 예시로, 만약 우리가 자바스크립트로 브라우저에서 무언가를 보여주고 있다면, Node.js는 자바스크립트로 서버에서 일어나는 일들을 처리해준다. 예를 들어, 데이터를 저장하거나, 사용자로부터 요청을 받는 작업을 할 수 있게 도와준다.
서버는 웹사이트가 실행되는 컴퓨터 혹은 시스템으로, 클라이언트(사용자)가 요청을 받아 데이터를 처리하고 응답하는 역할을 한다.

 

 

2. Node.js의 필요성

  • 리액트 기반: 리액트는 Node.js 환경을 기반으로 실행된다. 따라서 리액트를 제대로 이해하려면 Node.js에 대한 기초지식이 필요하다.
  • 확장성(백엔드와의 통신을 위해): Node.js는 자바스크립트를 이용해 백엔드 개발도 가능하게 만들어준다. 프론트엔드와 백엔드를 모두 자바스크립트로 개발할 수 있게 되므로, 같은 언어로 전체 애플리케이션을 다룰 수 있는 장점이 있다.
    예를 들어, 우리가 쇼핑몰 웹사이트를 만든다고 가정하고, 사용자가 장바구니에 물건을 넣고 결제를 할 때, 그 데이터를 서버에 보내야 한다. 이때 Node.js가 서버에서 그 데이터를 처리하고 저장할 수 있도록 도와준다.
  • 풀스택 개발: 한 가지 언어(자바스크립트)만으로 웹사이트의 모든 부분을 개발할 수 있다.

 

 

3. Node.js의 동작 원리

Node.js는 크롬의 V8 자바스크립트 엔진을 사용하여 서버 측에서 자바스크립트를 실행한다. 이 엔진은 매우 빠르고 효율적이며, Node.js의 비동기 처리 모델 덕분에 이벤트 기반의 비동기 작업을 쉽게 처리할 수 있다.

쉽게 말해, Node.js는 V8 엔진이라는걸 사용한다. 이 엔진은 자바스크립트를 빠르고 효율적으로 실행할 수 있도록 만들어준다. 또, Node.js는 비동기 처리를 아주 잘한다. 비동기 처리란, 어떤 일이 끝날 때까지 기다리지 않고 다른 일을 할 수 있도록 하는 방식이다. 마치 음식을 주문하고 그 음식을 기다리면서 다른 일을 할 수 있는 것과 같다.

 

3-1. 비동기 처리 예시

const fs = require('fs');

// 파일을 읽는 작업을 하고 있다. 하지만 파일을 읽는 동안 기다리지 않고 다른 일을 할 수 있다.
fs.readFile('file.txt', 'utf-8', (err, data) => {
  if (err) throw err;
  console.log(data);
});

 

Node.js는 비동기 I/O 모델을 사용하여, 파일을 읽거나 데이터베이스에 접근하는 동안 다른 작업도 동시에 처리할 수 있다. 즉, 파일이 다 읽히면 그제서야 결과를 보여준다. 이를 통해 서버의 성능을 극대화하고, 많은 요청을 동시에 처리할 수 있다.

 

 

4. Node.js로 간단한 서버 만들어보기

const http = require('http');

// 서버를 만든다. 사용자가 웹사이트에 접속하면, 'Hello, Node.js!'라고 응답해준다.
const server = http.createServer((req, res) => {
  res.statusCode = 200; // 성공적으로 요청을 처리했다는 뜻
  res.setHeader('Content-Type', 'text/plain'); // 텍스트 형식으로 응답해준다.
  res.end('Hello, Node.js!'); // 사용자에게 이 메시지를 보여준다.
});

// 서버를 실행해요. 이제 브라우저에서 http://localhost:3000에 접속하면 'Hello, Node.js!'라는 문구를 볼 수 있다.
server.listen(3000, () => {
  console.log('서버가 http://localhost:3000에서 실행되고 있음');
});

 

이 코드를 실행하면, 브라우저에서 `http://localhost:3000`으로 접속했을 때 "Hello, Node.js!"라는 메시지를 볼 수 있다. 아주 기본적인 서버이지만, 실제로는 이런 방식으로 우리가 필요한 데이터를 처리하고 응답할 수 있다.

 

 

5. Node.js와 프론트엔드 통합

프론트엔드와 Node.js는 서로 소통할 수 있다. 예를 들어, 프론트엔드에서 서버에 데이터를 요청하면, 서버는 그 요청을 처리한 뒤 다시 프론트엔드로 답을 보낸다. 이 과정을 간단 예시를 보자.

 

5-1. 프론트엔드에서 서버 요청하기

fetch('http://localhost:3000/data')
  .then(response => response.json()) // 서버에서 응답을 받으면 데이터를 JSON 형식으로 변환한다.
  .then(data => console.log(data)); // 받은 데이터를 콘솔에 출력한다.

 

5-2. Node.js 서버에서 응답 보내기

app.get('/data', (req, res) => {
  res.json({ message: 'Hello from Node.js' }); // 프론트엔드에 이 데이터를 보내요.
});

 

이처럼 프론트엔드와 Node.js는 서로 데이터를 주고받으며 웹 애플리케이션을 완성해 나간다.

 

 

6. 결론

  • Node.js는 아주 단순한 상호작용만 개발할 수 있었던 언어인 JavaScript를 범용적으로 사용할 수 있도록 도와주는 JavaScript의 실행환경 즉, 런타임이며 React는 이 Node.js를 기반으로 동작하는 기술이다.
  • Node.js는 자바스크립트로 서버를 만들고, 데이터를 처리할 수 있게 해주는 매우 중요한 기술이다. 프론트엔드 개발자가 이 기술을 배우면 서버와의 상호작용을 쉽게 이해할 수 있고, 풀스택 개발자로서의 성장 가능성도 열린다.
  • Node.js 덕분에 자바스크립트 하나만으로도 웹사이트의 모든 부분을 다룰 수 있게 되고 React, Vue.js 같은 프레임워크도 모두 Node.js 기반으로 동작하기 때문에, 이 기술을 이해하는 것이 중요하다.