express 를 쓰기 전에는 원래 내장 객체인 http를 불러서 서버를 만들어야합니다.
const http = require('http');
http.createServer((req, res)=>{
res.writeHead(200, { 'Content-Type' : 'text/html; charset=utf-8'});
res.write(`<h3>안냐세염</h3>`)
})
.listen(4000, ()=>{
console.log('4000포트에서 대기중입니다..')
})
하지만 http로 서버를 만들게되면, if로 처리하는 분기가 너무 많아져서 복잡해집니다. 아래는 복잡해지는 예시입니다.
const http = require('http');
http.createServer( async (req, res)=>{
try{
if(req.method === 'GET'){
if(req.url === '/'){
~~
}
} else if ( req.method === 'POST'){
if ( req.url ==='~~')
}
} catch (err){
~~
}
})
.listen(4000, ()=>{
console.log('4000포트에서 대기중입니다..')
})
또한, http방식을 사용해서 request의 body를 받아오게되면 스트림 방식으로 버퍼를 하나씩 모두 모아서(concat) string문자로 바꿔주어야하는데, 그 방식또한 express에 비해 복잡해집니다.
대충 요약된 예제입니다.
http.createServer((req, res)=>{
if( req.method === 'POST'){
if (req.url === '/'){
let body = '';
req.on('data', data => {
body += data;
})
}
}
})
- url에 따른 분기처리가 if문으로 들어가 if문 지옥이 시작된다.
- request의 body를 우리가 파싱해서 데이터를 정리해 사용해야한다.
- 쿠키를 받아올 때도, 쿠키를 문자열로 나누고,, 데이터를 정리해 객체로 만들어주어야하는데, 이런건 매우 비효율적입니다 ㅠ
따라서 이런 것들은 express를 활용하면 쉬워집니다.
● express
const express = require('express');
const app = express();
app.listen(4000, ()=>{
console.log('안녕하세요? 4000에서 서버가 대기중입니다.')
})
서버 만들기 끗;; 겁나 쉽죠잉?
근데 대부분 환경변수에 port가 입력되어있으면 그 포트를 쓰고 없다면 4000번을 쓰겠다고 입력해줍니다.
const express = require('express');
const app = express();
const port = process.env.PORT || 4000;
app.listen(port, () => {
console.log(`server is listening at localhost:${process.env.PORT}`);
});
그리고 http 모듈에서는 각각 메서드와 url에 따라 분기처리를 해줘야해서 if문 지옥이었지만, express에서는 한방에 처리가됩니다.
const express = require('express');
const app = express();
const port = process.env.PORT || 4000;
app.get('/', (req, res) => {
res.send('안녕?')
});
app.post('/', (req, res) => {
res.send('포스트..햇니?')
});
app.listen(port, () => {
console.log(`server is listening at localhost:${process.env.PORT}`);
});
app. get, post 들로 한방에 분기처리가 해결! 확실히 더 코드가 보기 편합니다.
● morgan
npm i -D morgan
morgan같은 경우는 서버 콘솔창에 요청마다의 기록을 콘솔에 찍어줍니다.
const express = require('express');
const morgan = require('morgan');
const app = express();
app.use(morgan('dev'));
const port = process.env.PORT || 4000;
app.get('/', (req, res) => {
res.send('안녕?')
});
app.listen(port, () => {
console.log(`server is listening at localhost:${process.env.PORT || 4000}`);
});
'dev'는 개발용이고, combined는 배포용이라고합니다. 이외에 common속성도 있음
● express.json, express.urlended
예전에는 request의 body, 즉 요청의 바디를 파싱하기위해 버퍼를 합쳐줘서 문자열로 변환시켜주어야했는데, body-parser로 쉽게 해결할 수 있었습니다. 하지만 그것도 옛날 방식이며 요즘은 바디를 파싱해주는 객체가 express 자체에 내장되어있기 때문에, 이를 사용하기로합니다.
const express = require('express');
const morgan = require('morgan');
const app = express();
app.use(morgan('dev'));
app.use(express.json());
app.use(express.urlencoded({extended : 'false'}));
const port = process.env.PORT || 4000;
app.get('/', (req, res) => {
res.send('안녕?')
});
app.listen(port, () => {
console.log(`server is listening at localhost:${process.env.PORT || 4000}`);
});
- json도 모두 res로 json을 보내줄 때에도, json.stringify해서 보내주어야했는데, 이 또한 해결 됨 + 바디 파싱
- urlencoded의 extended는 폼태그의 쿼리파라미터를 해결해주는 부분이라고 합니다.
● cookie-parser
쿠키 이제 우리가 파싱 안해도 됨 .. 알아서 객체로 만들어줌
const express = require('express');
const morgan = require('morgan');
const cookieParser = require('cookie-parser');
const app = express();
app.use(morgan('dev'));
app.use(express.json());
app.use(express.urlencoded({extended : 'false'}));
app.use(cookieParser());
const port = process.env.PORT || 4000;
app.get('/', (req, res) => {
res.send('안녕?')
});
app.listen(port, () => {
console.log(`server is listening at localhost:${process.env.PORT || 4000}`);
});
● cors
cors도 알아서 저절로 헤더에 잘 넣어주는 미들웨어 물론, cors의 헤더 사항들은 기입을 해주어야한다.
const express = require('express');
const morgan = require('morgan');
const cookieParser = require('cookie-parser');
const cors = require('cors');
const app = express();
app.use(morgan('dev'));
app.use(express.json());
app.use(express.urlencoded({extended : 'false'}));
app.use(cookieParser());
const corsOptions = {
origin : 'http://localhost:3000',
// credentials : true,
methods : ['GET', 'POST', 'OPTION']
}
app.use(cors(corsOptions));
const port = process.env.PORT || 4000;
app.get('/', (req, res) => {
res.send('안녕?')
});
app.listen(port, () => {
console.log(`server is listening at localhost:${process.env.PORT || 4000}`);
});
대략적인 미들웨어 소개는 이정도?이다..
그리고 만약에 response 응답으로 html과같은 파일을 보내주고 싶을 때는 fs 모듈을 사용해서 readFile을 하고 데이터로 변수를 저장하고.. res.end(data);를 해주어야했다. 근데 express쓰면 좋은게, sendFile로 처리하면 끝이다.
http.createServer(async (req, res) => {
const data = await fs.readFile(__dirname, './index.html');
res.end(data);
});
대충 위와 같았다면,
app.get('/', async (req, res) => {
res.sendFile(__dirname, './index.html');
});
이런식으로 가능해짐.