CRUD 연습해보기 - 라우팅 설정

Goody·2021년 3월 16일
0

블로그만들기

목록 보기
2/10
post-thumbnail

지난 글에서는 블로그 만들기를 위한 기본 프로젝트 세팅을 마쳤다.
이제 블로그에 보여질 다양한 웹페이지를 연결해줄 라우팅을 본격적으로 세팅해보자.


1. routes/articles.js 생성

라우팅 코드들이 들어갈 디렉토리 및 파일을 생성해준다.


2. 라우팅 설정

// articles.js
const express = require('express');
const router = express.Router();

router.get('/', (req, res) => {
    res.send('In articles');
})

module.exports = router;

앞서 server.js 에서 설정해줬던 라우팅을 article.js 을 해주고, export 함으로써 서버와 라우팅의 역할을 분리할 수 있다.


3. server.js 에서 라우팅 파일 불러오기

// server.js
const articleRouter = require('./routes/articles');
app.use('/articles', articleRouter);

블로그의 포스팅(article)과 관련된 웹페이지는 모두 로컬주소/aritlces 에서 연결할 계획이므로, 로컬주소/articles 주소에서 위 2번에서 가져온 articleRouter 를 불러온다.
이제 articleRouter에 추가하는 라우팅은 모두 로컬주소/articles 주소를 root로 가진다.


localhost:5001 에는 여전히 index.ejs 가 렌더링되지만,


localhost:5001/articles 에는 articles.js 에서 보내온 In articles 가 렌더링되고있다.


3.1 라우팅 테스트

2번 코드를 다시 보자. get 메서드 안의 주소를 / 에서 /test 로 바꾸면 어떻게 될까?

// articles.js
router.get('/test', (req, res) => {
    res.send('In articles');
})

로컬주소/test 에 접근해도 res.send() 안의 내용이 렌더링되지 않는다. 왤까?

💡 라우팅 코드만 보면 로컬주소/test 에서 "In articles" 가 렌더링 되어야 할 것 같지만,
server.js 에서 articleRouter의 기본 주소를 /articles 로 설정했으므로,
로컬주소/articles/test 로 접근해야 "In articles" 를 볼 수 있다.

이제 router.get 안의 주소를 다시 / 로 바꿔놓자.


위에서 설정한 라우팅 외에도,
웹 페이지를 추가하면서 계속해서 라우팅 설정을 해줘야 한다.
그래도 일단 기본적인 라우팅 설정에 대한 개념은 이정도면 됐다.

2개의 댓글

comment-user-thumbnail
2021년 3월 20일

3/20 완료 🙋🏻‍♀️

1개의 답글