[Wetube] challenge 근황

1. 오늘로 2주째 들어선 wetube challenge

2. 지난 kokao클론코딩 챌린지는 실패했는데 이번에는 과연 어떨지. 회사생활과 병행이 피곤하긴하지만 꼭 성공하고싶다. 다음 강의는 30% 쿠폰 먹여서 구매할 것이다....

3. 배운것

Router 의 역할

• route를 쪼개주는 역할 : 아래 코드처럼 Wetube내의 많은 routes를 쪼개서 관리할 수 있도록 한다.

  (Global Router, user Router, video Router 로 나누어 관리함)

     //global

    const HOME = "/";

    const JOIN = "/join";

    const LOGIN = "/login";

    const LOGOUT = "/logout";

    const SEARCH = "/search";
     //user



     *const* USERS = "/users";

     *const* USER_DETAIL = "/:id";

     *const* EDIT_PROFILE = "/edit-profile";

     *const* CHANGE_PASSWORD = "/change-password";



     //video



     *const* VIDEOS = "/videos";

     *const* UPLOAD = "/upload";

     *const* VIDEO_DETAIL = "/:id";

     *const* EDIT_VIDEO = "/:id/edit";

     *const* DELETE_VIDEO = "/:id/delete";



     *const* routes = {

     ​    home: HOME,

     ​    join: JOIN,

     ​    login: LOGIN,

     ​    logout: LOGOUT,

     ​    search: SEARCH,

     ​    users: USERS,

     ​    userDetail: (*id*) *=>* {

     ​        if (*id*) {

     ​            return `/users/${*id*}`;

     ​        } else {

     ​            return USER_DETAIL;

     ​        }

     ​    },

     ​    editProfile: EDIT_PROFILE,

     ​    changePassword: CHANGE_PASSWORD,

     ​    videos: VIDEOS,

     ​    upload: UPLOAD,

     ​    videoDetail: (*id*) *=>* {

     ​        if (*id*) {

     ​            return `/videos/${*id*}`;

     ​        } else {

     ​            return VIDEO_DETAIL;

     ​        }

     ​    },

     ​    editVideo: (*id*) *=>* {

     ​        if (id) {

     ​            return `/videos/${id}/edit`;

     ​        } else {

     ​            return EDIT_VIDEO;

     ​        }

     ​    },

     ​    deleteVideo: (*id*) *=>* {

     ​        if (id) {

     ​            return `/videos/${id}/delete`;

     ​        } else {

     ​            return DELETE_VIDEO;

     ​        }

     ​    },

     };

라우터 선언은 아래와 같이 한다.

const userRouter = express.Router()

Router의 작성 방법

Localhost:4000/ (main)
Localhost:4000/login (login)

의 경우, main Router를 먼저 작성

const main = (req,res) => res.render(routes.main, main)

후, "/" 하위주소인 login에 대한 router를 작성한다.

const main = (req,res) => res.render(routes.main, main)
const login = (req,res) => res.render(routes.login, login)

 

3. 이후, 해당 파일을 export default globalRouter 하여 export 해준다.

4. 해당 Router.js파일을 app.js 에서 app.use(routes.main, globalRouter 한다.(상위 routes와 라우터를 app.use해준다.)

 

 

과제 제출하면서 가장 헷갈렸던 Router, route 관련하여 정리했다.

오늘도 인강을 듣긴 들었는데, eslint 설치 관련한 내용이라 오늘은 pass!