Node.js 로 웹 개발 시작 하기: Express.js 프레임워크

Node.js 로 웹 개발 시작 하기

이전 포스트(Visual Studio Code 로 Node.js 개발 시작) 에서 Node.js 프로젝트를 생성해보았습니다. 👍

이어서 이번 포스팅 에선 Node.js 에 걸 맞는 방법으로 한번 웹 개발을 시작해 보고 그 내용을 정리해 보겠습니다.

Express.js 프레임워크

먼저 Node.js 로 웹 개발을 할 때 사용할 수 있는 유명한 프레임워크로 Express.js 가 있습니다.

기존 자바(Java) 기반 웹 개발 시 스프링 프레임워크(Spring Framework) 와 같이 Express.js 는 웹 애플리케이션을 개발하기 위한 다양한 도구와 기능을 지원하는 프레임워크 입니다.

Node.js 위에서 실행 되기 때문에 먼저 설치되어 있어야 하고 Node.js 의 핵심 모듈인 http 모듈 위에 구축 되었습니다.

이를 이용하면 웹 애플리케이션(혹은 웹 사이트)를 손쉽고 빠르게 구축할 수 있어 인기를 끌고 있습니다.

Express.js 설치하기

Express 는 Node.js 프로젝트에서 터미널에 npm install express 를 입력해 주는 방식으로 쉽게 설치가 가능 합니다.

설치가 완료 되면 좌측 EXPLORER 에 node_modules 디렉토리가 생성됩니다.

Express.js 불러오기

먼저 EXPLORER 에서 ‘우 클릭 > New File’ 로 신규 파일을 만든 후 이름을 app.js 로 변경해 줍니다. Express.js 프레임워크는 기본적으로 app.js 파일을 메인으로 개발이 진행됩니다.

app.js 파일을 만들었으면 다음 코드를 한번 작성해 주세요.

// app.js
const express = require('express');
const app = express();
const port = 3000; // 포트 번호는 자유롭게 설정

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

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

그 후, 터미널에 node app.js 를 입력하면 Express 애플리케이션이 실행 됩니다. 정상적으로 실행 되면 Server is running on http://localhost:3000 가 출력 되고 해당 URL 에 접속 시 Hello World! 가 출력 됩니다.

예시 코드 가볍게 분석하기

// app.js
const express = require('express');
const app = express();
const port = 3000; // 포트 번호는 자유롭게 설정

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

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

require() 함수

require() 함수는 Node.js 에서 모듈을 불러올 때 사용하는 함 수 입니다. 이번 express 와 같은 모듈 외에도 다른 모듈을 설치하고 나면 require(‘모듈 명’) 의 형태로 불러오게 됩니다.

이 함수는 CommonJS 모듈 시스템 에서 사용되는 모듈 호출 함수이며 이후 ES6 Modules 이란 모던 웹 브라우저, 최신 JavaScript 환경에서 사용되는 시스템에선 import(), export() 등의 함수를 사용 합니다.

express()

express 에 require 문을 통해 담은 모듈 정보를 이용해 애플리케이션 객체를 사용하는 함수 입니다. 만들어진 객체를 통해 express 통해 여러 설정을 하고 웹 페이지를 표시 합니다.

app.get(‘/’, (req, res) => { …

GET 요청(클라이언트가 서버에 보내는 요청)을 처리하는 라우팅 핸들러(Express.js 와 같은 웹 프레임 워크에서 클라이언트의 요청을 처리하는 함수)를 정의하는 부분 입니다.

첫 번째 인자인 ‘/’ 은 최상위 경로 (즉, URL 만 입력 했을 경우)의 요청을 의미합니다.

나머지 인자인 req 는 요청, res 는 응답에 관련된 객체 입니다. 그래서 요청이 발생하면 res.send 를 통해 ‘Hello World’ 라는 메시지를 보내서 클라이언트는 접속 시 해당 메시지를 보게 되는 것 입니다.

app.listen(port, () => { …

app.listen() 메소드는 사용할 포트 번호를 지정 합니다. 인자로 받은 3000으로 인해 localhost:3000 으로 접속 할 수 있게 되었습니다.