[유튜브 클론코딩] 7.0 ~ 7.2

7.0 User Profile

프로필 페이지의 스타일링을 한다. 프로필 수정 버튼과 비밀번호 변경 버튼을 만든다.

 

7.1 Edit User Profile

export const getEditProfile = (req,res) => res.render("editProfile", {pageTitle: "Edit Profile"});

export const postEditProfile = (req, res) => {

};

↑ userController.js

userController에서 editProfile을 getEditProfile과 postEditProfile로 만든다.

 

userRouter.get(routes.editProfile, onlyPrivate, getEditProfile);

userRouter.post(routes.editProfile, onlyPrivate, postEditProfile);

↑ userRouter.js

그리고 userRouter에서도 get과 post를 나누어서 만들어준다.

 

프로필을 편집할 때 현재의 아바타사진, 이름, 이메일을 받아오도록 하기

extends layouts/main

block content 

    .form-container 

        form(action=`/users${routes.editProfile}`, method="post", enctype="multipart/form-data")

            .fileUpload

                label(for="avatar") Avatar

                input(type="file", id="avatar", name="avatar" , accept="image/*")

            input(type="text",name="name", placeholder="Name", value=loggedUser.name)

            input(type="email", name="email", placeholder="Email", value=loggedUser.email)

            input(type="submit", value="Update Profile")

↑ editProfile.pug

이렇게 하면 기본값이 로그인한 사용자의 이름과 이메일을 받아올 수 있다.

그리고 multer를 사용해서 아바타 사진을 업로드 할 거기 때문에 미리 enctype="multipart/form-data"코드도 추가해 준다.

프로필 사진을 변경하게 하는 것을 해보자

 

프로필 사진을 변경하는 미들웨어 만들기

const multerAvatar = multer({dest: "uploads/avatars/"});



export const uploadAvatar = multerAvatar.single("avatar");

↑ middlewares.js

다음과 같이 작성한다.

[3.6] Uploading and Creating a Video << 이 때랑 똑같이 하는 것이다.

 

userRouter.post(routes.editProfile, onlyPrivate, uploadAvatar, postEditProfile);

↑ userRouter.js 

userRouter에도 다음과 같이 미들웨어를 추가해준다.

 

userController > postEditProfile 수정하기

export const postEditProfile = async(req, res) => {

    const {

        body: {name,email},

        file

    } = req;

    try{

        await User.findByIdAndUpdate(req.user.id, {

            name,

            email,

            avatarUrl: file? file.path : req.user.avatarUrl

        });

        res.redirect(routes.me);

    }catch(error){

        res.render("editProfile", {pageTitle: "Edit Profile"});

    }

};

postEditProfile은 req.body로 바뀐 name,email을 받아올 것이고, req.file을 통해서 업로드된 아바타 사진도 받아올 것이다.

이것을 try - catch 구문으로 만든다.

try에서는 User를 id로 찾고 업데이트를 하는 findByIdAndUpdate를 사용해서, req.user.id를 가지고 사용자를 찾아서 name,email을 업데이트 하고 avatarUrl같은 경우, 단순히 req.file.path를 이용하면 아바타 이미지를 수정하지 않는 사람은 req.file.path가 null로 전달받기 때문에 기존의 아바타 사진이 사라질 수가 있다. 그러므로, req.file이 존재하면 file.path를 avatarUrl로 가지고 , req.file이 존재하지 않으면 req.user.avatarUrl(기존의 사진) 을 가지면 된다.

그리고 프로필 편집이 끝나면 routes.me로 redirect를 해준다.

에러가 생기면 editProfile 페이지로 렌더 해준다.

 

7.2 Change Password

패스워드를 변경하려면 changePassword라는 것을 쓸 것이다.

passport-local-mongoose라는 우리가 전에 써본 plugin인데 여기서 제공하는 기능이다.

changePassword(oldpassword, newPassword, [cb]) < 얘가 하는 건 예전 패스워드를 가져가고 뉴패스워드도 가져간다. 예전 패스워드는 암호화 될거고 이게 암호화된 현재 패스워드하고 비교해서 같은지 볼 것이다.

패스워드는 그냥 텍스트 그대로 저장되지 않는다. 123 같은 걸 저장한다고 하면 암호화되어서 저장된다.

 

changePassword 함수 수정하기 - getChangePassword, postChangePassword

export const getChangePassword = (req,res) => res.render("changePassword", {pageTitle: "Change Password"});

export const postChangePassword = async (req,res) => {

    const{

        body: { oldPassword,newPassword, newPassword2}

    } = req;

    try{

        if(newPassword !== newPassword2){

            res.status(400);

            res.redirect(routes.changePassword);

            return

        }

        req.user.changePassword(oldPassword, newPassword);

        res.redirect(routes.me);

    }catch(error){

        console.log(error);

        res.status(400);

        res.redirect(routes.changePassword);

    }

};

↑ userController.js

userController에서 changePassword 함수를 get과 post로 나누어서 작성해준다.

postChangePassword 함수는 비동기이고, req.body를 통해 oldPassword, newPassword, newPassword2를 받아온다.

만약 newPassword와 newPassword2가 같지 않다면 상태코드 400을 보내고 changePassword 페이지를 다시 redirect 해주고 종료한다.

newPassword와 newPassword2가 같다면 if 조건을 뛰어넘고 changePassword라고 기본적으로 제공해주는 메소드를 사용한다.

그리고 성공하면 routes.me로 redirect 해준다.

 

userRouter.get(routes.changePassword, onlyPrivate, getChangePassword);

userRouter.post(routes.changePassword, onlyPrivate, postChangePassword);

↑userRouter.js

userRouter에서도 당연히 이렇게 수정해준다.