[데브코스] Express REST API 기초(get(), res.send(), res.json(), res.params())

지금까지는 HTTP 모듈을 사용하여 직접 서버를 만들고 라우팅을 구현해 보았다. 하지만 매번 이걸 직접 다 만들어야 하나? 생각이 들었다.

Express.js는 이런 작업을 더 효율적으로 할 수 있게 도와주는 프레임 워크이다. 오늘은 Express.js 를 알아보고, Express.js를 활용하여 REST API를 만드는 실습을 해보았다.

---

🖤Express

Express란?

Node.js 환경에서 웹 애플리케이션과 API를 빠르게 만들 수 있도록 도와주는 경량 웹 프레임워크

Express 는 HTTP 모듈 위에서 동작하며, 더 직관적인 라우팅, 미들웨어 처리, 다양한 응답 메서드 등을 제공한다.

 

특징

• 간결한 문법: 라우팅과 응답 처리 코드가 간단
• 미들웨어 기반: 요청 흐름에 필요한 기능들을 단계별로 삽입
• RESTful API 설계에 최적화: 다양한 HTTP 메서드 처리에 유리
• 풍부한 생태계: 다양한 미들웨어와 라이브러리와 쉽게 통합 가능

Express는 npm을 사용하여 간단히 설치할 수 있다.

npm i express

 

Express와 Node.js HTTP 모듈의 차이점

Node.js의 http.CreateServer() 방식은 모든 요청에 대해 if문이나 switch 문으로 분기하며, 라우팅을 직접 구현해야 했다.

반면, Express는 아래처럼 훨씬 간결하게 코드를 작성할 수 있다.

const express = require("express");
const app = express();

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

app.listen(3000);

• express() 호출 결과를 app에 담는다. app 객체는 서버 자체라고 보아도 무방하다.
• app.listen()으로 포트를 지정하여 서버를 실행한다.
• 라우팅은 app.get() 등으로 간편하게 구현할 수 있다.

 

Express REST API 실습

아래는 간단한 REST API 라우팅 예제이다.

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

app.get("/test", (req, res) => {
  res.send("TEST SUCCESS");
});

app.get("/test/1", (req, res) => {
  res.send("One!!");
});

• app.get()은 클라이언트가 특정 URL에 GET 요청을 보냇을 때 실행할 콜백 함수를 등록하는 매서드이다.
• URL 경로별로 라우트를 정의하고, 요청이 들어오면 해당 콜백 함수를 실행한다.(문자열 응답)
• 이 콜백은 (req, res)를 인자로 받아 요청과 응답을 다룬다.

 

app.listen()의 위치는 중요할까?

결론부터 말하면 아니다.

app.listen(3000);

listen()은 포트 번호를 설정하고 서버를 실행하는 함수일 뿐이다. 코드 상단에 있든, 하단에 있든 상관없이 정상 작동한다. 

⭐ 모든 라우트와 미들웨어가 정의된 이후 listen()을 호출해야 모든 요청 핸들러가 준비된 상태에서 서버가 실행된다.

 

❌오류: ERR_HTTP_HEADERS_SENT

여러개의 응답을 테스트 해보기 위해, res.send()를 두 번 사용해보았다.

app.get('/product/1', function(res, req){
    res.send('node.js를 배워보자(책) 20000원');
    res.send(20000);
})

코드를 실행해보니, 다음 오류가 발생했다.

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
    at ServerResponse.setHeader (node:_http_outgoing:659:11)
    at ServerResponse.header (c:\Users\monic\OneDrive\바탕 화면\programmers\expressPractice\node_modules\express\lib\response.js:684:10)
    at ServerResponse.contentType (c:\Users\monic\OneDrive\바탕 화면\programmers\expressPractice\node_modules\express\lib\response.js:514:15)
    at ServerResponse.send (c:\Users\monic\OneDrive\바탕 화면\programmers\expressPractice\node_modules\express\lib\response.js:136:14)
    at c:\Users\monic\OneDrive\바탕 화면\programmers\expressPractice\express_demo.js:23:7
    at Layer.handleRequest (c:\Users\monic\OneDrive\바탕 화면\programmers\expressPractice\node_modules\router\lib\layer.js:152:17)
    at next (c:\Users\monic\OneDrive\바탕 화면\programmers\expressPractice\node_modules\router\lib\route.js:157:13)
    at Route.dispatch (c:\Users\monic\OneDrive\바탕 화면\programmers\expressPractice\node_modules\router\lib\route.js:117:3)
    at handle (c:\Users\monic\OneDrive\바탕 화면\programmers\expressPractice\node_modules\router\index.js:435:11)
    at Layer.handleRequest (c:\Users\monic\OneDrive\바탕 화면\programmers\expressPractice\node_modules\router\lib\layer.js:152:17)

ERR\_HTTP\_HEADERS\_SENT 오류는 응답 헤더가 이미 클라이언트에게 전송된 후에 다시 헤더를 설정하려 해서 발생한 오류이다. 이미 /product/1 라우트에서 res.send()를 호출했는데, 두 번째 호출하려고 하니 오류가 발생한것이다.

⭐ express에서는 하나의 요청에 대해 res.send() 를 한 번만 호출해야 한다. 만약 여러개의 데이터를 사용해야 한다면, 객체 형태로 묶어 한번에 전달한다.

 

---

🔐객체와 JSON

객체란?

속성(key)와 값(value)의 쌍으로 구성된 데이터 집합

let book = {
  title: "Node.js를 공부해보자",
  price: 20000,
  description: "노드를 배워보자",
};

book.title 등으로 접근 가능하며, 구조적인 데이터 표현에 적합한 자료형이다.

 

JSON이란?

javascript Object Notation, 자바스크립트 객체 리터럴을 기반으로 한 데이터 교환 형식

웹에서 서버와 클라이언트 간 데이터를 주고 받을 때 주로 사용된다. 문자열 형태로 데이터를 주고 받기 때문에 직렬화/역직렬화 작업이 필요하다.(JSON.stringify(), JSON.parse())

항목	자바스크립트 객체	JSON
key	따옴표 없이 사용 가능	쌍따옴표로 감싸야 함.
value type	함수, 심볼 등 포함 가능	문자열, 숫자, 배열, 객체만 허용

 

⭐res.send() vs res.json()

res.send()

모든 타입의 데이터를 전송할 수 잇는 범용 응답 메서드

/**
     * Send a response.
     *
     * Examples:
     *
     *     res.send(new Buffer('wahoo'));
     *     res.send({ some: 'json' });
     *     res.send('<p>some html</p>');
     *     res.status(404).send('Sorry, cant find that');
     */
    send: Send<ResBody, this>;

• 기본적으로 객체를 문자열(JSON)로 자동 변환해서 응답한다.
• HTML, 버퍼, 문자열 등 다양한 타입 전송이 가능하다.

res.json()

JSON 전용 응답 메서드

/**
     * Send JSON response.
     *
     * Examples:
     *
     *     res.json(null);
     *     res.json({ user: 'tj' });
     *     res.status(500).json('oh noes!');
     *     res.status(404).json('I dont have that');
     */
    json: Send<ResBody, this>;

• 명확하게 JSON 형식으로 응답한다.
• 데이터 교환이 필요한 REST API 개발 시에는 가독성과 명확성 측면에서 권장된다!

---

🌊파라미터 받아서 동적으로 처리하기

라우트에 파라미터를 사용할 수 있다. 아래처럼 작성한다면 /product/1에 대한 처리만 가능하다.

app.get("/product/1", (req, res) => {
  res.json({
    title: "Node.js를 공부해보자",
    price: 20000,
    description: "노드를 배워보자",
  });
});

하지만 파라미터를 사용하여, /product/:num 경로를 지정하면, :num은 동적으로 변하는 값이므로 /product/1, /product/2, product/3...어떤 값이 오든 대응이 가능하다.

const express = require("express");
const app = express();

app.get("/product/:num", (req, res) => {
  res.json({ num: req.params.num });
});

app.listen(3001);

• req.params.num은 URL에서 전달된 num 값을 가져온다.
• 동적 데이터를 처리할 수 있다.

---

http 모듈만을 사용할 때는 라우팅 처리가 꽤나 복잡했는데, express를 사용하니 get(), res.send()를 사용하는 것만으로도 바로 원하는 기능을 구현할 수 있었다. 오늘은 get() 메서드 정도만 사용해서 짱 쉽네 느낌이었는데 빨리 복잡한 api 만드는 방법을 배워보고 싶다.