Node.js express 사용해보기
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;
지금까지 해왔던 것과 달라진 점이 있다면 ...
const router = express.Router();
가 생겼다.router.http메서드
가 생겼다.module.exports = router;
가 생겼다.http.createServer()
가 사라졌다.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
사용했을 때
데이터가 잘 파싱되었다.
Author And Source
이 문제에 관하여(Node.js express 사용해보기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@pongdang/Node.js-express-사용해보기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)