Express로 Routing하기

전에 언급했던거 처럼 node자체가 서버가 아니라 노드에서 제공하는 http 모듈이 서버인 것이다.

// app.js

const http = require('http');

이제 express를 써보자. 

// app.js

const express = require('express');

const app = express();

app.ge('/', (req, res) => {
    res.send('hello express');
})


server.listen(3065, () => {
    console.log('서버 실행 중');
});

node 로 돌리면 에러가 나니까 express를 설치를 해주고

만약 server localhost3065 서버 뒤에 api로 하고싶다 그러면 어떻게 해야 할까? 아래와 같이 하면 된다.

 

const express = require('express');

const app = express();

app.get('/', (req, res) => {
    res.send('hello express');
})

app.get('/api', (req, res) => {
    res.send('hello api');
})

app.listen(3065, () => {
    console.log('서버 실행 중');
});

 

그리고 아래에 api들은 보통 json으로 응답을 한다.

// app.js

app.get('/api/posts', (req, res) => {
    res.json([
        { id: 1, content: 'hello'},
        { id: 2, content: 'hello2'},
        { id: 3, content: 'hello3'},
    ]);
})

app.post('/api/post', (req, res) => {
    res.json({ id: 1, content: 'hello' });
});

app.delete('/api/delete', (req, res) => {
    res.json({ id: 1 });
});

posts

위에 코드에서 post랑 delete를 보내고 싶으면 어떻게 해야할까?

브라우저 주소창은 GET 요청이여서 post랑 delete 보내려면 프론트에서처럼 axios 같은걸로 js로 post 요청을 하거나 postman을 써야한다.

// app.js

app.post('/api/post', (req, res) => {
    res.json({ id: 1, content: 'hello' });
});

 

get post delete 아래와 같은 주소들도 모두 백엔드 개발자와 협의를 하는거다. 즉 협의만 된다면 마음대로 지어도 된다.

프론트와 백엔드 개발자 둘다 주소를 알고 있다면 상관이 없다. 

app.post('/api/post', (req, res) => {
    res.json({ id: 1, content: 'hello' });
});

app.delete('/api/poasdasdasdasdasdasdasdasdst', (req, res) => {
    res.json({ id: 1 });
});

 

보통은 restAPI방식으로 많이 짓는다.

자주 쓰는게 app.get, app.post, app.put, app.delete, app.patch, app.options, app.head 요정도를 자주쓴다.

app.get => 게시글 정보나 사용자 정보 가져오다
app.post => 생성
app.put => 전체 수정
app.delete => 제거
app.patch = >부분수정
// 전체수정과 부분수정은 사용자 정보가 있는데 닉네임만 수정하는 거는 사용자에 대한 부분수정이다.
=> patch
// 전체수정 할일은 많지는 않다. 게시글 같은 것도 컨텐츠 같은거만 수정하는 거니까 부분수정이라고 봐도 되고
전체수정은 아예 통째로 덮어 씌우는거 그런거 아니면 put은 잘 쓰지 않는다.
=> put 잘 쓰이지 않는다.

app.options => ex)요청 보낼수 있다라고 찔러보기 (서버야 내가 요청 보내면 받아줄거야??)
app.head => 헤더만 가져오기 (헤더/바디)

ex)

app.post('/login') => 메인 페이지를 가져온다.
app.post('/post') => 게시글 가져오면서 조회수 1 올린다.

그래서 프론트 개발자랑 백엔드 개발자가 합의를 해놓으면 되고 리스트에 대한거는 문서로 뽑으면 된다.

여기사이트(swagger)도 참고하자.

// app.js


// '/' list에 대한거
app.get('/', (req, res) => {
    res.send('hello express');
})

하지만 아래와 같이 라우터들이 계속 생기면 코드가 엄청 길어질 것이다.(라우터들이 계속해서 있음)

이러한 라우터들을 불리를 해보자.

const express = require('express');

const app = express();

app.get('/', (req, res) => {
    res.send('hello express');
})

app.get('/api', (req, res) => {
    res.send('hello api');
});

app.get('/api/posts', (req, res) => {
    res.json([
        { id: 1, content: 'hello'},
        { id: 2, content: 'hello2'},
        { id: 3, content: 'hello3'},
    ]);
})

// 라우터 증식
app.post('/api/post', (req, res) => {
    res.json([{ id: 1, content: 'hello'},]);
});

app.post('/api/post', (req, res) => {
    res.json([{ id: 1, content: 'hello'},]);
});

app.post('/api/post', (req, res) => {
    res.json([{ id: 1, content: 'hello'},]);
});

app.post('/api/post', (req, res) => {
    res.json([{ id: 1, content: 'hello'},]);
});

app.post('/api/post', (req, res) => {
    res.json([{ id: 1, content: 'hello'},]);
});

app.post('/api/post', (req, res) => {
    res.json([{ id: 1, content: 'hello'},]);
});

app.post('/api/post', (req, res) => {
    res.json([{ id: 1, content: 'hello'},]);
});

app.post('/api/post', (req, res) => {
    res.json([{ id: 1, content: 'hello'},]);
});

app.post('/api/post', (req, res) => {
    res.json([{ id: 1, content: 'hello'},]);
});


app.delete('/api/post', (req, res) => {
    res.json({ id: 1 });
});



app.listen(3065, () => {
    console.log('서버 실행 중');
});

 

 

 

 

<출처 조현영: [리뉴얼] React로 NodeBird SNS 만들기>

https://www.inflearn.com/course/%EB%85%B8%EB%93%9C%EB%B2%84%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%89%B4%EC%96%BC/dashboard

[리뉴얼] React로 NodeBird SNS 만들기 - 인프런 | 강의