1
2
3
mini-node-server 구현하기
스프린트에서는 OPTIONS와 POST요청 두가지만 들어오고, /lower와 /upper 에 따라 다른 응답을 하는 문제였다.
1) preflight Request 예비 요청이 들어왔기에 options요청을 받고 응답해주어야한다.
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
|
const http = require('http');
const PORT = 5000;
const ip = 'localhost';
const server = http.createServer((req, res) => {
//options
if(req.method === 'OPTIONS'){
res.writeHead(200, defaultCorsHeader);
res.end();
}
//POST
if(req.method === "POST"){
let body='';
req.on('data', chunk =>{
body = body + chunk;
})
if(req.url ==='/lower'){ //POST && /lower일때
req.on('end', ()=>{
res.writeHead(201, defaultCorsHeader);
body = body.toLowerCase();
res.end(body);
})
} else if(req.url ==='/upper'){ //POST && /upper일때
req.on('end', ()=>{
res.writeHead(201, defaultCorsHeader);
body = body.toUpperCase();
res.end(body);
})
}
} else {
res.writeHead(404, defaultCorsHeader);
res.end();
}
});
server.listen(PORT, ip, () => {
console.log(`http server listen on ${ip}:${PORT}`);
});
const defaultCorsHeader = {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type, Accept',
'Access-Control-Max-Age': 10
};
|
cs |
이렇게 첫 노드 서버를 구현해보았다. 노드서버에서 express는 Node.js 애플리케이션을 위한 빠르고 개방적인 간결한 웹 프레임워크라 nodejs에서 많이 사용되고 있다.
위에 있는 코드를 express 형태로 리팩토링하게 되면 다음과 같다.
express로 구현하기
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
|
const express = require('express') // 모듈을 불러온다.
const cors = require('cors') // cors 미들웨어를 불러온다.
const app = express(); // 서버를 만든다.
app.use(cors()); // 모든 요청에 대해 CORS 를 허용한다.
app.use(express.json({strict: false})); // primitive data type 도 parsing 해주도록 설정
const port = 5000; //app.js에서 포트번호 확인
const ip = 'localhost';
app.use(express.static('client'))
// GET
app.get('/', (req, res)=>{
res.send('Hello world!');
})
// POST
app.post('/upper', (req, res)=>{
console.log(req.body);
let result = req.body;
result = result.toUpperCase();
console.log(result);
res.json(result);
})
app.post('/lower', (req, res)=>{
console.log(req.body);
let result = req.body;
result = result.toLowerCase();
console.log(result);
res.json(result);
})
app.listen(port, ()=>{
console.log(`http server listen on ${ip}:${port}`);
})
|
cs |
결과화면
1) 소문자 입력 => toUpperCase 실행
2) 1)의 결과화면 , 왼쪽 밑 콘솔로그 확인
3) 대문자 입력 => toLowerCase 실행
4) 3)의 결과화면 , 왼쪽 밑 콘솔로그 확인
설치한 모듈 + 설치방법
1.express
npm i express --save
2.cors
npm i cors --save
3. nodemon
npm i nodemon --save
4. 코드스테이츠 모듈
중요!
body-parser는 이제 사용할 필요가 없어졌다. 왜?
최신버전에는 express안에 body-parser의 역할을 할 수 있게 업데이트 되었다.
반응형
'개발 공부 > 웹개발' 카테고리의 다른 글
[자료구조 with javascript] Graph 그래프 탐색 개념 정리(인접행렬) (0) | 2021.06.20 |
---|---|
[react, Css-in-JS]modal창 구현, styled 사용법, cursor, × (0) | 2021.06.08 |
[react] CSS-in-JS 관련 라이브러리 Styled Component (0) | 2021.06.01 |
[CSS] 구조적인 CSS 작성에 대한 발전 과정 (0) | 2021.06.01 |
[JavaScript] 객체 메소드assign()와 배열메소드 findIndex() 개념정리 (0) | 2021.06.01 |
댓글