ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • editProfile
    Project using node.js/Cloning Youtube 2020. 8. 28. 07:49

    userRouter.js

      getEditProfile은 사용자에게 보여지는 editProfile 페이지를 보여주는 랜더링 작업을 한다. 그렇기 때문에 get 방식으로 보낸다.

      postEditProfile은 사용자가 정보를 수정하고 submit했을 때 정보를 처리하는 로직이다. 정보는 url 파라미터에 노출 되면 안 되고 수정되는 정보는 post 방식으로 제출해야 하기 때문에 post 방식으로 보낸다.

    userRouter.js

     

    userController.js

    profile을 수정하려는 사용자의 id 값을 받아오고 editProfile 페이지를 랜더링해서 보여준다.

    getEditProfile

     

      사용자로부터 name, status와 file.path(avatarUrl)를 받아온다. User.findByIdAndUpadte를 사용해서 해당 id 값의 정보를 수정한다.

      avatarUrl : file ? file.path : req.user.avatarUrl은 사용자로부터 avatar를 바꿀 사진을 받아 왔으면 바꾸고 사용자가 사진을 바꾸지 않기로 했으면(그러면 file은 null이다.) 기존의 사용자의 avatar(req.user.avatarUrl)를 유지한다.

      작업이 끝나면 사용자 정보가 수정된 profile을 보여준다.

    postEditProfile

    View

    editProfile.pug

    Before editing

    수정 전

    Editing

    수정

    After Editing

     

    수정 후

    Bug fix

    1.   editProfile 항목 중 email이 있었지만 삭제하고 대신에 status를 넣었다. status는 자신의 상태 메시지를 나타낸다.email 항목을 삭제한 이유는 passport가 email을 기준으로 DB에서 user를 찾기 때문이다. 그런데 email이 바뀌면 찾아야할 user가 사라지기 때문에 자동 logout이 되고 만약 바뀐 email이 기존에 있는 다른 user와 동일하게 될 경우 문제가 생길 수가 있기 때문이다. 

    2. join을 하면 바로 login이 되도록 수정했다. 기존에는 join을 하면 바로 login이 되지 않았다. 그 이유는await User.register(user, password1)에서 parameter를 password가 아닌 password1로 줬기 때문이다. password1로 줘도 등록이 되지만
        app.use(passport.initialize());
        app.use(passport.session());
      가 바로 인식을 하지 못 한다. 그 이유는 나도 모르겠다. 아시는 분이 있다면 댓글을 남겨주시면 감사합니다!!!

      

    참고 자료

    소스 코드

    Fix to be logged in as soon as you are registered

    이 챕터의 소스 코드

    'Project using node.js > Cloning Youtube' 카테고리의 다른 글

    Upload  (0) 2020.08.29
    Change password  (0) 2020.08.28
    CSP  (0) 2020.08.27
    passport - kakao login  (0) 2020.08.27
    Passport - Github login  (0) 2020.08.27

    댓글

Designed by Tistory.