23.04.29. express routes index에서의 export 이름 설정

Issue

Express를 미들웨어로 사용하던 중, routes 폴더에서 index.js를 사용기 위해 아래와 같이 코드를 만들었다.

const express = require("express")
const router = express.Router()
const usersRouter = require("./users")
const postsRouter = require("./posts")
const commentsRouter = require("./comments")

router.get("/", async (req, res) => {
    res.send("")
})

module.exports = { router, usersRouter, postsRouter, commentsRouter }

그리고선, app.js에서 아래와 같이 routes를 불러왔는데, 안된다.

const express = require("express")
const cookieParser = require("cookie-parser")
const { indexRouter, usersRouter, postsRouter, commentsRouter } = require("./routes")
const app = express()
const PORT = 3018

// cookie-parser 사용
app.use(cookieParser())

// request json parsing, route 사용
app.use(express.json())
app.use('/api', [indexRouter, usersRouter, postsRouter, commentsRouter])

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

// 서버 실행
app.listen(PORT, () => {
    console.log(`Server is listening on port ${PORT} now.`);
});

---

Try&Error

우선 원인을 파악해야 하니, app.js에서 require("./routes") 로 받은, 

indexRouter, usersRouter, postsRouter, commentsRouter 를 콘솔로그로 출력해봤다.

 

다른건 값이 있는데, indexRouter는 undefined로 나오는 것. 이상하다. 

 

혹시나해서 ./routes/index.js 의 export할 때, router 이름을 동일하게 바꿔줘봤다.

 

const express = require("express")
const indexRouter = express.Router()
const usersRouter = require("./users")
const postsRouter = require("./posts")
const commentsRouter = require("./comments")

indexRouter.get("/", (req, res) => {
    res.send("")
})

module.exports = { indexRouter, usersRouter, postsRouter, commentsRouter }

이랬더니 정상 동작한다. 

 

아니, 근데 ./users나 ./posts, ./comments 모두 export할 때, 그냥 router로 설정하고, require로 받아올 때 이름만 바꿔줘도 됐는데.. index는 아닌가?

 

아니다.

 

사실은 객체의 구조 분해 할당을 오해한 결과였다. Destructuring assignment!

 

./routes/index.js 에서 export할 때, 객체로 감싸서 보냈는데, 이때, 

// 이렇게 보냈었는데,
module.exports = { router, usersRouter, postsRouter, commentsRouter }

// 실은 이렇게 보내지는 것이다.
module.exports = { router: router, 
                   usersRouter: usersRouter, 
                   postsRouter: postsRouter, 
                   commentsRouter: commentsRouter }

이걸 받는 것도, 객체의 key값을 가지고 받아야 했는데, 그걸 다른 이름으로 받았으니, undefined가 뜰 수 밖에.

// 이렇게 받아버리면,
const { indexRouter, usersRouter, postsRouter, commentsRouter } = require("./routes")

// 실제로는
const { indexRouter: indexRouter,
        usersRouter: usersRouter, 
        postsRouter: postsRouter, 
        commentsRouter: commentsRouter} = { router: router, 
                                            usersRouter: usersRouter, 
                                            postsRouter: postsRouter, 
                                            commentsRouter: commentsRouter }
                                            
// 처럼 되는 것이고, indexRouter라는 키가 없으니, undefined가 되는 것.

---

Solution

그러니까, 이렇게 코드를 수정하면 된다.

./routes/index.js를 수정해서 이렇게 정리하거나,

// ./routes/index.js

const express = require("express")
const router = express.Router()
const usersRouter = require("./users")
const postsRouter = require("./posts")
const commentsRouter = require("./comments")

router.get("/", async (req, res) => {
    res.send("")
})

module.exports = { indexRouter: router, usersRouter, postsRouter, commentsRouter }

// ./app.js

const express = require("express")
const cookieParser = require("cookie-parser")
const { indexRouter, usersRouter, postsRouter, commentsRouter } = require("./routes")
const app = express()
const PORT = 3018

// cookie-parser 사용
app.use(cookieParser())

// request json parsing, route 사용
app.use(express.json())
app.use('/api', [indexRouter, usersRouter, postsRouter, commentsRouter])

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

// 서버 실행
app.listen(PORT, () => {
    console.log(`Server is listening on port ${PORT} now.`);
});

 

아니면, app.js에서 router로 받으면 된다.

// ./routes/index.js

const express = require("express")
const router = express.Router()
const usersRouter = require("./users")
const postsRouter = require("./posts")
const commentsRouter = require("./comments")

router.get("/", async (req, res) => {
    res.send("")
})

module.exports = { router, usersRouter, postsRouter, commentsRouter }

// ./app.js

const express = require("express")
const cookieParser = require("cookie-parser")
const { router, usersRouter, postsRouter, commentsRouter } = require("./routes")
const app = express()
const PORT = 3018

// cookie-parser 사용
app.use(cookieParser())

// request json parsing, route 사용
app.use(express.json())
app.use('/api', [router, usersRouter, postsRouter, commentsRouter])

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

// 서버 실행
app.listen(PORT, () => {
    console.log(`Server is listening on port ${PORT} now.`);
});

---

Learned

구조분해할당... 어설프게 알았다가 한참 답답했지만, 확실히 알고 넘어가게 되었다.

---