router와 app.use()

express의 가장 큰 장점인 routing은 Request가 왔을 때 원하는 경로에 따라 적절한 방향으로 경로를 안내해 주는 것을 말합니다. 쉽게 말해서 URI와 method에 맞는 콜백함수를 어떤 걸 호출할지 알려주는 것을 의미합니다.

router는 어떻게 이용하는 걸까요?

express의 router를 사용하기 위해 필요한 파일 및 폴더
/routes
   /router.js
/app.js

router를 사용하기 위해서는 기본적으로 서버 구동을 시킬 app.js와, routes 폴더가 필요합니다.

app.js에서는 전반적인 서버 설정 관련 코드들이 있다면 routes 폴더에는 여러 router파일들이 모여있는 것을 말하는데요. 이때 이 router.js는 특정 기능끼리 묶어서 사용하는 경우가 많습니다. 예를 들어 사용자에 대한 router이다 하면 user.js 혹은 users.route.js 등등 user와 관련된 router이고, 게시판이다 하면 board.js와 같은 명칭으로 사용할 수 있습니다.

이렇게 보면 궁금해지는게 생기는데요 routes폴더 안에 router.js를 만들어주면 끝인 걸까요? 정답은 사용할 수 없습니다 그래서 사용방법을 알아보려 합니다.

 

router 사용하기

router를 사용하기 위해서는 app.js와 routes폴더의 router.js들이 필요하다 했는데요. 이 router를 사용하기 위해서는 우리는 모듈이라는 개념을 알고 넘어가야 합니다. 어? 모듈은 설치하는 거 아닌가요? 할 수 있는데 모듈은 우리가 만들 수도 있습니다. 이번에 router를 이용하기 위해서 모듈을 만들어 보려 하는데요. router.js에서 모듈을 만들고 app.js에서 이 모듈을 사용하는 것입니다.

router.js

const express = require('express');
const router = express.Router();

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

module.exports = router;

router.js에서는 router를 사용하기 위해 express 모듈과 express의 Router함수를 변수로 지정을 해줍니다. 그리고 app.get(경로, 콜백함수) 구조를 router.get(경로, 콜백함수)로 변경을 해준 뒤에 module.exports를 통해 router를 모듈로 만들어주면 router를 시작할 준비가 끝이 나게 됩니다.

app.js

const express = require('express');
const app = express();
const rootRouter = require('./routes/router');

app.use('/',rootRouter)

app.listen(8080)

그렇다면 app.js에서는 어떤 일을 해줘야 router를 이용할 수 있는 걸까요? 바로 모듈화 된 router.js를 app.js에서 사용할 수 있게 지정을 해줍니다. 그리고 app.use()를  통하여 router의 경로와, 모듈을 작성해 주면 router를 사용할 수 있게 되는 것입니다.

app.use()란?

app.use()는 서버가 구동하기 전에 세팅을 해주는 것을 의미하는데요 쉽게 말해서 우리가 공부하기 전에 책상을 치우고 책은 어디에 두고 볼펜은 어디에 두고 공부하기 전 효율적으로 자리배치 하는 것처럼 서버를 만들기 전에 필요한 것들을 준비하는 작업을 말하는 것입니다.

 

app.use에서 설정하는 경로는 무엇인가?

기존에 app.use를 사용할때는 경로를 사용한적이 없는데요 router를 사용할때는 경로를 사용하던데 이때 경로는 어떤걸 의미하는건가요? 제일 처음 router를 작업했을때 들었던 생각이었습니다. 이 경로는 내가 마음대로 작성을 하는것이 아니라 URI의 공통path를 가져오는곳입니다.

/login, /join, /mypage 과 같이 경로가 전부 다른경우에는 기본적으로 root부터 시작한다해서 /를 사용을 하고
/channels, /channels/:user, /channels/:user/:num이라 했을때 공통 path인 /channels가 경로로 들어오게 되는것입니다.
공통 path를 적으면 끝이 날까요?
경로를 지정해주고 router 안의 경로를 수정하지 않으면 /channels/channels, /channels/channels/:user, /channels/channels/:user/:num 처럼 URI가 완전히 다른 URI로 탄생하게 되기 때문에 공통path를 경로에 작성했다면 router URI 부분을 수정을 해 주어야합니다.

 

app.use(경로) 사용 예시

<변경전> app.js

const express = requrie('express');
const app = express();
const channelRouter = requrie('./routes/channels');

app.use("/", channelRouter);

<변경전> channels.js

const express = requrie('express');
const router = experess.Router();

router.get('/channels', 콜백함수)
router.get('/channels/:user', 콜백함수)
router.get('/channels/:user/:num', 콜백함수)

module.exports = router;

---

<변경후> app.js

const express = requrie('express');
const app = express();
const channelRouter = requrie('./routes/channels');

app.use("/channels", channelRouter);

<변경후>channels.js

const express = requrie('express');
const router = experess.Router();

router.get('/', 콜백함수)
router.get('/:user', 콜백함수)
router.get('/:user/:num', 콜백함수)

module.exports = router;