지난 글에서는..
[2][0] GET을 써보자
const express = require("express");
const ejs = require("ejs");
const app = express();
app.set("view engine", "ejs");
app.use(express.static(__dirname + '/'));
app.get("/", function(req, res){
console.log("안녕 테스트 페이지!");
res.render("test1", {});
})
app.listen(3000, function(){
console.log("실행중...");
});get()은 주소창에 입력 받았을 때 실행할 사항들을 나타내는 라우트 함수이다. 도메인 뒤에 붙은 주소가 해당 함수에 들어가 있는 값과 일치하면 해당 함수에 들어가 있는 함수가 실행된다.
보통 사이트에는 도메인 뒤에 붙은 경로로 페이지를 구분한다. 예를 들면 http://yahohococo.tistory.com/category/BOJ 처럼. 우리는 app.js 안에 get들을 여러개 써서 경로를 많이 만들 수 있다.
일단 views 폴더에 test2.ejs를 만들어 주자.
<html>
<head>
<title>22222TESTESTEST22222</title>
</head>
<body>
<h1>안방으로 들어왔습니다.</h1>
</body>
</html>
이제 app.js로 돌아가 test2.ejs를 띄울 get함수를 만들자.
const express = require("express");
const ejs = require("ejs");
const app = express();
app.set("view engine", "ejs");
app.use(express.static(__dirname + '/'));
app.get("/", function(req, res){
res.render("test1", {});
});
app.get("/hello", function(req, res){
res.render("test2", {});
});
app.listen(3000, function(){
console.log("실행중...");
});코드를 보면 알 수 있듯 이제 도메인 뒤에 /hello가 붙으면 test2.ejs가 띄워지게 될 것이다. 확인해보자. node 켜는 건 앞선 글들에서 확인할 수 있으니 생략하겠다.
잘 돌아간다.
그런데 궁금증이 하나 있다. 만약 get 함수 두 개의 디렉토리 주소가 같으면 어떤 함수가 실행 될까? app.js를 다음과 같이 수정해서 실험해보자.
const express = require("express");
const ejs = require("ejs");
const app = express();
app.set("view engine", "ejs");
app.use(express.static(__dirname + '/'));
app.get("/", function(req, res){
res.render("test1", {});
});
app.get("/", function(req, res){
res.render("test2", {});
});
app.listen(3000, function(){
console.log("실행중...");
});만약 node app.js를 켜둔채로 app.js를 수정하면, node에는 수정하기 이전의 파일이 돌아가고 있으므로 아무 변동이 없다. 수정했다면 node를 종료시키고 다시 켜야한다. 강제종료 방법은 ctrl+C 이다.
node app.js를 켜둔채로 ejs를 수정하는 것은 상관없다. 켜둔채로 페이지를 새로고침 하면 바뀐 ejs 파일을 띄워준다.
첫번째 get함수가 실행된다. 혹시나 바꿔서, 여러개로 했지만 첫번째 get함수로만 실행된다.
실수로 똑같은 주소를 두 개 만들어서 get으로 써버리면 무조건 먼저나온 함수가 실행이 된다. 참고하자. 이렇게 get의 특징을 알아봤다.
[2][1] POST를 써보자
<html>
<head>
<title>TESTESTEST</title>
<!-- 제이쿼리 불러오기 -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<input type="text" id="name" />
<input type="submit" id="OK"/>
<script>
$("#OK").click(function(){ // OK 버튼 클릭하면
$.ajax({
url: '/postTest', // postTest 주소로
async: true, // 동기화 - 서버에서 반응이 올때까지 기다림
type: 'POST', // POST 방식으로
data: {
test: $("#name").val() // 텍스트필드에 입력한 값을 test라는 이름으로 보냄
},
dataType: 'json',
success: function(data) { // POST 요청 성공 시
alert("보내기 성공");
},
error: function(err) { // POST 요청 실패 시
alert("보내기 실패 " + err);
}
});
});
</script>
</body>
</html>
이제 이름을 입력해 POST로 보낼 수 있다.
app.js를 수정하기 전에, POST로 받은 데이터를 받으려면 body-parser 모듈이 필요하다. post로 받은 json 데이터를 body에 저장하기 때문에 이를 해석할 모듈이 필요한 것이다. npm으로 설치하면 된다.
npm install body-parser
app.js에서 post 요청을 처리하는 post함수를 만들자. test1.ejs의 form 태그에서 볼 수 있듯 /postTest 라는 주소로 post 요청을 보낼 것이므로 주소는 /postTest 여야 한다.
const express = require("express");
const ejs = require("ejs");
const bodyParser = require('body-parser'); // body-parser 요청
const app = express();
app.set("view engine", "ejs");
app.use(bodyParser.urlencoded({extended: false})); // URL 인코딩 안함
app.use(bodyParser.json()); // json 타입으로 파싱하게 설정
app.use(express.static(__dirname + '/'));
app.get("/", function(req, res){
res.render("test1", {});
});
app.get("/", function(req, res){
res.render("test2", {});
});
app.post("/postTest", function(req, res){ // postTest라는 주소로 POST요청이 들어오면 실행
console.log(req.body); // body에 있는 정보를 콘솔창에 출력.
res.json({ok:true}); // 클라이언트에 성공했다고 신호를 보냄.
});
app.listen(3000, function(){
console.log("실행중...");
});이렇게 짜고 node를 켜보자. 그리고 페이지로 들어가 자신의 이름을 치고 제출버튼을 눌러보자.
보내기 성공이라고 떴다! 콘솔창을 확인해보자.
서버에도 성공적으로 전달이 되었다.
이렇게 POST를 이용해 서버에서 처리해야되는 일들을 요청할 수도 있고, 데이터를 전송할 수도 있다.
이번 글에서는 get과 post 함수의 기본적인 사용방법에 대해 알아보았다. 우리의 app.js가 이제 클라이언트-서버 간 소통도 할 수 있게 되었고, 여러개의 페이지를 가지게 되었다. 다음 글에서는 ejs의 재밌는 사용법에 대해 알아보도록 하겠다.
'node.js' 카테고리의 다른 글
| [node.js][3] ejs 사용설명서 (8) | 2019.02.21 |
|---|---|
| [node.js][1] express로 페이지 올려보기 (0) | 2019.01.11 |
| [node.js][0] 야매로 시작하기 (0) | 2019.01.09 |
