Express.js를 이용한 웹 애플리케이션 구축

Express.js

• 웹 및 모바일 애플리케이션 개발을 위한 미니멀리스트 웹 프레임워크입니다.
• 라우팅, 미들웨어, 템플릿 엔진 등의 기능을 제공하여 웹 서버를 쉽게 구축할 수 있게 합니다.

Express.js

• 간결하고, 유연한 웹 애플리케이션 개발에 주로 사용.
• 사용 사례
  • SPA(단일 페이지 애플리케이션)
  • RESTful API
  • 리얼 타임 애플리케이션(채팅)
• 러닝 커브가 낮음

Express 설치

mkdir myapp
cd myapp
npm init -y
npm install express

Express를 설치한 프로젝트의 경로

웹 서버 생성

• index.js 파일을 생성합니다.

const express = require('express');
const app = express();
const port = 3000;

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

app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`);
});

Intellij 설정

• Intellij, WebStorm을 이용하여 Node.js를 실행하는 방법은 아래와 같다.
• index.js를 실행할 수 있도록 지정한다
• IDE를 사용하나, 사용하지 않나 근본적인 실행방법은 동일하다.

WebStorm 실행 설정

localhost:3000으로 요청

• app.get()에서 정의한 대로 우리가 반환하는 Text를 Browser에서 확인할 수 있는 것을 알 수 있다.

app.get

• HTTP GET 요청을 특정 경로에 대해 리스닝.
• 클라이언트가 해당 경로로 GET 요청을 보낼 때 실행될 콜백 함수를 정의

app.get(path, callback);

• callback : 해당 경로에 요청이 들어올 때 실해될 함수, 이 함수는 요청 객체(req)와 응답 객체(res)를 매개변수로 받습니다.

app.listen

• Node.js HTTP 서버를 시작하고 지정된 포트에서 클라이언트의 요청을 리스닝합니다.
• 서버가 정상적으로 시작되었는지 확인할 때 사용

app.listen(port, [callback]);

• port : 서버가 리스닝할 포트 번호
• callback 
  • 선택사항
  • 서버가 시작될 때의 실행될 콜백함수
    • 서버가 정상적으로 시작되었음을 로그로 남기는데 주로 사용. 

라우팅

• Express에서 라우팅은 엔드포인트를 의미합니다.

엔드포인트라는 용어가 생소할 수 있지만. http://locahost:3030/test 이러한 URI가 엔드포인트이다.
Express에서

app.get("/test", () => { ... });

으로 코드를 만들어놨다면 해당 요청에 대해서 핸들링할 수 있다.

app.get('/about', (req, res) => {
  res.send('About Page');
});

미들웨어

• 미들웨어는 요청과 응답 사이에 실행되는 함수로, 요청을 로깅하거나, 파싱하는 등의 작업을 수행할 수 있습니다.
• 미들웨어는 app.use() 메서드를 통해 애플리케이션에 추가할 수 있습니다.

app.use(express.json());

app.post('/data', (req, res) => {
  console.log(req.body);
  res.send('Data received');
});

요청

• express.json()이라는 미들웨어를 사용하여 JSON 형태의 요청 본문을 파싱합니다.
• express.json()을 사용하지 않으면 req.body의 값을 undefined로 얻게 됩니다.

express.json() 사용 시

// 요청 로깅 미들웨어
app.use((req, res, next) => {
  console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`);
  next(); // 다음 미들웨어로 요청을 넘깁니다.
});

• next() 함수는 현재 미들웨어의 처리가 끝나고 다음 미들웨어로 요청을 넘기는 역할을 수행합니다.
  • 만약 next()를 호출하지 않으면 요청은 그 지점에서 종료됩니다.