README파일을 만들어서 사용할 url 정리를 해보자.
유튜브 클론 프로젝트에서 가장 중요한 데이터는 2가지이다.
영상(video)
유저(user)
이 두가지가 프로젝트의 주요영역이라 볼 수 있다.
url의 차원에서 생각해서 url을 디자인 해보자.
/ -> 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
/comments-video -> Comment on a video
/delete-comments-video -> Delete A Comment of a video
나쁘진 않지만 도메인별로 생각한 후, 나누는것이 더 떠올리기 쉽고 보기에도 좋다.
루트
/ -> Home
/join -> Join
/login -> Login
/search -> Search
유저
/uesrs/profile
/users/edit
/users/delete
비디오
/videos/watch
/videos/edit
/videos/delete
/videos/comments
/videos/comments/delete
이렇게 users 라는 라우터 하나에 profile, edit, delete라는 url을 집어넣을 수 있다.
즉, 라우터를 이용해서 그룹화 시킬 수 있다.
/
, /join
, /login
, /search
url은 최상위 라우터인 /
에 포함되어있다고 볼 수 있다. 보통 글로벌 라우터라고 지칭한다.
/user/join
, /user/login
, /videos/search
를 하는게 더 자연스럽지만 그렇게 하지 않은 이유가 있다.
누군가에게 url을 얘기해 줄때, .../user/join 보단 .../join이 더 낫다고 판단했기 때문이다. 즉, 마케팅측면에서 보자면 대표되는 url이 더 깔끔한게 보기 좋다.
라우터 만들어 보자. 총 3개의 라우터가 있다.
const globalRouter = express.Router();
const userRouter = express.Router();
const videoRouter = express.Router();
app.use()
로 라우터 등록한다.
app.use("/", globalRouter);
app.use("/videos", videoRouter);
app.use("/users", userRouter);
각 라우터에 url을 등록한다.
참고로 각 라우터당 메인 페이지는 아래와 같이 정했다.
globalRouter 매인 페이지는 /
userRouter 메인 페이지는 /users/edit
videoRouter 메인 페이지는 /videos/watch
globalRouter.get("/", handleHome);
userRouter.get("/edit", handleEditUser);
videoRouter.get("/watch", handleWatchVideo);
각 url에 매칭되는 컨트롤러를 만든다.
const handleHome = (req, res) => res.send("Home");
const handleEditUser = (req, res) => res.send("edit user");
const handleWatchVideo = (req, res) => res.send("watch video");
모든 코드를 작성하고 잘 작동하는지 확인한 후 코드를 깔끔하게 정리할 필요가 있다.
그러기 위해 중복되거나 비슷한 내용들은 따로 폴더를 만들어 관리한다.
node.js에서 모든 폴더 및 파일은 서로에게 영향을 주지 않고 독립적이다.
따라서 다른 파일의 코드를 사용하려면 해당 내용을 import해야 한다.
import하려는 파일은 그 파일에서 export default을 설정해줘야 한다.
코드에서 Route부분과 Controller부분을 따로 분리해서 파일로 만든다. 그 후 import하여 사용한다.
어떤 파일을 import를 하려면 그 파일에서 export를 해놔야 한다.
export하는 방법으로는 2가지가 있다.
export default
videoRouter object는 이 파일의 기본 export로 지정되었다.
import하는 파일에서 다음과 같이 적용한다.
import할 때, videoRouter라는 이름대신 apple라는 아무 이름으로도 사용 할 수 있다.
ex) import apple from 파일A
왜냐하면 파일A에서의 기본 export는 videoRouter이기 때문이다.
export
여러 변수들을 export하기 위해선 위처럼 사용한다.
import 하는 파일에서 다음과 같이 적용한다.
위 경우는 import할 때, 임의의 이름을 사용할 수 없다.
반드시 기존의 파일에서 사용한 이름 그대로 사용해야 한다.
왜냐하면 여러 변수들을 export하고 import하기 때문에 임의의 이름을 사용하면 각각의 object를 특정할 수 없기 때문이다.
url 플랜을 계획할 땐, 유저입장에서 생각해본다.
위에서 생각한 url을 수정해보자.
홈 👉 로그인 👉 회원가입 👉 로그인 👉 검색
/
-> Home
/join
-> Join
/login
-> Login
/search
-> Search
프로필 보기 👉 프로필 수정하기 👉 프로필 삭제하기 👉 로그아웃
로그아웃과 프로필 편집, 프로필 삭제는 자기계정만 할 수 있으므로 :id
를 쓰지 않는다.
/users/:id
-> See User
/users/logout
-> Log Out
/users/edit
-> Edit My Profile
/users/delete
-> Delete My Profile
영상업로드 👉 영상시청 👉 영상편집 👉 영상삭제
영상은 개별마다 id를 부여하므로 특정 영상을 편집/삭제하려면 id가 필요하다.
/videos/:id
-> See Video
/videos/:id/edit
-> Edit Video
/videos/:id/delete
-> Delete Video
/videos/upload
-> Upload Video
위의 URL들 사이에 :id
가 보였는데 이를 파라미터라 부른다.
이것은 URL안에 변수를 사용하게 해준다.
변수를 사용할 수 있게 되므로 /watch/1 페이지, /watch/2 페이지 등 여러페이지를 만들 필요가 없어진다.
/users/:id
로 접근해보자.
또한 :id
와 같은 url 파라미터를 사용하기 위해서는 코드의 순서가 중요시 된다.
파라미터를 사용한 url을 아래쪽에 넣어야 한다.
만약 위와같이 파라미터가 포함된 url을 위쪽에 넣었다면,
/logout
, /remove
, /edit
로는 접근할 수 가 없게 된다.
id 값으로 "logout", "remove", "edit"이 들어간 /:id
url로 접근하게 된다.
:id
에 정규표현식을 적용하여 매칭이 안되면 다음 url로 넘어가는 식으로 사용할 수도 있다. 이 경우엔 /:id
url 코드가 위쪽에 있어도 된다. "logout", "remove", "edit"은 문자열이기 때문이다.
예를 들어 /:id(\\d+)
를 하면 id에 숫자만 적용된다.
정규식 표현 테스트 사이트 : https://www.regexpal.com
정규식 정리 사이트 : https://kasterra.github.io/regex1-the-basic-operation/
물론 파라미터만이 아닌, url 자체에도 정규표현식처럼 사용할 수 있다. express에서 지원하는 route path을 사용하면 된다.