GOAL
- SPRINT 비교
- Express framework 사용
- http 모듈 사용
Express framework 사용
// basic-server.js
const express = require("express")
const app = express()
// const router = express.Router() // Router객체로 라우팅 분리
const cors = require("cors")
const bodyParser = require("body-parser") // 4.16.0버전부터 일부기능 내장됨
// node.js body를 파싱하는 미들웨어
// 요청의 본문을 해석해주는 미들웨어
// 보통, form 데이터나, ajax 요청의 데이터를 처리한다.
// 다음과 같이 사용한다
// const bodyParser = require("body-parser")
// app.use(bodyParser.json())
// app.use(bodyParser.urlencoded({extended:false}))
// 멀티의 바디들을 핸들해주지는 않는다.
const port = 3000;
app.use(bodyParser.urlencoded({ extended: false })) // parse application/x-www-form-urlencoded
app.use(bodyParser.json()) // parse application/json
app.use(cors()) // 모든 요청에 대해 cors 허용
const print = {results : []}
app.post("/messages", (req, res) => {
print.results.push(req.body)
res.status(201).send(JSON.stringify(print))
})
app.get("/messages", (req, res) => {
res.status(200).send(print)
})
module.exports = app.listen(port) // listen 메소드로 앱 실행을해서 서버 실행해야http 모듈 사용
// basic-server.js
const http = require("http");
const requestHandler = require("./request-handler");
const port = 3000;
const ip = "127.0.0.1";
module.exports = app.listen(port, () => {
console.log('success');
});
// request-handler.js
const print = { results : [] }
const requestHandler = function (request, response) {
const headers = defaultCorsHeaders;
// 응답 헤더에 응답하는 컨텐츠의 자료 타입을 헤더에 기록 합니다.
headers["Content-Type"] = "text/plain";
// .writeHead() 메소드의 두번째 인자로는 응답 헤더와 키와 값을 객체 형태로 적어줍니다.
// response.writeHead(200, headers);
// 노드 서버에 대한 모든 요청은 응답이 있어야 합니다. response.end 메소드는 요청에 대한 응답을 보내줍니다.
// response.end("Hello, World!");
if (request.method === "OPTIONS") {
response.writeHead(200, headers)
response.end()
}
if (request.method === "POST") {
if (request.url === "/messages") {
let body = []
request.on("data", (chunk) => {
console.log(chunk)
//! chunk = <Buffer 7b 22 75 73 65 72 6e 61 6d 65 22 3a 22 4a 6f 6e 6f 22 2c 22 74 65 78 74 22 3a 22 44 6f 20 6d 79 20 62 69 64 64 69 6e 67 21 22 7d>
console.log(body)
//! body = []
body.push(chunk)
}).on("end", () => {
body = Buffer.concat(body).toString()
console.log(body)
//! body = <Buffer>
console.log(Buffer)
//! Buffer = { [Function: Buffer]
//! poolSize: 8192,
//! from: [Function: from],
//! of: [Function: of],
//! alloc: [Function: alloc],
//! allocUnsafe: [Function: allocUnsafe],
//! allocUnsafeSlow: [Function: allocUnsafeSlow],
//! isBuffer: [Function: isBuffer],
//! compare: [Function: compare],
//! isEncoding: [Function: isEncoding],
//! concat: [Function: concat],
//! byteLength: [Function: byteLength],
//! [Symbol(kIsEncodingSymbol)]: [Function: isEncoding] }
console.log(body)
//! body = {"username":"Jono","text":"Do my bidding!"}
body = JSON.parse(body)
console.log(body)
//! body = { username: 'Jono', text: 'Do my bidding!' }
print.results.push(body) // 만든 그릇에 넣어주기
response.writeHead(201, headers)
response.end(JSON.stringify(print))
})
} else {
response.writeHead(404, headers)
response.end()
}
} else if (request.method === "GET") {
if (request.url === "/messages") {
response.writeHead(200, headers)
response.end(JSON.stringify(print))
response.end(print)
} else {
response.statusCode=404
response.end()
}
}
};
http 모듈 사용
// basic-server.js
const http = require("http")
const PORT = 5000
const ip = "localhost"
const server = http.createServer((request, response) => {
console.log(request.method, request.url)
// 메소드는 GET, POST 등 // url은 /뒤의 path
// POST /upper 와 같은
console.log(request.headers)
// {
// 'content-type': 'text/plain', //! 이 부분도 바꿔서 들어오는 request타입을 지정할 수 있다
// 'user-agent': 'PostmanRuntime/7.26.5',
// accept: '*/*',
// 'postman-token': '28d6093e-5178-42f2-8018-f92837b107a7',
// host: 'localhost:5000',
// 'accept-encoding': 'gzip, deflate, br',
// connection: 'keep-alive',
// 'content-length': '10'
// }
if (request.method === "OPTIONS") {
response.writeHead(200, defaultCorsHeader)
response.end()
}
if (request.method === 'POST' && request.url === '/lower') {
let body = [];
//! request.on("data", 콜백함수).on("end", 콜백함수)
//! 이 부분은 이벤트리스너같은 것 btn.addEventListner("click", 함수)
request
//? 청크를 모아서 배열에 넣자
// 유투브 동영상은 청크(조각, 덩어리)로 온다. 이들을 받아서, 배열에 하나씩 넣어주자
// chunk는 버퍼type
// 버퍼링하는 과정을 스트림이라고 볼 수 있다.
//
// 요청은 이런식으로 생겼다
//* (header)
//* POST /upper HTTP 1.1
//* User-Agent : chrome
//* Content-Type : application/json
//*
//* (body)
//* willy
//* blabla.........
//* brabra.........
// 처럼 바디가 길어질 수 있다.
// 따라서 이것을 청크로 끊어서 가져오는 것이다.
// 따라서 청크를 합치면 바디이다.
.on('data', (chunk) => {
body.push(chunk);
})
//? 버퍼가 담긴 배열을 합쳐서 문자열로 만들자
.on('end', () => {
body = Buffer.concat(body).toString(); // Buffer는 내장 메소드
console.log(body)
console.log("body-----------------")
response.writeHead(201, defaultCorsHeader)
response.end(body.toLowerCase()); // 응답은 한번만 // 두번오면 서버가 죽음
});
}
if (request.method === 'POST' && request.url === '/upper') {
let body = [];
request.on('data', (chunk) => {
body.push(chunk);
}).on('end', () => {
body = Buffer.concat(body).toString();
console.log(body) // willy이므로 이 body에 toUpperCase()를 적용시켜주면 된다.
console.log("body-----------------")
response.writeHead(201, defaultCorsHeader)
response.end(body.toUpperCase());
});
}
})
server.listen(PORT, ip, () => {
console.log("서버가 열렸다리")
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 // 프리플라이트에 대한 유지시간
};
// basic-server.js
delilah's journey