express 서버구축하기 (3) - Routers

Express 4.x - API 참조

Routers 

url이 어떻게 시작하는지에 따라 나누는 방법. controller와 url 관리를 쉽게해준다. 라우터를 설정하기 전에 어떤 데이터가 필요한지 정리하는게 좋다. 라우터는 작업중인 주제를 기반으로 URL을 그룹화해준다. 그룹화를 하지 않으면 /edit-user-blabla 이런식으로 적어야 하기 때문에 복잡해 보인다. 도메인을 기반으로 users와 videos 구분함

 

README.md # Wetube - youtube clone /  --> home /join --> Join /login --> Login /search -> Search /edit-user -> Edit User /delete-user -> Delete User /watch-video -> Watch Video /edit-video -> Edit Video /delete-video -> delete Video

README.md # Wetube - youtube clone //globla router /  --> home /join --> Join /login --> Login /search -> Search //user router /users/edit -> Edit User /users/delete -> Delete User //video router /videos/watch -> Watch Video /videos/edit-> Edit Video /video/delete -> delete Video /video/commnet -> comment on a video /videos/commnet/delete -> Delete A Commnet of a video

user / video router 처럼 join, login, search도 아래와 같이(*/users/join) 만들어 줘야 하지만 가끔 예외로 만들기도 한다. 마케팅 측면으로 활용도가 높아지고 URL을 깔끔하게 만들 수 있다.

 

Router 생성하기

const userRouter = express.Router();

const handleUserEdit = (req, res) => res.send("user edit");

userRouter.get("/edit", handleUserEdit);

app.use("/users", userRouter);

코드를 작성할 때 /users/edit를 불러온적이 없다. 단지 라우터를 활용하여 제작한 결과화면이다. /users 라는 곳을 찾을경우 expresss는 userRouter에 접속해서 edit를 찾는다.  /user/edit 라는 url을 만들 수 있다.

 

Router 관리하기

라우터는 관리할 때는 폴더 / 파일로 나누어 구분, 관리하는 것이 깔끔하다. 한 곳에서 모든 라우터를 적용하면 코드가 길어지기 때문에 가독성이 떨어지고 보기 힘들어진다. node.JS 폴더 및 파일은 독립적인 개체로 서로에게 영향을 주지 않지만 필요에 따라 import & export하여 정보를 주고 받을 수 있다. (import express from "express"와 같은...)

컨트롤하는 파일과 라우터 파일을 나눴다. 라우터는 종류에 따라 나눠서 폴더를 생성했다. 기존 코드에서 잘라내기하여 붙여넣었다.

처음부터 모든 폴더 및 파일을 생성하여 쪼개서 작업하는 것보다 머릿속의 코드를 한곳에 적어두고 수정하면서 폴더를 나눠 작성하는 방법이 매우 효율적이다.

 

라우터 파일을 새로 만들었기 때문에 epress를 다시 불러와야 한다. 코드는 작성했던 코드를 복사&붙여넣기 해서 나눠줬다. 이렇게 만든 파일들은 독립적인 개체이기 때문에 server.js에서 globalRouter라는 변수를 인식하지 못한다. 해결하기 위해 globalRouter.js에서 export를 해야한다. 파일 전체를 export하지않고 변수만 내보낼 수 있다.  export default globalRouter;  모든 라우터 파일에 위와 같이 적용하면 문제없이 작동한다.

export default :  export default는 파일당 하나씩 밖에 선언하지 못한다. 그래서 import할 때 이름을 바꿔줘도 node.JS가 찾을 수 있다.

 

Router & controller

 

라우터를 각 파일로 만들었지만 페이지가 늘어나면서 점점 늘어난다. 라우터의 로직이 해당 라우터 뿐만 아니라 다른곳에서 활용된다. 지금은 단순히 res.send를 하지만 우린 데이터베이스, Html 등 다양한 것으로 활용해야 하기 때문에

const handleEdit = (req, res) => { ...... } 의 형식으로 적용될 것이다. 그래서 라우터와 컨트롤러를 섞어 사용하지 않고

라우터 / 컨트롤러 폴더를 나눠서 작업하는 것이 효율적이고 좋다. (컨트롤러는 함수도 라우터는 함수를 이용하는 것).

글로벌 컨트롤러는 필요없다. HOME, JOIN은 각 VIDEO, USER에서 사용되기 때문이다. 글로벌 라우터는 url을 깔끔하게 사용하기 위해서 쓰여질 뿐이다.

export fefault는 한 번 밖에... 못쓴다.

여러개를 export할 때

import 할 때 오브젝트 처럼 사용해주면된다.

export default는 파일에 한 번 밖에 적용되지 않기 때문에 여러개의 변수를 export할 때는 아래와 같이 사용한다. 라우터에서 import할 때 export할 때의 변수명과 똑같이 해야 적용된다. (어떤 변수를 가져와야할지 정확히 지정!)

메모장

자바스크립트에서 delete, new 같은 단어는 선점되어 있어서 변수명으로 사용하지 못한다.
app.use = 페이지를 경유할 때, app.get = 경로의 최종 도착지
../ = 상위폴더 ./ = 현재폴더 의미