본문 바로가기

Web Development/Back-end

Express - Router(라우터)

라우터란?

"라우팅은 애플리케이션 엔드 포인트(URI)의 정의, 그리고 URI가 클라이언트 요청에 응답하는 방식을 말합니다."

 

즉, URI를 다루는 기법이다.

주소창에

www.tistory.com/manage/~~~~

www.tistory.com/board/~~~~

이런식으로, 카테고리 별로 묶을 수 있다.

 

 

기본적으로 app.get('/manage', 콜백함수) << 이런식으로 다루는 것을 '라우팅'이라고 부른다.

 

이것이

tistory.com/manage

이처럼 한개라면, 

 

tistory.com/manage/board/upload

이런식으로 / 를 더 깊게 카테고리 별로 묶어낼 수 있다.

 

만약,

app.get('/manage/category', 콜백함수);

app.get('/customer/findpassword', 콜백함수);

app.get('/customer/login', 콜백함수);

app.get('/manage/upload', 콜백함수);

app.get('/manage/download', 콜백함수);

 

이런게 수억가지가 있다고 해보자.

얼마나 보기 불편한가?

 

따라서 보다 편리하게 정리해 재사용성을 증대시켜준다.

 

 

사용방법

Express Routing

 

1. Router 를 위한 폴더를 생성한다.

필자는 'Routes'라고 생성했다~

 

2. 그리고 묶을 단위를 설정,

admin과 video 두가지로 묶는다고 가정하고 두개의 파일을 만들어줬다.

3. admin으로 예시를 들겠다.

import express from "express"; //express Router를 사용할 것이므로,

const adminRouter = express.Router(); //이렇게 변수할당을 해서 아래에서 사용.

adminRouter.get('/', (req, res)=> { // www.주소.com/admin/ 어드민의 루트페이지.
    res.send(`Management Page`);
})

adminRouter.get('/enroll', (req, res) => { // www.주소.com/admin/enroll 접속페이지
    res.send(`Enroll Page`);
})

adminRouter.get('/upload', (req, res)=> { // www.주소.com/admin/upload 접속페이지
    res.send(`This is Upload Page`);
})

export default adminRouter; //꼭 꼭 잊지말고, export해줘야 동작한다.

express를 불러온다. (안그럼 라우터 작동못한다. express모듈 라우터라서..)

변수를 선언한다. 원하는 이름으로.. adminRouter라서 이름을 저렇게 지었다.

그리고, 거기에 express.Router() 모듈을 가져와 사용한다.

이제, 이것을 이용해서 .get으로 /admin/원하는 URI를 설정해준다.

그리고 콜백함수설정.

마지막으로 export default adminRouter해줫다.

이거 가끔 빼먹으면 동작 절대 안한다. (내보내서 딴 곳에서 쓸 수 있게 해준다는거다)

 

 

4. 이제 app.js에서 사용한다.

import adminRouter from "./routes/adminRouter";

위 코드를 삽입해 adminRouter를 불러왔다. 어디서? 현재폴더/routes폴더/adminRouter.js 파일

 

app.use('/admin', adminRouter);

 미들웨어 호출하듯이, app.use를 사용한다.

첫번째 인자로, / 카테고리로 묶을 네이밍을 정한다. 위처럼 쓰면, www.주소.com/admin/~~~  이렇게 동작하는 것이다.

두번째 인자로, 위에서 임포트해온 adminRouter를 적용해준다.

 

 

그럼 이제 테스트를 해보자.

위 코드대로 했다면,

 

http://localhost:3000/admin/

http://localhost:3000/admin/enroll

http://localhost:3000/admin/upload

 

세개가 동작해야 정상이다.

필자는 3000번 포트를 썻지만, 다른 포트일 수도있으니 본인 포트 확인할 것.