[MernStack] Blog 만들기 5. Routing-Poster기능 (추가 수정)

3일만에 포스팅합니다 ..  매일 쓸려고 노력하지만 바뻐서 그러질 못한다는..ㅜ (변명처럼 들리지만 변명 맞음 )

* 우선 라우팅이란 ?
 라우팅은 어떤 네트워크 안에서 통신 데이터를 보낼 때 최적의 경로를 선택하는 과정이다. 최적의 경로는 주어진 데이터를 가장 짧은 거리로 또는 가장 적은 시간 안에 전송할 수 있는 경로다  -위키백과-

데이터를 주고 받을때의 최적의 경로라는 뜻입니다.

그럼 Express에서의 라우팅은?
URI(또는 경로) 및 특정한 HTTP 요청 메소드(GET, POST 등)인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것을 말합니다.  -Express Document

사용자가 로그인을 하면 로그인 후의 화면이 나오고,
새로운 글을 쓰면 나의 피드에 새로운 글이 추가되는 모습을 보여지게 되는 것 입니다.

 

1. router를 다룰 폴더와 js생성

자 그러면 먼저  routes라는 폴더를 만들고 그 안에 api 라는 폴더를 또 만들어주고,
api 폴더 안에는 포스트와 관련된 post.js와  유저와 관련된 user.js를 생성합니다.

 

2. post.js작성

import express from 'express';

// Model
import Post from '../../models/post';

const router = express.Router();

//모든 포스트를 검색하는 라우터
// 주소 : api/post
router.get('/',async(req, res)=> {
    const postFindResult = await Post.find();
    console.log(postFindResult, "All Post Get");
    res.json(postFindResult);
})

../ 은 현재 있는 위치에서 상위 한단계로 이동 한다는 뜻이다.
router라는 변수에 express에서 제공하는 Router()라는 함수를 사용한다.

그리고 우리는 포스트를 검색하기 위한 router.get 과 포스트를 작성하는 router.post 를 작성한다.
get 은 쉽게 생각하면 데이터를 가져오는 것.
post 데이터를 보내는 것.
(글은 서버에 저장되어 있으니 글을 찾을땐 서버에서 get해오고, 글을 새로 작성하면 서버에 저장해야하니 서버로 post 하는 것이다)

router.get('/') 을 설명하자면..주소를 설정하는것이다.
현재 위치는 api의 post.js이기때문에 현재 주소는 api/post이고 router.get('/')를 했기에 
 api/post/~ 이런식이다. (이건 나중에 직접 눈으로 보면 이해가 쉬울듯하다..난 아직 보질 못했으나 장고의 모델뷰 패턴을 했기에 어느정도 짐작이 감)

async(req,res) => ~~ await Post.find();
async는 비동기라는 말이다. 말 그대로 동시에 일어나지 않는다? 동시에 하지않는다? 는 뜻이다.
반의어로 동기라는 말이 있는데 동기는 내가 서버에 A를 요청하면 서버가 나한테 A를 줄때까지 다음 일은 안하고 기다리는 것이다.
비동기는 반대이다. 내가  A를 요청하고 그 다음 일을 진행한다. 

async(req,res) 는  서버에  req(request)와 res(response)을 하는 비동기 작업이다.
어떤 작업이냐면 그 다음줄에 있는
Post.find()  : Post를 찾는 작업이다.
하지만 앞에 await 라는 명령어가 있다 .
이 말은 Post.find()를 끝낼때까지 다음 문장을 실행하지 않고 기다리겠다라는 명령이다.
결국 동기랑 똑같은 의미다

이젠  밑에 추가로 글을 작성하는 라우터이다.

// 글을 작성
router.post('/', async(req,res, next) => {
    try {
        console.log(req, "글 작성 req");
        //req.body.title, req.body.contents, req.body.fileUrl, req.body.creator
        const {title, contents, fileUrl, creator} = req.body;
        const newPost = await Post.create({
            title, contents, fileUrl, creator
        });
        res.json(newPost);
    } catch (e) {
        console. log(e);
        
    }
})

export default router

 

이젠 글을 작성하는 post다.
req.body에서  title, content, fileUrl, creator을 가져온다.
(import Post from '../../models/post';  했던 이유)

여기도 비동기식과 await문으로 글을 작성하는 로직이다.
Model의 post.js를 보면 title, contenst, fileUrl, creator에는 required라는 필수적인 옵션이 있기때문에 
newPost에 필수적인 속성들을 담아주고
response를 json 포맷으로 응답해준다.

전체코드
<routes/api/post.js>

import express from 'express';

// Model
import Post from '../../models/post';

const router = express.Router();

//모든 포스트를 검색하는 라우터
//api/post
router.get('/',async(req, res)=> {
    const postFindResult = await Post.find();
    console.log(postFindResult, "All Post Get");
    res.json(postFindResult);
})

// 글을 작성
router.post('/', async(req,res, next) => {
    try {
        console.log(req, "글 작성 req");
        //req.body.title, req.body.contents, req.body.fileUrl, req.body.creator
        const {title, contents, fileUrl, creator} = req.body;
        const newPost = await Post.create({
            title, contents, fileUrl, creator
        });
        res.json(newPost);
    } catch (e) {
        console. log(e);
        
    }
})

export default router

 

다음  app.js 로 들어가서

import postRoutes from './routes/api/post';  //위쪽 import 부분에 추가


app.use('/api/post', postRoutes) // 아래쪽  app.get("/")에 추가 해주었음

 

 를 추가해 주고
npm run dev 를 해주어 실행 시켜주면 된다.

----추가-----
app.use(hpp());  에 에러 뜨신 분들은 import를 안해서 에러가 뜨는겁니다.
전(4번째) 포스팅에 추가 import 한 내용을 적지 못했습니다.(추가 수정하였습니다)

import hpp from 'hpp';;
import helmet from 'helmet';
import cors from 'cors'
import morgan from 'morgan

추가 해주세요.