강의 출처: 노마드코드 유튜브 클론코딩
강의를 듣고 블로그에 글 작성하는 걸로 1:1 문의를 드린 결과 출처만 잘 쓰면 괜찮다고 하셨습니다

지난번에는 req, res, middleware에 대해 배웠으면 오늘은 Router 차례입니다~

Router란 무엇인지?

유튜브로 예를 들자면 보관함, 시청기록, 오프라인 동영상(다운로드한 동영상)을 이동할 때
각각의 이름으로 링크를 만드는 게 아니라,
www.youtube.com/feed/library
www.youtube.com/feed/history
www.youtube.com/feed/downloads

이렇게 feed라는 단어 뒤에 달라지는 글자에 따라서 홈페이지 경로가 달라지는데요

보관함을 user-video-storage, 시청기록을 user-a-viewing-recode, 오프라인 동영상을 user-offline-save-video.. 이렇게 만들면 너무 복잡하고 보기에도 안 좋고 각각의 페이지들을 따로 만들어야 하니까

라우터(라우팅)을 이용해서 홈페이지를 대분류 - 중분류 - 소분류식으로 나누는 작업을 말합니다

공식 문서에 따르면 URL 분리, 그리고 URL가 클라이언트 요청에 응답하는 방식이라고 되어 있지만 쉽게 이해하자면 URL을 목적에 맞게 분리하는 겁니다.. 완전 멀티버스.. 읍읍..

어떻게 사용하나요?

먼저 대분류는 홈페이지의 정체성입니다 제가 클론 코딩 할 주제는 유튜브이기 때문에 대분류를 유튜브로 정했고,
유튜브에 들어갈 기능들은 동영상/유저/검색하기로 나뉠 거고(중분류)
동영상에는 시청, 업로드, 편집, 삭제, 댓글 작성
유저에는 회원 가입, 정보 수정, 회원 탈퇴, 로그인, 로그아웃, 회원 정보 보기
검색은 검색

이렇게 나뉠 거예요 마인드맵처럼 쭉쭉 나가시면 됩니다

👩🏻‍💻 Router 나누기

먼저 server.js(메인 Js 파일)에서 중분류로 나누어 줍니다
이때 메소드는 use를 쓰시면 됩니다
app.use('중분류 경로', 중분류 이름)

app.use('/', global) // 메인페이지, 전역으로 쓰이는 것들(메인 홈, 가입, 로그인, 검색)
app.use('/users', user) // 회원에 관한 모든 것들(회원 정보, 로그아웃, 회원정보 수정, 회원 탈퇴)
app.use('/video', video) // 영상 시청에 관한 것들(영상 업로드, 시청, 영상 수정, 영상 삭제)

Router 만들기

그리고 중분류를 나눴던 이 세 가지를 Router로 만들 건데, src 폴더에 routers 폴더를 따로 만들어서 global, user, video 폴더를 만들어 줍니다

그리고 각각에 Router에 들어가서 소분류를 나누어 주시면 됩니다!

📝 globalRouter.js => 홈, 가입하기, 로그인, 검색

import express from 'express'; // express import는 무조건 해 주셔야 합니다! 안 그러면 인식을 못 해요

const globalRouter = express.Router() // 이제부터 라우터를 사용할 거라고 express한테 미리 언질을 주세요

globalRouter.get('/', trending) // 메인페이지는 트렌딩(알고리즘으로 도배된.. 그 홈)이라고 이름을 지어줬습니다
globalRouter.get('/join', join) 
globalRouter.get('/login', login)
globalRouter.get('/search', search) 

export default globalRouter;

라우터.get으로 각각 라우터를 생성해 주었습니다
공식 문서를 보니 get 말고도 post, put... 등등 여러가지 메소드를 쓸 수 있는 것 같지만
강의에서는 get만 다뤘으니 일단 get 메소드를 사용하겠습니다
get과 post에 대한 차이점은 구글링 조금만 하셔도 나와요

그리고 이 모든 코드들을 server.js와 소통을 해야 하니 express default로 내보내 줍니다

globalRouter에 작성한 것을 토대로 user, video 라우터도 빠르게 작성해 줍니다

📝 userRouter.js => 회원정보, 로그아웃, 회원정보 수정, 회원탈퇴

import express from 'express'; 

const userRouter = express.Router();

userRouter.get(':id', see)
userRouter.get('/logout', logout)
userRouter.get('/edit', edit)
userRouter.get('/remove', remove)

export default userRouter;

유저 정보는 고유한 것이기 때문에 /를 치지 않고 :id로 처리했습니다
밑에 나오는 영상 번호도 같은 방법으로 처리합니다

📝 videoRouter.js => 회원정보, 로그아웃, 회원정보 수정, 회원탈퇴

import express from 'express'; 

const videoRouter = express.Router();

videoRouter.get('/upload', upload);
// 업로드를 아이디보다 위에 두는 이유는 upload를 Id로 인식하지 않기 위함
videoRouter.get('/:id(\\d+)', see);
videoRouter.get('/:id(\\d+)/edit', edit);
videoRouter.get('/:id(\\d+)/delete', deleteVideo);

export default videoRouter;

(\\d+)는 정규식 표현입니다! 영어, 특수문자가 없는 0-9까지의 숫자를 의미합니다

Controller 만들기

중분류인 Router.js에서 소분류를 나눴다면 이 소분류를 가지고 어떠한 기능을 추가해야 하는데, router.js에서 하기에는 코드가 상당히 길어지기도 하고 목적에 맞게 파일 분류를 하기 위해 src에 controllers 폴더를 하나 더 생성해 줍니다

이때 globalController.js는 만들지 않고 소분류 목적에 맞게 userController.js나 videoController.js에 넣어 줍니다
예) globalRouter의 login -> userController.js, trending(홈) -> videoController.js

📝 userController.js

export const join = (req, res) => res.send('Join page');

export const edit = (req, res) => res.send('edit user');

export const remove = (req, res) => res.send('정보삭제');

export const login = (req, res) => res.send('Login');

export const logout = (req, res) => res.send('logout');

export const see = (req, res) => res.send('see my profile');

각각의 기능들을 변수로 만들어 주고 res.send()로 해당 홈에 진입했을 시 보여 줄 메시지를 return 해 줍니다

그리고 변수로 만들어 둔 기능들을 각각 export 해서 router 파일과 소통을 시켜 주면 됩니다

📝 videoController.js

export const trending = (req, res) => res.send('여기는 홈페이지');

export const see = (req, res) => res.send('동영상 시청하기');

export const edit = (req, res) => res.send('동영상 수정하기');

export const search = (req, res) => res.send('Search');

export const upload = (req, res) => res.send('동영상 업로드 성공');

export const deleteVideo = (req, res) => res.send('동영상 삭제');

그리고 다시 router.js에 들어가서 controller.js에서 export한 것들을 import로 불러와 줍니다

📝 userRouter.js

import { edit, remove, see, logout } from '../controllers/userController';

📝 videoRouter.js

import { see, edit, upload, deleteVideo } from '../controllers/videoController';

export default를 통해 통째로 export한 것이 아니라면 import 할 때 중괄호를 써서 controller.js에서 변수로 설정해 준 이름과 똑같이 불러와야 합니다!

결과물

localhost:4000으로 들어가면 trending으로 설정해 준 홈 화면이,
localhost:4000/video/1/edit으로 들어가면 아이디가 1인 영상의 수정 화면이,
(이때 1은 정규식으로 설정해 두었던 영상 고유의 번호입니다)
localhost:4000/join으로 들어가면 회원가입 페이지가 나옵니다

어려웠지만 마인드맵이라고 생각하고 조금씩 확장해 나가면 하나도 어렵지 않은 것 같은.. 어렵나..? 하지만 재미있는 Router..