유튜브 클론코딩[ROUTERS]

김동현·2021년 12월 5일
0

nodeJS

목록 보기
2/14

What are Routers?

  • 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이 더 깔끔한게 보기 좋다.

Making Our Routers

  • 라우터 만들어 보자. 총 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");

Cleaning the Code

  • 모든 코드를 작성하고 잘 작동하는지 확인한 후 코드를 깔끔하게 정리할 필요가 있다.

  • 그러기 위해 중복되거나 비슷한 내용들은 따로 폴더를 만들어 관리한다.

  • node.js에서 모든 폴더 및 파일은 서로에게 영향을 주지 않고 독립적이다.

  • 따라서 다른 파일의 코드를 사용하려면 해당 내용을 import해야 한다.

  • import하려는 파일은 그 파일에서 export default을 설정해줘야 한다.

Exports

  • 코드에서 Route부분과 Controller부분을 따로 분리해서 파일로 만든다. 그 후 import하여 사용한다.

  • 어떤 파일을 import를 하려면 그 파일에서 export를 해놔야 한다.

  • export하는 방법으로는 2가지가 있다.

    1. export default

    • videoRouter object는 이 파일의 기본 export로 지정되었다.

    • import하는 파일에서 다음과 같이 적용한다.

    • import할 때, videoRouter라는 이름대신 apple라는 아무 이름으로도 사용 할 수 있다.
      ex) import apple from 파일A
      왜냐하면 파일A에서의 기본 export는 videoRouter이기 때문이다.

    1. export
    • 여러 변수들을 export하기 위해선 위처럼 사용한다.

    • import 하는 파일에서 다음과 같이 적용한다.

    • 위 경우는 import할 때, 임의의 이름을 사용할 수 없다.
      반드시 기존의 파일에서 사용한 이름 그대로 사용해야 한다.
      왜냐하면 여러 변수들을 export하고 import하기 때문에 임의의 이름을 사용하면 각각의 object를 특정할 수 없기 때문이다.

Planning Routes

  • 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 Parameters

  • 위의 URL들 사이에 :id 가 보였는데 이를 파라미터라 부른다.
    이것은 URL안에 변수를 사용하게 해준다.
    변수를 사용할 수 있게 되므로 /watch/1 페이지, /watch/2 페이지 등 여러페이지를 만들 필요가 없어진다.

  • /users/:id로 접근해보자.


    • request의 params 속성에 키가 id, 값이 123인 오브젝트가 들어가 있다.
  • 또한 :id와 같은 url 파라미터를 사용하기 위해서는 코드의 순서가 중요시 된다.
    파라미터를 사용한 url을 아래쪽에 넣어야 한다.

    만약 위와같이 파라미터가 포함된 url을 위쪽에 넣었다면,
    /logout, /remove, /edit 로는 접근할 수 가 없게 된다.
    id 값으로 "logout", "remove", "edit"이 들어간 /:id url로 접근하게 된다.

  • :id에 정규표현식을 적용하여 매칭이 안되면 다음 url로 넘어가는 식으로 사용할 수도 있다. 이 경우엔 /:id url 코드가 위쪽에 있어도 된다. "logout", "remove", "edit"은 문자열이기 때문이다.
    예를 들어 /:id(\\d+) 를 하면 id에 숫자만 적용된다.


    • 자바스크립트에서는 \를 \\로 표현하기 때문에 역슬래쉬를 두번 쓴것이다.
profile
프론트에_가까운_풀스택_개발자

0개의 댓글