노드는 자바스크립트 런타임입니다.
노드를 통해 자바스크립트로 서버를 돌릴 수 있지만, 노드 자체가 서버는 아닙니다.
자바스크립트로 서버를 돌리는 것은
const http = require('http'); // 노드가 http라는 모듈을 제공
http.createServer((req, res) => {
});
http.listen(3065);위와 같이 자바스크립트로 http를 통해 코딩을 해주고 위 코드를 노드를 통해 실행을 하면,
노드 런타임을 통해 위 코드를 실행해서 http가 서버 역할을 해줍니다.
서버 구성
npm init'back'폴더를 만들어서 기본적인 package.json파일을 만들어 줍니다.
그 후에 app.js파일을 만들어주고,
// app.js
const http = require('http');
const server = http.createServer((req, res) => {
console.log(req.url, req.method);
res.end('Hello node');
});
server.listen(3065, () => {
console.log('서버 실행 중');
});위와 같은 코드를 작성한 후 'node app.js'로 실행할 수 있습니다.
localhost:3065로 접속하면 Hello ndoe가 있는 것을 확인 할 수 있습니다.
브라우저나 프론트 서버에 대한 요청이 어떤 것인지에 대한 정보는 인자로 들어가 있는
'req'를 통해 확인하고 조회할 수 있고,
응답에 대한 정보는 'res'에 담겨있기 때문에 응답을 보낼 때는 'res'를 통해 보낼 수 있습니다.
여러 줄을 작성하고 싶을 때는
const http = require('http');
const server = http.createServer((req, res) => {
console.log(req.url, req.method);
res.write('Hello node1');
res.write('<p>Hello node2</p>');
res.write('Hello ndoe3');
res.write('Hello node4');
res.end('Hello node');
});
server.listen(3065, () => {
console.log('서버 실행 중');
});이런식으로 write를 통해 보낼 수 있습니다. (html 태그도 보낼 수 있습니다.)
프론트서버에서 보내는 요청을 req.url에 따라 구분해서 받아야 하는데,
const server = http.createServer((req, res) => {
console.log(req.url, req.method);
if(req.method === 'GET') {
if(req.url === '/api/posts') {
}
}
if(req.method === 'POST') {
if(req.url === '/api/post') {
}
}
if(req.method === 'DELETE') {
if(req.url === '/api/post') {
}
}
res.end('Hello node');
});이런식으로 if문을 통해서 하게 되면 코드가 너무 길어지고 지저분해지고
기본 노드가 제공하는 기본 http로는 코드를 깔끔히 쪼개기 어렵기 때문에 구조적으로
코드를 깔끔히 짤 수 있는 'express' 라는 프레임워크를 사용하는 것이 좋습니다.
express
npm i expressexpress도 내부적으로는 http를 사용하기 때문에 서버를 돌릴 수 있습니다.
const express = require('express');
const app = express();
app.listen(3065, () => {
console.log('서버 실행 중');
});위와 같이 http부분을 express가 내부적으로 http를 사용하기 때문에 대체해서 선언해 주시고,
app으로 호출 후 app을 통해 서버를 사용해 줍니다.
위에서 'http.createServer' 부분을 구조적으로 이렇게 바꿀 수 있습니다.
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('hello express');
});
app.listen(3065, () => {
console.log('서버 실행 중');
});get이 메소드이고, '/'가 url역할을 해줍니다.
그리고 위에서 'res.end' 부분을 express에선 'res.send()' 로 사용합니다.
주소창에서 다른 url로 접속하고 싶으면 'get'을 통해 실행할 수 있습니다.
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('hello express');
});
app.get('/api', (req, res) => { // localhost:3065/api
res.send('hello api');
});
app.listen(3065, () => {
console.log('서버 실행 중');
});url은 백엔드 개발자와 프론트 개발자가 협의를 해서 이름을 짓기 때문에,
둘이서 협의만 됐다면 아무렇게나 지어도 무방하지만 보통의 경우에는 의미를 모르게끔
아무렇게나 짓지는 않고 'REST API' 방식으로 많이 짓는다고 합니다.
주로 자주 사용하는 것은
app.get -> 가져오다
app.post -> 생성하다
app.put -> 전체 수정
app.delete -> 제거
app.patch -> 부분 수정
app.options -> 찔러보기 (?)
app.head -> 헤더만 가져오기 (헤더 / 본문(바디)))입니다.
라우터 분리
back폴더 안에 routes라는 폴더를 만든 후 reducer를 나눈 것처럼 post, user 같은
파일들로 나눕니다.
// post.js
const express = require('express');
const router = express.Router();
router.post('/post', (req, res) => {
res.json({ id: 1, content: 'hello' });
});
router.delete('/post', (req, res) => {
res.json({ id: 1 });
});
module.exports = router;여기서 app 대신 'express.Router()'를 호출한 변수인 'router'를 사용합니다.
그리고 분리한 router는
// app.js
import postRouter = require('./routes/post');
.
.
.
app.use('/post', postRouter);
app.listen(3065, () => {
console.log('서버 실행 중');
});이렇게 post가 있던 자리에 넣어주면 됩니다.
그리고 접두어 ('./post')를 import한 곳에 넣어주면 post.js 파일에서 /post는 생략할 수 있습니다.
const express = require('express');
const router = express.Router();
router.post('/', (req, res) => {
res.json({ id: 1, content: 'hello' });
});
router.delete('/', (req, res) => {
res.json({ id: 1 });
});
module.exports = router;