Day 12 - Express.js vs http 모듈, Express 5.0, JSON vs XML

이유승·2024년 11월 14일
타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 5기
0

데브코스 웹 풀스택 개발 5기

목록 보기
12/36

* 프로그래머스, 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 5기 강의 수강 내용을 정리하는 포스팅.

* 원활한 내용 이해를 위해 수업에서 제시된 자료 이외에, 개인적으로 조사한 자료 등을 덧붙이고 있음.

1. Express.js

  • Node.js 환경에서 서버 애플리케이션을 구축할 수 있도록 돕는 백엔드 웹 프레임워크.

  • HTTP 요청 및 응답을 쉽게 관리하며, 웹 애플리케이션 및 API 서버를 빠르게 개발할 수 있는 도구.

http vs Express.js

  • Node.js에는 http 모듈이 기본적으로 내장되어있다. http 모듈을 사용하는 것에 비해서, Express.js를 사용했을 때의 이점은 무엇인가?



코드의 간결성

  • 기본 http 모듈을 이용하여 요청/응답을 처리하려면 상대적으로 많은 코드가 필요하지만, Express.js는 이 과정을 단순화하였다.
const http = require('http');

const server = http.createServer((req, res) => {
  if (req.method === 'GET' && req.url === '/') {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hello World!');
  }
});

server.listen(3000, () => {
  console.log('Server is running on port 3000');
});
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});
  • 동일한 기능을 수행하지만, 작성하는 코드가 훨씬 짧고 간결하다.



라우팅 관리의 용이성

  • http 모듈을 사용할 경우 URL과 HTTP 메서드에 따라 조건문을 이용해 라우팅을 구현해야한다. Express.js는 app.get(), app.post()와 같은 메서드를 통해 라우팅을 간결하게 정의할 수 있다.
const server = http.createServer((req, res) => {
  const url = req.url;
  const method = req.method;

  if (url === '/users' && method === 'GET') {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('User List');
  } else if (url === '/users' && method === 'POST') {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Create User');
  } else if (url.startsWith('/users/') && method === 'PUT') {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Update User');
  } else if (url.startsWith('/users/') && method === 'DELETE') {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Delete User');
  } else {
    res.writeHead(404, { 'Content-Type': 'text/plain' });
    res.end('Not Found');
  }
});
	app.get('/users', (req, res) => { res.send('User List'); });
	app.post('/users', (req, res) => { res.send('Create User'); });
	app.put('/users/:id', (req, res) => { res.send('Update User'); });
	app.delete('/users/:id', (req, res) => { res.send('Delete User'); });



미들웨어 지원

  • http 모듈에는 기본적인 미들웨어 기능이 없어, 모든 처리를 수동으로 작성해야 한다. Express.js는 미들웨어 시스템을 통해 요청과 응답의 흐름 중간에 필요한 기능을 추가할 수 있다.

  • 가령 로깅 미들웨어를 구현한다고 하면..

const server = http.createServer((req, res) => {
  // Middleware-like logging
  console.log('Request URL:', req.url);

  if (req.method === 'GET' && req.url === '/') {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hello World!');
  } else {
    res.writeHead(404, { 'Content-Type': 'text/plain' });
    res.end('Not Found');
  }
});
app.use((req, res, next) => {
  console.log('Request URL:', req.originalUrl);
  next();
});



에러 및 예외 처리

  • http 모듈을 사용할 경우 에러 처리를 직접 관리해야 하지만, Express.js는 기본적으로 에러 핸들링을 위한 구조를 제공한다.
const server = http.createServer((req, res) => {
  try {
    if (req.method === 'GET' && req.url === '/') {
      throw new Error('Simulated error');
    } else {
      res.writeHead(404, { 'Content-Type': 'text/plain' });
      res.end('Not Found');
    }
  } catch (error) {
    console.error(error.stack);
    res.writeHead(500, { 'Content-Type': 'text/plain' });
    res.end('Something broke!');
  }
});
app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send('Something broke!');
});



이외에도..

  • 템플릿 엔진을 통한 동적 HTML 생성, 상태 코드, JSON 응답 작성 등의 작업을 미리 제공된 메소드를 통해 처리할 수 있다는 이점이 존재한다.

  • 간편한 사용성과 확장성, 호환성과 유연성, 거대한 커뮤니티와 생태계 등의 이유로 인해 Node.js 기반의 백엔드에는 거의 대부분 Express.js를 사용한다.

  • Node.js 기반 백엔드 개발의 기본 선택지는 Express.js가 되는 경우가 많지만, Fastify, Koa 등의 다른 프레임워크도 사용되긴 한다.



Express.js 5.0

참고 기사 출처

  • Express.js는 웹 개발에서 보편적으로 사용되는 프레임워크 치고는 무려 10여년 간 업데이트가 중단되어 있었다.

  • 이미 충분히 안정적이고 성숙한 상태로 완성되었다는 이유도 있었지만, Express.js 프로젝트가 Node.js 재단이 관리하는 오픈JS 재단에 편입된 이후 유지보수 인력의 부족으로 적극적인 개발이 이루어지지 않은 탓이다.

  • 더구나 안정성과 간결성을 원하는 백엔드 개발이라면 그냥 Express.js를 사용하고, 혁신적인 무언가를 찾는다면 Koa, Fastify와 같은 다른 프레임워크를 선택하는 경향이 형성되고 말았다. Express.js는 기존 기능을 유지하는 데 집중하고, 뭔가 새로운게 필요하다면 비공식 포크를 통해 개별적으로 기능이 추가되면서 공식적인 업데이트의 필요성이 상대적으로 낮아지기에 이르렀다.

  • 그런데 2024년 10월. 10년의 침묵이 깨지고 느닷없이 Express.js 5.0이 발표되었다.



2. JSON

JavaScript Object Notation

  • 데이터를 저장하고 전송하기 위해 사용되는 경량의 데이터 형식.

  • JavaScript 객체 표기법을 기반으로 하여 텍스트 형태로 구조화된 데이터를 표현한다.

객체?

{
  "name": "John Doe",
  "age": 30,
  "isStudent": false,
  "courses": ["Math", "Science", "History"],
  "address": {
    "street": "123 Main St",
    "city": "Anytown",
    "postalCode": "12345"
  }
}

웹 애플리케이션에서 데이터를 어떻게 교환해야할까?

  • 초기 웹 환경에서 서버와 클라이언트 간 데이터 교환은 주로 XML(Extensible Markup Language) 포맷을 사용했다.
<?xml version="1.0" encoding="UTF-8"?>
<users>
    <user>
        <id>1</id>
        <name>John Doe</name>
        <email>john.doe@example.com</email>
        <age>30</age>
    </user>
    <user>
        <id>2</id>
        <name>Jane Smith</name>
        <email>jane.smith@example.com</email>
        <age>25</age>
    </user>
</users>

  • XML은 아직까지도 사용은 하고 있지만, 구조화된 데이터를 표현하는데 장점이 있으되.. 구문이 복잡하고 장황하고 / 파싱이 느리고 무거웠다는 면이 단점으로 부각되었다.

  • XML을 더 효율적으로 사용하기 위한 Ajax(Asynchronous JavaScript and XML) 기술이 개발되어 널리 사용되기도 했지만, XML 자체의 문제점을 해결할 수는 없었다.

  • 2001년, JavaScript의 선구자인 Douglas Crockford가 JSON(JavaScript Object Notation)를 개발하였다.

  • JavaScript 엔진이 이미 지원하고 있던, 객체 표기법을 기반으로 하는 데이터 포맷.

  • 간결하고 사람이 읽기도 쉬웠으며 / JavaScript 객체 형태를 그대로 사용하고 있어 웹에서 사용하는것도 편리하였다. 포맷 문제가 있어도 기본 내장된 JSON.parse와 같은 기본 파싱 기능만 가지고도 사용이 가능했다.

  • 이후 2010년대에 RESTful API가 데이터 전송 표준으로 자리잡은 뒤에도, 경량화된 데이터 포맷이라는 JSON 특징 덕분에 더욱 더 널리 사용되면서 웹 데이터 교환의 표준 포맷으로 위상을 공고히 하게 되었다.

JSON이 더 좋다!

<?xml version="1.0" encoding="UTF-8"?>
<users>
    <user>
        <id>1</id>
        <name>John Doe</name>
        <email>john.doe@example.com</email>
    </user>
    <user>
        <id>2</id>
        <name>Jane Smith</name>
        <email>jane.smith@example.com</email>
    </user>
</users>
{
    "users": [
        {
            "id": 1,
            "name": "John Doe",
            "email": "john.doe@example.com"
        },
        {
            "id": 2,
            "name": "Jane Smith",
            "email": "jane.smith@example.com"
        }
    ]
}

  • 간단한 예시로는 잘 와닿지 않지만..

  • 데이터가 복잡해질 수록, 태그를 사용하는 XML쪽의 가독성이 떨어지고 / 데이터 크기가 더욱 커진다는 단점이 부각되기 시작한다.

  • 다만 XML이 완전히 JSON에 대체된 것은 아니다. 당연하지만 레거시 시스템에서는 XML을 사용하기도 하고, 문서 기반 시스템에서는 데이터 구조화 측면에서 XML을 채택한 경우도 있기 때문.



JSON의 주요 특징

텍스트 기반 형식

사람이 읽고 쓸 수 있으며, 다양한 언어에서 쉽게 파싱하고 생성할 수 있다.

키-값 쌍

데이터를 키: 값 형태로 나타내며, 중첩 구조를 통해 복잡한 데이터도 표현 가능하다.

언어 독립성

JSON은 JavaScript 표기법을 사용, 대부분의 프로그래밍 언어에서 JSON을 쉽게 다룰 수 있는 라이브러리를 제공.

JSON의 장점

가볍고 효율적

XML과 같은 다른 데이터 포맷에 비해 간결하고 효율적.

웹 친화적

많은 웹 API와 애플리케이션이 JSON 포맷으로 데이터를 전송.

호환성

다양한 언어와 시스템에서 지원.

profile
이유승
프론트엔드 개발자를 준비하고 있습니다.
이전 포스트

Day 11 - HTTP Method, Node.js 특징, 모듈, 콜백 함수, 라이브러리 vs 프레임워크, 프론트개발 3대장

다음 포스트

Day 13 - 쿼리 파라미터 실습, 구조분해할당, 이름 짓기, Map 객체, List 자료구조

0개의 댓글