Node.js express 사용해보기

binary·2022년 1월 6일
JavaScriptexpressmiddlewarenode.js일팔공캠프
1

일팔공

목록 보기
19/20
post-thumbnail

Node.js

원래는 서버를 실행할 때 Code Runner 라는 vs코드 확장 프로그램을 사용해왔다. 그런데 코드를 수정할 때마다 서버를 껐다 켜야하는 불편함이 있어 npx nodemon 을 사용해보기로 했다.

간단하게 npx nodemon 파일이름 만 입력하면 되고, 코드를 수정하면 알아서 서버가 새로고침된다. (npm 설치해야 사용가능)

Node.js express 설치하는 방법

터미널에 npm install -s express 를 입력하면 된다.

express로 라우팅

// 서버 생성
const http = require("http");

http
  .createServer((req, res) => {
    let { url, method, headers } = req;

    if (method === "POST") {
      if (url === "/users") {
        res.writeHead(200);
        return res.end("회원");
      } else if (url === "/board") {
        res.writeHead(200);
        return res.end("게시판");
      } else if (url === "/notice") {
        res.writeHead(200);
        return res.end("공지사항");
      }
    }
    res.writeHead(404);
    res.end("Not found file");

    console.log(url, method, headers);
  })
  .listen(3000, () => {
    console.log("server on : 3000 port");
  });

지금까지 url 마다 다른 화면을 보여주고 싶을 때 위처럼 코드를 작성해왔다. 꽤 복잡하다!

express를 사용하면 조금 더 코드를 간결하고 알아보기 쉽게 작성할 수 있다!

const express =require("express");

let app = express();

app.http메서드("url", (req, res, next){

})

위와 같은 형태로 사용하면 된다.

여기서 let app = express(); 를 보면 express 라는 함수를 호출하여 반환값을 app 에 넣고 있는 것처럼 보인다.

express 함수의 리턴 값은 Application 이라는 객체이다. 이 객체가 가지고 있는 메서드는 get이나 post, use 등이 있다.

// express 사용하기
const express = require("express");
// http 모듈 사용하기
const http = require("http");

let app = express();

// get 방식으로
app.get("/", (req, res, next) => {
  console.log("hello world!");
  res.writeHead(200);
  res.end("완료");
});

// 서버 실행
http.createServer(app).listen(3000, () => {
  console.log("server on : 3000 port");
});

| 실행화면

콘솔에는 hello world 가 찍혀있고, postman에는 완료 가 찍혀있는 것을 보니 잘 실행된 것을 알 수 있다.

express와 요청 객체 사용해보기

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

let app = express();

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

app.get("/download", (req, res, next) => {
  res.download("test.txt");
});

app.get("/redirect", (req, res, next) => {
  res.redirect("http://www.google.com");
});

app.get("/json", (req, res, next) => {
  res.json({ message: "success", code: 200 });
});

http.createServer(app).listen(3000, () => {
  console.log("server on : 3000 port");
});

  • res.send() : 보내는 데이터를 알아서 파악해 Contnet-Type을 지정하여 response를 보낸다.

  • res.download() : 지정된 path의 파일을 다운로드한다.

  • res.redirect() : 요청의 경로를 재지정한다.

  • res.json() : 데이터들을 json 형식으로 response를 보낸다.

express.router 사용해보기

만약 하나의 url로 여러 방식들로 접근하려면 어떻게 해야 할까?

바로바로 express.Router() 를 사용하면 된다!

const express = require("express");

const router = express.Router();

router.get("/:id", (req, res, next) => {
  res.send("유저 정보 가져오기");
});

router.post("/a", (req, res, next) => {
  res.send("회원가입");
});

router.put("/a", (req, res, next) => {
  res.send("회원 정보 수정");
});

router.delete("/a", (req, res, next) => {
  res.send("회원 탈퇴");
});

module.exports = router;

지금까지 해왔던 것과 달라진 점이 있다면 ...

  1. const router = express.Router(); 가 생겼다.
  2. router.http메서드 가 생겼다.
  3. module.exports = router; 가 생겼다.
  4. http.createServer() 가 사라졌다.
  5. let app = express(); 가 사라졌다.

1번과 2번은 express.Router() 을 사용하려면 꼭 필요한 요소들이며 3번은 위 코드가 담긴 파일을 모듈화한 것이다.
4번과 5번은 굳이 서버를 실행할 필요가 없기 때문에 작성하지 않았다.

const express = require("express");

let app = express();

const http = require("http");

const users = require("./express06_router01");

// localhost:3000/users/
app.use("/user", users);

http.createServer(app).listen(3000, () => {
  console.log("server on : 3000 port");
});

const users = require("./express06_router01");
-> 모듈을 require 했다!

app.use() 는 지정된 경로에 마운트한다.

app.use("/user", users)
localhost:3000/user 가 기본 경로가 되어 모듈 안에 있는 url이 덧붙여지면서 url과 http메서드에 따라 각각 다른 화면을 볼 수 있게 된다.

| 실행화면

  • localhost:3000/user/abc
    /:id 자리에 abc가 들어갔고, get() 방식으로 전달되어 "유저 정보 가져오기" 가 화면에 뜬 것을 알 수 있다.

  • localhost:3000/user/a
    동일한 url인 /a가 post() 방식으로 전달되어 "회원가입" 가 화면에 뜬 것을 알 수 있다.

  • localhost:3000/user/a
    동일한 url인 /a가 put() 방식으로 전달되어 "회원 정보 수정" 가 화면에 뜬 것을 알 수 있다.

  • localhost:3000/user/a
    동일한 url인 /a가 delete() 방식으로 전달되어 "회원 탈퇴" 가 화면에 뜬 것을 알 수 있다.

express 미들웨어

  • 요청과 응답 사이, 중간(미들)에서 목적에 맞는 처리를 하는 함수이다.

  • req, res, next 를 매개변수로 갖는 함수이다.

  • req는 요청 객체, res는 응답 객체, next는 다음 미들웨어로 요청을 넘기는 함수이다.

express 미들웨어 사용해보기

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

let app = express();

app.get("/:id", (req, res, next) => {
  let id = req.params.id;
  console.log(typeof id);
  console.log(id);

  if (isNaN(id)) {
    console.log("go to 404");
    return next();
  }

  // error code id: 1
  if (Number(id) === 1) {
    return next("error check");
  }

  res.send(`Hello world ${id}`);
});

// 404 미들웨어
app.use((req, res, next) => {
  console.log("404");
  res.status(404).send("<h1>Not found page</h1>");
});

// 에러 미들웨어
app.use((err, req, res, next) => {
  console.log(err);
  res.status(500).send(err);
});

http.createServer(app).listen(3000, () => {
  console.log("server on : 3000 port");
});

let id = req.params.id;
id는 요청 객체의 params의 id로 일단은 기존 url에 덧붙여지는 url이라고 이해하자!

만약!

  • id가 isNaN(id) 가 true라면 (영어나 한글이라면) 404 미들웨어로 next() 해준다.

예) id가 안녕일 때

id의 type은 string이고, id는 안(녕)이기 때문에 404가 찍히면서 Not found page가 출력된다.

  • id가 1이면 (조건문을 Number(id) === 1 로 했기 때문에 문자열이든 숫자든 1은 err) "error check" 로 에러 미들웨어로 next("error check") 해준다.

예) id가 1일 때

id가 1이기 때문에 error check가 뜨면서 에러 미들웨어로 가 err가 출력된다.

  • id가 1도 영어나 한글도 아니라면 "Hello world" 와 함께 id도 출력된다.

에러 미들웨어는 err 라는 매개변수가 하나 더 들어간다. next() 안에 파라미터를 넣으면 무조건 error 로 인식한다.

예) id가 1도 아니고 영어, 한글도 아닐 때

Hello world 와 id인 123이 어떤 미들웨어에 거치지 않고 바로 출력되었다.

express 미들웨어 body-parser

  • 요청한 데이터를 원하는 모양으로 만들어주는 미들웨어이다.
const bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: true }));
// json으로 넘어오는 data 파싱
app.use(bodyParser.json());

위 코드만 추가하면 된다!

body-parser 사용해보기

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

let app = express();

const bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: true }));
// json으로 넘어오는 data 파싱
app.use(bodyParser.json());

// post
app.post("/", (req, res, next) => {
  // post는 body로
  let body = req.body;

  // body undefined 나옴 -> bodyParser로 해결
  console.log(body);

  res.writeHead(200);
  res.end("post 완료");
});

http.createServer(app).listen(3000, () => {
  console.log("server on : 3000 port");
});

여기서 let body = req.body; 의 req.body는 req 객체의 body에 key-value 의 데이터가 담긴 객체 프로퍼티이다.

| 실행화면

  • body-parser 를 사용하지 않았을 때

데이터를 전송했는데 undefined가 출력되었다.

  • body-parser 사용했을 때

데이터가 잘 파싱되었다.

profile
binary
이전 포스트

fs 모듈 깔짝 거리고 npm 설치하기

다음 포스트

React 설치하고 시작하기

0개의 댓글