최근 수정 시각 : 2024-03-12 09:30:40

Express.js

웹 프레임워크 기술
{{{#!wiki style="margin:0 -10px"
{{{#!folding [ 펼치기 / 접기 ]
{{{#!wiki style="margin:-5px 0px -10px; word-break:keep-all"
$ 유료 포함 • 취소선 단종 및 중단
<colbgcolor=#f6f6f9,#2f3241> 프론트엔드 <colbgcolor=#fcfcfd,#272935> CSS Bootstrap Tailwind CSS Bulma Foundation Skeleton Pico
JSX React Next.js SolidJS Astro Preact Gatsby Remix Inferno Qwik
JS Angular Svelte Backbone.js jQuery Astro htmx Ember.js Lit 11ty Marko VanJS Alpine.js
Vue Nuxt.js VuePress Gridsome Quasar Astro
Python Reflex
백엔드 Java Spring Struts GWT Grails Jooby Play! Framework Scala
Kotlin Ktor
JS Express NestJS koa Hono fastify
.NET ASP.NET$
PHP Laravel Codeigniter Reasonable phalcon Symfony zend CakePHP FuelPHP Yii Slim PHPixe
Python Django Flask FastAPI
Ruby Ruby on Rails Sinatra
풀스택 JSX Next.js Astro SolidStart Remix Qwik City
JS SvelteKit Fresh Astro Marko
Vue Nuxt.js Quasar Astro
Java Vaadin$
Python Streamlit Reflex
하이브리드 .NET Blazor
Dart Flutter
Kotlin Kotlin Multiplatform
}}}}}}}}} ||


<colbgcolor=#595959><colcolor=#ffffff> Express.js
파일:express_logo.png
종류 프레임워크
라이선스 MIT 라이선스
개발 스트롱루프
언어 JavaScript
버전 4.18.3
2024년 2월 업데이트됨
파일:홈페이지 아이콘.svg | 파일:GitHub 아이콘.svg 파일:GitHub 아이콘 화이트.svg

1. 개요2. 특징3. 사용해 보기
3.1. 설치
3.1.1. Express 애플리케이션 생성기
3.2. Hello world 예제3.3. 라우팅3.4. 미들웨어
3.4.1. 자주 쓰이는 미들웨어
4. 기타
4.1. 같이 보기

[clearfix]

1. 개요

Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크이다.

2. 특징

3. 사용해 보기

3.1. 설치

기본적으로 Node.js가 설치되어 있다면, npm을 통해서 다운받을 수 있다.
$ npm install express --save

3.1.1. Express 애플리케이션 생성기

설치법
$ npm install express-generator -g


express-generator를 사용하면 Express의 기본골조를 바로 생성해준다. 개꿀 다만 자주 쓰다보면 코드가 외워지게 된다

여러 옵션으로 view engine[1] 이나 CSS등을 선택할 수 있다.

3.2. Hello world 예제

#!syntax javascript
import express from 'express'; // ES Module의 경우
const express = require('express'); // CommonJS의 경우
// 위의 구문의 경우 두 줄 다 쓰는 것이 아니라 자신이 쓰는 형식에 맞춰서 써야한다
const app = express();
const port = 3000;

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

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

다음과 같이 app.js를 작성한다. 설명을 하자면, 앱을 시작하면 앱은 3000 포트에 대해서 연결된다. URL '/'에 대해서 'Hello World!'라는 응답을 하고, 그 외의 URL에는 404 Not Found로 응답한다.[2]

$ node app.js

다음과 같이 실행시키면 간단한 Hello World 웹서버가 시작되고, 터미널에는 'Example app listening at http://localhost:3000'이라는 메세지가 나온다. 이제 http://localhost:3000에 들어가면 Hello World 응답을 받을 수 있다.

3.3. 라우팅

위의 예제에서

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

이 부분을 다시 한 번 보면, app에 GET[3] 요청을 '/'[4] 주소로 그 뒤에 있는 콜백함수가 res.send로 'Hello World!'를 보낸다.

경로를 정의할 때 정규표현식을 이용해서 작성할 수 있다.

express.Router를 사용하면 모듈처럼 붙였다 땔 수 있는 핸들러를 만들 수 있다. 이는 미들웨어처럼 사용할 수 있다.

3.4. 미들웨어


미들웨어는 Express.js에 기본적으로 제공하지 않는 기능을 구현해 놓은 함수이자 일종의 플러그인이다.
미들웨어를 사용하여 여러가지 고급 기능을 서버에 제공할 수 있다.

3.4.1. 자주 쓰이는 미들웨어

  • express.compress : HTTP 본문을 압축하여 전송
  • express.json : JavaScript Object 값을 JSON으로 전송 및 JSON 형식 Body를 자동으로 파싱 처리
  • express.session : 서버에 Session 스토리지를 구현[5]
  • express.static : 서버 파일시스템에 저장된 정적 리소스[6] 제공
  • cookie-parser : HTTP 헤더에서 Cookie 값을 추출
  • cors : CORS(교차 출처 리소스 공유) 정책을 설정
  • morgan : 터미널에 서버 로그 작성
  • passport : 로그인 기능을 구현[7]

4. 기타

  • 나무위키의 엔진인 the seed도 Express.js를 사용한다.
  • 2016년을 기점으로 업데이트 빈도가 줄어들기 시작하여 현재는 의미있는 업데이트가 이루어지고 있지 않다. Express.js 팀이 새로 개발중인 Koa로 대부분의 개발자가 넘어가고 있는 실정이다.

4.1. 같이 보기



[1] pug, ejs, handlebars 등을 주로 사용 [2] 접속하려면 브라우저에서 127.0.0.1:3000로 접속한다. 포트를 80으로 하면 :숫자를 안 붙여도 된다. [3] GET 뿐만 아니라, POST, DELETE, PUT과 같은 HTTP 요청 및 모든 요청에 관한 all도 지원한다. [4] URI 정의. 대소문자를 구분하지 않으며, 구분하려면 정규표현식을 사용해야 한다. [5] 데이터베이스에 연결시켜서 사용한다. 종류는 상관없음. [6] 예: CSS, Client-side scripts, 이미지, 폰트,오디오 등 [7] 구글, 네이버 등의 소셜 로그인 기능도 쓸 수 있다.