live server 를 깔면 html을 마우스 우클릭해서 open with live server 로 열었을 때 새로고침을 하지 않아도
어떻게 변경됐는지 바로 확인 가능
쿠키
쿠키는 키-값 쌍이다.
서버가 쿠키를 요청자에게 주고,
그 다음부터 클라이언트부터 쿠키를 받아 요청자를 파악한다(인증된 사용자)
처음에 쿠키가 비어있다가
새로고침을 한번 더 하면 쿠키가 들어온다
여기서 쿠키를 지울 수 있는데
다시 새로고침하면 또 생김
8번 째 줄 {} 꼭 써줘야함
적고 로그인을 누르면 쿠키가 생기고
다시 접속하면 fdfd님 안녕하세요 가 계속 나옴
쿠키 지워지면 다시 로그인 뜸
세션 사용하기
쿠키의 이름 대신 세션 아이디에 임의의 숫자를 담아서 보냄
브라우저가 세션 아이디를 저장함
REST API
REpresentational State Transfer의 약자
서버의 자원을 정의하고 자원에 대한 주소를 지정하는 방법
의미를 명확히 전달하기 위해 명사로 구성
ex) /user -> 유저에 대한 정보 , /post -> 게시글에 대한 정보
http 요청 메서드
폼데이터를 전송할 때 GET 또는 POST 메서드를 지정해 사용한다.
GET 방식
서버 자원을 가져오고자 할 때 주소뒤의 원하는 정보를 쿼리스트링으로 보여주면서 보내는 방식
요청 본문에 데이터를 넣지 않는다.
POST 방식
서버에 자원을 새로 등록하고자 할 때 주소 뒤의 원하는 정보를 감춰서 보내는 방식
요청 본문에 데이터를 넣어서 보낸다.
PUT 방식
서버 자원을 요청에 들어 있는 자원으로 치환 하고자 할때
요청의 본문에 치환할 데이터를 넣어 보낸다
PATCH 방식
서버 자원의 일부만 수정하고자 할때
요청의 본문에 일부 수정할 데이터를 넣어 보낸다
DELETE 방식
서버의 자원을 삭제 하고자 할때
about.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./restFront.css" />
</head>
<body>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
<div>
<h2>소개 페이지입니다.</h2>
<p>사용자 이름을 등록하세요.</p>
</div>
</body>
</html>
|
restFront.css
|
1
2
3
4
|
a {
color: blue;
text-decoration: none;
}
|
restFront.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./restFront.css" />
<title>RESTful Server</title>
</head>
<body>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
<div>
<form id="form">
<input type="text" id="username">
<button type="submit">등록</button>
</form>
</div>
<div id="list"></div>
<script src="./restFront.js"></script>
</body>
</html>
|
restFront.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
function getUser() {
//로딩시 사용자가 가져오는 함수
var xhr = new XMLHttpRequest();
xhr.onload = function () {
if (xhr.status === 200) {
var users = JSON.parse(xhr.responseText);
var list = document.getElementById('list');
list.innerHTML = '';
Object.keys(users).map(function (key) {
var userDiv = document.createElement('div');
var span = document.createElement('span');
span.textContent = users[key];
var edit = document.createElement('button');
edit.textContent = '수정';
edit.addEventListener('click', function () {
var name = prompt('바꿀 이름을 입력 하세요.');
if (name === null) {
console.log('취소');
return;
}
if (!name) {
return alert('이름을 반드시 입력 해야 합니다.');
}
var xhr = new XMLHttpRequest();
xhr.onload = function () {
if (xhr.status === 200) {
console.log(xhr.responseText);
getUser();
} else {
console.error(xhr.responseText);
}
}
xhr.open('PUT', '/users/' + key);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
name: name
}));
});
var remove = document.createElement('button');
remove.textContent = '삭제';
remove.addEventListener('click', function () {
var xhr = new XMLHttpRequest();
xhr.onload = function () {
if (xhr.status === 200) {
console.log(xhr.responseText);
getUser();
} else {
console.error(xhr.responseText);
}
}
xhr.open('DELETE', '/users/' + key);
xhr.send();
});
userDiv.appendChild(span);
userDiv.appendChild(edit);
userDiv.appendChild(remove);
list.appendChild(userDiv);
});
} else {
console.error(xhr.responseText);
}
};
xhr.open('GET', '/users');
xhr.send();
}
window.onload = getUser;
document.getElementById('form').addEventListener('submit', function (e) {
e.preventDefault();
var name = e.target.username.value;
if (!name) {
return alert('이름을 입력 하세요.');
}
var xhr = new XMLHttpRequest();
xhr.onload = function () {
if (xhr.status === 201) {
console.log(xhr.responseText);
getUser();
} else {
console.error(xhr.responseText);
}
}
xhr.open('POST', '/users');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
name: name
}));
e.target.username.value = '';
});
|
restServer.js
먼저 엑셀파일을 만들고 큰 틀을 만든다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
const http = require('http');
const fs = require('fs');
const users = {};
http.createServer((req, res) => {
if (req.method === 'GET') {
if (req.url === '/') {
return fs.readFile('./restFront.html', (err, data) => {
if (err) {
throw err;
}
res.end(data);
});
} else if (req.url === '/about') {
return fs.readFile('./about.html', (err, data) => {
if (err) {
throw err;
}
res.end(data);
});
} else if (req.url === '/users') {
return res.end(JSON.stringify(users));
}
return fs.readFile(`.${req.url}`, (err, data) => {
if (err) {
res.writeHead(404, 'NOT FOUND');
return res.end('NOT FOUND1');
}
return res.end(data);
});
} else if (req.method === 'POST') {
if (req.url === '/users') {
let body = '';
req.on('data', (data) => {
body += data;
});
return req.on('end', () => {
console.log('Post 본문 (Body): ', body);
const {
name
} = JSON.parse(body);
const id = Date.now();
users[id] = name;
res.writeHead(201);
res.end('등록 성공');
});
}
} else if (req.method === 'PUT') {
if (req.url.startsWith('/users/')) {
const key = req.url.split('/')[2];
let body = '';
req.on('data', (data) => {
body += data;
});
return req.on('end', () => {
console.log('PUT 본문(Body): ', body);
users[key] = JSON.parse(body).name;
return res.end(JSON.stringify(users));
});
}
} else if (req.method === 'DELETE') {
if (req.url.startsWith('/users/')) {
const key = req.url.split('/')[2];
delete users[key];
return res.end(JSON.stringify(users));
}
}
res.writeHead(404, 'NOT FOUND');
return res.end('NOT FOUND2');
}).listen(8087, () => {
console.log('8087 server is running');
});
|
postman을 설치해서 메서드 마다 어떻게 응답하는지 미리 확인해볼 수 있다
->미리 틀을 짜놓고 내용을 채우자!
오타를 조심하자..
'JavaScript > node.js' 카테고리의 다른 글
| 2020.07.17. 수업내용 - node.js(5) (0) | 2020.07.17 |
|---|---|
| 2020.07.15. 수업내용 - node.js(3) (0) | 2020.07.15 |
| 2020.07.14. 수업내용 - node.js (2) (0) | 2020.07.14 |
| 2020.07.13. 수업내용 - node.js (1) (0) | 2020.07.13 |