인프런 강의
https://www.inflearn.com/course/node-js-%EC%9B%B9%EA%B0%9C%EB%B0%9C#
Node.js, Express를 기반으로 한 웹애플리케이션 구축.
Template Engine
Ajax와 JSON을 활용한 RESTful API 기반 웹 서비스 기초.
Passport기반의 인증처리 방법.
소스코드 : https://github.com/crongro/node_server_inflearn
https://github.dev/braverokmc79/node_server_inflearn
1. nodeJS + Express 웹서버 설정
1) NPM Project 시작하기
2) Express 기반 웹서버 구동
3) URL Routing 처리
4) static 디렉토리 설정
2. Request,Response 처리 기본
5) POST 요청처리
6) View engine을 활용한 응답처리
7) JSON 활용한 Ajax처리
중간 실습 과제 1
3. Database 연동 기본
8) MySQL 연동 설정
9) MySQL 연동 구현
4. Router 개선 - 모듈화
10) Routing 모듈화
11 )Routing 모듈화 2 (DB연결부분)
12) Routing 리팩토링
5. DB에 데이터추가
13) DB에 데이터추가 (create user) 1편
14) DB에 데이터추가 (create user) 2편
15) DB에 데이터추가 (create user) 3편
6. 패스포트기반 인증 로직 구현 (회원가입, 로그인, 로그아웃)
16) passport 환경구축
17) middleware,strategy 설정
18) passport 기반 router 설정
19) local-strategy 콜백완성
20) passport기반 세션처리
21) 로그인 로직 구현
22) Ajax 기반의 passport 인증처리
23) 로그아웃 처리
중간 실습 과제 2
7. RESTful API
24) RESTful API 정의
25) RESTful API GET
26) RESTful API POST
27) RESTful API GET SUB-URI
28) RESTful API DELETE
7. RESTful API
24) RESTful API 정의
강의: https://www.inflearn.com/course/node-js-%EC%9B%B9%EA%B0%9C%EB%B0%9C/unit/6151?tab=curriculum
REST 의 특징
1) Uniform (유니폼 인터페이스)
Uniform Interface는 URI로 지정한 리소스에 대한 조작을 통일되고 한정적인 인터페이스로 수행하는 아키텍처 스타일을 말합니다.
2) Stateless (무상태성)
REST는 무상태성 성격을 갖습니다. 다시 말해 작업을 위한 상태정보를 따로 저장하고 관리하지 않습니다. 세션 정보나 쿠키정보를 별도로 저장하고 관리하지 않기 때문에 API 서버는 들어오는 요청만을 단순히 처리하면 됩니다. 때문에 서비스의 자유도가 높아지고 서버에서 불필요한 정보를 관리하지 않음으로써 구현이 단순해집니다.
3) Cacheable (캐시 가능)
REST의 가장 큰 특징 중 하나는 HTTP라는 기존 웹표준을 그대로 사용하기 때문에, 웹에서 사용하는 기존 인프라를 그대로 활용이 가능합니다. 따라서 HTTP가 가진 캐싱 기능이 적용 가능합니다. HTTP 프로토콜 표준에서 사용하는 Last-Modified태그나 E-Tag를 이용하면 캐싱 구현이 가능합니다.
4) Self-descriptiveness (자체 표현 구조)
REST의 또 다른 큰 특징 중 하나는 REST API 메시지만 보고도 이를 쉽게 이해 할 수 있는 자체 표현 구조로 되어 있다는 것입니다.
5) Client - Server 구조
REST 서버는 API 제공, 클라이언트는 사용자 인증이나 컨텍스트(세션, 로그인 정보)등을 직접 관리하는 구조로 각각의 역할이 확실히 구분되기 때문에 클라이언트와 서버에서 개발해야 할 내용이 명확해지고 서로간 의존성이 줄어들게 됩니다.
6) 계층형 구조
REST 서버는 다중 계층으로 구성될 수 있으며 보안, 로드 밸런싱, 암호화 계층을 추가해 구조상의 유연성을 둘 수 있고 PROXY, 게이트웨이 같은 네트워크 기반의 중간매체를 사용할 수 있게 합니다.
4. REST API 디자인 가이드
REST API 설계 시 가장 중요한 항목은 다음의 2가지로 요약할 수 있습니다.
첫 번째, URI는 정보의 자원을 표현해야 한다.
두 번째, 자원에 대한 행위는 HTTP Method(GET, POST, PUT, DELETE)로 표현한다.
다른 것은 다 잊어도 위 내용은 꼭 기억하시길 바랍니다.
4-1. REST API 중심 규칙
1) URI는 정보의 자원을 표현해야 한다. (리소스명은 동사보다는 명사를 사용)
GET /members/delete/1
위와 같은 방식은 REST를 제대로 적용하지 않은 URI입니다. URI는 자원을 표현하는데 중점을 두어야 합니다. delete와 같은 행위에 대한 표현이 들어가서는 안됩니다.
2) 자원에 대한 행위는 HTTP Method(GET, POST, PUT, DELETE 등)로 표현
위의 잘못 된 URI를 HTTP Method를 통해 수정해 보면
DELETE /members/1
으로 수정할 수 있겠습니다.
회원정보를 가져올 때는 GET, 회원 추가 시의 행위를 표현하고자 할 때는 POST METHOD를 사용하여 표현합니다.
회원정보를 가져오는 URI
GET /members/show/1 (x)
GET /members/1 (o)
회원을 추가할 때
GET /members/insert/2 (x) - GET 메서드는 리소스 생성에 맞지 않습니다.
POST /members/2 (o)
[참고]HTTP METHOD의 알맞은 역할
POST, GET, PUT, DELETE 이 4가지의 Method를 가지고 CRUD를 할 수 있습니다.
METHOD역할
POSTPOST를 통해 해당 URI를 요청하면 리소스를 생성합니다.
GETGET를 통해 해당 리소스를 조회합니다. 리소스를 조회하고 해당 도큐먼트에 대한 자세한 정보를 가져온다.
PUTPUT를 통해 해당 리소스를 수정합니다.
DELETEDELETE를 통해 리소스를 삭제합니다.
다음과 같은 식으로 URI는 자원을 표현하는 데에 집중하고 행위에 대한 정의는 HTTP METHOD를 통해 하는 것이 REST한 API를 설계하는 중심 규칙입니다.
4-2. URI 설계 시 주의할 점
1) 슬래시 구분자(/)는 계층 관계를 나타내는 데 사용
http://restapi.example.com/houses/apartments
http://restapi.example.com/animals/mammals/whales
2) URI 마지막 문자로 슬래시(/)를 포함하지 않는다.
URI에 포함되는 모든 글자는 리소스의 유일한 식별자로 사용되어야 하며 URI가 다르다는 것은 리소스가 다르다는 것이고, 역으로 리소스가 다르면 URI도 달라져야 합니다. REST API는 분명한 URI를 만들어 통신을 해야 하기 때문에 혼동을 주지 않도록 URI 경로의 마지막에는 슬래시(/)를 사용하지 않습니다.
http://restapi.example.com/houses/apartments/ (X)
http://restapi.example.com/houses/apartments (0)
3) 하이픈(-)은 URI 가독성을 높이는데 사용
URI를 쉽게 읽고 해석하기 위해, 불가피하게 긴 URI경로를 사용하게 된다면 하이픈을 사용해 가독성을 높일 수 있습니다.
4) 밑줄(_)은 URI에 사용하지 않는다.
글꼴에 따라 다르긴 하지만 밑줄은 보기 어렵거나 밑줄 때문에 문자가 가려지기도 합니다. 이런 문제를 피하기 위해 밑줄 대신 하이픈(-)을 사용하는 것이 좋습니다.(가독성)
5) URI 경로에는 소문자가 적합하다.
URI 경로에 대문자 사용은 피하도록 해야 합니다. 대소문자에 따라 다른 리소스로 인식하게 되기 때문입니다. RFC 3986(URI 문법 형식)은 URI 스키마와 호스트를 제외하고는 대소문자를 구별하도록 규정하기 때문이지요.
RFC 3986 is the URI (Unified Resource Identifier) Syntax document
6) 파일 확장자는 URI에 포함시키지 않는다.
http://restapi.example.com/members/soccer/345/photo.jpg (X)
REST API에서는 메시지 바디 내용의 포맷을 나타내기 위한 파일 확장자를 URI 안에 포함시키지 않습니다. Accept header를 사용하도록 합시다.
GET / members/soccer/345/photo HTTP/1.1 Host: restapi.example.com Accept: image/jpg
출처 :https://meetup.toast.com/posts/92
25) RESTful API GET
강의 : https://www.inflearn.com/course/node-js-%EC%9B%B9%EA%B0%9C%EB%B0%9C/unit/6152?tab=curriculum
schema.sql
CREATE TABLE `movie` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`title` varchar(30) unique not null ,
`type` varchar(10),
`grade` varchar(5),
`actor` varchar(30),
PRIMARY KEY (`id`)
)ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
INSERT INTO MOVIE (TITLE,`type`,GRADE,ACTOR) VALUES
('master','action','9.10','leebyunghun'),
('moonlight','drama','9.52','Barry Jenkins'),
('wall-E','animation','8.33','robot'),
('Zootopia','adventure','9.93','Judy hops'),
('The Sound Of Music','musical','9.92','Julie Andrews');
router/movie/movie.js
const express = require('express');
const router = express.Router();
const db = require("../../lib/db");
router.get("/", function (req, res) {
db.query("select * from movie", [], function (err, rows) {
if (err) return res.status(400).json({ err: err.toString() })
console.log("rows : ", rows);
res.status(200).json(rows);
});
});
router.get("/list", function (req, res) {
res.render("movie.ejs");
});
module.exports = router;
views/movie.ejs
document.querySelector('.showWrap').addEventListener('click', function(e) {
let url, method, data, fn;
const target = e.target;
const li = target.closest('LI');
const showResult = li.querySelector(".showResult");
const type = li.className;
if(target.tagName !== "BUTTON") return;
switch (type) {
case "get_all":
url = "/movie";
method = "GET";
fn = function(result) {
if(result) {
let titles = result.reduce(function(pre,next){
pre += "<li>" + next.title + "</li>"
return pre;
},"");
showResult.innerHTML = "<ul>" + titles + "</ul>";
} else {
showResult.innerHTML = "list not found";
}
}
break;
~
default:
// statements_def
console.log("default");
break;
}
sendAjax(url, method, data, fn);
})
async function sendAjax(url, method, data, fn){
const result=await fetch(url, {
headers:{"Content-Type" :"application/json"},
method:method,
body:JSON.stringify(data)
}).then(data=>data.json())
.then(res=>res)
.catch(err=>console.error("에러 :",err.toString()));
console.log("결과값 : ", result);
fn(result);
}
26) RESTful API POST
강의 : https://www.inflearn.com/course/node-js-%EC%9B%B9%EA%B0%9C%EB%B0%9C/unit/6153?tab=curriculum
router/movie/movie.js
~
//2. /movie, POST
router.post("/", function (req, res) {
const data = req.body;
db.query("INSERT INTO movie (title, `type`, grade, actor) VALUES(?, ?, ?,?)",
[data.title, data.type, data.grade, data.actor], function (err, rows) {
if (err) return res.status(400).json({ err: err.toString() });
res.status(200).json(rows);
});
})
~
views/movie.ejs
~
case "post":
url = "/movie";
method = "POST";
let inputs = [].slice.call(document.querySelector("form").elements);
data = inputs.reduce(function(pre,next) {
pre[next.name] = next.value;
return pre;
}, {});
fn = function (result) {
if(!result.err) showResult.innerHTML = "새로운 영화 데이터가 잘 추가됐습니다.";
else showResult.innerHTML =result.err;
}
break;
~
27) RESTful API GET SUB-URI
강의 : https://www.inflearn.com/course/node-js-%EC%9B%B9%EA%B0%9C%EB%B0%9C/unit/6154?tab=curriculum
router/movie/movie.js
//3. /movie/:title", GET"
router.get("/:title", function (req, res) {
console.log(" req body : ", req.params.title);
db.query("select * from movie where title =? ", [req.params.title], function (err, rows) {
if (err) return res.status(400).json({ err: err.toString() })
console.log("rows : ", rows[0]);
res.status(200).json(rows[0]);
});
});
views/movie.ejs
~
case "get_id":
url = "/movie/"+li.getElementsByTagName("input")[0].value;
method = "GET";
fn = function(result) {
if(!result.err) {
showResult.innerHTML = result.actor;
}else {
showResult.innerHTML = "해당하는 영화가 없네요..";
}
}
break;
~
28) RESTful API DELETE
강의 : https://www.inflearn.com/course/node-js-%EC%9B%B9%EA%B0%9C%EB%B0%9C/unit/6155?tab=curriculum
router/movie/movie.js
const express = require('express');
const router = express.Router();
const db = require("../../lib/db");
router.get("/list", function (req, res) {
res.render("movie.ejs");
});
//1. /movie, GET
router.get("/", function (req, res) {
db.query("select * from movie", [], function (err, rows) {
if (err) return res.status(400).json({ err: err.toString() })
console.log("rows : ", rows);
res.status(200).json(rows);
});
});
//2. /movie, POST
router.post("/", function (req, res) {
const data = req.body;
db.query("INSERT INTO movie (title, `type`, grade, actor) VALUES(?, ?, ?,?)",
[data.title, data.type, data.grade, data.actor], function (err, rows) {
if (err) return res.status(400).json({ err: err.toString() });
res.status(200).json(rows);
});
})
//3. /movie/:title", GET"
router.get("/:title", function (req, res) {
db.query("select * from movie where title =? ", [req.params.title], function (err, rows) {
if (err) return res.status(400).json({ err: err.toString() })
console.log("rows : ", rows[0]);
res.status(200).json(rows[0]);
});
});
//4. / movie /:title", delete"
router.delete("/:title", function (req, res) {
console.log(" 삭제 타이틀 : ", req.params.title);
db.query("delete from movie where title =? ", [req.params.title], function (err, rows) {
if (err) return res.status(400).json({ err: err.toString() })
console.log("rows : ", rows);
if (rows.affectedRows > 0) {
return res.status(200).json({ result: 1, data: req.params.title });
}
res.json(rows);
});
});
module.exports = router;
views/movie.ejs
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>movie list</title>
<link rel="stylesheet" href="/css/ui.css">
</head>
<body>
<header>
<div><a href="/main/">메인페이지</a></div>
<div><a href="/logout">logout</a></div>
</header>
<h1>Movie list API Test</h1>
<section class="showWrap">
<ul>
<li class="get_all">
<button>모든영화보기</button>
<section class="showResult"></section>
</li>
<li class="post">
<form action="" method="post">
<div> 제목 : <input type="text" name="title" placeholder="Terminator"> </div>
<div> 장르 : <input type="text" name="type" placeholder="drama"> </div>
<div> 평점 : <input type="text" name="grade" placeholder="8.43"> </div>
<div> 주연 : <input type="text" name="actor" placeholder="Tom cruise"> </div>
</form>
<button>영화추가</button>
<section class="showResult"></section>
</li>
<li class="get_id">
<input type="text" name="title">
<button>영화상세정보</button>
<section class="showResult"></section>
</li>
<li class="delete_id">
<input type="text" name="title">
<button>영화삭제</button>
<section class="showResult"></section>
</li>
<li class="update_id">
<form action="" method="post">
<div> 제목 : <input type="text" name="title" placeholder="Terminator"> </div>
<div> 장르 : <input type="text" name="type" placeholder="drama"> </div>
<div> 평점 : <input type="text" name="grade" placeholder="8.43"> </div>
<div> 주연 : <input type="text" name="actor" placeholder="Tom cruise"> </div>
</form>
<button>영화정보갱신</button>
<section class="showResult">ㅁㅁ</section>
</li>
<li class="get_min">
<button>현재 상영중인영화</button>
<section class="showResult">aaa</section>
</li>
</ul>
</section>
<script>
document.querySelector('.showWrap').addEventListener('click', function(e) {
let url, method, data, fn;
const target = e.target;
const li = target.closest('LI');
const showResult = li.querySelector(".showResult");
const type = li.className;
if(target.tagName !== "BUTTON") return;
switch (type) {
case "get_all":
url = "/movie";
method = "GET";
fn = function(result) {
if(!result.err) {
let titles = result.reduce(function(pre,next){
pre += "<li>" + next.title + "</li>"
return pre;
},"");
showResult.innerHTML = "<ul>" + titles + "</ul>";
} else {
showResult.innerHTML = "list not found";
}
}
break;
case "post":
url = "/movie";
method = "POST";
let inputs = [].slice.call(document.querySelector("form").elements);
data = inputs.reduce(function(pre,next) {
pre[next.name] = next.value;
return pre;
}, {});
fn = function (result) {
if(!result.err) showResult.innerHTML = "새로운 영화 데이터가 잘 추가됐습니다.";
else showResult.innerHTML =result.err;
}
break;
case "get_id":
url = "/movie/"+li.getElementsByTagName("input")[0].value;
method = "GET";
fn = function(result) {
if(result!=undefined && !result.err) {
showResult.innerHTML = result.actor;
}else {
showResult.innerHTML = "해당하는 영화가 없네요..";
}
}
break;
case "delete_id":
url = "/movie/"+li.getElementsByTagName("input")[0].value;
method = "DELETE";
fn = function(result) {
if(result.result === 1) {
showResult.innerHTML = "선택한영화 " + result.data+ "가 잘 삭제됐습니다";
}else{
showResult.innerText = "해당영화가 없습니다";
}
}
break;
default:
// statements_def
console.log("default");
break;
}
sendAjax(url, method, data, fn);
})
//@data : json format.
async function sendAjax(url, method, data, fn){
console.log("url : ", url);
const result=await fetch(url, {
headers:{"Content-Type" :"application/json"},
method:method,
body:JSON.stringify(data)
}).then(data=>data.json())
.then(res=>res)
.catch(err=>console.error("에러 :",err.toString()));
console.log("결과값 : ", result);
fn(result);
}
</script>
</body>
</html>
댓글 ( 4)
댓글 남기기