express

gjeon·2021년 10월 6일

express node.js

Node.js

목록 보기

3/3

express 란?

node.js를 위한 빠르고 객관적이며 미니멀한 웹 프레임워크.
node.js를 사용하여 쉽게 서버를 구성할 수 있게 만든 클래스와 라이브러리의 집합체.
Express.js는 Node.js의 핵심 모듈인 http와 Connect 컴포넌트를 기반으로 하는 웹 프레임워크다. 그러한 컴포넌트를 미들웨어(middleware)라고 하며, 설정보다는 관례(convention over configuration)와 같은 프레임워크의 철학을 지탱하는 주춧돌에 해당한다. 즉, 개발자들은 특정 프로젝트에 필요한 라이브러리를 어떤 것이든 자유롭게 선택할 수 있으며, 이는 개발자들에게 유연함과 수준 높은 맞춤식 구성을 보장한다.
node.js에는 다양한 웹 프레임워크가 존재하지만 현재 가장 많이 사용되는 엔진이라고 한다.
express는 React, Angular, Vue와 같이 client-side의 프레임워크가 아니라 "server-side" 또는 "back-end"의 프레임워크이다.

Express는 자체 기능이 최소화된 라우팅 및 미들웨어 웹 프레임워크이다. Express 애플리케이션은 본질적으로 일련의 미들웨어 기능 호출이다.

시작하기

프로젝트 파일에 들어가 npm init 을 해준다.
npm install express
node_modules에 express를 설치한다.
js 파일을 생성해 코드를 작성해준다.

//server.js
const express = require("express");
const app = express();

app.get('/', function (req, res) {
	console.log("Hello!");
});

app.listen(3000);

터미널에서 해당 프로젝트 폴더로 들어가 node server.js 입력
http://localhost:3000/
위의 주소를 들어가면 node server.js를 실행한 터미널에 "Hello" 가 출력된 것을 볼 수 있다.

내가 알고싶은 기능 및 옵션

Routing
middleware
app.listen()
(req, res, next)
set()
use()
router.get()
post()
route()
put()
delete()
render()
redirect()
send()
express.urlencoded()

Routing

라우팅 은 URI(또는 경로) 및 특정 HTTP 요청 방법(GET, POST 등)인 특정 끝점에 대한 클라이언트 요청에 애플리케이션이 응답하는 방식을 결정하는 것을 말한다.
https://expressjs.com/en/starter/basic-routing.html/

middleware

미들웨어 기능은 애플리케이션의 요청-응답 주기 에서 요청 객체 (req), 응답 객체 (res), 다음 미들웨어 기능에 접근할 수 있는 기능이다. 다음 미들웨어 기능은 일반적으로 next 라는 변수로 표시됩니다.

유형
- 애플리케이션 수준 미들웨어
- 라우터 수준 미들웨어
- 오류 처리 미들웨어
- 내장 미들웨어
- 타사 미들웨어
http://expressjs.com/en/guide/using-middleware.html#using-middleware/

listen()

UNIX 소켓을 시작하고 지정된 경로에서 연결을 수신한다.
app.listen(path, [callback])

var express = require('express')
var app = express()
app.listen('/tmp/sock')

지정된 호스트 및 포트에서 연결을 바인딩하고 수신 대기한다.
포트가 생략되거나 0이면 운영 체제는 사용되지 않는 임의의 포트를 할당하므로 자동화된 작업(테스트 등)과 같은 경우에 유용하다.
app.listen([port[, host[, backlog]]][, callback])

var express = require('express')
var app = express()
app.listen(3000)

(req, res, next)

req(request) : HTTP 요청 인수
res(respone) : HTTP 응답 인수
next : 미들웨어 함수에 대한 콜백 인수
- 함수내에 next()를 사용하면 다음 미들웨어 함수로 넘어간다.

To skip the rest of the middleware functions from a router middleware stack, call next('route') to pass control to the next route. NOTE: next('route') will work only in middleware functions that were loaded by using the app.METHOD() or router.METHOD() functions.

Router()

router객체 미들웨어 및 경로의 고립 된 인스턴스입니다. 미들웨어 및 라우팅 기능만 수행할 수 있는 "미니 애플리케이션"으로 생각할 수 있습니다. 모든 Express 애플리케이션에는 앱 라우터가 내장되어 있습니다.
라우터는 미들웨어 자체처럼 작동하므로 app.use()에 대한 인수로 또는 다른 라우터의 use() 메서드에 대한 인수로 사용할 수 있습니다.http://expressjs.com/en/5x/api.html#router/

사용예

//server.js
import express from "express";
import userRouter from "userRouter";

const app = express();

app.use("/users", rootRouter);

app.listen(3000);

//userRouter.js
import express from "express";
import {
  getEdit,
  postEdit,
  logout,
} from "userController";
import { protectorMiddleware } from "middlewares";

const userRouter = express.Router();

userRouter.get("/logout", protectorMiddleware, logout);
userRouter.route("/edit").all(protectorMiddleware).get(getEdit).post(postEdit);

export default userRouter;

URL
http://localhost:3000/users/logout
http://localhost:3000/users/edit
을 각각 설정해 준것이다.
server.js 에서 app 으로

//server.js
...
app.get("/users/logout", protectorMiddleware, logout);
...

위와 같은 식으로 express.Router() 를 사용하지 않고 해도 되지만, 코드 관리를 위해 라우터를 별도로 분리하는 것이다.
Router() 객체로 라우팅을 분리.

set()

name에 설정 value를 할당합니다. 원하는 값을 저장할 수 있지만 특정 이름을 사용하여 서버의 동작을 구성할 수 있습니다. 설정 표

사용예

//server.js
import express from "express";
import userRouter from "userRouter";

const app = express();

app.set("view engine", "pug");
app.set("views", process.cwd() + "/src/views");

app.use("/users", rootRouter);

app.listen(3000);

PUG 를 설정해준것이다.
view engine 으로 기본 엔진을 pug 로 하고 views 디렉토리 경로를 설정해줬다.

process.cwd()
현재 프로세스가 실행되는 위치(디렉토리)의 절대경로이다.

PUG 는 HTML 을 PUG 문법으로 작성하면 HTML 로 바꿔주는 기능을 한다.

use()

app.use([path,] callback [, callback...])
지정된 경로에 지정된 미들웨어 함수를 마운드 한다. 미들웨어 함수는 요청된 경로의 기준이 일치할 때 실행된다.
use 메서드는 모든 HTTP 메서드에 대해 요청 주소만 일치하면 실행되지만, get, post, put, patch, delete 같은 메서드는 주소 뿐만 아니라 HTTP 메서드까지 일치하는 요청일 때만 실행된다.
https://expressjs.com/en/api.html#app.use/

router.get()

set으로 설정한 name으로 value 값을 반환한다.
app.get(name)
지정된 콜백 함수를 사용하여 HTTP GET 요청을 지정된 경로로 라우팅한다.
app.get(path, callback [, callback ...])
https://expressjs.com/en/api.html#app.get/

post()

app.post(path, callback [, callback ...])
지정된 콜백 함수를 사용하여 HTTP POST 요청을 지정된 경로로 라우팅한다.
https://expressjs.com/en/api.html#app.post.method/

route()

app.route(path)
선택적인 미들웨어로 HTTP 동사를 처리하는 데 사용할 수 있는 단일 경로의 인스턴스를 반환한다. app.route()중복 경로 이름(오타 오류)을 방지하는 데 사용한다.

사용예

app.get("/edit", protectorMiddleware, getEdit);
app.post("/edit", protectorMiddleware, postEdit);

app.route("/edit").all(protectorMiddleware).get(getEdit).post(postEdit);

두 코드가 같은 역할을 하는데 route를 사용함으로 간결해지고 경로를 잘 못 써서 생기는 오류를 방지할 수 있다.
http://expressjs.com/en/guide/routing.html#app-route/

put()

app.put(path, callback [, callback ...])
지정된 콜백 함수를 사용하여 HTTP PUT 요청을 지정된 경로로 라우팅한다.
데이터를 업데이트 할 때 사용되는 method 라고 한다.

delete()

app.delete(path, callback [, callback ...])
지정된 콜백 함수를 사용하여 HTTP DELETE 요청을 지정된 경로로 라우팅한다.
요청된 자원을 삭제할 것을 요청함.

render()

res.render(view [, locals][, callback])
a를 렌더링 view하고 렌더링된 HTML 문자열을 클라이언트에 보낸다.
view인수는 렌더링 할 뷰 파일의 파일 경로 문자열이다. 이것은 절대 경로이거나 views설정 에 대한 상대 경로일 수 있다. 경로에 파일 확장자가 없으면 view engine설정에 따라 파일 확장자가 결정된다.

사용예

export const getJoin = (req, res) =>
  res.render("users/join", { pageTitle: "Join" });

users 경로에 있는 join 뷰 파일을 렌더링한다.
{ pageTitle: "Join" } 식으로 오브젝트를 보내주면 해당 뷰파일에서 보낸 인자를 사용할 수 있다.
http://expressjs.com/en/5x/api.html#res.render/

redirect()

res.redirect([status,] path)
HTTP 상태 코드에 해당하는 양의 정수를 path지정 하여 지정된 URL에서 파생된 URL로 리디렉션한다. 지정하지 않으면 기본값은 302이다.
리디렉션은 다른 사이트로 리디렉션하기 위한 정규화된 URL일 수 있다.

res.redirect('/foo/bar')
res.redirect('http://example.com')
res.redirect(301, 'http://example.com')
res.redirect('../login')

사용예

export const postLogin = async (req, res) => {
  const { username, password } = req.body;
  const pageTitle = "Login";
  const user = await User.findOne({ username, socialOnly: false });
  if (!user) {
    return res.status(400).render("users/login", {
      pageTitle,
      errorMessage: "An account with this username does not exists.",
    });
  }
  const ok = await bcrypt.compare(password, user.password);
  if (!ok) {
    return res.status(400).render("users/login", {
      pageTitle,
      errorMessage: "Wrong password",
    });
  }
  req.session.loggedIn = true;
  req.session.user = user;
  return res.redirect("/");
};

로그인 페이지에서 post메소드로 받을때 실행되는 코드이다.
로그인 실패시 render() 를 통해 에러 메시지와 함께 login 페이지로 이동하고 로그인 성공시 홈페이지로 리다이렉션 된다.
http://expressjs.com/en/5x/api.html#res.redirect/

send()

res.send([body])
HTTP 응답을 보낸다.

res.send(Buffer.from('whoop'))
res.send({ some: 'json' })
res.send('<p>some html</p>')
res.status(404).send('Sorry, we cannot find that!')
res.status(500).send({ error: 'something blew up' })

http://expressjs.com/en/5x/api.html#res.send/

express.urlencoded()

express.urlencoded([options])

Parameter: The options parameter contains various property like extended, inflate, limit, verify etc.
Return Value: It returns an Object.

Express에 내장된 미들웨어 기능이다. urlencoded 페이로드로 들어오는 요청을 구문 분석하고 body-parser를 기반으로 한다.

옵션 extended

extended 는 중첩된 객체표현을 허용할지 말지를 정하는 것이다. 객체 안에 객체를 파싱할 수 있게하려면 true.

이 옵션은 함께 URL 인코딩 된 데이터를 분석하는 사이에 선택할 수 있습니다 querystring라이브러리 ( false) 또는 qs라이브러리 ( true). "확장된" 구문을 사용하면 리치 개체 및 배열을 URL 인코딩 형식으로 인코딩할 수 있으므로 URL 인코딩을 통해 JSON과 같은 경험을 할 수 있습니다.

참고해서 보자.
http://expressjs.com/en/5x/api.html#express.urlencoded
https://joonsei.tistory.com/22
https://backback.tistory.com/336
https://velog.io/@yejinh/express-%EB%AF%B8%EB%93%A4%EC%9B%A8%EC%96%B4-bodyParser-%EB%AA%A8%EB%93%88

사용예

app.use(express.urlencoded({ extended: true }));

req.body 를 사용하기 위해 해당코드를 사용하였다.
https://nodejs.dev/learn/get-http-request-body-data-using-nodejs/

요청 본문에 제출 된 키-값 데이터 쌍을 포함한다. 기본적으로 이는 정의되어 있지 않으며 express.json(), express.urlencoded()와 같은 미들웨어를 사용해야한다.
req.body는 body-parser를 사용하기 전에는 default 값으로 Undefined 설정되기 때문에 body-parser를 사용하여 해결해야 오류를 뿜지 않는다.

Express 4.16.0버전 부터 body-parser의 일부 기능이 익스프레스에 내장되어 사용이 가능하다한다.
https://studyingych.tistory.com/34/

Reference

https://www.npmjs.com/package/express/
https://developer.mozilla.org/ko/docs/Learn/Server-side/Express_Nodejs/Introduction/
https://wikibook.co.kr/article/what-is-expressjs/
https://velog.io/@madpotato1713/JAVASCRIPT-express%EB%9E%80/
https://serendipity24.tistory.com/148/
https://stackoverflow.com/questions/29960764/what-does-extended-mean-in-express-4-0/45690436#45690436/
https://expressjs.com/en/guide/writing-middleware.html/
https://expressjs.com/en/api.html/
https://backback.tistory.com/341/
https://javaplant.tistory.com/18/
https://sjh836.tistory.com/154/

gjeon

개발자 되기

이전 포스트

express

Node.js

express 란?

시작하기

내가 알고싶은 기능 및 옵션

Routing

middleware

listen()

(req, res, next)

Router()

set()

use()

router.get()

post()

route()

put()

delete()

render()

redirect()

send()

express.urlencoded()

옵션 extended

Reference

Babel

0개의 댓글