7. 익스프레스 (2) - Router 객체를 통한 라우팅 1

 

 

 

 

 

앞선 아티클에서 우리는 RESTful 서버를 구현하면서 요청 메서드, 그리고 주소별로 분기 처리를 하는 예제를 살펴보았습니다. 

 

 

5. http 모듈로 서버 만들기 (2) - REST와 라우팅 [6]

 

 

보시다시피 if문을 기반으로 라우팅 처리를 진행해서 꽤나 코드가 길고 복잡하다는 것을 알 수 있습니다. 우리가 익스프레를 사용하는 큰 이유 중 하나가 바로 이 라우팅을 간결하게 관리할 수 있다는 점입니다. 

 

app.js에서 app.get과 같은 메서드가 라우터 부분입니다. 그런데 라우터를 많이 연결하게 되면 코드가 당연히 길어지고 지저분해지므로, 익스프레스에서는 라우터를 분리하는 방법을 제공합니다. 이제부터 예제를 통해서 살펴보겠습니다. 

 

 

 

---

 

 

 

- 우선 예제 폴더 내에 [routes]라는 폴더를 생성합니다. 그리고 그 안에 index.js와 user.js를 각각 아래와 같이 생성하겠습니다.

 

 

[routes/index.js]

const express = require('express');

const router = express.Router();

// GET / 라우터
router.get('/', (req, res) => {
    res.send('Hello, Express');
});

module.exports = router;

 

 

 

[routes/user.js]

const express = require('express');

const router = express.Router();

// GET /user 라우터
router.get('/', (req, res) => {
    res.send('Hello, User');
});

module.exports = router;

 

 

 

우선 이렇게 생성된 index.js와 user.js를 app.use를 통해 app.js에 연결합니다. 여기에 에러 처리 미들웨어 위에 404 상태 코드를 응답하는 미들웨어도 하나 추가합니다. 

 

 

[app.js]

const express =require('express');
const morgan = require('morgan');
const cookieParser = require('cookie-parser');
const session = require('express-session');
const dotenv = require('dotenv');
const path = require('path');

dotenv.config();
const indexRouter = require('./routes');
const userRouter = require('./routes/user');

const app = express();
app.set('port', process.env.PORT || 3000);

app.use(morgan('dev'));
app.use(express.json());
app.use(express.urlencoded( {extended: false} ));
app.use(cookieParser(process.env.COOKIE_SECRET));
app.use(session({
    resave: false,
    saveUninitialized: false,
    secret: process.env.COOKIE_SECRET,
    cookie: {
        httpOnly: true,
        secure: false,
    },
    name: 'session-cookie',
}));

app.use('/', indexRouter);
app.use('/user', userRouter);

app.use((req, res, next) => {
    res.status(404).send('NOT FOUND');
});

app.use((err, req, res, next) => {
    console.error(err);
    res.status(500).send(err.message);
});

app.listen(app.get('port'), () => {
    console.log(app.get('port'), '번 포트에서 대기');
});

 

 

- 위 라인 중, indexRouter와 userRouter 선언 과정을 보면 indexRouter에는 ./routes만 작성하는 것을 볼 수 있습니다. 이 때 index.js는 생략할 수 있기 때문이죠. require('.routes/index.js')는 require('./routes')와 같습니다.

 

- indexRouter는 use의 '/'와 get의 '/'가 합쳐져 GET / 라우터가 됩니다.

- userRouter는 use의 '/user'와 get의 '/'가 합쳐져 GET /user 라우터가 됩니다. 

* app.use로 연결할 때는 주소가 합쳐진다는 점을 기억하면 됩니다.

 

이제 app.js를 실행하고 localhost:3000, localhost:3000/user로 접속하면 각각에 해당하는 응답을 받게됩니다.