라우트? 라우터? 라우팅? 라우터 파일에 데이터 넣기.

라우트와 라우터, 라우팅 이라는 말을 정말 많이 접한다. 특히 app과 연관지어서 상당히 많이 나오는데 라우트 와 라우터, 라우팅이 무엇이고, 어떻게 사용하는 것일까?

 

미리 말하자면 이 모든 것은 웹페이지를 보내는 역할을 하는 API를 소분하기 위한 것 이라고 생각하면 되겠다.

 

API가 웹페이지를 보내는 역할을 하는 경우 라우트 라고 한다.

(API와 라우트는 밀접하게 관련되어 있지만, API = 라우트 는 아니다. 라우트는 API의 한 부분이고 API는 더 포괄적인 개념이다.)

 

즉, 프로젝트를 진행하다보면 app.get() 과 같은 API가 나중엔 어마어마 하게 쌓일 것이다. 그러면 한 파일에 이 모든 것을 넣어놓기엔 찾기도 힘들고 읽기도 힘들지 않은가? 때문에 이 API가 웹페이지를 보내는 역할을 하는 경우, 이 API 들을 나눠놓은 것이 바로 라우터, 이러한 과정이 라우팅 이라고 생각하면 된다.

 

특별한 것은 없다. 그냥 이리저리 섞인 물품을 소분하는 것이다. 그러면 한번 파헤쳐보자.

 

라우트? 라우터? 라우팅?

• 라우트(Route) : Express 애플리케이션의 HTTP 메소드와 URL 경로에 매핑되는 코드를 정의한다. 즉, 라우트는 클라이언트의 HTTP 요청이 서버로 전달될 때 해당 요청에 대한 응답을 처리하는 데 사용된다.
• 라우터(Router) : 여러 개의 라우트(Route)를 모아서 하나의 미들웨어로 사용할 수 있도록 도와주는 것이다. 일종의 라우트(Route) 그룹으로 생각할 수 있다.
• 라우팅(Routing) : 클라이언트의 HTTP 요청이 서버로 전달될 때, 해당 요청의 URL 경로에 따라 적절한 핸들러 함수를 찾아서 요청에 대한 처리를 수행하는 것을 의미한다.

즉, 라우트를 모아서 생긴 라우터 를 처리하는 과정이 라우팅이라고 보면 된다.

 

경로? HTTP 메서드? 핸들러 함수?

• 경로(Path): 경로는 URL의 일부분으로, 서버의 리소스 위치를 정의한다.
• HTTP 메서드: HTTP 메서드는 서버가 클라이언트 요청을 처리하는 방식을 정의한다. 주요 메서드로는 GET, POST, PUT, DELETE 등이 있다.
• 핸들러 함수: 핸들러 함수는 특정 경로와 HTTP 메서드에 대해 실행되는 함수로, 요청(req) 객체와 응답(res) 객체를 사용하여 작업을 수행한다.

글로만 봐선 잘 모르겠다. 예시로 봐보자.

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

 

=> 위 예시에서

경로는? '/' ,

HTTP 메서드는? get ,

핸들러 함수는? (req, res) => { res.send('Hello, World')} . 

 

언뜻보면 API가 라우트다 라고 생각 할 수있는데, 아니다. API가 웹페이지를 보내는 역할을 하는 경우 라우트 라고 한다.

단지 저 예시가 웹페이지를 보내는 역할을 하는 API 일 뿐이다.

 

그러니까 app.get( '/lsiron', ...) , app.get('/lsiron/blog', ...) , app.get('/lsiron/tistory', ...) 등 과 같이 lsiron과 관련된 API의 경우 따로 빼서 관리를 해보자 해서 나온 개념이 저 라우트 라우터 라우팅 형제들이다.

 

그러면 사용법에 대해 한번 알아보자.

//app.js

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

app.get('/lsiron/blog', (req, res) => {
  res.send('lsiron blog')
})

app.get('/lsiron/tistory', (req, res) => {
  res.send('lsiron tistory')
})

 

=> 먼저 API를 몇개 만들어주자. 그러면 이 'lsiron'과 관련된 API를 따로 꺼내서 관리를 해야하는데 따로 관리를 하기 위해선 파일을 만들어주어야한다. 이 파일은 일반적으로 'routes' 라는 이름의 폴더에 넣어서 관리한다.

 

// lsiron.js

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

router.get('/lsiron', (req, res) => {
    res.send('lsiron')
})

router.get('/lsiron/blog', (req, res) => {
res.send('lsiron blog')
})

router.get('/lsiron/tistory', (req, res) => {
res.send('lsiron tistory')
})

module.exports = router;

 

=> express를 사용하기 위해, 모듈을 불러와 주고, express의 Router를 사용하기 위해 똑같이 router를 불러와준다.

이해하고 암기할 필요는 없다. npm 공식사이트에 다 있다. 

그리곤 API들을 app 대신 router를 써준다. app.get => router.get .

마지막으로 router 를 다른곳에서도 사용할 수 있도록 module.exports를 통해 모듈을 exports 해준다.

 

// app.js
const lsironRouter = require('./routes/lsiron')

app.use('/', lsironRouter)

 

=> 위와 같이 다시 app.js 로 돌아와서 Router 변수를 생성 해 준뒤, app.use('/' , lsironRouter) 로 미들웨어식으로 작성해준다. (참고로 라우터나 미들웨어를 설정 해 줄때는 app.use로 사용한다.)

 

// app.js

app.use('/', require('./routes/lsiron'))

 

=> 위와 같이 굳이 변수를 설정 해 주지 않고 사용 할 수 있다. 한 눈에 보기 쉽도록 변수를 설정 해 주지 않고 사용해 주는 편이 좋을 것.

 

 

허나 lsiron.js 의 라우터를 보면 router.get( '/lsiron', ...) , router.get('/lsiron/blog', ...) , router.get('/lsiron/tistory', ...) '/lsiron' 경로가 반복 되는것을 볼 수 있다. 이러한 반복을 없애보자.

 

// app.js

app.use('/lsiron', require('./routes/lsiron'))

 

=> app.js 로 와서 경로를 /lsiron으로 바꿔주자. 그러면 lsiron.js의 router들에서 다음과 같이 lsiron을 빼면 된다.

 

// lsiron.js

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

router.get('/', (req, res) => {
    res.send('lsiron')
})

router.get('/blog', (req, res) => {
res.send('lsiron blog')
})

router.get('/tistory', (req, res) => {
res.send('lsiron tistory')
})

module.exports = router;

 

=> 위와 같이 설정하면 lsiron의 반복을 막을 수 있다.

 

이렇게 라우트와 라우터 라우팅의 개념과 사용법에 대해 알아보았다.

 

그런데 여기에서 더 알아볼 것이 있다.

 

express와 가장 친한 데이터베이스 MongoDB를 사용할 때, Router 파일에도 데이터를 넣어줘야 할텐데 이럴경우는 어떻게 해야할까?

(사전에 mongoDB 아이디를 만들고, 터미널을 사용하여 npm i mongodb를 통해 mongodb를 설치 해 주어야 한다.)

 

먼저 app.js 파일이 들어있는 위치에 database.js 파일을 만들어주자.

 

이후, 다음과 같이 코드를 입력해준다. 

// database.js

const { MongoClient } = require('mongodb')
const url = '본인계정 mongodb연결URL'
let connectDB = new MongoClient(url).connect()

module.exports = connectDB

 

=> 이 코드는 외워서 써야하는 것인가? 아니다.

 

이 코드는 아래 npm 공식 사이트에서 가져온 mongodb 기본 설정의 한 부분이며, 원래 mongoDB를 처음 셋팅할 때, mongoDB의 기본설정 코드를  app.js에 넣어주어야 한다.

 

허나 나는 기본 설정을 한눈에 보기 편하게 promise 형태로 바꿔 주었고.

이것의 일부분만 database.js로 옮겨준 것이다. 변경점은 let 변수명으로 connectDB 를 설정 해 준 것이다.

 

https://www.npmjs.com/package/mongodb

// npm 공식 사이트에 나와있는 기본 설정

const { MongoClient } = require('mongodb');

const url = '본인계정 mongodb연결URL';
const client = new MongoClient(url);

const dbName = '본인 프로젝트 이름';

async function main() {
  await client.connect();
  console.log('DB연결 성공');
  const db = client.db(dbName);

  return 'done.';
}

main()
  .then(console.log)
  .catch(console.error)
  .finally(() => client.close());

 

// app.js 로 가져와서 promise 형태로 바꿔준것
  
const { MongoClient } = require('mongodb') 

let db;                
const url = '본인계정 mongodb연결URL';
new MongoClient(url).connect().then((client)=>{
  console.log('DB연결성공')
  db = client.db('lsiron')
}).catch((err)=>{
  console.log(err)
})

 

=> promise 형태로 바꿔준 것이 훨씬 짧고 간결하다.  

 

// app.js

let connectDB = require('./database.js') 

let db
connectDB.then((client)=>{
  console.log('DB연결성공')
  db = client.db('forum')
}).catch((err)=>{
  console.log(err)
})

 

=> 그리곤 app.js로 돌아와서 database.js 경로를 불러와 주고 기본설정 코드에서 database.js 로 가져간 부분을 가져온 변수로 대체하면 된다. 

const { MongoClient } = require('mongodb')        
const url = '본인계정 mongodb연결URL';
new MongoClient(url).connect()

 

=> 즉, 이 부분만 다른 파일로 빼서 변수로 정해주고 exports 해준 뒤, 쓰고 있는 것이다.

 

그러면 이제 처음 우리의 목적은 lsiron.js에서도 데이터를 넣어주는 것 이었다. 그러면 모든 셋팅이 완료되었으니 

이제 lsiron.js 파일로 가보자.

// lsiron.js

let connectDB = require('./../database.js')

let db
connectDB.then((client)=>{
  console.log('DB연결성공')
  db = client.db('forum')
}).catch((err)=>{
  console.log(err)
})

 

=> app.js 에 기본 설정을 했을 때와 똑같이 database.js 경로를 불러와 주고 , app.js에 입력했던 내용을 똑같이 입력해주면 된다. 그러면 lsiron.js 파일에서도 데이터를 넣어줄 수 있다.

 

참고.

lsiron.js 파일은 routes 폴더에 있고, database.js 파일은 app.js 파일과 같은 위치에 있기 때문에 lsiron.js파일 기준으로 상위폴더에 있다. 때문에 './../database.js' 로 입력해주었다.

• /      : 가장 최상의 디렉토리로 이동한다.
• ./     : 파일이 현재 디렉토리를 의미한다.
• ../    :상위 디렉토리로 이동한다.