연습) Hello, World.
Node.js1. HTTP Methods(HTTP-Verbs) - GET, POST, PUT, PATCH, DELETE
HTTP Methods ( = HTTP Verbs)의 종류 : GET, POST, PUT, PATCH, DELETE
참고) resource 의 종류 : html, binary(image, sound), db (db, json, xml, flat)
GET : 조회
POST : 등록
PUT : 수정(없을시 등록). 한 컬럼만 업데이트시에도 모든 컬럼 업데이트.
PATCH : 수정. 한 컬럼만 업데이트시 한 컬럼만 업데이트.
DELETE : 삭제
2. Express로 서버 실행하기 (GIT : https://github.com/a-mean-blogger/hello-world/tree/eaa13c5356ebaa06bd14df80bee96edb085fac46)
$ git clone https://github.com/a-mean-blogger/hello-world.git
$ cd hello-world
$ git reset --hard eaa13c5
$ npm install
$ atom .
위 git clone 없이 직접 해보기
$ git init
$ npm init
$ touch index.js
$ npm install --save express
$ atom . ( 혹은 vi index.js )
index.js 에 아래 내용 입력
-----------------------------------------
var express = require('express')
var app = express();
app.get('/', function (req, res) // '/' 로 get 요청시
{
res.send('Hello World!');
})
app.listen(3000, function()
{
console.log('Server On!');
})
-----------------------------------------
$ node index.js
Server On!
그리고, Chrome> localhost:3000 으로 접속하면, Hello World! 가 보인다.
3. Static 폴더 추가하기
index.js 를 아래내용으로 변경
// index.js
var express = require('express');
var app = express();
// __dirname = 현재 실행 위치
// app.use : 브라우저에서, / 으로 접속하면 /public/ 에 변경접속, /css 으로 접속하면 /public/css 으로 변경접속
// css 나 html 같은 고정 파일 위치에 사용한다. 아래 "4. EJS로 Dynamic Website" 에서 <link> 태그에 public 이 없어도 public 을 참조하게 된다.
app.use(express.static(__dirname + '/public'));
app.listen(3000, function(){
console.log('Server On!');
});
$ node index.js #재실행
Server On!
그리고, Chrome> localhost:3000 으로 접속하면, 주황색 Hello World! 가 보인다.
4. EJS로 Dynamic Website 만들기
* 용어.EJS) EJS는 Embedded Javascript의 약자로 Express에서 dynamic website를 만들기 위해 template으로 사용되는 파일(확장자 이름은 .ejs)입니다.
$ npm install --save ejs # ejs 설치
> views 폴더와 views/hello.ejs 파일 추가
> index.js 내용 변경 -----------------------------------------
// index.js
var express = require('express');
var app = express();
app.set("view engine","ejs"); // ejs를 사용하기 위해서 express의 view engine에 ejs를 set하는 코드입니다.
// 이 라인을 없으면, 앞 views 옵션은 기본으로 views 폴더(뒤)를 가르키지면, 명시적으로 적어주자.
// 뒤의 views 는 사용자 마음대로 바꿀 수 있다.
// views 는 res.render 에서 사용된다.
app.set("views", "views");
app.use(express.static(__dirname + '/public'));
// 2
app.get("/hello", function(req,res){ // http://localhost:3030/hello 호출시
res.render("hello", {name:req.query.nameQuery}); // render 에는 hello.ejs의 파일명부분과 파라미터를 넘겨준다.
});
// 3
app.get("/hello/:nameParam", function(req,res){ // http://localhost:3030/hello/이름 호출시
res.render("hello", {name:req.params.nameParam}); // render 에는 hello.ejs의 파일명부분과 파라미터를 넘겨준다.
});
app.listen(3000, function(){
console.log('Server On!');
});
> views/hello.ejs 에는 아래 내용 추가
2
<!-- views/hello.ejs -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World!</title>
<link rel="stylesheet" href="/css/master.css">
</head>
<body>
<h1>Hello
<% if(name){ %>
<span class="name"><%= name %>!</span>
<% } else { %>
<span class="stranger">Stranger!</span>
<% } %>
</h1>
</body>
</html>
> http://localhost:3000/hello 와 localhost:3000/hello/superman 으로 접속테스트 해보자.
'Node.js' 카테고리의 다른 글
| 각종 설치 참조 (0) | 2019.04.17 |
|---|---|
| Atom 설치 (0) | 2019.04.17 |
| 설치 (Windows) (0) | 2019.04.16 |
| 내장 모듈 (0) | 2018.10.31 |
| Process 객체, exports 객체 (0) | 2018.10.31 |