라우터(router middleware)
라우터 미들웨어는 express에 포함되어있다
var router = express.Router();
router.route(요청패스).get(실행 될 함수);
router.route(요청패스).post(실행 될 함수);
app.use('/', router);라우터 미들웨어 사용 시 app 객체에 추가되는 메소드
- get(callback) - GET 방식으로 특정 패스 요청 발생 시 사용할 콜백 함수 지정
- post(callback) - POST 방식으로 특정 패스 요청 발생 시 사용할 콜백 함수 지정
- put(callback) - PUT 방식으로 특정 패스 요청 발생 시 사용할 콜백 함수 지정
- delete(callback) - delete 방식으로 특정 패스 요청이 발생 시 사용할 콜백 함수 지정
- all(callback) - 모든 요청 방식 처리
크로스 도메인
크로스 도메인 문제
- 웹 서버의 서로 다른 도메인(경로)에서 데이터를 주고 받을 수 없도록 규제한 것
- 서로 다른 도메인에서 서로 다른 포트번호를 할당하여 동작하고 있기에 서로 접근이 불가능
- 웹 페이지와 서버가 다른 도메인에 저장 되어 있는 경우 서버에서 다른 도메인의 접근을 허용하여 요청 받게 할 수 있음
- CORS 모듈로 크로스 도메인 문제 해결 가능
var cors = require('cors');
app.use(cors());npm install cors -S 로 cors 모듈을 설치하고 server.js 상단에 cors 모듈을 cors로 선언하여 사용해준다.
REST
REpresentational State Transfer
웹 브라우저에서 서버로 정보를 전송/접근/변경(CRUD)하기 위한 표현 방법에 대한 아키덱처
HTTP Method
- GET : 조회
- POST : 생성
- PUT : 전체 수정
- DELETE : 삭제
- PATCH : 단일 데이터 수정
Ajax
Asynchronous JavaScript and XML
웹 페이지 전체를 다시 로딩하지 않고, 웹 페이지의 일부분만을 갱신할 수 있음
백그라운드 영역에선 서버와 통신하고 그 결과를 웹 페이지 일부분에만 표시 가능
웹 페이지가 로드 된 후, 서버와 통신 가능
JSON, XML, HTML, 텍스트 파일 등과 같은 형태의 데이터를 주고 받을 수 있음
Nodejs 계산기 실습
// 모듈 불러오기
var http = require('http');
var express = require('express');
var app = express();
const router = express.Router();
// express 내장 body-parser
app.use(express.json());
app.use(express.urlencoded({extended:true}))
// REST 방식으로 처리
router.route("/calc/:x/:y").get((req,res) => {
console.log("GET - /clac/:x/:y ==> 더하기");
res.end(String(Number(req.params.x)+Number(req.params.y)));
});
router.route("/calc/:x/:y").post((req,res) => {
console.log("GET - /clac/:x/:y ==> 빼기");
res.end(String(Number(req.params.x)-Number(req.params.y)));
});
router.route("/calc/:x/:y").put((req,res) => {
console.log("GET - /clac/:x/:y ==> 곱하기");
res.end(String(Number(req.params.x)*Number(req.params.y)));
});
router.route("/calc/:x/:y").delete((req,res) => {
console.log("GET - /clac/:x/:y ==> 나누기");
res.end(String(Number(req.params.x)/Number(req.params.y)));
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>node.js를 활용한 계산기 구현(REST방식)</h1>
<form>
<input type="text" name="a" >
<input type="text" name="b">
<select name="op">
<option value="GET">plus</option>
<option value="POST">minus</option>
<option value="PUT">mult</option>
<option value="DELETE">div</option>
</select>
<input type="submit" value="result">
</form>
<div id="result"></div>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
$("form").submit(function(e) {
e.preventDefault();
let a = this.a.value;
let b = this.b.value;
let method = this.op.value;
let calcUrl = `http://localhost:3000/calc/${a}/${b}`;
$.ajax({
url: calcUrl,
method: method,
dataType: "text",
success: function (data) {
console.log(data);
$("div#result").text(data);
}
});
});
</script>
</body>
</html>