어릴적 부터 글짓기를 하는걸 좋아했었다.

어느 순간부터 안하게 되었다가... 요새 읽게 되는 책이 있다.

자청이라는 분의 <역행자>라는 책을 읽었다. 

역행자 한동안 엄청나게 히트를 친 베스트셀러인데 이제서야 봤다는건

내가 정말 자기계발에는 관심이 얼마나 없었는지 알게 되는 순간이기도 하다.

일단 써보기로 하였다.

작가님이 나랑 동년배이신 분인거 같은데 이미 많은걸 이루신것 같아 한편으론 부럽기도하고

너무 늦은 나이에 시작하는게 아닌가 하는 생각도 들었지만 

이런 엄청난 사실을 한 평생 모르고 살아간 사람들도 너무나도 많을 거라는 생각에 

대단한걸 얻은것 같아 감사하다는 생각도 든다.

일단 내 나이가 되면서 아무런 일도 없이 살았을수도 있지만 나는 일단 우여곡절도 많았고

작은 내 가게도 운영도 해보았고 10년 가까이 요식업도 해왔기에 자신감도 어느 정도 있었지만

그 당시 옆에 있던 사람의 부추김에 아무 준비 없이 시작한 작은 내 사업은 당연히 잘 될수가 

없었다.

가게가 안되고 그랬을때 남 핑계를 많이 했던것 같다. 아니 그랬다.

<역행자>를 읽고 나서 느낀 점은 정말이지 그 동안 내 무의식과 잠재되어 있던 생각들을

정리해주는 느낌이였다.

지금이라도 내 눈앞에 나타나준 이 책을 정말 감사 하며 조금씩 바꿔 나가는 내가 될수 있도록

노력해야 겠다.

이미 내가 어느 정도 실천해서 알게 된것들과 경험으로 얻은것들을 책으로 잘 설명을 해주셔서

책을 이해하는데 전혀 어려움도 없었을 뿐 만 아니라 작가님이 하시는 말씀이 전혀 헛소리가 

아니라는걸 내 경험들이 말해주고 있었다.

내가 글 표현이 좋지를 못해서 정확하게 내가 생각 하고자 하는 것들을 잘 못쓰고 있다.

하지만 이것도 계속 써 나아가면 좀더 구체화적인 표현들을 할수 있을거라고 본다.

오늘 하루 어쩌면 평범하게 흘렀을 하루가 너무나도 오랜간만에 뜻깊은 마무리가 되어가는것 같아서 

가슴이 웅장해 진다.

전 파트에서 하던 것을 완성하도록 하겠다.

export const see = async (req, res) => {
  const { id } = req.params;
  const user = await User.findById(id);
  if (!user) {
    return res.status(404).render("404", { pageTitle: "User not found." });
  }
  const videos = await Video.find({ owner: user._id });

여기에서 하고 있는건 owner가 user._id인 모든 영상들을 찾는 거다.

url에 있는 user의 id를 가지고 찾고 있다.

사실 이 코드만으로도 충분하다.

하지만 여기에 나온 방식을 사용해서 더 멋있게 코드를 만들어 보도록 한다.

어떤 유저가 업로드한 모든 영상들을 찾기 위해 populate를 쓸 수 있다.

  const videos = await Video.find({ owner: user._id });

현재 이 코드를 삭제를 한다.

return res.render("users/profile", {
    pageTitle: user.name,
    user,
      videos,
  });

videos도 지워 준다.

return res.render("users/profile", {
    pageTitle: user.name,
    user,
  });

그러면 profile.pug의 videos가 작동하지 않는다.

block content 
    each video in videos 
        +video(video)
    else    
        li Sorry nothing found.

이 부분이다.

그리고 DB를 초기화 했었기 때문에 로그인 상태가 아니다. 그러면 user없이 프로필 창에 들어 갈 수 없게 된다.

그래서 videos를 profile로 보내지 않았기 때문에 작동하지 않게 된다.

그래도 한 번 더 좋게 고쳐 보도록 한다.

models폴더를 보면 video는 1개의 owner를 가지고 있다.

이전에도 살펴 봤듯이 video는 하나의 owner를 가지고 owner는 여러 videos를 가질 수 있다.

video는 하나의 user를 가지지만 user는 여러 videos를 가질 수 있다.

이 논리를 기반으로 user model안에 videos라는 array를 만들어 준다.

const userSchema = new mongoose.Schema({
  email: { type: String, required: true, unique: true },
  avatarUrl: String,
  socialOnly: { type: Boolean, default: false },
  username: { type: String, required: true, unique: true },
  password: { type: String },
  name: { type: String, required: true },
  location: String,
});

여기에 추가 해 준다.

const userSchema = new mongoose.Schema({
  email: { type: String, required: true, unique: true },
  avatarUrl: String,
  socialOnly: { type: Boolean, default: false },
  username: { type: String, required: true, unique: true },
  password: { type: String },
  name: { type: String, required: true },
  location: String,
  videos: [{ type: mongoose.Schema.Types.ObjectId, ref: "Video" }],
});

object가 아닌 array로 만들어 준다. 여러 개의 videos를 가지기 때문이다.

1개의 영상은 소유주가 1명이지만, 소유주는 여러 영상을 소유 할 수 있다.

그래서 array로 만들었다. 그리고 이 array에 무엇으로 채워 주냐면 object 이다.

그렇게 해서 objectId를 사용해 주었다.

  owner: { type: mongoose.Schema.Types.ObjectId, required: true, ref: "User" },

이 부분이다.

해당 코드를 그대로 사용하게 된다. 수정 할 부분을 수정해 준다.

이제 ObjectId를 가지는 array가 되는 거다.

required는 필요가 없다. ref는 User가 아니라 Video이다.

videos는 Video model에 연결된 ObjectId로 구성된 array이다.

이건 array이니까 많은 video를 담을 수 있다.

이제 videoController를 수정해 줄 차례이다.

그 이유는 영상을 업로드 할때 추가적으로 해야 할 것이 있기 때문이다.

 const { title, description, hashtags } = req.body;
  try {
    await Video.create({
      title,
      description,
      fileUrl,
      owner: _id,
      hashtags: Video.formatHashtags(hashtags),
    });

여기서 Video owner에 사용자 _id를 저장하고 있다.

하지만 이제는 업로드 될 영상의 id를 user model에도 저장해 줘야 한다.

User에 videos라는 array가 있다는걸 기억하고 있어야 한다.

그래서 새로 업로드 하는 영상의 id를 user model에 저장해줄 거다.

현재 유저의 id를 Video의 owner에 추가 하고 있다.

이제 다른 방식으로 해보도록 한다.

다행히 create()가 새로 만드는 video를 return 해준다.

 await Video.create({
      title,
      description,
      fileUrl,
      owner: _id,
      hashtags: Video.formatHashtags(hashtags),
    });

   const newVideo = await Video.create({

이렇게 해준다. 이말은 현재 가지고 있는 id로 사용자를 검색 할수 있고

newVideo의 id를 User의 videos array에 추가해 준다.

그리고 user를 찾아 보도록 한다.

const newVideo = await Video.create({
      title,
      description,
      fileUrl,
      owner: _id,
      hashtags: Video.formatHashtags(hashtags),
    });
    const user = await User.findById(_id);
    user.videos.push();

그리고 user.videos를 쓸거다. user에 videos array가 있다는 걸 알기에 그렇다.

array에 요소를 추가 할때는 push를 사용하면 된다.

해당 작업 페이지로 가서 inspect > console에서 에시를 보도록 한다.

const hello = []
undefined
hello.push(1)
1
hello
[1]

위와 같은 원리로 user.videos.push(비디오 id)를 써보도록 한다.

    user.videos.push(newVideo._id);

이렇게 user.videos.push()를 쓰고 newVideo의 id를 써준다.

그리고 user.save()를 써준다.

user.videos.push(newVideo._id);
user.save();

그리고 다시 로그인을 해본다. 영상도 모두 삭제 되었으니 새로 올려 준다.

DB에서 모든 사용자를 검색해 보도록 한다.

db.users.find()
db.videos.find()

user에 videos array가 추가 되어 있다. 그리고 모든 영상들도 검색해 본다.

전 단계에서 본 것 처럼 user에는 videos array가 있고,

video에는 owner id가 있다. 이렇게 해서 둘이 연결이 되었다.

이제 업로드 된 영상 소유자의 프로필 창을 들어가 본다.

videos가 정의되지 않아서 열리지 않고 있다고 한다.

userController를 수정해서 해결해 보도록 한다.

export const see = async (req, res) => {
  const { id } = req.params;
  const user = await User.findById(id);

먼저 see controller에 console log(user)를 해서

export const see = async (req, res) => {
  const { id } = req.params;
  const user = await User.findById(id);
  console.log(user);

그 결과 값을 확인 해보도록 한다. 에러가 나오지만 중요한건 user이다.

보다시피 이 안에는 videos array가 존재 한다.

이제 이 videos array로 videos정보를 다 가져올 수 있게 된다.

  const user = await User.findById(id);

  const user = await User.findById(id).populate("videos");

populate()를 써준다. 그리고 videos를 populate해본다.

이제 Mongoose가 id를 가져다가 모든 영상들을 프로필 창에 보여줄거다.

새로고침을 해도 계속 에러가 나와있지만 console을 확인해 보면 videos정보가 로드 된걸 볼수 있다.

다시 한번 확인해 보면 videos라는 array를 만들었고 그 안에 ObjectId를 저장하고 있다.

그런데 videos를 가져왔다. 이전처럼 id만 가진 array가 아니고

Mongoose의 도움으로 video object로 구성된 array가 되었다.

이제 profile.pug만 수정해주면 된다.

block content 
    each video in videos 
        +video(video)
    else    
        li Sorry nothing found.

이제 each video in videos 대신에 each video in user.videos를 써준다.

block content 
    each video in user.videos 
        +video(video)
    else    
        li Sorry nothing found.

user를 variable로 users/profile로 보내고 있기 때문이다.

그리고 DB에서 찾은 user는 videos를 가지고 있으니까 잘 작동하게 된다.

이 모든게 populate 한 줄로 정리가 되었다.

물론 populate를 하지 않으면 이전처럼 될거다.

이전에는 video id만 있었다. 그런데 object자체가 필요 하다.

그래서 그렇게 만들었다. 이렇게 populate를 쓰면 된다.

지금까지 relataionship에 대해서 배웠다.

이제 여러 개의 video와 어떻게 relationship을 구축하면 되는지 알게 되었다.

user는 여러 개의 video를 업로드 할수 있다는걸 반드시 기억해야 한다.

그리고 video는 owner가 하나 뿐이다. 이렇게 relationship을 만들어 봤다.

video를 하나 더 만들어 보도록 한다.

그렇게 하면 프로필 창에 들어가면 두 영상을 모두 볼 수 있다.

바로 현재 유저가 영상의 소유자 이기 때문이다.

다음 파트에서는 여기에 몇 가지 condition들을 추가 해 보겠다.

Edit Video → Delete Video →

왜냐하면 해당 버튼들을 안보이게만 만들었기 때문이다.

owner가 아닌 사람들이 수정할 수 있는 페이지를 볼 수 없게 만들어 본다.

현재는 누구나 수정 할수 있는 상태 이다. 이제 영상에는 owner가 있으니

owner만 수정 사능하도록 만들어 볼거다.

그리고 getEdit도 수정해서 영상 소유주만 form을 보고 제출 할수 있게 만들거다.

이런 것들을 보완해야 하고 video를 삭제하는 것도 owner만 가능하도록 만들거다.

userSchema.pre("save", async function () {
  this.password = await bcrypt.hash(this.password, 5);
});

현재 이 부분이 버그가 있는데 이 버그는 user를 save를 할 때 마다

비밀번호를 반복적으로 hashing하고 있다. 좋지 않은 방법이다.

왜냐하면 videoController에서 영상을 업로드 할때 user.save()를 실행 하는데

그렇게 되면 비밀번호가 다시 한번 hash가 된다.

사용자가 다시 로그인 할수 없기 때문에 이 부분을 수정 해줘야 한다.

특정 조건에서만 비밀번호가 hash 되도록 만들어 줄거다.

항상 되는 것이 아니라 현재는 save()가 실행 될 때마다 hash가 일어나고 있다.

그로 인해 이 사용자는 비밀번호를 사용 할수 없게 된다. 더 이상 로그인을 할수 없는 거다.

다음 파트에서는 버그를 수정하고 보안을 신경 써보도록 한다.

보안은 영상 owner가 아닌 사람들이 영상을 수정/삭제 하지 못하게 만드는 것이고

위에 언급했던 버그도 수정하도록 하겠다.

그리고 다시 DB를 초기화 한 다음에 버그가 존재 한다는 것을 살펴 보도록 하겠다.

전 단계에서 영상에 영상 소유자의 id를 저장해봤다.

DB를 보면 이 video를 업로드한 유저의 id를 볼수 있다.

추가적으로 watch화면에서 영상 소유자의 이름을 보여주도록 만들었다.

여기까지의 코드를 보고 여기에 쓴 reference가 무슨 쓸모가 있는지 궁금해 진다.

왜냐하면 video.owner가 User id 라는걸 아는데 이걸 직접 해주고 있으니 그렇다.

export const watch = async (req, res) => {
  const { id } = req.params;
  const video = await Video.findById(id);
  const owner = await User.findById(video.owner);

  const owner = await User.findById(video.owner);

그래서 이 코드를 지워 준다.

export const watch = async (req, res) => {
  const { id } = req.params;
  const video = await Video.findById(id);

이렇게 하면 owner가 없으니까 에러가 난다. 그러니 지워 준다.

export const watch = async (req, res) => {
  const { id } = req.params;
  const video = await Video.findById(id);
  if (!video) {
    return res.status(404).render("404", { pageTitle: "Video not found." });
  }
  return res.render("watch", { pageTitle: video.title, video, owner });
};

  return res.render("watch", { pageTitle: video.title, video});

그래도 에러가 나오니 좀 이상해 질거다.

하지만 이 작업의 핵심은 같은 기능을 더 짧은 코드로 구현해 보는거다.

여기서 video를 console.log해주면 DB에서 찾은 video를 확인할수 있을거다.

이 상태에서 브라우저를 새로고침하면 오류가 생길거다.

걱정하지 않아도 된다. 핵심은 node console에 출력된 video이다.

이제 mongoose의 도움을 받아 볼거다.

 meta: { views: 0, rating: 0 },
  _id: new ObjectId("6278c6ea843aa2ab1951cb7a"),
  title: 'code',
  fileUrl: 'uploads/videos/8354fc579bb23fa577b406bccaafe453',
  description: 'codecodecodecodecode',
  hashtags: [ '#code' ],
  owner: new ObjectId("6278ad69eeed5a64dd710d36"),
  createdAt: 2022-05-09T07:46:50.207Z,
  __v: 0
}

mongoose는 이 objectID가 User에서 오는걸 아니까 도와 줄거다.

그래서 mongoose가 찾게 만들어 볼거다.

export const watch = async (req, res) => {
  const { id } = req.params;
  const video = await Video.findById(id).populate();

populate가 뭘 하냐면

 owner: new ObjectId("6278ad69eeed5a64dd710d36"),

이 부분을 실제 User 데이터로 채워 준다.

owner를 populate해준다.

export const watch = async (req, res) => {
  const { id } = req.params;
  const video = await Video.findById(id).populate("owner");

owner만 적어주면 끝이다.

populate와 relationship만 적어주면 된다.

그리고 이제 populate한 video를 console.log 해본다.

오류는 걱정하지 말고 일단 새로고침을 해본다. 에러가 있지만 코드를 한번 보도록 한다.

차이가 보일 것이다.

video안에 owner object전체 정보가 들어와 있다.

populate하기전의 owner는 단순히 string이지만

populate를 하면 mongoose가 video를 찾고 그 안에서 owner도 찾아 줄거다.

mongoose는 owner가 object ID인 것을 알고 이 id가 User에서 온 것임을 안다.

그래서 mongoose가 해당 User를 찾고 video를 로드했을때 User 정보도 얻을수 있다.

id뿐만 아니라 모든 정보를 볼수 있다는 건 정말 대단한 일이다.

이제 template만 수정해서 작동하게 만들어 본다.

이전 코드에서는 이 두가지를 string으로 변환하고 비교 해야했다.

왜냐하면 이전에는 owner가 id에 불과 했다. 하지만 이제는 object이니깐 수정이 필요하다.

watch.pug에서

   if String(video.owner) === String(loggedInUser._id)   

   if String(video.owner._id) === String(loggedInUser._id)   

이 작업만 하면 mongoose가 나머지는 다 해결해주는 거다.

이제 이 부분의 오류도 해결할수 있다.

기존 코드 대신 video.owner.name으로 바꿔 볼거다.

      small Uploaded by #{owner.name}   

      small Uploaded by #{video.owner.name}   

이런 식으로 바꿔 주고 홈페이지 새로고침을 해주면 작동 되는걸 확인할수 있다.

보다시피 영상 소유자가 보이게 된다. 이 기능은 코드 한줄로 구현 된거다.

이게 바로 mongoose relationship의 힘이다.

현재 id만 저장하고 있다. User 전체가 아니라 id만 저장한다.

DB에서 populate를 써도 작동이 되는지 해보니 작동하지 않는다.

populate는 function이 아니다.

하지만 코드에서 populate("owner")를 사용하면 owner object전체가 불려지는걸 볼수 있다.

id를 저장하고 mongoose에 이 id가 User model에서 왔다고 알려주기만 하면 된다.

그래서 이런식으로 이름을 통일하고 사전에 모든 model들을 import하는게 좋은거다.

그래야 mongoose가 도와 줄수 있다.

이제 여기에 링크를 걸어본다. 소유자 프로필에 갈수 있게 만들어 본다.

이건 다른 populate, relation을 할수 있게 도와 줄거다.

video에 owner를 추가하는건 끝났다.

다음 단계는 특정 사용자가 업로드한 모든 영상을 볼 수 있게 만드는 거다.

그러기 위해선 User.js 코드를 수정해야 한다.

이제 watch template을 수정해 본다.

      small Uploaded by #{video.owner.name}   

small Uploaded by 
      a(href=`/users/${video.owner._id}`)=video.owner.name

새로고침하고 링크를 눌러주면 프로필 화면으로 넘어간다.

이제 사용자가 업로드한 영상들을 가져와야 한다.

여러가지 방법이 있는데 이해를 돕기 위해 좀더 긴 코드를 먼저 보도록 한다.

그 다음 짧은 코드를 보도록 한다.

userController.js를 띄워 준다.

userController에서 user를 찾고 있다.

그리고 id를 owner로 가진 video들을 찾을 수도 있다.

export const see = async (req, res) => {
  const { id } = req.params;
  const user = await User.findById(id);
  if (!user) {
    return res.status(404).render("404", { pageTitle: "User not found." });
  }

export const see = async (req, res) => {
  const { id } = req.params;
  const user = await User.findById(id);
  if (!user) {
    return res.status(404).render("404", { pageTitle: "User not found." });
  }
  const videos = await Video.find({ owner: user._id });

Video을 쓰고 여러개의 video를 찾아 올거다.

그리고 findOne 이런거 말고 그냥 find를 써서 video의 owner가 params의 id와 같은 video들을 찾는거다.

video의 owner idrk URL에 있는 id와 같은 video를 찾는거다.

추가해 준다. 그리고 import가 안되는 경우도 있으니 꼭 확인한다.

안되 있으면

import Video from "../models/Video";

추가 해준다.

그리고 video를 console.log해주고 새로고침을 해보면 array가 나온다.

이 URL의 id와 video owner id가 일치한 경우만 나온거다.

현재 지금 user와 owner의 id가 같은 video들을 찾고 있다.

이것만 해도 충분하다. template으로 videos를 보낼수 있다.

const videos = await Video.find({ owner: user._id });
  return res.render("users/profile", {
    pageTitle: user.name,
    user,
    videos,
  });

users/profile.pug에서

block content 
    h1 hello

이 말은 users/profile에서 hello 대신에 videos를 보여 줄수 있다는 거다.

videos를 보여주는 방법은 home에서 하는 방법 이랑 똑같다.

block content 
    each video in videos 
        +video(video)

이렇게 바꿔 줄수 있다.

videos array를 보내고 each video in videos를 썼을 뿐이다.

home하는 방식과 똑같고 mixin도 사용했다. 코드를 복붙해도 코드가 작동하는데 문제가 없다.

물론 minxin을 include해줘야 한다.

include ../mixins/video

왜냐하면 지금 /users/profile.pug안에 있기 때문이다.

새로고침해서 확인해 보면 유저가 업로드한 영상이 나오고 있다.

home에서도 다룬거라 새로운 내용은 아니다.

차이점은 profile의 videos가 특정 유저의 id와 owner id가 같은 video만 가져 온다는 거다.

그리고 user.id는 URL에 있는 id로 찾은 거다.

하지만 이 방법은 긴 코드로 작성 되었다. 짧게 만들 수도 있다.

하지만 이 지름길을 사용하려면 또 다시 DB를 초기화 시켜야 한다.

초기화 해야하는 이유는 model을 수정해야 하기 때문이다.

이제 아무것도 안되고 영상들도 다 사라졌다.

database를 초기화 하고 다음 파트로 넘어가도록 한다.

Video를 user와 연결하는 작업을 해본다.

현재는 video와 user가 서로 연결되어 있지 않다.

mongoose나 mongodb를 활용해 연결하려면 id를 사용해야 한다.

왜냐하면 id는 하나밖에 없고 랜덤 숫자이기 때문이다.

그러면 현재 가지고 있는 id를 가지고 연결해 보도록 하겠다.

user에는 해당 user가 업로드한 모든 영상의 id를 저장 해준다.

그리고 video에는 해당 영상을 올린 user의 id를 저장한다.

현재는 이해하지 못해도 코드를 보면 알게 될거다.

먼저 videoSchema에 owner를 추가해준다.

video.js에서

const videoSchema = new mongoose.Schema({
  title: { type: String, required: true, trim: true, maxLength: 80 },
  fileUrl: { type: String, reqired: true },
  description: { type: String, required: true, trim: true, maxLength: 20 },
  createdAt: { type: Date, required: true, default: Date.now },
  hashtags: [{ type: String, trim: true }],
  meta: {
    views: { type: Number, default: 0, required: true },
    rating: { type: Number, default: 0, required: true },
  },
  ower: { type: mongoose.Schema.Types.ObjectId, reqired: true, ref: "User" },
});

owner의 type은 number,string,date가 아니고 objectId이다.

그러나 objectId문자 그대로 쓰면 코드가 노란색이 아니다.

위에 코드들을 보면 노랑색으로 활성화된 코드들은 JavaScript에서 제공하는 코드이다.

그런데 object는 mongoose코드에서만 사용 할수 있다.

그래서 이런식으로 작성할수가 있다.

ower: { type: mongoose.Schema.Types.ObjectId, reqired: true, ref: "User" }, 그리고 required: true를 추가해준다. reference도 추가해줄 필요가 있는데

그 이유는 mongoose에게 owner에 id를 저장하겠다고 알려줘야 하기 때문이다.

그런데 아직 어떤 model과 연결할지 알려주지도 않은 상태이다.

수많은 model이 있으면 어떤 것과 연결할 것인지 알려줘야 한다.

그래서 mongoose에게 이 owner가 어떤 model의 object라고 알려준다.

여기서는 User model이 된다. 그래서 "User"이라고 넣어 주었다.

이제 video에 owner 항목이 추가 되었다.

owner은 object ID이다. object ID는 여기 보이는 긴 string이다.

ObjectId("626a5e7f2a8175076f7a1e45"

이게 바로 object ID이다.

여기에서 중요한건 Mongoose에게 이 object ID가 model user에서 온다고 알려주는거다.

이렇게 해야 Mongoose가 도와 줄수 있다.

이제 github로그인을 통해 계정을 생성해 준다.

그리고 영상을 하나 업로드 해주기 전에 controller에 수정해줄 부분이 있다.

이제 영상을 업로드 할때 업로드 하는 사용자의 id를 전송해야 하기 때문이다.

videoController.js에서

postUpload controller에 user관련 코드를 추가 한다.

export const postUpload = async (req, res) => {
  const {
    user: { _id },
  } = req.session;
  const { path: fileUrl } = req.file;
  const { title, description, hashtags } = req.body;
  try {
    await Video.create({
      title,
      description,
      fileUrl,
      owner: _id,
      hashtags: Video.formatHashtags(hashtags),
    });

user는 req.session에서 가져오면 된다. 그리고 user에서 _id를 가져온다.

그리고 Video를 생성할때 owner도 보내도록 만들어 준다.

Video.create()는 자주 다뤄 봐서 익숙하다. mongoose의 create과 save 같은거 말이다.

video model에 object ID type을 가진 owner property를 추가 했다.

그래서 owner의 _id만 써주면 된다.

user object전체를 전송할 필요는 없고 id만 전송해주면 되는 거다.

이제 다시 영상을 선택해주고 업로드까지 해준다. 영상 재생까지 잘 되는걸 확인 할수 있다.

database도 확인해 본다. db.videos.find({})를 해보면 이제 video에 owner가 추가 된걸 알수 있다.

이 owner는 ObjectId이다.

성공적으로 model들을 user와 연결 시켰다. 현재는 그렇게 대단하게 보이지 않지만

populate를 배우게 되는 순간부터는 달라 질거다.

populate가 왜 중요한지에 대해 알아 보겠다.

그 이유는 populate가 있어야 영상 주인만 아래 버튼이 보이기 때문이다.

(Edit Video와 Delete Video 버튼을 말한다. )

그리고 여기에 누가 올렸는지 보여줄 수도 있다.

일단 버튼을 숨기는 기능을 구현해 보도록 한다.

video에 owner의 id가 있다. 그리고 localMiddleware에 현재 로그인된 사용자가 누구인지 알려주는 부분이 있다.

이 말은 로그인된 사람의 id와 영상의 owner의 id가 일치 하면 로그인된 사용자가 현재 영상의 주인이라는 말이다.

template을 수정해 본다. watch.pug를 열고

extends base

block content
   video(src="/" + video.fileUrl,controls)
   div
      p=video.description
      small=video.createdAt 
      small=video.owner
      br
      small=loggedInUser._id 
   a(href=`${video.id}/edit`) Edit Video →
   br
   a(href=`${video.id}/delete`) Delete Video →

id가 일치하는지 체크해준다. 붙어 있으면 일치하는지 헷갈릴수 있으니 띄워 준다.

이렇게 해주면 영상 주인과 현재 로그인된 사용자의 id가 일치하는걸 알수 있다.

이런 상황일때 아래 두 버튼이 보이도록 만들어 본다.

extends base

block content
   video(src="/" + video.fileUrl,controls)
   div
      p=video.description
      small=video.createdAt 
   if String(video.owner) === String(loggedInUser._id)   
      a(href=`${video.id}/edit`) Edit Video →
      br
      a(href=`${video.id}/delete`) Delete Video →

if video.owner === loggedInUser._id 이렇게만 해주었을때는 작동을 하지 않는다.

왜냐하면 video.owner의 id는 ObjectId인데 현재 접속자의 id는 string형태의 데이터 이기 때문이다.

그래서 양쪽에 String()을 넣어주었다. 그래서 새로고침 해서 확인해 보면 잘 작동한다.

이제 video의 owner를 확인 할수 있게 되었다.

이렇게 user의 id를 video model에 저장하니까 유용하다.

누가 영상을 업로드 하였는지 확인 할수가 있게 되었다.

video.owner는 string이고 id라는걸 기억하자.

그러나 아직 해결해야 될게 있다. 영상 소유자의 이름을 가져와야 한다.

누가 비디오를 만들었는지 보여주고 그 사람의 프로칠을 볼수 있는 링크를 걸어 줄 수도 있다.

현재 페이지는 watch페이지이다. watch controller를 찾아 본다.

videoController.js에서

export const watch = async (req, res) => {
  const { id } = req.params;
  const video = await Video.findById(id);
  console.log(video);
  if (!video) {
    return res.status(404).render("404", { pageTitle: "Video not found." });
  }
  return res.render("watch", { pageTitle: video.title, video });
};

이곳에서 video를 찾고 있다. video를 console.log해본다.

새로고침해서 node에서 찾아 보면

{
  meta: { views: 0, rating: 0 },
  _id: new ObjectId("6278c6ea843aa2ab1951cb7a"),
  title: 'code',
  fileUrl: 'uploads/videos/8354fc579bb23fa577b406bccaafe453',
  description: 'codecodecodecodecode',
  hashtags: [ '#code' ],
  owner: new ObjectId("6278ad69eeed5a64dd710d36"),
  createdAt: 2022-05-09T07:46:50.207Z,
  __v: 0
}

이런 정보가 나온다. owner도 보인다. 이 말은 owner의 id를 알고 있다는거다.

이렇게 적용해 볼수 있다.

export const watch = async (req, res) => {
  const { id } = req.params;
  const video = await Video.findById(id);
  const owner = await User.findById(video.owner);
  if (!video) {
    return res.status(404).render("404", { pageTitle: "Video not found." });
  }
  return res.render("watch", { pageTitle: video.title, video, owner });
};

const owner = 그리고 user를 models에서 import한다.

models에서 User를 import를 해준다.

그리고 User.findById(video.owner)를 해준다.

video에는 owner가 있고 이건 user의 id이다.

그러면 video를 찾고 이걸 가지고 owner도 찾는 거다.

return res.render("watch", { pageTitle: video.title, video, owner }

그래서 owner도 추가해 주었다.

그리고 watch.pug에서

extends base

block content
   video(src="/" + video.fileUrl,controls)
   div
      p=video.description
      small=video.createdAt 
   div 
      small Uploaded by #{owner.name}   
   if String(video.owner) === String(loggedInUser._id)   
      a(href=`${video.id}/edit`) Edit Video →
      br
      a(href=`${video.id}/delete`) Delete Video →

 div 
      small Uploaded by #{owner.name}   

이렇게 추가해 주었다.

이게 가능한 이유는 owner를 watch template으로 보냈기 때문이다.

새로고침을 해주면 비디오를 업로드한 유저의 이름이 나오는걸 확인 할수 있다.

video를 먼저 찾고 owner를 찾는거다. DB에는 2번이나 요청해서 조금 마음에는 안들지만 잘 작동하고 있다.

이게 바로 영상 소유자의 id를 video에 저장하면 좋은 이유이다.

이제 영상을 볼때 owner가 누군지도 알수 있다.

하지만 언제나 더 쉬운 방법이 있기 마련이다. 현재 코드도 직관적이고 좋다.

이보다 더 나은 방법이 있으니 그렇게 시도해 보도록 한다.

DB에 2번이나 요청하는건 별로이기 때문이다.

현재는 영상 소유자의 id를 video에 저장하면 좋은 이유를 기억한다.

먼저 영상 소유주와 현재 접속자의 id를 비교 할수 있다. 현재 id만 비교하고 있다.

또한 영상 소유주의 이름을 보여줄수도 있다.

중요한건 postUpload에서 video를 생성할때 video.owner에 현재 로그인된 사용자의 id를 넣어 주었다는 거다.

req.session.user가 현재 로그인된 사용자를 말한다.

이 말은 video의 owner로 현재 로그인 중인 유저의 id를 쓰겠다는 거다.

이번에는 사용자 프로필 창을 만들어 본다.

왜냐하면 모든 사용자한테 프로필이 필요하기 때문이다. 그래서 모두가 부여 받는 사용자 프로필 창을 만들어 줄거다.

이 과정에서 많은 것들을 배우게 될거다. 예를 들어 relationships같은 것들이 있다.

사용자의 프로필 창에 들어가면 이름과 아바타 같은 해당 유저의 정보를 볼수 있게 만들거다.

그리고 그 유저가 업로드한 영상들을 볼수 있게 만들거다.

유튜브 채널처럼 만들면 좋을것 같다.

프로필에 들어가면 해당 유저가 올린 영상들을 볼수 있는 거다.

추가적으로 영상을 틀면 누가 그 영상을 올렸는지 확인하게 한다.

또한 해당 영상의 소유자가 아니면 이 두 버튼(Edit Video, Delete Video)을 보이지 않게 만들거다.

영상을 업로드한 사람만이 수정과 삭제 할수 있게 해야 하기 때문이다.

이 말은 video파일을 누가 업로드 했는지 알수 있어야 하고 사용자는 자신이 업로드한 영상들을 볼수 있어야 한다.

현재 DB를 보면 video에는 owner 항목이 없다.

그러니 owner를 video에 추가하고 user에는 video list를 추가해줄 필요가 있다.

{ "_id" : ObjectId("6268bb3f69b51a45c9ad1ae3"), "email" : "pkpanda@naver.com", "socialOnly" : false, "username" : "Cyber Lover", "password" : "$2b$05$R5Yss2htjFd9vSa7TdxVGe4ukAj6wHpJAbip2FG06bcA6nKD.i9LS", "name" : "Mercury1", "location" : "NYC", "__v" : 0, "avatarUrl" : "uploads/597ad456bcec6a0743a383a1653d5499" }

여기 보면 user가 있다. 그런데 이 user가 소유한 video는 하나도 없는것 같다.

그래서 이 둘을 연결해 줄거다. video가 하나의 owner만 가지도록 만들어야 하고 user는 여러 개의 video를 가질수 있도록 만들어야 한다.

model을 수정하기 전에 my profile의 링크를 만들어 준다.

base.pug에 들어가서

body 
        header
            h1=pageTitle
            nav 
                ul 
                    li  
                        a(href="/") Home
                    if loggedIn
                        li 
                            a(href="/videos/upload") Upload Video
                        li 
                            a(href=`/users/${loggedInUser._id}`) My Profile

localsMiddleware가 제공하는 loggedInUser locals가 있다는걸 기억해야 한다.

middleware.js에서

export const localsMiddleware = (req, res, next) => {
  res.locals.loggedIn = Boolean(req.session.loggedIn);
  res.locals.siteName = "Wetube";
  res.locals.loggedInUser = req.session.user || {};
  next();
};

이 부분이다. 현재 /users/{로그인한 유저의 _id}로 가는 navigation을 만들고 있다.

새로고침해서 My Profile로 들어가면 링크에 /users/{사용자_id}가 보인다.

나중에 이 URL을 모든 사용자들이 사용 할수 있게 만들어 준다.

URL에 나와 있는 유저의 id를 사용해서 말이다.

My Profile은 로그인된 사용자를 위한 것이니까 로그인한 사용자의 id를 사용했다.

그런데 이 페이지는 공개되어 있다. 아무나 들어갈수 있다.

왜냐면 프로필은 모두가 볼수 있기 때문이다. 첫번째 단계 였다.

다음 단계는 이 오류를 해결할거다. 페이지가 에러가 나고 있다.

Cannot GET /users/$%7BloggedInUser._id%7D

userRouter에 들어가 준다.

userRouter.get("/:id", see);

/를 넣어 주었다. 새로고침 해서 확인해 보면 작동하고 있다. See User라고 나온다.

이제 /users/사용자id로 가면 See User를 볼수 있다.

userController.js에서

export const see = (req, res) => res.send("See User");

아직 수정하지 않은 controller이다. 이제 id를 가져오는거다.

user session에서 id를 가져오지 않을거다. 왜냐하면 이 페이지를 누구나 볼수 있어야 한다.

그래서 URL에 있는 user id를 가져 올거다.

req.session.user._id로 id를 가져오지 않을거다.

public으로 만들어야 하니까 URL에서 가져올거다.

export const see = (req, res) => {
  const { id } = req.params;
  return res.render("profile", { pageTitle: "User Profile" });
};

req.params에서 id를 꺼낸다. pageTitle의 구체적인건 나중에 바꾼다.

새로고침해보면 현재 views 디렉토리에 profile이 없다.

views폴더 안 users폴더에 파일을 추가해주면 된다.

profild.pug에서

extends ../base

block content 
    h1 hello

해주고

userController.js에서는

export const see = (req, res) => {
  const { id } = req.params;
  return res.render("users/profile", { pageTitle: "User Profile" });
};

users/를 추가 해준다. 그러면 새로고침하면 작동한다.

이제 user profile tmeplate을 render하고 있다.

pug template를 만들고 pug template를 base에서 extends 해줬다.

그리고 block content를 썼고 base에도 block content가 있다.

base에서는 pageTitle이란 변수를 사용한다. 그렇기에 render할때 pageTitle도 보내주는 거다.

지금 구현하고자 하는걸 설명하자면 url에 있는 id를 가지고 user를 찾는거다.

export const see = async (req, res) => {
  const { id } = req.params;
  const user = await User.findById(id);
  return res.render("users/profile", {
    pageTitle: `${user.name} Profile`,
    user,
  });
};

req.params에서 가져온 id를 추가한다. 이제 찾은 user를 template에 보내주기만 하면 된다.

그리고 pageTitle을 user profile로 하지 말고 유저 이름으로 만들어 준다.

${user.}을 쓰고 user에 name이 있는거를 기억한다.

새로고침 하면 현재 로그인한 요저의 프로필이 나온다.

이렇게 수정도 가능하다.

export const see = async (req, res) => {
  const { id } = req.params;
  const user = await User.findById(id);
  return res.render("users/profile", {
    pageTitle: user.name,
    user,
  });
};

현재 프로필 페이지는 로그아웃 상태여도 접속이 가능하다.

예를 들어 인스타에서 다른 사용자의 프로필을 볼수 있는 거랑 같다.

정보를 받아 DB를 검색하고 render하는 작업은 이제 거의 다 끝났다.

이제 이 페이지에 어떻게 비디오를 추가할지 알아본다.

video를 어떻게 user와 연결 시킬수 있을까?

그전에 DB의 데이터를 전부 지워 준다. DB의 모든 video와 user를 없애준다.

이렇게 하지 않으면 연결을 할수 없다. 그래서 꼭 DB를 비워 줘야 한다.

현재 새로고침하면 에러가 난다. user가 없기 때문이다.

그래서 여기에서 체크를 해줄수 있다.

export const see = async (req, res) => {
  const { id } = req.params;
  const user = await User.findById(id);
  if (!user) {
    return res.status(404).render("404");
  }
  return res.render("users/profile", {
    pageTitle: user.name,
    user,
  });
};

만약 user가 없다면 이말은 user를 찾지 못했다는 거다.

res.render("404")를 return할거다. 그리고 status(404)도 추가했다.

404를 적어주는걸 잊지 않는다.

export const see = async (req, res) => {
  const { id } = req.params;
  const user = await User.findById(id);
  if (!user) {
    return res.status(404).render("404", { pageTitle: "User not found." });
  }
  return res.render("users/profile", {
    pageTitle: user.name,
    user,
  });
};

pageTitle도 추가해 준다. 이렇게 mongoose를 연습 해 봤다.

샘플로 쓸 영상을 하나 다운로드 해놨다.

https://sample-videos.com/

여기서 쉽게 구할수 있다. 실험할 용량과 형식에 맞게 구할 수 있다.

이제 video를 업로드 할 거다. video에는 파일이 필요하다.

먼저 views폴더의 upload.pug에 들어가서

block content 
    if errorMessage 
        span=errorMessage
    form(method="POST")
        label(for="video") Video File
        input(type="file", accept="video/*",requried,id="video",name="video")

video에 쓸 label을 만든다. file로 해도 상관없다.

그리고 Video File을 추가한다. 아래에는 type이 file인 input을 만든다.

accept에는 모든 종류의 video형식을 쓴다. required를 추가해주는 걸 잊지 않는다.

label은 id를 활용하니까 꼭 id를 추가해준다. 그리고 multer middleware 사용을 위해 name을 추가한다. video를 써줬다.

새로고침을 해보면 영상 파일을 선택하지 않으면 업로드 하지 못한다.

그리고 샘플 영상을 첨부해서 업로드를 해준다.

그러기 전에 controller에 어떤 일이 생길지 안다.

videoRouter코드를 수정 해준다.

videoRouter
  .route("/upload")
  .all(protectorMiddleware)
  .get(getUpload)
  .post(uploadFiles.single("video"), postUpload);

여기에 만들어 놓은 uploadFiles middleware를 추가 해준다.

그리고 form에서 file의 name을 추가하는걸 잊어선 안된다.file의 name은 video이다.

이제 multer documenatation에서 볼게 있다.

https://www.npmjs.com/package/multer

추가적으로 보낼수 있는 option들이 있다. 이 옵션들 중에 fileSize라는걸 사용할거다.

이걸 가지고 2개의 middleware에서 avatar파일의 업로드 용량을 1MB이하로 하고 video파일의 업로드 용량을 10MB이하로 제한하면 좋을것 같다.

사람들이 용량이 큰 영상을 올리지 않게 말이다.

그래서 이 방법 대신에 2개의 middleware를 만든다.

export const avatarUpload = multer({
  dest: "uploads/avatars/",
  limits: {
    fileSize: 3000000,
  },
});
export const videoUpload = multer({
  dest: "uploads/videos/",
  limits: {
    fileSize: 10000000,
  },
});

하나는 avatar업로드 하는걸로 만든다. uploads/avatars에 저장하도록 만든다.

다른 하나는 videoUpload로 만든다. 그리고 uploads/videos에 저장하도록 한다.

그리고 두곳 모두 limits를 추가한다. avatar,video의 limits 는 fileSize를 쓴다.

그리고 각각 용량을 설정해 주었다. 기본(단위)으로 바이트로 설정되어 있다.

이제 이보다 용량이 큰 파일은 업로드 되지 않는다.

테스트를 해본다. 일단 avatarUpload의 fileSize를 아주 작게 해본다.

3000바이트로 하면 어떻게 되는지 테스트 해보겠다.

새로고침을 하였더니 그전에 에러가 발생하였다. middelware이름을 변경해서 그런것 같다.

userRouter에 들어가보면 더 이상 존재하지 않는 uploadFiles를 사용중이다.

import {
  protectorMiddleware,
  publicOnlyMiddleware,
  avatarUpload,
} from "../middlewares";
userRouter
  .route("/edit")
  .all(protectorMiddleware)
  .get(getEdit)
  .post(avatarUpload.single("avatar"), postEdit);

변경한 이름으로 변경 해준다.

그리고 videoRouter의 uploadFiles도 존재하지 않으니까

import { protectorMiddleware, videoUpload } from "../middlewares";
videoRouter
  .route("/upload")
  .all(protectorMiddleware)
  .get(getUpload)
  .post(videoUpload.single("video"), postUpload);

videoUpload로 변경해준다. 이제 콘솔에서 확인해 보면 에러가 나지 않는다.

새로고침하고 설정한 용량보다 큰 avatar를 업로드하면 어떻게 되는지 시도해 본다.

파일이 너무 크다고 에러가 났다. 파일이 너무 커서 multer가 허용하지 않고 있다.

이제 이 오류를 사용자에게 제대로 된 메세지로 보여줘야 한다.

그래서 응답을 보내줘야 하는데 나중에 해주기로 한다.

어찌되었든 fileSize limits는 잘 작동하고 있다.

이제 2개의 middleware가 생겼다. 하나는 용량 제한으로 video를 업로드하는거고 다른 하나는 avatar를 업로드 하는거다.

videoController.js에서

export const postUpload = async (req, res) => {
  const file = req.file;
  const { title, description, hashtags } = req.body;
  try {
    await Video.create({
      title,
      description,
      fileUrl: file.path,
      hashtags: Video.formatHashtags(hashtags),
    });

이제 file을 받아서 그리고 file자체가 아니라 file의 경로를 원하니까 fileUrl을 추가하고 file.path을 넣어준다.

multer는 req.file을 제공해주는데 file안에 path가 있다는걸 기억한다.

하지만 아직 video안에 fileUrl을 만들지 않았다.

Video.js에서

const videoSchema = new mongoose.Schema({
  title: { type: String, required: true, trim: true, maxLength: 80 },
  fileUrl: { type: String, reqired: true },

file없이는 video를 만들지 못한다. 그리고 테스트 해보기 전에 잊으면 안될게 있다.

upload.pug에서

block content 
    if errorMessage 
        span=errorMessage
    form(method="POST", enctype="multipart/form-data"

multer을 사용해서 파일을 업로드 하고 싶다면 form의 encoding type을 바꿔 줘야 한다.

edit-progfile의 form에 enctype을 추가한 것처럼 똑같이 해주면 된다.

이 작업을 해주지 않으면 multer는 정상 작동하지 않는다.

잘못된 코드를 찾아 헤매도 찾지 못할거다. 그러니 enctype이 multipart/form-data인지 꼭 확인하도록 한다.

이제 테스트해 본다. 업로드에 성공했다. DB에서도 video를 찾을수 있다.

db.videos.find({}) 쳐보면 fileUrl이 uploads/videos/파일이름이 나온다.

그리고 uploads폴더에 들어가면 avatars와 videos가 있다.

이전 파일들이 지워지지 않는 문제가 있긴 하다.

multer를 사용해서 uploads 폴더 안 서로 다른 디렉토리에 저장할수 있게 만들었다.

avatars와 videos폴더가 있다. 현재 avatars에는 아무것도 없는데 새로운 avatar를 업로드 하면 생길거다.

이제 업로드한 영상을 재생시켜 본다.

업로드된 영상을 클릭해 보면 예전에 만든대로 id를 가지고 비디오를 찾고 있다.

그리고 video의 데이터가 모두 있다. 이제 여기에 video element를 추가하면 될것 같다.

watch.pug로 가서 video element를 추가한다.

watch.pug는 videoController가 render하고 있는 template이다.

videoControlloer.js에서

export const watch = async (req, res) => {
  const { id } = req.params;
  const video = await Video.findById(id);
  if (!video) {
    return res.status(404).render("404", { pageTitle: "Video not found." });
  }
  return res.render("watch", { pageTitle: video.title, video });
};

DB에서 video를 찾은 다음 그 video를 변수로 보내고 있다.

이 말은 object가 통째로 template에 있다는 거다.

이제 다시 돌아가서 video.fileUrl을 쓴다.

watch.pug에서

block content
   video(src="/" + video.fileUrl)

그리고 path 때문에 작동하지는 않을거다. 그래서 path도 추가해 주었다.

새로고침해서 확인하면 영상이 올라온걸 확인 할수 있다. 여기서 이제 controls를 추가해준다.

block content
   video(src="/" + video.fileUrl,controls

그러면 이제 controls가 생겼고 재생이 된다.

다시 한번 되짚어 보겠다.

middleware를 만들어 봤고 limits설정하는것도 했다. avatar와 video에 각각 원하는 용량으로 제한하면 된다.

watch.pug에서 video도 추가해봤다. 그리고 영상이 실제로 존재하니까 fileURL도 추가해 주었다.

uploadVideo로는 영상을 업로드하고 있다.

그리고 path를 바로 꺼내고 path을 쓸수 있게 변경 해주었다.

videoController.js에서

export const postUpload = async (req, res) => {
  const { path } = req.file;
  const { title, description, hashtags } = req.body;
  try {
    await Video.create({
      title,
      description,
      fileUrl:path,
      hashtags: Video.formatHashtags(hashtags),
    });

그리고 다른 방법은 request.file.path가 있다는 것을 알고 있다.

이것 자체를 바꿀수는 없지만 path를 req.file.path에서 받은뒤

이름을 fileUrl로 바꿀수 있다.

export const postUpload = async (req, res) => {
  const { path: fileUrl } = req.file;
  const { title, description, hashtags } = req.body;
  try {
    await Video.create({
      title,
      description,
      fileUrl,
      hashtags: Video.formatHashtags(hashtags),
    });

그러면 이렇게 바꿀수 있게 된다. 이게 바로 ES6의 힘이다.

현재 브라우저가 uploads폴더에 있는 내용을 볼수 있게 해야한다.

브라우저가 서버에 있는 파일에 접근할수 없으니까 그렇다. 브라우저한테 어디로 가야 하는지 얘기해줘야 한다.

그리고 브라우저가 서버의 어떤 폴더로든 갈수 있는건 보안상 좋지 않다.

그래서 브라우저가 어떤 페이지와 폴더를 볼수 있는지 알려줘야 한다.

그러기 위해 static files serving이라는걸 활성화 해준다.

폴더 전체를 브라우저에게 노출시킨다는 의미이다. 폴더를 만들고 그 폴더를 브라우저에게 노출 시키는 거다.

먼저 /uploads route를 만들어야 한다.

server.js에서

app.use("/uploads", express.static("uploads"));

app.use를 써서 "/uploads"로 간다면 그리고 폴더를 노출시킨다.

노출시키는 방법은 express.static()이다.

static()에는 노출시키고 싶은 폴더의 이름을 쓰면 된다.

vsc에서 정의를 보면 디렉토리 내부의 파일을 제공한다고 명시되어 있다.

그래서 "uploads"를 입력해 주면 된다. 새로고침을 하면 이미지가 안나오던데

서버는 잘 받고 있는데 서버에서 에러가 나던데 서버를 껐다 다시 재시작 해주니 잘 작동한다.

새탭에서 이미지를 열면 확장가 없어서 다운로드 할려고 한다.

확장자는 없지만 컴퓨터는 이해하고 있다. 브라우저도 이해하고 있다는 말이다.

다시 한번 말하자면 처음 원했던건 파일을 업로드 하는거였다.

서버로 파일을 보내고 싶었다. 먼저 views의 edit-profile에 파일을 받는 input을 만들었다.

    img(src="/" + loggedInUser.avatarUrl, width="100",height="100")

그리고 다른 파일은 필요 없으니 이미지만 받는다고 설정했다.

파일 input을 만들었고 원하는건 서버에 이미지를 저장하고 그 이미지에 대한 정보를 얻는거였다.

그래서 multer라는 middelware를 사용했다.

export const uploadFiles = multer({ dest: "uploads/" });

form으로 보낸 파일을 업로드 해주고, 그 파일에 관한 정보도 제공해주고 다른 기능도 있다.

예를 들면 파일명을 완전히 랜덤으로 생성해준다는 거다.

만약 두명의 유저가 selfile라는 같은 이름의 파일을 업로드 해도 multer가 이름을 바꿔 주기 때문에 아무 문제 없다.

그리고 그 파일을 지정한 폴더에 저장해준다.

그리고 다음 순서의 controller에 파일에 관한 정보를 제공한다.

routers에서 multer를 먼저 사용해주고

userRouter.js에서

userRouter
  .route("/edit")
  .all(protectorMiddleware)
  .get(getEdit)
  .post(uploadFiles.single("avatar"), postEdit);

그 다음 postEdit controller를 사용하면 multer가 시작된다.

파일이 업로드 되고 파일명이 바뀌고 파일이 uploads폴더에 저장되고

그 파일에 관한 정보를 받아서 postEdit에 전달해 주는 거다.

userController.js에서

export const postEdit = async (req, res) => {
  const {
    session: {
      user: { _id, avatarUrl },
    },
    body: { name, email, username, location },
    file,
  } = req;
  const exists = await User.exists({
    _id: { $ne: { _id } },
    $or: [{ username }, { email }],
  });

그리고 postEdit에서 req.file을 사용할수 있다.

postEdit에서는 avatarUrl을 업데이트 할수 있는데 때로는 유저가 파일을 보내지 않을수도 있다.

그래서 꼭 확인해야 한다. form에 file이 있다면 req에 있는 file object를 사용 할수 있다는거고 그말은 file.path가 존재한다는 거다.

그런데 form에 file이 없다면 user의 avatarUrl은 기존의 것이랑 같다.

기존의 avatarUrl은 어디서 오는거냐면 req.session.user.avatarUrl에서 오는 거다.

기존 avatarUrl을 현재 로그인된 유저로 부터 가져오는 거다.

그리고 avatarUrl이 생기긴 했지만 그걸로는 충분하지 않다.

브라우저가 아직 이 파일이 존재하는지 모르기 때문이다.시도해봤지만 404에러가 뜨고 작동하지 않았다.

작동하지 않은 이유는 서버가 /uploads/랜덤값라는url을 이해하도록 설정되지 않아서 그랬다.

그래서 server.js에서

app.use("/uploads", express.static("uploads"));

Express에게 만약 누군가 /uploads로 가려고 한다면 uploads폴더의 내용을 보여주라고 했다.

uploads폴더는 multer가 파일을 저장하는 곳이다.

만약 다른 사진을 새로 아바타로 설정한다면 폴더에 또 새로운 이미지 파일이 생기는거다.

사이트가 활성화 되었을때 트래픽량이나 여러 모로 안 좋을것 같다.

이 방법의 문제점을 해결해 보도록 한다.

첫번째 문제점은 파일을 서버에 저장한다는거다. 좋은 생각이 아니다. 서버는 계속 종료되고 다시 시작하는걸 반복한다.

뭔가를 업데이트하면 새로운 서버를 만들어서 다시 시작하는거다.

그 전 서버에 저장 돼있던 파일들은 날아가는거다.

그렇다면 서버가 두개 필요하다면 어떨까? 하나의 백엔드를 만들더라도 서버 두개가 필요할때가 있다.

방문자가 너무 많으면 그럴수도 있다. 그럼 두개의 서버에서 uploads폴더를 공유해야 하나? 그건 너무 이상하다.

서버가 죽으면 어떻게 될까?

서버가 죽으면 서버를 시작할수 있는 코드를 가지고 다른 서버에서 다시 시작하면 된다.

그런데 서버가 죽었을때 코드와 업로드된 파일들이 있다면 파일은 날리는 거다.

그래서 나중에 이방법을 바꿀 건데 파일을 서버에 저장하는게 아니라 다른곳에 저장하는거다.

서버가 사라졌다 다시 돌아와도 파일은 그대로 있도록 말이다. 파일을 안전하게 저장하는거다.

이건 나중에 실제 서버에 배포할때 해본다.

한가지 꼭 기억할게 있다. DB에 절대 파일을 저장하면 안된다.

DB에는 파일 자체가 아니라 파일의 위치를 저장하는거다.

그래서 파일 원본은 Amazon의 하드드라이브 같은데 저장하면된다.

DB에는 url을 저장하면 된다.

다음 파트에서는 배운걸 연습하고 video model에 한가지를 추가할거다.

video model에는 video file이 없다.

아바타에 했던걸 활용해서 video file url을 만들어 본다.

controller를 마무리 해본다.

이제 req.file이 생겼고, 경로를 얻어야 한다.

userController.js에서

export const postEdit = async (req, res) => {
  const {
    session: {
      user: { _id },
    },
    body: { name, email, username, location },
    file: { path },
  } = req;

req에서 file:{ path}를 꺼내준다. 그리고 path를 findByIdAndUpdate에 보낸다.

const updatedUser = await User.findByIdAndUpdate(
    _id,
    {
      avatarUrl:path,
      name,
      email,
      username,
      location,
    },

avatarUrl:path를 입력해준다. 여기서 약간의 문제가 있다.

사용자가 아바타를 바꾸지 않았을때 발생한다.

그전에 콘솔로 확인해 본다.

export const postEdit = async (req, res) => {
  const {
    session: {
      user: { _id },
    },
    body: { name, email, username, location },
    file: { path },
  } = req;
  console.log(path);

사용자가 아바타를 바꾸지 않았을때 어떻게 되는지 확인하기 위해서다.

새로고침 한 다음 아바타는 변경하지 않고 이름만 변경해서 프로필을 업데이트 해보았다.

TypeError: Cannot read properties of undefined (reading 'path')

아바타를 변경하지 않았는데 에러가 났다. 콘솔을 확인해 보니 에러가 뜬다.

undefined의 path property를 읽을 수 없다고 한다.

무슨 말이냐면 file이 undefined라서 path를 찾을 수 없다는 거다.

파일을 보내지 않으면 req안에 file은 undefined가 된다.

export const postEdit = async (req, res) => {
  const {
    session: {
      user: { _id },
    },
    body: { name, email, username, location },
    file,
  } = req;
  console.log(file);

이렇게 해주고 다시 테스트해 본다. 이름만 변경하고 업데이트 해본다. 저장 되었고

콘솔을 확인해 보면 파일은 undefined이다.

file이 존재하지 않으면 avatarUrl:file.path를 사용 할수 없다.

avatarUrl을 빈 내용으로 만드는거랑 마찬가지이다.

사용자가 이미 아바타가 있다면 undefined인 아바타를 보내면 안된다.

대신에 session으로 user정보를 사용 할수 있었다.

export const postEdit = async (req, res) => {
  const {
    session: {
      user: { _id,avatarUrl },
    },
    body: { name, email, username, location },
    file,
  } = req;
  console.log(file);
const updatedUser = await User.findByIdAndUpdate(
    _id,
    {
      avatarUrl: file ? file.path : avatarUrl,
      name,
      email,
      username,
      location,
    },

user에는 avatarUrl이 있다. 그래서 기존 avatarUrl을 찾을수 있다.

그리고 간단한 if else를 사용하면 된다.

파일이 존재한다면 그러니까 유저가 form으로 파일을 보낸다면 file.path을 쓰고

존재하지 않는다면 기존 avatarUrl을 유지할거다.

어떤 때는 파일이 undefined일 수 있다. file이 존재한다면 file.path가 있다는 말이다.

file이 존재한다는건 user가 input으로 file을 보냈다는 거다,

file이 존재하지 않는다면 사용자가 input을 건드리지 않았다는 거고,

file이 존재하지 않으면 기존 avatarUrl로 저장 할거다.

새로운 avatarUrl을 session의 user object에 있는 기존 것으로 하겠다는 거다.

session에는 user object가 있고 거기에 있는 정보를 사용할 수 있다.

_id를 사용한 것처럼 기존의 avatarUrl을 사용 할수 있다.

테스트를 해본다. 먼저 아바타를 설정하고 업데이트 프로필 버튼을 클릭해준다.

업데이트가 잘 된것같다. DB에서도 확인해 본다.

db.users.find({})해주면 여러 정보가 나오는데 avatarUrl에도 나오는데

uploads/와 랜던된 값이 같이 나온다.

이제 uploads폴더를 보면 새로운 파일이 생겨 있다.

commit하기전에 uploads폴더를 .gitignore에 추가하는거를 잊지 말자

/node_modules
.env
/uploads

gitignore에 추가하면 깃허브에 폴더가 업로드 되지 않는다.

form에 파일을 보낼때도 있고 아닐때도 있다.

그래서 form으로 파일을 보내는걸 확인하면 그 파일을 새로운 avatarUrl로 저장해주는 거다.

파일을 보내지 않으면 user에 기존 avatarUrl이 그대로 새로운 avatarUrl로 된다.

그리고 이제 다시 프로필을 업데이트 해본다. 이번에는 아바타 파일을 보내지 않을거다.

다시 DB를 확인해 보면 avatarUrl에는 그대로 유지 되고 있다.

이제 파일을 보내지 않아도 에러가 생기지 않는다.

이렇게 파일을 업로드하고, 파일URL을 저장하게 되었다.

절대로 DB에 파일을 저장하면 안된다.

대신에 폴더에 파일을 저장하고 DB에는 그 파일의 위치만 저장하는거다.

이제 user에는 avatarUrl이 있으니 사용해 볼수 있다.

그래서 edit-profile 페이지에다가 이미지를 만들거다.

block content
    img(src=loggedInUser.avatarUrl, width="100",height="100

img의 src는 loggedInUser.avatarUrl이다.

user에는 avatarUrl이 있다는걸 명심한다.

middleware.js에서

export const localsMiddleware = (req, res, next) => {
  res.locals.loggedIn = Boolean(req.session.loggedIn);
  res.locals.siteName = "Wetube";
  res.locals.loggedInUser = req.session.user || {};
  next();
};

다시 한번 설명하면 loggedInUser는 현재 로그인 된 사용자고 localsMiddleware를 통해 pug에 전달되고 있다.

locals에 저장하는 모든 정보는 views에서 사용 가능하다.

img가 생겼으니 img에 100px의 width,height를 설정해 준다.

CSS 작업하기 전까지만 일단 이렇게 사용 하기로 한다.

새로고침을 하면 사진이 에러가 난다. 이미지가 보여야 되는데 검사를 해서 확인해 본다.

src는 괜찮은것 같다. 콘솔에서 확인하면 이미지를 찾을수 없다고 한다.

새로운 탭으로 열어서 확인해 보면

Cannot GET /users/uploads/597ad456bcec6a0743a383a1653d5499

링크에 문제가 있다. 이미지가 uploads/로 저장되어 있는데 여기서는 상대 URl로 바뀌었다.

block content
    img(src="/" + loggedInUser.avatarUrl, width="100",height="100")

이렇게 바꿔준다. 새로고침을 하고 확인해보면 아직도 에러가 나고 있긴 하다.

이유는 해당 URL을 만들지 않았다. Express한테 uploads폴더가 새로 생겼다고 말해준적이 없다.

링크에 있는 모든 것들이 router에 있어야 되는데 그렇지 않다.

파일을 업로드 하는 방법을 알아 본다.

업로드 하려면 먼저 로그인이 돼 있어야 한다. 깃허브로 로그인 한다. 그리고 input을 추가한다.

block content
    if errorMessage
        span=errorMessage
    form(method="POST")
        label(for="avatar") Avatar
        input(type="file", id="avatar", name="avatar",accept="image/*")

change-password가 아니라 edit-profile에서 추가해준다. type="file"인 input을 추가한다.

Avatar라는 label을 먼저 만들고 label(for="avatar")를 입력하고 input에 id="avatar"를 추가 해준다.

이 두개가 합쳐져서 클릭하면 아바타를 선택할수 있다. 그리고 avatar에 name을 줘야 한다.

여전히 form에 name을 줘야 하기 때문이다. name="avatar"라고 해준다.

사용자가 파일을 선택할수 있는데 pdf같은 파일을 선택 할수도 있다.

모든 이미지 파일만 받아 들일수 있게 해준다. accept="image/*" 를 사용 하면 된다.

어떤 이미지 파일이든 선택할수 있게 되었다.

input을 만드는게 첫 단계이다.

두번째는 이것을 도와줄 middleware를 사용한다.

여기 multer라는 middleware가 있다.

https://www.npmjs.com/package/multer

multer는 파일을 업로드 할수 있게 해준다.npm i multer로 설치해준다.

그리고 multer를 사용법을 알아 본다.

NOTE: Multer will not process any form which is not multipart (multipart/form-data).

"multer는 multipart가 아닌 form을 처리하지 않는다." 라고 되있다.

multer의 도움을 받고 싶다면 form을 multipart form으로 만들어야 한다.

form에다가 enctype="multipart/form-data"를 추가해준다.

block content
    if errorMessage
        span=errorMessage
    form(method="POST", enctype="multipart/form-data")

이렇게 해준건 form이 다르게 encode된다는 의미이다.

이게 파일을 업로드 하기 위한 유일한 조건이다. form을 multipart/form-data로 만들어 주면 된다.

이게 파일을 백엔드로 보내기 위해 필요한 encoding type(enctype)이다.

그리고 다음은 middleware를 만들어 줘야 한다.

const upload = multer({ dest: 'uploads/' })
app.post('/profile', upload.single('avatar'), function (req, res, next) {
  // req.file is the `avatar` file
  // req.body will hold the text fields, if there were any
})

middleware를 설정 해주고 이 경우에는 설정과 함께 multer 함수를 사용해서 middleware를 만들고 route에서 사용하는 거다.

먼저 middleware를 만들어 본다. middleware.js에서

export const uploadFiles = multer({ dest: "uploads/" });

여기에서는 req,res를 쓰지 않는다. 대신 multer()를 쓰고 설정한다.

multer에는 configuration object가 있다.

살펴보면 보낼수 있는것 중 하나는 destination이다. 파일을 어디에 보낼지 정한다.

사용자가 파일을 보내면 사용자로부터 파일을 받으면 그 파일을 어딘가에 저장을 해야한다.

예를 들면 하드드라이브 같은 곳 말이다. 나중에는 이게 좋지 않은 이유를 알아 보고

다른 곳으로 저장 시킬거다.

그리고 잊지 말고 multer를 import한다.

현재는 파일들을 하드드라이브에 저장해야 된다고 가정하고 진행한다.

const upload = multer({ dest: 'uploads/' })

이 경우에 uploads라는 폴더를 만들고 그리고 multer에게 사용자가 업로드 하는 모든 파일들을 서버의 uploads폴더에 저장하라고 하는거다.

그래서 multer({ dest: "uploads/" })라고 해주었다.

사용자가 보낸 파일을 uploads폴더에 저장하도록 설정된 middleware가 생겼다.

아직 그 폴더가 없어서 에러가 날거다. 폴더를 만들어 준다. (강의에서는 생기던데...)

이제 middleware를 route에 사용한다. controller에는 사용하지 않는다.

route로 이동한다. 그리고 edit-profile에서 사용 해준다.

get이 아니라 post에 사용해 준다. 사용방법을 살펴보면

app.post('/profile', upload.none(), function (req, res, next) {
  // req.body contains the text fields
})

middleware를 쓰고 controller함수를 사용하는거다.

다시 설명하면 url이 있고 middleware, 그리고 controller함수를 쓰는 거다.

이미 url이 있고 post에서 middleware를 사용한다. 그리고 controller함수를 쓰면 된다.

먼저 uploadFiles middleware를 사용한다.

userRouter.get("/logout", protectorMiddleware, logout);
userRouter
  .route("/edit")
  .all(protectorMiddleware)
  .get(getEdit)
  .post(uploadFiles.single("avatar"), postEdit);

uploadFiles.을 써주고 fields,none,single,array등이 있다.

사용자가 다수의 파일을 보내야 될때도 있어서 그렇다.

현재는 하나의 파일만 필요하니 single로 사용해 준다. 그리고 filedName을 써줘야 한다.

formt의 어디에서 파일이 오고 있냐면 avatar에서 오고 있다. 그래서 avatar를 넣어 주었다. 그리고 string이여야 한다.

조금 헷갈릴수 있는데 middleware를 실행한 다음 postEdit을 실행 하는거다.

왜 이렇게 하냐면 multer는 input으로 avatar파일을 받아서 그 파일을 uploads폴더에 저장한 다음 그 파일 정보를 postEdit에 전달해 주는거다.

middleware는 왼쪽에서 오른쪽 순서로 작동한다는 걸 기억한다.

multer middleware가 먼저 실행되고 그 다음 postEdit이 실행되는 거다.

다시 한번 정리하면 uploadFiles.single이 하는 역할은 template의 input에서

오는 avatar파일을 가지고 파일을 업로드 하고 uploads폴더에 저장한다.

그리고 다음 controller인 postEdit에 그 파일의 정보를 전달하는 거다.

좋은점은 이렇게 하면 request에 req.file이 추가 된다는거다.

function (req, res, next) {
  // req.file is the `avatar` file

현재는 이미 form data인 req.body를 알고 있다. 이제 이걸 사용하기에

userRouter.get("/logout", protectorMiddleware, logout);
userRouter
  .route("/edit")
  .all(protectorMiddleware)
  .get(getEdit)
  .post(uploadFiles.single("avatar"), postEdit);

이 코드가 req.file을 사용하게끔 해주는 거다.

사용자가 url로 form을 보내면 middleware를 걸쳐서 middleware는 사진을 시스템에 저장하고 , req.file을 추가 할거다.

그리고 나서 controller를 실행시키면 req.file과 req.body를 사용 할수 있다.

현재 controller는 이미 req.body를 사용하고 있다.

하지만 아직 req.file이 어떻게 생겼는지는 모른다.

export const postEdit = async (req, res) => {
  const {
    session: {
      user: { _id },
    },
    body: { name, email, username, location },
    file,
  } = req;
  console.log(file);

콘솔을 이용해서 확인해 본다. 에러가 없다. 아직 파일을 사용하고 있지 않지만

있어서 나쁠건 없다. 파일을 업로드 하면 어떤일도 발생하지 않지만 콘솔을 확인해 보면

file을 볼수 있다. 파일 경로도 나온다. 파일명은 랜덤은로 만들어 졌다.

원본 파일명도 나온다. type도 있고, destination도 있고, 파일명과 경로로 있다.

이제 uploads폴더를 확인해 본다. 살펴보면 현재 파일은 jpeg 같은 확장자가 없다.

그래도 브라우저는 이해하기 때문에 상관없다. 파일을 업로드 하는데 성공 했다.

req.file을 사용할수 있는 이유는 userRouter를 보면 postEdit전에 Multer를 사용하고 있다. 반대였다면 postEdit에서 req.file을 사용할수 없다.

middleware의 순서는 아주 중요하다.

userRouter.get("/github/start", publicOnlyMiddleware, startGithubLogin);
userRouter.get("/github/finish", publicOnlyMiddleware, finishGithubLogin);

예를 들어 사용자가 /github/start에 가면 먼저 middleware가 확인하고 다음으로 가는 거랑 같은 거다.

이것도 마찬가지이다. middleware를 확인하고 finishGithubLogin으로 가는거다.

다시 한번 정리하면 single은 하나의 파일만 업로드 한다는거고 파일의 input name 을 middleware에 전달해야 한다.

name은 form의 name이랑 같아야 한다.

path: 'uploads/2ec71c2270a855b3e422a370e005d5b3'

이제 경로(path)로 사용할거다. models의 User에 avatarUrl이 있다.

avatarUrl이 바로 이 경로인건다.

먼저 mongo로 가서 데이터를 삭제 해 주었다.

use wetube를 커맨드 입력해주고 db.sessions,db.users에서 remove({}) 해주면 된다.

그리고 계정을 하나 만들어 본다. 다른건 다 작동하나 비밀번호 수정은 아직 안된다.

그전에 새로운 middelware를 만들어 본다.

깃허브로 로근인하지 않은 사람들을 위한 middleware이다.

깃허브로 로그인하면 무언가를 보여주지 않거나 보여주거나 하는 middelware이다.

비밀번호를 가지고 있는 유저로부터 url을 보호하는 middleware를 만들 수도 있다.

 if (req.session.user.socialOnly === true) {
    return res.redirect("/");
  }

이 코드를 여러 번 반복한다면 middleware를 만들어도 된다. 현재는 아니니 그냥 둔다.

그리고 input에 name을 넣는걸 잊어서는 안된다. 그러면 백엔드에서는 읽을수 없다.

type도 password로 해주는거 잊지 않는다. 이제 이 name들을 controller에서 사용 할거다.

extends ../base

block content 
    form(method="POST")
        input(placeholder="Old Password",name="oldPassword", type="password", requeired)
        input(placeholder="New Password",name="newPassword", type="password", requeired)
        input(placeholder="New Confirm Password",name="newPasswordConfirmation", type="password", requeired)
        input(type="submit", value="Change Password")

바로 여기(pastChangePassword)에서 사용 할거다.

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

name들을 req.body안에서 가져온다.

const { oldPassword, newPassword, newPasswordConfirmation } = req.body;

그리고 현재 로그인한 사용자가 누군지 알아야 한다. 지금은 누가 비밀번호를 변경하려는지 모른다.

이 경우에는 postEdit에서 사용 했던 방식을 쓰면 된다.

누가 로그인 했는지 알려면 user의 id를 확인해야 되기 때문이다.

그리고 비밀번호에 관련 된것들도 바꿔주면 된다.

export const postChangePassword = (req, res) => {
  const {
    session: {
      user: { _id },
    },
    body: { oldPassword, newPassword, newPasswordConfirmation },
  } = req;

session에서 현재 로그인된 사용자를 확인하고 form에서 정보를 가져오는거다.

form에서는 사용자에게 누구냐고 묻지 않는다. 다른 사용자의 정보를 변경 할수 없어야 한다.

이제 사용자가 존재하는지 확인하고 async를 하는거 잊지 말고 그리고 비밀번호를 변경해주면 된다.

새 비밀번호와 비밀번호 확인이 같은지 확인해야 한다.

export const postChangePassword = async (req, res) => {
  const {
    session: {
      user: { _id },
    },
    body: { oldPassword, newPassword, newPasswordConfirmation },
  } = req;
  if (newPassword !== newPasswordConfirmation) {
    return res.render("users/change-password", {
      pageTitle: "Change Password",
      errorMessage: "The new password does not match the confirmation.",
    });
  }
  // send notification
  return res.redirect("/");

getChangePassword에서 썼던 코드를 가져와서 에러메세지를 추가 해주었다.

나중에는 이렇게 에러 메세지를 보내는 대신에 어떤 template에도 보낼수 있는 알림을 사용 할거다.

block content 
    if errorMessage 
        span=errorMessage

그리고 change-password에도 에러메세지를 만들어 준다.

테스트 해보면 잘 된다. 그러나 브라우저는 맞은걸로 알고 비밀번호를 저장하겠냐고 물어본다.

전에도 해봤던 status code를 변경해야 한다.

    return res.status(400).render("users/change-password", {

join에서 에러가 생길때 했었다. 브라우저는 status code를 주시하고 있다.

이번에 할건 기존 비밀번호가 정확한지 확인해야 한다.

bcrypt로 했었다. 적용해 본다.

export const postChangePassword = async (req, res) => {
  const {
    session: {
      user: { _id, password },
    },
    body: { oldPassword, newPassword, newPasswordConfirmation },
  } = req;
  const ok = await bcrypt.compare(oldPassword, password);
  if (!ok) {
    return res.status(400).render("users/change-password", {
      pageTitle: "Change Password",
      errorMessage: "The current password is incorrect.",
    });
  }

const ok = await bcrypt.compare() 넣어준다.

oldPassword를 plain text로 넣고 암호화된 password도 넣어준다.

session에 현재 로그인된 user 정보가 있다. user는 password정보를 포함한 object이다.

그래서 사용자가 form으로 보낸 비밀번호와 session에 있는 비밀번호를 비교 한다.

if(!ok) ok가 아니면 똑같은걸 return한다.

그리고 "기존 비밀번호가 일치하지 않다"로 에러 메세지를 바꿔 준다.

만약 모든게 일치한다면 비밀번호를 변경하도록 해준다. 그 전에 에러 메세지가 잘 나오는지 확인해 본다.

에러 메세지가 잘 나온다.

그 다음 단계는 비밀 번호를 변경해준다.

예전에 비밀번호를 저장하던게 있다.

User.js에서

userSchema.pre("save", async function () {
  this.password = await bcrypt.hash(this.password, 5);
});

비밀번호를 보내고 저장하면 저 함수가 비밀번호를 hash해준다.

함수를 작동시키려면 두가지를 해줘야 한다. 하나는 pre save middleware를 거치고

User.create를 사용하는거다.

pre save middleware가 비밀번호를 hash해주고 있다는걸 기억한다.

그리고 user.save()를 해도 pre save middleware를 작동시킬거다.

export const postChangePassword = async (req, res) => {
  const {
    session: {
      user: { _id, password },
    },
    body: { oldPassword, newPassword, newPasswordConfirmation },
  } = req;
  const ok = await bcrypt.compare(oldPassword, password);
  if (!ok) {
    return res.status(400).render("users/change-password", {
      pageTitle: "Change Password",
      errorMessage: "The current password is incorrect.",
    });
  }
  if (newPassword !== newPasswordConfirmation) {
    return res.status(400).render("users/change-password", {
      pageTitle: "Change Password",
      errorMessage: "The new password does not match the confirmation.",
    });
  }
  user.save();

하지만 이 경우에는 현재 user가 없다. 그래서 먼저 user를 찾아야 한다.

save()함수를 써야 하니까 session에서 로그인된 user를 찾아야 한다.

그 user를 찾으면 save()함수를 사용 할수 있다.

if (newPassword !== newPasswordConfirmation) {
    return res.status(400).render("users/change-password", {
      pageTitle: "Change Password",
      errorMessage: "The new password does not match the confirmation.",
    });
  }
  const user = await User.findById(_id);
  console.log("Old pw", user.password);
  user.password = newPassword;
  console.log("New unhashed pw", user.password);
  await user.save();
  console.log("New pw", user.password);
  // send notification
  return res.redirect("/");
};

const user = await User.findById를 사용하여 session에서 _id를 찾을수 있다.

user를 찾았으니 user.password = newPassword; 해주고 그 다음 user.save()를 사용하는 거다.

user.save()를 하면 pre save가 작동한다. 이걸 작동시키려는 이유는 새로운 비밀번호를 hash하기 위해서이다.

확인할수 있게 console.log(user.password)를 해준다.

매 부분마다 확인할수 있게 console.log(user.password)를 넣어 주었다.

그리고 save()는 promise이다. 그래서 await를 붙여 주었다.

DB에 무언가를 저장하는데는 시간이 걸려서 그렇다.

console.log가 새 비밀번호와 hash된 새 비밀번호를 보여줄거다.

예전 비밀번호도 확인해 본다. 테스트 해서 확인해 보겠다. 잘 된것같다. 콘솔에서도 확인해 본다.

Old pw $2b$05$k0gX8agEfRX0ufJ7H1lOWe99BpAEvMJ9qGPZZ389cRQHCJampVDl2
New unhashed pw 123
New pw $2b$05$.h1dcDGwaXZpF6iS9CC1Pehmb3kwZwOT9aeGozlsZAGAJm9yHgf/a

기존 비밀번호, hash되지 않은 새 비밀번호 그리고 hash된 새 비밀번호가 나온다.

그리고 사용자가 비밀번호를 바꾸면 로그아웃 시키는 기능도 넣어본다.

다시 로그인 하도록 로그아웃 시키는 거다.

const user = await User.findById(_id);
  console.log("Old pw", user.password);
  user.password = newPassword;
  console.log("New unhashed pw", user.password);
  await user.save();
  console.log("New pw", user.password);
  // send notification
  return res.redirect("/users/logout");

테스트 해보니 비밀번호를 바꾸면 로그아웃 시킨다. 그러나 해당 강의에서는 안된다.

그래서 따라 해보기로 한다.

안되는 이유는 비밀번호 변경을 잘목했거나 기존 비밀번호를 session에 있는 비밀번호와 비교해서 그럴수도 있다.

session을 업데이트해주지 않아서 그렇다. session에 있는 hash된 비밀번호가 기존 비밀번호와 일치하는지 확인하고 있다.

그러니 session을 업데이트 해준다.

 const user = await User.findById(_id);
  user.password = newPassword;
  await user.save();
  req.session.user.password = user.password;
  // send notification
  return res.redirect("/users/logout");
};

req.session.user.password = user.password;이렇게 해준다.

왜냐하면 여기서는 비밀번호가 hash 돼 있기 때문이다. DB와 session 두개의 저장소를 사용하고 있다.

session에서 정보를 받으면 업데이트도 해줘야 한다.

form에서 가져온 비밀번호랑 현재 로그인된 사용자의 비밀번호를 비교하고 있는걸 기억한다.

다른 방법도 있다.

export const postChangePassword = async (req, res) => {
  const {
    session: {
      user: { _id },
    },
    body: { oldPassword, newPassword, newPasswordConfirmation },
  } = req;
  const user = await User.findById(_id);
  const ok = await bcrypt.compare(oldPassword, user.password);
  if (!ok) {
    return res.status(400).render("users/change-password", {
      pageTitle: "Change Password",
      errorMessage: "The current password is incorrect.",
    });
  }
  if (newPassword !== newPasswordConfirmation) {
    return res.status(400).render("users/change-password", {
      pageTitle: "Change Password",
      errorMessage: "The new password does not match the confirmation.",
    });
  }

  user.password = newPassword;
  await user.save();
  return res.redirect("/users/logout");
};

여기에 user를 넣고 항상 user.password를 해주는거다.

user를 찾아서 DB에 있는 가장 최근의 비밀번호를 사용하는거다.

session에서 password를 가져오지 않아도 된다. 똑같이 작동한다.

비밀번호 변경으로 넘어가 본다.

그 페이지도 만들어 보고 user profile을 깔끔하게 만들어 본다.

이 다음에는 아바타를 변경하는것도 해본다.

edit-profile.pug에서

        hr
        a(href="change-password") Change Password →

change-password로 가는 링크를 추가해주었다.

보다시피 URL이 아니라 상대 URL을 사용하고 있다. 이렇게 해주면 브라우저가 (/users)부터가 아니라 (/edit)만 바꿔준다.

userController.js로 가서

export const getChangePassword = (req, res) => {
  return res.render("change-password", { pageTitle: "Change Password" });
};
export const postChangePassword = (req, res) => {
  // send notification
  return res.redirect("/");
};

getChangePassword는 "change-password"를 render하도록 한다.

pageTitle은 Change Password이다.

pageTitle을 입력한 이유는 나중에 change-password를 base template으로 부터 extend하는데 pageTitle이 필요하기 때문이다.

postChangePassword에서는 홈으로 redirect를 해준다.

나중에 비밀번호 바꿨다고 알려주는 메세지도 보낼거다.

getChangePassword도 있고 postChangePassword도 있다.

이제 userRouter로 가서 change-password url을 만들어 준다.

userRouter.get("/logout", protectorMiddleware, logout);
userRouter.route("/edit").all(protectorMiddleware).get(getEdit).post(postEdit);
userRouter
  .route("/change-password")
  .all(protectorMiddleware)
  .get(getChangePassword)
  .post(postChangePassword);

테스트해서 확인해 보면 에러가 뜬다. 콘솔에서 확인해 본다.

Error: Failed to lookup view "change-password" in views directory

"view를 찾는데 실패 하였다"고 한다.

view로 가서 change-password.pug를 만들어 준다.

그리고 views폴더에 파일들이 많아졌다. users폴더를 하나 만들어줘서 넣어주었다.

앞으로 많은 templates가 만들어 질텐데 user폴더 video폴더를 만들어서 정리하면 도움이 될거다.

span Change Password

이렇게 해주고 테스트해보면 아직 안되고 있다.

userController.js에서

export const getChangePassword = (req, res) => {
  return res.render("users/change-password", { pageTitle: "Change Password" });

URL을 변경해주면 작동한다. 이렇게 view안 폴더에 template을 넣으면 된다.

물론 이게 몇몇 변화를 일으킨다. 예를 들면 여태 해왔던 것처럼 extends base를 하고 작동시켜 본다.

extends base

block content 
    span Change Password

이렇게 해주고 테스트를 해보면 작동하지 않는다.에러를 살펴보면 users안에 존재하지 않는 base를 찾고 있기 때문에 안되는거다.

이 디렉토리를 벗어나기 위해 ../을 추가해 준다. 그러면 작동한다.

extends ../base

block content 
    span Change Password

template들을 폴더에 넣기로 했다면 파일 시스템을 따라야 한다는 걸 기억해야 한다.

이 경우에는 change-password가 users폴더 안에 있으니까 거기서 나와야 한다.

base.pug를 사용 할수 있도록 했다.

change-password에는 form이 필요하다.

extends ../base

block content 
    form(method="POST")
        input(placeholder="Old Password",name="password", type="password", requeired)
        input(placeholder="New Password",name="password", type="password", requeired)
        input(placeholder="New Confirm Password",name="password2", type="password", requeired)
        input(type="submit", value="Change Password")

한가지 문제점이 존재한다. 깃허브를 통해 계정을 만든 경우에는 비밀번호 변경을 볼수 없어야 한다.

깃허브 계정을 사용했다면 비밀번호가 필요 없기에 그렇다. 그러니 비밀번호를 바꿀 필요가 없다.

두가지 옵션이 있다.

하나는 userController의 getChangePassword에서 로그인된 사용자의 정보를 확인하는거다.

export const getChangePassword = (req, res) => {
  if (req.session.user.socialOnly === true) {
    return res.redirect("/");
  }
  return res.render("users/change-password", { pageTitle: "Change Password" });
};

이게 첫번째 방법이다.

다른방법은 form을 볼수는 있지만 사용할수 없게 하는거다. 비밀번호가 있어야만 변경가능하다고 하는거다.

새로고침을 하면 잘 작동하고 있다. 깃허브로 로그인했을때 change password가 숨겨지면 더 좋을것 같다.

edit-profile view로 가서

block content
    if errorMessage
        span=errorMessage
    form(method="POST")
        input(placeholder="Name",name="name", type="text", requeired, value=loggedInUser.name)
        input(placeholder="Email",name="email", type="email", requeired, value=loggedInUser.email)
        input(placeholder="Username",name="username", type="text", requeired, value=loggedInUser.username)
        input(placeholder="Location",name="location", type="text", requeired, value=loggedInUser.location)
        input(type="submit", value="Update Profile")
        if !loggedInUser.socialOnly 
            hr
            a(href="change-password") Change Password →

loggedInUser는 모든 pug에서 사용 가능한 local에서 가져오는 변수이다.

그래서 loggedInUser을 이용 할수 있는거다.

if !loggedInUser.socialOnly이면 (socialOnly)가 아니라면 링크가 안보이게 해주었다.

새로고침을 하면 링크가 보이지 않게 되었다. 이게 첫 번째 방법이였다.

다른 방법은 링크와 form을 보여주지만 버튼을 없애 줄거다.

DB에 있는 데이터들을 다 지워야 한다. 깃허브가 아니라 form으로 생성된 계정이 필요하기에 그렇다.

DB에서의 업데이트가 프론트엔드에 반영되지 않았다.

프론트엔드는 session으로부터 정보를 얻기 때문이다. session은 로그인 할때 한번만 작성되고 있다.

로그인 하고 나서는 session이 아무것도 안하기 때문이다. 로그인 했을때의 user가 그대로 남아 있는거다.

그래서 DB에 있는 user정보를 업데이트해도 session은 업데이트 되지 않는다.

이제 session을 업데이트 해주면 된다.

두가지 옵션이 있다.

하나는 직접 하는거 req.session.user를 해주고 여기에 정보를 넣어준다.

userController.js에서

await User.findByIdAndUpdate(_id, {
    name,
    email,
    username,
    location,
  });
  req.session.user ={
    name,
    email,
    username,
    location,
  }
  return res.render("edit-profile");
};

이 방법도 괜찮긴 하지만 별로 보기 좋지 않다. 그리고 나머지도 추가해 줘야한다.

이거 말고도 avatarUrl,socialOnly등 더 있다. 이 정보들도 session에 있다.

그래서 req.session.user가 form의 value들이랑 같고 나머지는 기존의 것과 같다고 할거다.

    ...req.session.user,

무엇을 나타내냐면 req.session.user안에 있는 내용을 전해주는 거다.

req.session.user안의 내용을 밖으로 꺼내주는 거다.

이걸 첫줄로 옮겨야 한다. ...req.session.user,에 있는 email,username을 덮어 쓰기에 그렇다.

업데이트를 해주는 거다. 새로고침해서 테스트 해보면 업데이트가 되는걸 확인 할수 있다.

req.session.user = {
    ...req.session.user,
    name,
    email,
    username,
    location,
  };
  return res.redirect("/users/edit");

이렇게 수정해 준다. DB에 있는 session도 업데이트 해준다.

session은 DB에 저장돼 있다는걸 기억한다.

DB랑 req.session을 똑같이 유지 할수 있는거다.

그리고 직접 하는 방법 말고 다른 방법도 있다.

updatedUser를 만드는 거다.

const updatedUser = await User.findByIdAndUpdate(
    _id,
    {
      name,
      email,
      username,
      location,
    },
    { new: true }
  );
  req.session.user = updatedUser;
  return res.redirect("/users/edit");
};

finByIdAndUpdate가 updatedUser를 주기 때문에 req.session.user = updatedUser를 해주면 된다.

그리고 이것만으로는 새로운 updatedUser가 만들어 지지 않는다.

option을 보면 보낼수 있는 object가 하나 있는데

https://mongoosejs.com/docs/api/model.html#model_Model.findByIdAndUpdate

Boolean값을 가진 new이다. 기본적으로 findByIdAndUpdate는 update되기전의 데이터를 return해주고

new:true를 설정해주면 findByIdAndUpdate가 업데이트 된 데이터를 return해준다.

무슨 뜻이냐면 mongoose한테 가장 최근 업데이트 된 object를 원한다고 말하는 거다.

그 이전 데이터는 필요 없고 말이다. 그래서 { new:true}를 추가해 주었다.

findByIdAndUpdate에 세개의 argument를 주고 있다.

첫번째는 업데이트 하려는 user의 id 이고 두번째는 업데이트하려는 정보(object)이고

세번째는 option이다. { new:true} 바로 이거다.

일일이 업데이트 하는것보다 훨씬 나아 보인다. 다시 테스트 하면 여전히 업데이트는 잘 되고 있다.

하지만 문제가 있다. 만약 username을 바꾸려는데 이미 있는 username이거나 email을 바꾸려는데 이미 있는 email이면 어떻게 해주는게 좋을까

user을 생성 할때 이미 해봤었다. 그걸 활용해서 해본다.

  const exists = await User.exists({ $or: [{ username }, { email }] });

이미 있는 username이나 email이면 업데이트 할수 없게 해줘야 한다.

사용자가 username이나 email을 업데이트하려는걸 어떻게 알수 있냐면

body는 form으로부터 정보를 받아온다. form의 정보는 현재 사용자의 정보이고

그래서 form의 정보가 session의 user정보와 같은지 확인해야 될거다.

그러면 사용자가 username이나 email을 바꾸려 한다는 걸 알수 있다.

join에서 했던 exists방식을 사용하면 항상 true가 될거다.

왜냐하면 postEdit에서 사용한 username이랑 email은 현재 session에 있는 사용자의 것이기 때문이다.

그래서 사용자가 이 내용을 변경했는지 알아낼수 있어야 한다.

한가지 방법은 body의 username,email이 session.user에 있는

username,email이랑 다른지 확인해 보는거다.

다르다면 사용자가 username이나 email을 변경하고 싶다는거다.

userController.js에서

export const postEdit = async (req, res) => {
  const {
    session: {
      user: { _id },
    },
    body: { name, email, username, location },
  } = req;
  const exists = await User.exists({
    _id: { $ne: { _id } },
    $or: [{ username }, { email }],
  });

  if (exists) {
    return res.status(400).render("edit-profile", {
      pageTitle: "Edit Profile",
      errorMessage: "This username/email is already taken.",
    });
  }

edit-profile.pug에서

block content
    if errorMessage
        span=errorMessage

이렇게 해주면 에러 메세지까지 join페이지 처럼 똑같지 구현하였다.

middleware를 videoController에 추가 해본다.

그래서 videoRouter의 /edit,/delete, /upload를 보호 할거다.

로그인 돼 있어야만 접근할수 있게 만든다.

이렇게 하는 이유는 나중에 video model과 user mogel을 연결하기 때문이다.

지금은 model들이 나눠져 있다. 현재 video는 아직 user랑 아무 접점이 없다.

나중에 video가 어떤 user에 의해 업로드 되는지 알아 보겠다.

video의 소유자를 설정하는 거다.

소유자를 설정하면 videoController에서 몇가지를 수정해야 한다.

예를 들어 소유자가 아니면 video를 수정할 수 없게 하거나 삭제 할수 없게 하는거다.

video에 소유자를 설정하기 위해 웹사이트에 계정이 있고, 로그인돼 있는 사람만

video를 업ㄹ로드 할수 있게 한다.

그래서 route( /edit,/delete, /upload)를 보호 할거다.

videoRouter.get("/:id([0-9a-f]{24})", watch);
videoRouter.route("/:id([0-9a-f]{24})/edit").get(getEdit).post(postEdit);
videoRouter.route("/:id([0-9a-f]{24})/delete").get(deleteVideo);
videoRouter.route("/upload").get(getUpload).post(postUpload);

모두 get,post를 포함하고 있다. 그래서 all()을 써주면 된다.

videoRouter.get("/:id([0-9a-f]{24})", watch);
videoRouter
  .route("/:id([0-9a-f]{24})/edit")
  .all(protectorMiddleware)
  .get(getEdit)
  .post(postEdit);
videoRouter
  .route("/:id([0-9a-f]{24})/delete")
  .all(protectorMiddleware)
  .get(deleteVideo);
videoRouter
  .route("/upload")
  .all(protectorMiddleware)
  .get(getUpload)
  .post(postUpload);

그리고 prtectorMiddleware를 import를 해줘야 한다.

파일이 열려있고 열어 놓은 파일의 함수를 작성하면 VSC가 import를 도와 준다.

videoRouter의 /edit이 보호 되있고, /delete도 보호 돼있고, /upload도 보호 된다.

이제 Edit Profile을 만들어 준다.

그리고 Upload Video는 로그인 된 사람들만 볼수 있는거니까 바꿔줘야 한다.

base.pug에서

if loggedIn
   li 
      a(href="/videos/upload") Upload Video

Upload Video를 loggedIn안으로 옮겨 준다.

edit-profile.pug를 보면

extends base

block content
    form(method="POST")
        input(placeholder="Name",name="name", type="text", requeired, value=loggedInUser.name)
        input(placeholder="Email",name="email", type="email", requeired, value=loggedInUser.email)
        input(placeholder="Username",name="username", type="text", requeired, value=loggedInUser.username)
        input(placeholder="Location",name="location", type="text", requeired, value=loggedInUser.location)
        input(type="submit", value="Update Profile")

모두 name을 가지고 있다. user가 post request를 보내면 body를 받을수 있다.

userController.js에서

export const postEdit = (req, res) => {
  const {} = req.body;

form으로 부터 받는걸 알고 있다. 다음으로 body로부터 모든걸 받아서 넣어주는거다.

  const { name, email, username, location } = req.body;

그 다음 mongo를 사용해 주면 된다. user를 찾아서 업데이트 해줘야 한다.

user model이 있는걸 확인하고 async를 추가해 준다.

export const postEdit = async (req, res) => {
  const {
    session: {
      user: { id },
    },
    body: { name, email, username, location },
  } = req;
  await User.findByIdAndUpdate(id, {
    name,
    email,
    username,
    location,
  });
  return res.render("edit-profile");
};

그리고 await User.를 쓴다. User.으로 할수 있는게 많다.

예를 들면 findById도 있고 현재는 findByIdAndUpdate를 사용한다.

먼저 업데이트하려는 id를 보내줘야 한다. 현재 로그인된 user의 id를 얻기 위해서

request object를 사용 해야 한다.

request object의 req.session.user가 있다.

user object를 session에 있다는걸 기억하자.

그래서 req.session에 있는 user object에서 id를 찾을수 있다.

좀더 보기 좋게 하기 위해서 session안에서 user를 찾고 id를 꺼내올수 있다.

const id = req.session.user.id와 같은 거다.

이 방법이 좋은 이유는 혼합하기 좋기 때문이다.

예를 들어 이 방법을 사용하면 session안에 있는 user의 id를 찾을수 있다.

req.body안에 있는 name,email,username,location 정보도 가져 올수 있다.

그래서 const id = req.session.user.id와 const { name, email, username, location } = req.body; 를 없애 줄수 있다.

훨씬 보기 좋다. 이게 바로 ES6이다.

req안에 있는 session에서 user의 id를 얻었다.

또 req안에 body에 있는 name,email,username,location을 얻었다.

그리고 User.findByIdAndUpdate()에다가 req.session.user안에 있는 id를 넣어 준다.

업데이트 하기 위해서 name,email,username,location을 넣어준다.

이 변수들은 form에서 온다는걸 기억한다.

input에 name을 입력해 주지 않으면 안된다.

form으로부터 name,email,username,location을 받았다.

이 정보는 req.body에서 찾을 수 있다. 그리고 로그인된 user의 정보를 업데이트 하고 싶다.

보다시피 user가 누구냐고 묻지 않는다. url로 부터 id를 받고 있는게 아니다.

user id를 가지고 있는 session에서 받는거다.

그래서 findByIdAndUpdate함수를 쓸때 첫번째 argument는 id이다.

두번째는 UdateQuery이고 callback을 사용 할수도 있지만 await를 사용 할수도 있다.

한번 테스트를 해보겠다. 새로고침하고 email을 바꿔본다.

업데이트가 되지 않았다. 왜 그런지 알아 본다. 아마 user가 id를 가지고 있지 않을수도 있다.

middleware에서 로그인 된 유저를 console.log해서 확인해 본다.

res.locals.loggedInUser = req.session.user || {};
  console.log(req.session.user);

새로고침하고 email을 수정 시도를 다시 해보고 콘솔을 확인해 보면

id가 아닌 _id의 정보를 받고 있다. 그러면 이제 _id로 바꿔 주면 작동 할거다.

export const postEdit = async (req, res) => {
  const {
    session: {
      user: { _id },
    },
    body: { name, email, username, location },
  } = req;
  await User.findByIdAndUpdate(_id, {

그래도 업데이트 되지 않고 있다. 콘솔에 아무 에러가 없는거 보니 코드가 작동하는건 확실하다.

이번에는 DB를 확인해 본다. DB를 확인해 보니 수정을 요청 한 게 저장이 되어있다.

DB에서 email이 업데이트 되긴 했다. 문제는 페이지에서 새로고침을 해도 바뀌지 않는다는 거다.

홈페이지에서는 계속 이전 이메일이 나온다. DB에는 새로운 이메일인데 말이다.

생각해보면 edit-profile에서 loggedInUser의 값을 입력했다.

그러면 loggedInUser가 언제 생성 된건지 생각해본다.

loggedInUser는 localsMiddleware에서 생성되었다.

middleware.js에서

export const localsMiddleware = (req, res, next) => {

여기서 loggedInUser를 req.session.user이라고 정의 하고 있다.

그러면 req.session.user는 어디서 생성 되는지 알아본다.

바로 로그인 할때이다. 로그인 하는곳으로 가 본다.

userController.js에서

req.session.loggedIn = true;
    req.session.user = user;

여기서 로그인할때 user를 req.session.user에 입력해 준다.

그래서 user는 업데이트 했는데 session이 업데이트 되지 않는다.

DB에서는 user를 업데이트했는데 session은 DB와 연결 돼 있지 않다.

session에 user object를 넣었는데 user object를 업데이트 했다면

session도 업데이트 해줘야 한다.

현재 원하는건 로그인 하지 않은 사람들이 해당 페이지에 가는걸 막는 일이다.

그걸 위해서 Protector Middlewares 를 만드는 거다.

middlewares.js에서

export const proectorMiddleware = (req, res, next) => {
  if (req.session.loggedIn) {
    return next();
  } else {
    return res.redirect("/login");
  }
};

export const publicOnlyMiddleware = (req, res, next) => {
  if (!req.session.loggedIn) {
    return next();
  } else {
    return res.redirect("/");
  }
};

middleware뿐만 아니라 모든 것에 req,res,next가 포함되어 있다는 걸 명심한다.

그리고 사용자가 로그인 돼 있지 않은걸 확인하면 로그인 페이지로 redirect하게 할거다.

사용자가 로그인 돼 있다면 request를 계속 하도록 하는 거다.

controller에서 user를 찾게 하는 방법은 req.session.loggedIn이다.

어느 controller나 middleware에서도 사용 할수 있다.

user가 loggedIn이 되어 있으면 next()함수를 호출 하는거다.

그리고 유저가 loggedIn이 아니라면 로그인 페이지로 redirect하게 된다.

그 다음 로그인 돼 있지 않은 사람들만 접근 할수 있게 하는 middleware도 만든다.

예를 들어 로그인했는데 다시 로그인 페이지로 갈수 있으면 안되는 거다.

방금 전이랑 반대로 만들어 준다.

그리고 loggedIn이 돼 있다면 /로 res.redirect로 해준다.

현재 middleware에서는 user가 loggedIn돼 있다면 요청을 계속 하게 하고

loggedIn돼 있지 않으면 로그인 페이지로 redirect해준다.

다른 middleware는 user가 loggedIn돼 있지 않으면 요청을 계속하게 하고

loggedIn돼 있으면 "/"으로 redirect해준다.

그러면 이 middleware들을 사용해 보도록 한다.

userRouter.js에서

userRouter.get("/logout", protectorMiddleware, logout);
userRouter
  .route("/edit")
  .get(protectorMiddleware, getEdit)
  .post(protectorMiddleware, postEdit);

로그인 돼 있는 사람들만 로그아웃 페이지로 갈수 있어야 한다.

그래서 protectorMiddleware를 추가 할거다.

/edit 에도 protectorMiddleware를 적용해 준다.

middleware를 get이랑 post 둘 다 사용 할수 있게 되었다.

하지만 express에서는 반복해서 사용 할 필요 없이 all()이라는 함수를 사용 하면 된다.

userRouter.route("/edit").all(protectorMiddleware).get(getEdit).post(postEdit);

이렇게 해주면 get,post 등 어떤 http method를 사용 하든지 middleware를 사용 한다는 거다.

이제 startGithubLogin,finishGithubLogin을 싫행시키고 싶다면

publicOnlyMiddleware를 적용하면 된다.

publicOnly는 로그아웃 돼 있어야 실행시키는걸 허락해주니까

로그인 돼 있으면 여기로 올수 없게 보호해주는 거다.

userRouter.get("/github/start", publicOnlyMiddleware, startGithubLogin);
userRouter.get("/github/finish", publicOnlyMiddleware, finishGithubLogin);

그리고 이건 나중에 user를 볼수 있게 해줄거다.

userRouter.get(":id", see);

이건 public도 될수 있고 private도 될수 있을것 같다. 로그인 여부가 상관없는 거다.

그리고 import도 해준다.

import { protectorMiddleware, publicOnlyMiddleware } from "../middlewares";

그리고 이제 새로고침을 해보면 잘 작동 한다.

로그인 된 상태에서 로그인 페이지로 갈수가 있다 이것도 보호 해주도록 한다.

그리고 /github/start로 가본다. 홈페이로 돌아가진다. 잘 작동한다.

rootRouer.js에 가서

rootRouter.route("/join").all(publicOnlyMiddleware).get(getJoin).post(postJoin);
rootRouter
  .route("/login")
  .all(publicOnlyMiddleware)
  .get(getLogin)
  .post(postLogin);

/join,/login에는 로그아웃 된 사람만 갈수 있다.

그래서 두곳에 all()함수를 적용 해주었다. 새로고침 해보니 로그인 상태에서 로그인 페이지로 갈수 없다.

당연히 join페이지도 못 간다.

Edit Profile 페이지를 만들어 본다.

이 페이지를 만들면서 많은 걸 배우게 될거다. 프로필을 바꾸고, form을 사용하는 연습은 물론이고

유저한테 있었으면 하는 아바타 같은 파일도 업로드 해볼거다.

지금은 깃허브로 로그인 해야지만 아바타가 있다.

그래서 웹사이트에서 생성한 계정에도 아바타를 업로드 할수 있게 할거다.

그리고 Github로 계정을 만들어도 아바타를 바꿀수 있도로고 해본다.

파일을 바꾸는 방법도 알아봐야 겠다. 모두 파일에 관련된 거다.

생각해보면 비디오에도 파일이 필요 하다. 현재는 uploadVideo에는 title, dscription, hashtags 밖에 없다.

그래서 video file을 추가 할거다.

지금부터 할것들은 파일 작업을 하기전에 form, url, controller를 연습하는거다.

router, controller, template, form을 이해했으면 파일을 업로드 하는 부분도 이해하기 쉬울거다.

알다시피 userRouter에 가보면 /edit이 있다.

userRouter.get("/edit", edit);

/edit이 있고 controller(edit)도 있다. 그리고 get과 post 두개의 method가 필요하다.

그래서 이걸 export const getEdit으로 하고

userController.js에서

export const getEdit = (req, res) => {
  return res.render("edit-profile", { pageTitle: "Edit Profile" });
};

pageTitle도 필요 해서 넣었다. 나중에 form으로 data를 보낼거다.

지금은 이 controller를 사용해 본다. 그리고 getEdit을 import한다.

userRouter.js에서

import express from "express";
import {
  getEdit,
  logout,
  see,
  startGithubLogin,
  finishGithubLogin,
} from "../controllers/userController";
userRouter.get("/edit", getEdit);

그리고 edit을 getEdit으로 바꿔 준다.

post도 필요하다.

export const postEdit = (req, res) => {
  return res.render("edit-profile");
};

render가 아니라 redirect하게 될지도 모른다. 일단 이렇게 하고

edit을 삭제 해 준다. 이제 getEdit,postEdit이 생겼다.

이제 postEdit을 import해준다.

import express from "express";
import {
  getEdit,
  postEdit,
  logout,
  see,
  startGithubLogin,
  finishGithubLogin,
} from "../controllers/userController";

userRouter.route("/edit").get(getEdit).post(postEdit);

그리고 route를 이용하여 이렇게 코드를 해준다.

다음 단계는 /edit url에 접근 할수 있어야 한다.

그래서 template를 바꿔 볼거다. template의 header에서 링크를 사용하고 있다.

views로 가서 base.pug에서

body 
        header
            h1=pageTitle
            nav 
                ul 
                    li  
                        a(href="/") Home
                    if loggedIn
                        li
                            a(href="/users/edit") Edit Profile

사용자가 로그인 돼 있는 경우에만 editProfile 링크를 볼수 있게 한다.

my profile페이지는 마지막에 다시 만들어 보기로 한다. 지금은 지워 준다.

새로고침하면 로그인이 안되어 있기 때문에 edit profile, logout이 안보인다.

loggenIn이 localsMiddleware에서 온 변수이기 때문이다.

middlewares.js에서

export const localsMiddleware = (req, res, next) => {
  res.locals.loggedIn = Boolean(req.session.loggedIn);
  res.locals.siteName = "Wetube";
  res.locals.loggedInUser = req.session.user;
  next();
};

여기에 있는 loggenIn이 session에 user가 있는지 확인해 준다.

지금 현재 페이지에서는 session에는 user가 없다.

그래서 이런 이유로 loggedIn이 base.pug에서 쓰고 있는 거란걸 꼭 기억한다.

그리고 깃허브 계정으로 로그인 해본다. 해주면 Edit Profile 링크가 생겨 있는걸 알수 있다.

현재 Edit Profile을 클릭하면 views에 edit-profile이 없다고 에러가 생긴다.

views에 가서 edit-profile.pug를 만들어 준다.

그리고 새로고침을 해보면 일단 에러가 뜨진 않는다. 물론 edit-profile이 텅 비어 있긴 하다.

그래서 모든 페이지에서 했던대로 적용해 준다.

extends base

block content 
    form(method="POST")
        input(placeholder="Name",name="name", type="text", requeired)
        input(placeholder="Email",name="email", type="email", requeired)
        input(placeholder="Username",name="username", type="text", requeired)
        input(placeholder="Location",name="location", type="text", requeired)
        input(type="submit", value="Update Profile

base.pug를 extend하고 block content를 추가한다.

base만 입력해줘도 잘 작동한다. input으로 사용 할것을 join.pug에서 활용해서 쓴다.

비밀번호 변경 페이지는 따로 만들어 줄거다. 왜냐하면 비밀번호가 있는 사용자가 있고

없는 사용자가 있어서 그렇다. 그리고 submit input의 value="Update Profile"

새로고침을 해주면 Edit Profile이 생겼다. 그런데 Edit Profile에 갔을때

form이 비어 있으면 안된다. 새로 생성하는게 아니라 수정하는 것이기 때문에

현재 프로필을 볼수 있어야 한다. Edit Video에서 했던 것처럼 말이다.

그럼 이 template로 user object를 가져와 본다.

controller에다가 할수도 있다.

userController.js에서

export const getEdit = (req, res) => {
  return res.render("edit-profile", { pageTitle: "Edit Profile", user: req.session.user });

직접 req.session.user에 있는 user object를 줄수도 있다.

이런식으로 유저를 로그인 시켰다.

하지만 middleware가 있다.

export const localsMiddleware = (req, res, next) => {
  res.locals.loggedIn = Boolean(req.session.loggedIn);
  res.locals.siteName = "Wetube";
  res.locals.loggedInUser = req.session.user;
  next();
};

이 middleware가 현재 로그인된 사용자를 알려준다. 그래서 userController에 이걸 보낼 필요 조차도 없다.

이미 locals를 통해서 loggedInUser를 사용 할수 있다.

이걸 이용해서 로그인 정보를 활용 할수 있는거다. locals은 자동적으로 views로 import된다.

Edit Profile에서 value를 추가 할수 있다.

edit-profile.pug에서

extends base

block content
    form(method="POST")
        input(placeholder="Name",name="name", type="text", requeired, value=loggedInUser.name)
        input(placeholder="Email",name="email", type="email", requeired, value=loggedInUser.email)
        input(placeholder="Username",name="username", type="text", requeired, value=loggedInUser.username)
        input(placeholder="Location",name="location", type="text", requeired, value=loggedInUser.location)
        input(type="submit", value="Update Profile")

그래서 이런식으로 활용 할수 있다. 새로고침 해서 확인해 보면 해당 정보를 보여준다.

loggedInUser도 user인걸 기억해야 한다. 그 말은 user model에 있는 모든걸 template에서 사용 가능하다는 거다.

const userSchema = new mongoose.Schema({
  email: { type: String, required: true, unique: true },
  avatar_url: String,
  socialOnly: { type: Boolean, default: false },
  username: { type: String, required: true, unique: true },
  password: { type: String },
  name: { type: String, required: true },
  location: String,
});

이부분을 얘기 하는 거다. 미리 만들어 놓은 localsMiddelware덕분이다.

이미 form, get,post는 다 해봤었다.

하지만 loggedInUser를 form에 이렇게 사용해 보는건 처음이였다.

만약 이페이지에 로그인 되지 않은 상태로 온다면 어떻게 될까?

당연히 에러가 난다. undefined의 property중 name을 읽을수 없다.

Cannot read properties of undefined (reading 'name')

왜냐하면 name property를 가져오려는데 loggedInUser가 undefined라서 그렇다.

두가지 문제점이 있다.

하나는 loggedInUser에 접근하려는데 로그인 되어 있지 않으면 생기는 에러

둘째는 로그인 돼 있지 않은 사람들은 해당 URL로 가지 못하게 해야 한다.

URL이 작동하지 않고 redirect 시켜줘야 한다.

그러면 몇몇 route를 보호하는 middleware가 필요하겠다.

그전에 이 에러는 middleware에서 쉽게 고칠수 있다.

export const localsMiddleware = (req, res, next) => {
  res.locals.loggedIn = Boolean(req.session.loggedIn);
  res.locals.siteName = "Wetube";
  res.locals.loggedInUser = req.session.user;
  next();
};

보다시피 loggedInUser는 req.session.user인데 이게 undefined일수가 있다.

그래서 이뒤에 or(||)와 빈 object({})를 추가해주면 된다.

  res.locals.loggedInUser = req.session.user || {};

이런식으로 해주면 된다.이렇게 하면 로그인을 안해도 접근 할수는 있다.

loggedInUser를 사용하려 할때 생기는 문제는 고쳤다. 문제는 누구든지 접근 할수 있다는 거다.

이전까지 한 모든 것들은 Github로 로그인을 하기 위함이었다.

링크를 누르면 온갖 기능들이 실행된다.

http://localhost:4000/users/github/start

알다시피 이링크는 users/github/start로 가고 있다.

그건 현재 만든 userRouter.js에 생성한 route이다.

이 route는 controller를 가지고 있다.

그리고 이 controller의 유일한 역할은 몇몇 configuration parameter를

가지고 URL을 만드는 거다.

그래서 baseUrl과 parameter들을 연결 시켰다.

export const startGithubLogin = (req, res) => {
  const baseUrl = "https://github.com/login/oauth/authorize";
  const config = {
    client_id: process.env.GH_CLIENT,
    allow_signup: false,
    scope: "read:user user:email",
  };
  const params = new URLSearchParams(config).toString();
  const finalUrl = `${baseUrl}?${params}`;
  return res.redirect(finalUrl);
};

그렇게 해서 finalUrl을 만들고 여기로 user를 보내주었다.

user를 Github을 보낸거다.

URL을 설정하는 이유는 URL이 Github에게 뭔가를 알려줄수 있어서다.

예를 들면 client_id같은거다. 그래야 Github이 어떤 어플에 로그인하는지 알수 있다.

회원가입도 마찬가지이다.

예를 들어 어플에 어떤 종류의 user를 허용 시킬건지 설정 할수 있다.

그리고 scope에는 user로 뭘 할건지 설정하면 된다.

원하는 어떤 scope도 사용 할수 있다. 하지만 해당 scope으로 요청해야한다.

페이스북이나 구글 같은 웹사이트는 아주 큰 scope을 요구할때 어플 검증을 받아야 한다.

그게 며칠씩이나 걸릴수 있기에 귀찮다.

반면 Github로는 프로필을 읽고 user email에 접근 하는 것외엔 없다.

그래서 Github에 user를 보낼거다.

Github는 비밀번호, 이메일, 보안 관련된 모든 데이터를 가지고 있는데

이 데이터들을 공유하는데 동의를 하면 웹사이트로 되돌아 올거다.

Github가 /github/finish라는 URL로 돌려 보내준다.

userRouter.get("/github/finish", finishGithubLogin);

좀 정확히 말하자면 localhost:4000/users/github/finish이다.

저 URL을 어디에도 만들지 않았다. Github.com 웹사이트에서 만들었다.

URL은 finishGithubLogin이라는 function으로 호출 하는거다.

이 function은 굉장히 크다. 무슨 내용 들이 있는지 살펴 보면

먼저 user가 Github에서 돌아오면 이런 URL에 ?code=xxx가 덧붙여진 내용을 받는다.

/gihut/finish?code=XXX이런 식이다.

이 code는 user가 승인했다고 Github가 알려주는 거다.

그리고 나서 baseUrl과 몇몇 parameter들을 받고

parameter들을 URL의 parameter string으로 바꿔준다.

const params = new URLSearchParams(config).toString();
  const finalUrl = `${baseUrl}?${params}`;
  const tokenRequest = await (
    await fetch(finalUrl, {
      method: "POST",
      headers: {
        Accept: "application/json",
      },
    })
  ).json();

그리고 다른 URL을 만든다.

baseUrl과 config를 더해서 다른 URL을 만드는 거다.

그리고 그 URL로 무엇을 하냐면 POST request를 보낸다.

이 URL에는 Github가 준 code가 담겨져 있다.

모든 것이 올바르다면 Github는 access_token을 준다.

if ("access_token" in tokenRequest) {
    const { access_token } = tokenRequest;
    const apiUrl = "https://api.github.com";
    const userData = await (
      await fetch(`${apiUrl}/user`, {
        headers: {
          Authorization: `token ${access_token}`,
        },
      })
    ).json();

이 access_token은 Github API와 상호작용 할때 쓸거다.

Github API는 굉장히 크다 Github API에 어떤 method를 보내더라도 응답을 보내준다.

access_token만 있다면 말이다. 그리고 user프로필을 받기 위해 요청할수 있다.

그 요청은 api.github.com/user로 갈것이고

access_token을 보내면 user데이터를 받을수 있을거다.

이걸 짧게 쓸수 있는데 await fetch와 await json이 그거다.

(이전 파트에서 await를 쓰지 않으면 어떻게 해야 하는지 해 보았다.)

가끔은 user들이 email을 보여주지 않을때도 있다.

그렇기 때문에 email API에게도 요청을 보내줘야 한다.

const emailData = await (
      await fetch(`${apiUrl}/user/emails`, {
        headers: {
          Authorization: `token ${access_token}`,
        },
      })
    ).json();

그래서 여기에도 똑같은 access_token으로 요청을 보내주면 email arrary를 준다.

그리고 그 email arrary에서 primary이면서 verified된 email을 찾을거다.

const emailObj = emailData.find(
      (email) => email.primary === true && email.verified === true
    );
    if (!emailObj) {
      return res.redirect("/login");
    }
    let user = await User.findOne({ email: emailObj.email });
    if (!user) {
      user = await User.create({
        avatarUrl: userData.avatar_url,
        name: userData.name ? userData.name : userData.login,
        username: userData.login,
        email: emailObj.email,
        password: "",
        socialOnly: true,
        location: userData.location,
      });
    }
    req.session.loggedIn = true;
    req.session.user = user;
    return res.redirect("/");
  } else {
    return res.redirect("/login");
  }
};

만일 찾지 못한다면 user를 로그인 페이지로 돌아가게 만들고 나중에는 notification을 설정해준다.

(그건 나중에 해보도록 한다.)

notification을 설정하는 이유는 유저한테 Github로 로그인 했다는걸 알려주기 위해서다.

그런데 Github에 verification된 email이 없으니 믿을수 없는거다.

만일 primary이면서 verified된 email을 찾게 된다면

데이터베이스에서 해당 email을 찾게 된다면 유저를 로그인 시킬거다.

만일 데이터베이스에서 email을 찾지 못했을 경우 그 email로 user를 만들거다.

해당 email과 Github에 보낸 모든 데이터를 가지고 user를 만든다.

socialOnly가 true이면 Github로 로그인을 통해 만들어진 계정이란 뜻이 된다.

그렇기에 해당 사용자는 password가 없으므로 login form을 사용할수 없다.

원한다면 무작위 password를 만들어 볼수도 있다.

Github가 무작위 password를 줄거라고 생각한다.

node_id가 바로 무작위 password이다.

 node_id: 'U_kgDOBXfSMQ',

원한다면 유저가 비밀번호를 아예 모르게끔 설정 할수 있다. 빈 password에 socialOnly는 true로 만들었다.

그 이유는 postLogin에서

export const postLogin = async (req, res) => {
  const { username, password } = req.body;
  const pageTitle = "Login";
  const user = await User.findOne({ username, socialOnly: false });
  if (!user) {
    return res.status(400).render("login", {
      pageTitle,
      errorMessage: "An account with this username does not exists.",
    });
  }

user가 로그인 하는걸 체크할때 socialOnly가 false인걸 확인하려는 거다.

왜냐하면 socialOnly가 false이면 username과 password로만 로그인 할수 있는 유저이고

socialOnly가 true라는건 password가 없다는 소리이다.

중요한 건 여기에서 username email 같은 걸 전부 쓰고 있기 때문에 뭔가 하나로 통합하고 싶을거다.

그러면 username필드를 제거해 본다.

username과 email이 공존할 필요 없이 email만 써도 된다.

다음 포인트는 이것들이 전부 실행되면 쿠키가 생긴다는 거다.

 if (!user) {
      user = await User.create({
        avatarUrl: userData.avatar_url,
        name: userData.name ? userData.name : userData.login,
        username: userData.login,
        email: emailObj.email,
        password: "",
        socialOnly: true,
        location: userData.location,
      });
    }

logout기능도 구현했다. 정말 단순하다.

export const logout = (req, res) => {
  req.session.destroy();
  return res.redirect("/");
};

그리고 logoutController로 logout URL을 만들었다.

userRouter.get("/logout", logout);

이 controller는 userController로부터 온다. session을 destroy했고 그 다음 redirect를 했다.

user가 redirect 되면 session이 없어진다. 그러면 유저가 로그아웃 된다.

이런 흐름은 어디에서든 적용이 된다. 물론 페이스북이나 구글 같은 곳은 좀 더 복잡할거다.

왜냐하면 거긴 더 크니 인증 절차 거치고, 기다리고 그러기 때문이다.

그런데 트위터, 카카오톡, 인스타그램은 매우 비슷하다. 물론 client_id같은 이름이 똑같지 않을 거다.

app_id 일수도 있다. 하지만 방법은 똑같은 거다.

user를 소셜 웹사이트로 보내면 몇몇 code와 함께 웹사이트로 돌려보내고

그 code로 API에 request를 보낼수 있다. 이제 user인증을 끝냈다.

다음 파트에선 user프로필 부분을 할거다. 그리고 파일에 대해서다 알아 보겠다.

왜냐하면 Github으로 로그인해서 계정을 만들때 user에게 avatar URL을 준다.

그 말인 즉슨 user한테 avatarUrl이 있다는 거다.

그런데 소셜 로그인이 아닌 다른 방법으로 계정을 만든 경우를 생각해보면

email과 password로 계정은 만든 유저들은 avatarUrl이 없다.

그래서 프로필 수정을 구현하고 백엔드에 어떻게 파일들을 보낼수 있는지 알아 보겠다.

Github user뿐만아니라 모든 user가 avatarUrl을 가지게 할거다.

비디오를 만들때도 써 먹을수 있을거다. 비디오 파일을 보낼수 있어야 하기 때문이다.

그게 한 가지 기대되는 포인트고 또 다른 하나는 프로필 수정 페이지를 만들어 볼거다.

프로필 수정 페이지에서는 avatar를 설정할수 있고 원하는 모든 걸 수정 할수 있게 만들거다.

password도 바꿀 수 있게 한다.

하지만 socialOnly가 true인 경우는 제외 할거다.

socialOnly가 true이면 password를 가지고 있지 않으니깐 말이다.

깃헙 프로필의 email이 데이터베이스에 있을때 유저가 로그인할 수 있게 해주었다.

그 말이 즉슨 Github가 주는 user의 email을 쓰겠다는거다.

primary이면서 verified된 email을 찾는다는 거다.

만일 찾았을 경우에 그 email을 데이터베이스에서 찾는거다.

만일 그 유저를 찾았다면 들어오게 할거다. 로그인 시킨다는 말이다.

그러면 누가 로그인되느냐 먼저 Github로 계정을 만든 사람이거나

username과 password로 계정을 만든 사람이 있는데 두 가지 경우 모두 로그인이

가능하다. 왜냐하면 같은 email이기 때문이다.

그래서 username과 password로 계정을 만든 사람의 경우 Github을 통해서 로그인도 가능하다.

왜냐하면 데이터베이스에 있는 email과 Github에 있는 email이 같다.

이런식으로 카카오톡으로 계정 생성하는것도 구현할수 있다.

만일 카카오톡이 email을 return하면 그 email을 찾고 해당되는 유저를 찾아

로그인 시켜주는거다.

Github으로 계정을 만들었든 password로 만들었든지 간에 말이다.

이게 여기서 적용되는 규칮이다. user를 찾을 뿐이다.

어떤식으로 로그인 했는지는 관심없다. 어떤 식으로 계정을 만들었는지도 관심없고

Github가 준것과 똑같은 email을 찾게 되면 해당 user를 로그인 시킬거다.

DB에 Github email을 가진 user가 없다면 새로운 계정을 만들어서

그 user를 로그인 시킬거다.

하지만 schema의 한 부분을 바꾼 적이 있다. 바로 socialOnly이다.

socialOnly는 해당 계정을 password로 로그인 할수 없다는 것을 알려준다.

이건 오직 소셜 로그인으로만 로그인 할수 있다는 말이다.

그래서 무얼 해볼수가 있냐면 postLogin으로 와서 username을 가진 유저를 찾을때

socialOnly가 false인 유저만 찾게 만들수 있다.

export const postLogin = async (req, res) => {
  const { username, password } = req.body;
  const pageTitle = "Login";
  const user = await User.findOne({ username, socialOnly: false });

여기 postLogin에서 form에 입력한 username을 가지고

socialOnly가 false인 user를 찾는 거다.

왜냐하면 몇몇 사람들은 Github로 로그인 했는지 password를 통해 로그인했는지 잊어 버리기 때문이다.

그래서 여기서 뭘 하고 있냐면 Github데이터를 가지고 user를 생성하고 있고

 const user = await User.create({
        name: userData.name ? userData.name : userData.login,
        username: userData.login,
        email: emailObj.email,
        password: "",
        socialOnly: true,
        location: userData.location,
      });

그 user를 로그인시키고 있다. 근데 2번씩이나 반복하고 있다.

let existingUser로 수정해준다.

 let existingUser = await User.findOne({ email: emailObj.email });
    if (existingUser) {
      req.session.loggedIn = true;
      req.session.user = existingUser;
      return res.redirect("/");

그리고 만일 exstingUser가 없다면 이부분을 다 실행 할거다.

    let user = await User.findOne({ email: emailObj.email });
    if (!user) {
      user = await User.create({
        name: userData.name ? userData.name : userData.login,
        username: userData.login,
        email: emailObj.email,
        password: "",
        socialOnly: true,
        location: userData.location,
      });
    }
    req.session.loggedIn = true;
    req.session.user = user;
    return res.redirect("/");
  } else {
    return res.redirect("/login");
  }
};

그리고 마지막엔 이렇게 할거다. 그리고 existingUser대신 user라고 한다.

이렇게 user를 찾고 있고 이 유저를 찾게 되면 이 모든 것들을 건너뛰고 user를 로그인 할거다.

만일 user를 못 찾았다면 user를 새로 만든 user로 정의 할거다.

그리고 user를 로그인 할거다.

이미 저번 파트에서 Github 을 통해서 계정을 만들었다.

그래서 어떻게 작동하냐면 이 부분에서 로그인 될거다.

req.session.loggedIn = true;
    req.session.user = user;
    return res.redirect("/");

테스트해보겠다. 쿠키를 삭제해주고 새로고침을 하면 로그아웃이 되고

Continue with Github을 눌러서 로그인이 된다.

그리고 데이터베이스에는 한 user만 있다. 이건 socialOnly가 true인 경우에만 일어난다.

이말은 해당 계정은 Github로 만들어졌고 password가 없다는 소리이다.

모든 user를 지우고 쿠키도 지워 본다. 다시 로그아웃 되었다.

그리고 새로운 이메일로 가입을 해 보겠다.

user를 확인해 보면 socialOnly는 false로 나온다.

그 다음에 Github을 이용해서 로그인해서 작동해 본다. 그리고 다시 user를 찾아 보면

socialOnly 가 true로 나온다.

그리고 이제 웹사이트에 계정이 존재한다면 username과 password로 로그인했든

Github로 계정 생성을 했든 로그인 할거다.

Github에서 가져오는 데이터는 굉장히 중요한 것이다.

그러니 avatar_url을 저장해 볼수도 있다.

왜냐하면 다음 섹션에서 avatar와 파일들에 대해 다뤄 볼거다.

avatar_url: 'https://avatars.githubusercontent.com/u/91738673?v=4',

바로 이 url을 이용해서 말이다.

그래서 이걸 users schema에 추가해 볼거다.

User.js에서

const userSchema = new mongoose.Schema({
  avatar_url: String,

type은 string으로 해준다. 그리고 required가 아니니깐 그냥 string만 적어준다.

이건 굉장히 유용하다. 왜냐하면 user들이 avatar를 가지고 있길 원한다.

그리고 Github은 필요한 링크를 준다. avatar_url을 클릭해보면 프로필 사진을 띄워 준다.

만일 user가 Github으로부터 넘어왔다면 한가지를 더 추가해 본다.

avatar_url을 추가한다.

userController.js에서

user = await User.create({
        avatarUrl: userData.avatar_url,

그리고 user객체들은 전부 userData에서 온다는걸 기억하자.

그러니 userData.avatar_url을 쓰면 된다.

avatarUrl이 없는 user는 email과 password로만 계정을 만들었다는 소리이다.

하지만 프로필 수정을 하면 바뀌게 된다.

다시 한번 기억해 본다. userData는 API로 부터 오며 emailData 또한 Github API로부터 온다.

여기 만든 두개의 request가 있다.

 const userData = await (
      await fetch(`${apiUrl}/user`, {
        headers: {
          Authorization: `token ${access_token}`,
        },
      })
    ).json();
    const emailData = await (
      await fetch(`${apiUrl}/user/emails`, {
        headers: {
          Authorization: `token ${access_token}`,
        },
      })
    ).json();

서로 다른 데이터에 접근 할수 있는 같은 토큰을 사용하고 있다.

이제 로그아웃 페이지를 만들어 본다.

로그아웃의 경우 보다시피 url에 logout이라 되어 있다.

이게 Router상에 있는지 확인해 본다. 이미 가지고 있다.

Cannot GET /logout 으로 나오는 이유는 userRouter에 있어선 안된다.

/users/logout으로 있어햐 한다.

이말은 template를 후정해야 한다는 소리이다.

base.pug로 가서 /users/logout으로 바꿔준다.

if loggedIn
                        li 
                            a(href="/users/logout") Log Out

logout은 무얼 하고 있냐면 logout은 아무것도 안하고 있다.

그저 Log out을 보낸 뿐이다.

export const logout = (req, res) => res.send("Log out");

새로고침해서 확인하면 이제 로그아웃 페이지로 넘어가지만 어떤 작업도 하진 않는다.

export const logout = (req, res) => {
  req.session.destroy();
  return res.redirect("/");
};

이렇게 하면 세션을 없애준다. 그러면 이제 로그아웃을 페이지를 누르면 로그아웃 된다.

그리고 이제 /remove는 필요없어 졌으니 없애준다.

이제 Github인증과 로그아웃이 구현되었다.

이제 스스로에게 물어본다(?)

"로그인 규칙을 어떻게 만들것인가?" 예를 들어, 데이터베이스에

user가 하나 있는데 이 user는 이런 email을 가지고 있다.

{ "_id" : "yuoIkA5t7NB_axs1qVST5xflGbrR45jh", "expires" : ISODate("2022-05-06T07:39:42.013Z"), "session" : "{\"cookie\":{\"originalMaxAge\":null,\"expires\":null,\"httpOnly\":true,\"path\":\"/\"},\"loggedIn\":true,\"user\":{\"_id\":\"625942ace3564e09811a5f21\",\"email\":\"pkpanda@naver.com\",\"username\":\"Cyber Lover\",\"password\":\"$2b$05$WMO/VH/yctvvPJST0SyLq.QRQfSNeLJ5zAJPFfRMwLgg5ZFq1KtBm\",\"name\":\"Mercury\",\"location\":\"NYC\",\"__v\":0}}" }

이미 해당 email로 계정도 있고 password도 있다.

즉 이 user는 username과 passoword로 login을 할수 있다.

그런데 만일 Github으로 로그인 버튼을 누르게 된다면 토큰 작업등 전부 거친 뒤

Github으로 로그인 한user는 데이터베이스상에 똑같은 email과 password를 가진 user를 받는다.

그러니까 웹사이트로 와서 email과 password로 계정을 생성하고 한달 후에 돌아와서

Github으로 로그인 하려한다.

보다시피 Github은 email을 주고 있다. 그런데 이 email이 똑같다.

그러면 어떻게 하는게 좋을까? 두가지 옵션이 있다. 하나는 user에게 "그건 안된다.

이미 password가 있으니 그걸로 로그인하라" 라고 말 할수 있고

또는 "똑같은 email이 있다는걸 증명했으니 Github로 로그인해도 된다" 라고 할수 있다.

만일 user가 다른 무언가로 로그인을 했다면 예를 들어 카카오톡으로 로그인 했다하면

카카오톡이 이런식으로 email을 줄거다. 이렇게 user를 로그인 시킬수도 있다.

이런 방식을 채택한 여러 사이트들이 있다. 그치만 몇몇 사이트들은 password로 계정을 만들게 하는 곳도 있다.

"password로 로그인 하세요"라고 하면서 말이다.

혹은 email과 password로만 로그인하려 하는데 사실 password없이 Github 로그인으로

계정을 만들었다면 "user는 있지만 password는 없다. 그러니까 Github로 로그인해라" 라고 할거다.

보다시피 옵션은 정말 많다. 그래서 Github로그인 같은 소셜 로그인을 할때

만일 email에 접근 권한이 있다는게 증명이 된다면 즉, password가 있거나

Github의 email이 verified된거라면 email의 주인이라는 뜻이니까

로그인 시켜 줄수 있다. 꼭 이렇게 할 필요는 없다. 더 많은 조건들을 만들어도 된다.

예를 들어 user가 password를 갖고 있다는걸 알게 된다면 로그인을 시켜선 안되는 거다.

이 같은 경우엔 여기에 primary랑 verified가 있기 때문에 그렇게 하지 않는다.

그래서 primary이면서 verified된 email을 찾는거다. 두개다 중요하기 때문이다.

그래서 user가 두개의 조건을 만족한다면 "email이 있으니 로그인 시켜준다"라고 할거다.

이 부분 또한 바뀐다. 예를 들어 Github login으로 계정을 만든 user있을때

즉 email은 있지만 password가 없는 경우를 말하는 거다.

이럴때는 로그인 화면에서 user에게 이렇게 말해야 한다.

"email은 있는데 password가 없다"이건 그들이 Github으로 로그인해야 한다는 뜻이다.

이렇게 고려해야 할 사항들이 굉장히 많다.

이제 무엇을 하냐면 만약 primary인 email을 받고 데이터베이스에서 같은 email을 가진 user를 발견하면

user들을 로그인 시켜 준다. email은 사실 string이 아닌 객체 이다.

그래서 find가 객체를 주고 있는 거다. 그런데 email그 자체가 필요하다.

이 부분을 emailObj라 바꿔 본다.

    const emailObj = emailData.find(
      (email) => email.primary === true && email.verified === true
    );
    if (!emailObj) {
      return res.redirect("/login");
    }
    const existingUser = await User.findOne({ email: emailObj.email });
    if (existingUser) {
      req.session.loggedIn = true;
      req.session.user = user;
      return res.redirect("/");
    }
  } else {
    return res.redirect("/login");
  }
};

그리고 기존 user를 찾는거다. 그리고 emailObj.email을 가지고 user를 찾는다.

만일 해당 email을 가지는 user가 이미 있다면 그 유저가 전에 Github로 로그인했든

password로 계정을 생성했든 신경 쓰지 않는다.

핵심은 해당 email을 가진 user가 이미 있는지 찾는 것이고 이런 유저를 로그인 시켜 줄거다.

로그인은 어떻게 시키냐면 위에서 있는 코드가 있으니 그것을 그대로 활용한다.

req.session.loggedIn = true;
req.session.user = user;

return res.redirect()을 써서 "/"/으로 돌아가게 한다.

하지만 이번에는 로그인이 된 상태가 된다.

다시 한번 확인하면 깃헙이 주는 list에서 primary이면서 verified된 email객체를 찾아야한다.

그리고 같은 email을 가진 user가 이미 있다면 그 유저를 로그인시켜 줄거다.

나중에 이 부분에서는 계정을 생성하는걸 추가해줘야 한다.

const existingUser = await User.findOne({ email: emailObj.email });
    if (existingUser) {
      req.session.loggedIn = true;
      req.session.user = user;
      return res.redirect("/");
    } else {
    }// create an account
  } else {
    return res.redirect("/login");
  }
};

무슨 말이냐면 해당 email로 user가 없으니까 계정을 생성해야 한다는 거다.

다행히도 이미 아주 만은 데이터를 가지고 있다.

email도 있고 location도 있고 name도 있고 Github ID도 있고

username도 있다. 필요한 모든 것이 갖춰져 있다.

여태까지의 변경 사항들을 저장한 다음 테스트 해본다.

실행시켜보면 이 코드가 실행될거다.

req.session.loggedIn = true;
      req.session.user = user;
      return res.redirect("/");

왜냐하면 해당 email을 가지고 있는 user가 이미 데이터 베이스에 있고

Github의 API에서 해당 email을 주기 때문이다.

테스트 해본다. 새로고침하고 나면 에러가 뜬다.

ReferenceError: user is not defined

user가 정의되지 않았다고 뜬다.

  const existingUser = await User.findOne({ email: emailObj.email });
    if (existingUser) {
      req.session.loggedIn = true;
      req.session.user = existingUser;

user를 existingUser으로 변경해준다. 그러고 나서 다시 테스트를 해본다.

이제 로그인이 잘 된다.

이제 이 user를 지우고 "만일 계정이 없다면 어떻게 할 것인가"에 대해 해보도록 한다.

그래서 하나를 만들어야 한다. 그리고 일종의 password 같은걸 만들어야 한다.

mongodb에서 db.sessions.remove({})를 해주고 나면

이 코드는 실행 되지 않을거다.

  const existingUser = await User.findOne({ email: emailObj.email });
    if (existingUser) {
      req.session.loggedIn = true;
      req.session.user = existingUser;
      return res.redirect("/");
    } else {
      // create an account

// create an account 뭐가 실행되냐면 이게 실행될거다.

이제 user를 생성해야 한다.

await User.create({
      name,
      username,
      email,
      password,
      location,

이부분을 이용해서 사용한다. 똑같이 해보도록 한다. await User.create()로 user를 만들어 주고

const existingUser = await User.findOne({ email: emailObj.email });
    if (existingUser) {
      req.session.loggedIn = true;
      req.session.user = existingUser;
      return res.redirect("/");
    } else {
      const user = await User.create({
        name: userData.name,
        username: userData.login,
        email: emailObj.email,
        password: "",
        location: userData.location,
      });

그리고 나서 이제 값을 채우면 된다. name은 userData.name이다.

이 데이터는 객체이다. 그래서 userData.name이라고 해준다.

다음은 username이건 userData.login이 될거다.

email은 userData.email이 아닌 emailObj.email이다.

password는 없으니 " "으로 해준다.

location은 이미 있으니 userData.location으로 해준다.

그리고 User.js에서 하나 추가해준다.

const userSchema = new mongoose.Schema({
  githubId: { type: Number },

바로 githubId이다. type은 Number이고 required:flase, unique:true로 해준다.

그냥 number만 써준다. 이렇게 하는 이유는 user가 Github로 로그인했는지 여부를 알기 위해서이다.

이건 로그인 페이지에서 유저가 email로 로그인하려는데 password가 없을때 유용할수 있다.

githubId를 체크하면 된다. 사실 githubId가 아니라 githubLoginOnly라 해준다.

아니면 noPasswordAccount 아니면 socialOnly type은 Boolean으로 해준다.

default는 false로 해준다.

  socialOnly: { type: Boolean, default: false },

이렇게 계정을 만들어주면 이 계정은 Github을 이용해 계정을 만들었다면 password는 없게 된다.

그렇다면 username과 password form을 사용 할수 없다.

그래서 계정이 socialOnly=true라는걸 알려줘야 한다.

      const user = await User.create({
        name: userData.name,
        username: userData.login,
        email: emailObj.email,
        password: "",
        socialOnly: true,
        location: userData.location,
      });

이렇게 user를 생성하도록 만들었다. 여기서 User.create()는 새로 만든 user를 return시켜준다.

이 user를 로그인 시켜줘야 한다.

const user = await User.create({
        name: userData.name,
        username: userData.login,
        email: emailObj.email,
        password: "",
        socialOnly: true,
        location: userData.location,
      });
      req.session.loggedIn = true;
      req.session.user = user;
      return res.redirect("/");

그래서 밑에 이렇게 넣어준다. 이 부분을 다듬어 보는건 다음에 해보도록 한다.

그리고 이건 다른 옵션이다. 데이터베이스에 해당 email을 가진 user가 없을때

이렇게 password없이 Github의 데이터로 user를 생성하고

그런 user에게는 socialOnly:true값을 주고 있다.

그리고 여기 postLogin때 유용 할거다.

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

왜냐하면 user를 찾을때 몇몇 password들을 비교해볼텐데

그러기 위해 if else를 써야 될거 같다.

user가 Github로 계정을 만들고 password로 로그인을 시도한다면

user에게 "password가 없으니 Github로 로그인"하라고 말해줘야 한다.

아니면 pasword를 새로 생성하는 페이지를 만들든지 해야 한다.

이제 테스트 해보도록 한다. 데이터베이스엔 user가 없고

이 계정은 Github데이터로만 만들어졌을거다.

 const user = await User.create({
        name: userData.name,
        username: userData.login,
        email: emailObj.email,
        password: "",
        socialOnly: true,
        location: userData.location,
      });

그리고 Github데이터는 avatarUrl이라 하는 것이 있는데 그건 나중에 써보도록 한다.

테스트를 해본다. login -> Continue with Github하면 계정이 생성되고

(해당 강의에서는 에러가 발생하는데 그냥 로그인이 잘된다.)

에러는 User 인증에 실패했습니다. User validation failed라고 뜬다.

password가 필수 조건이라고 한다.

  password: { type: String, required: false },

password required값을 false로 바꿔준다. 유일한 옵션이다.

(그냥 없애도 잘 작동 한다.)

이건 몇몇 user들에게는 password가 없을테니 그런거다.

다시 실행해 보면 잘된다. (수정을 안 한 상태에서도 잘 작동하였지만 혹시 모를 에러때문에 이렇게 수정을 하고 진행하도록 한다. )

Github으로 부터 온 프로필 이름이 나온다.

mongodb로 가서 user를 보면 socialOnly:true인 계정이 생성 되었다.

password는 없다. 왜냐하면 비어있는 해시값이기 때문이다.

username은 Github username일 테고 email은 Github email이다.

location이런 것들 전부 Github에서 오고 있다.

저번 파트에서 뭘했는지 살펴 보기로 한다.

Github가 준 코드를 가지고 access_token으로 교환을 했다.

export const finishGithubLogin = async (req, res) => {
  const baseUrl = "https://github.com/login/oauth/access_token";
  const config = {
    client_id: process.env.GH_CLIENT,
    client_secret: process.env.GH_SECRET,
    code: req.query.code,
  };

export const finishGithubLogin = async (req, res) => {
  const baseUrl = "https://github.com/login/oauth/access_token";
  const config = {
    client_id: process.env.GH_CLIENT,
    client_secret: process.env.GH_SECRET,
    code: req.query.code,
  };
  const params = new URLSearchParams(config).toString();
  const finalUrl = `${baseUrl}?${params}`;
  const tokenRequest = await (
    await fetch(finalUrl, {
      method: "POST",
      headers: {
        Accept: "application/json",
      },
    })
  ).json();
  if ("access_token" in tokenRequest) {
    const { access_token } = tokenRequest;
    const userRequest = await (
      await fetch("https://api.github.com/user", {
        headers: {
          Authorization: `token ${access_token}`,
        },
      })
    ).json();
    console.log(userRequest);
  } else {
    return res.redirect("/login");
  }

access_token은 Github API URL을 fetch하는데 사용 되었다.

그랬더니 얻은 건 user의 public정보였다. 이건 scope로 요청했기 때문에 가능했다.

만일 read:user를 요청하지 않았다면 받은 코드로는 user의 정보를 읽을 수 있는

access_token을 받을 수 없을거다.

어찌 되었든 Github API에 대해 얘기하고 있고 Github API로 가면 무얼 할수 있는지 전부 볼수 있다.

https://docs.github.com/en/rest/users/users#get-the-authenticated-user

예를 들면 현재 한것 처럼 user를 불러올수 있다.

https://api.github.com/user

이 부분이 user를 가져오고 있는거다. 다른 많은 것들로 할수 있다.

user를 차단 시킬수도 있고 user를 팔로우 할수도 있다.

이것들을 한번 해보는 것도 좋을 것 같다. PUT request를 /user/following/{username}으로 보낸다 하면

지금은 이걸 허용하는 access_token이 없으니 작동하진 않을거다.

access_token이 모든걸 할수 있도록 허용하는건 아니기 때문이다.

scope에 적은 내용에 대해서만 허용해줄 뿐이다.

다시 말해 access_token은 user가 모든걸 할수 있게 해주진 않는다.

scope에 명시하면 Github가 코드를 줄거다.

그 코드에는 이미 하고자 하는 바가 명시 되어 있다.

그리고 그 코드를 access_token으로 바꾸게 되고 access_token은 한다고 한 것 하게 된다.

현재 경우에서 access_token을 가지고 하려는건 첫번째 scope이다.

export const startGithubLogin = (req, res) => {
  const baseUrl = "https://github.com/login/oauth/authorize";
  const config = {
    client_id: process.env.GH_CLIENT,
    allow_signup: false,
    scope: "read:user user:email",
  };

user의 정보를 읽어 들이고 있다. 하지만 아직 두번째 요구인 email을 읽어 들이고 있지 않다.

이건 access_token을 가지고 더 많은 걸 할수 있다는걸 보여주기 위해 일부러 이렇게 만들어 본거다.

여기서 user의 데이터를 가져오고 있으니까

  if ("access_token" in tokenRequest) {
    const { access_token } = tokenRequest;
    const userRequest = await (
      await fetch("https://api.github.com/user", {
        headers: {
          Authorization: `token ${access_token}`,
        },
      })

userRequest를 userData로 바꿔 준다.

const userData = await (
      await fetch("https://api.github.com/user", {
        headers: {
          Authorization: `token ${access_token}`,
        },
      })
    ).json();
    console.log(userData);

어떤 user들은 public(공개된) email을 가지고 있을 수도 있다.

하지만 이 경우엔 고의로 이렇게 만들었다. public email이 아닌걸로 말이다.

그렇기 때문에 user의 email을 요청하기 위해 똑같은 access_token을 써야 한다.

Github API를 잠깐 살펴보면 email만 다른 부분을 볼수 있다.

https://docs.github.com/en/rest/users/emails

primary email설정하기는 현재 상태랑 관계없다. 모든 email주소를 부여주기가 현재 필요한 거다.

그러면 모든 email주소들을 가져오도록 한다.

if ("access_token" in tokenRequest) {
    const { access_token } = tokenRequest;
    const apiUrl = "https://api.github.com";
    const userData = await (
      await fetch(`${apiUrl}/user`, {
        headers: {
          Authorization: `token ${access_token}`,
        },
      })
    ).json();
    console.log(userData);
    const emailData = await (
      await fetch(`${apiUrl}/user/emails`, {
        headers: {
          Authorization: `token ${access_token}`,
        },
      })
    ).json();
    console.log(emailData);
  } else {
    return res.redirect("/login");
  }
};

fetch에서 뒷부분은 편리하게 사용 할수 있게 만들어 준다.

이제 user데이터를 볼러 올수 있다는걸 안다. 하지만 이제 email데이터도 원한다.

await부분도 반복되기에 그대로 복사해서 넣어주고 url일부분 수정해 준다.

그리고 console.log(emailData)를 해준다.

이제 두개의 request를 하고 있다. 그리고 당연히 json도 넣어 준다.

이렇게 하면 짧게 쓸 수 있다. fetch를 하고 await json()을 쓰는 거다.

이제 email데이터를 사용할 준비가 된거다. 그럼 콘솔로 돌아가서 다시 한번 시도한다.

이제 두개의 데이터를 받았다. 하나는 이미 알고 있는 공개된 프로필이고

다른 하나는 email들이다. 이제 email이 verified이면서 primary인 것들을 찾아야한다.

그러니 email들 중 verified(확인)이면서 primary(일순위)인 걸 찾아 볼거다.

왜냐하면 가끔 Github으로 계정 생성을 해도 primary혹은 verified가 안 되었을수도 있다.

user의 email을 얻고 있다. 다시 말하자면 /user/emails와

/user로 보내는 이 request들은 access_token이 볼수 있게끔 허락해줬기 때문에 작동하는거다.

모든건 scope부분에서 출발한다. 현재 이 경우가 제일 익숙하지 않다.

await (
    await fetch(finalUrl, {
      method: "POST",
      headers: {
        Accept: "application/json",
      },
    })
  ).json();

ES6에 익숙지 않아서 그렇다. 그런데 이 두 부분은 지금 써보려는 방식과 비슷하다.

fetch(x).then(response => response.json()).then(json => )
await (
    await fetch(finalUrl, {
      method: "POST",
      headers: {
        Accept: "application/json",
      },
    })
  ).json();

하지만 이렇게 작성하는건 좋지 못하다. 왜냐하면 이 말인 즉슨 .then안으로 들어가야 하기 때문이다.

if ("access_token" in tokenRequest) {
    const { access_token } = tokenRequest;

예를 들어 이 부분에서 access_token을 얻으면 그렇다는건 여기에서 access_token을 얻는다는 거다.

fetch(x).then(response => response.json()).then(json => access_token)
await (
    await fetch(finalUrl, {
      method: "POST",
      headers: {
        Accept: "application/json",
      },
    })
  ).json();

그럼 이줄에서 fetch를 한번더 해야 한다는 소리이다.

fetch(x).then(response => response.json()).then(json => access_token fetch ())

왜냐하면 이것도 가져와야 하기 때문이다.

await fetch(`${apiUrl}/user`, {
        headers: {
          Authorization: `token ${access_token}`,
        },
      })

결국 fetch를 써야 하는데 만일 여기서 했던 것처럼 똑같이 하고 싶다면

이렇게 해야 될거다.

const params = new URLSearchParams(config).toString();
  const finalUrl = `${baseUrl}?${params}`;

  fetch(finalUrl, {
    method: "POST",
    headers: {
      Accept: "application/json",
    },
  }).then(response => response.json()).then(json => {
    if ("access_token" in json) {
      const { access_token } = tokenRequest;
      const apiUrl = "https://api.github.com"; 
        await fetch(`${apiUrl}/user`, {
          headers: {
            Authorization: `token ${access_token}`,
          },
        }).then(response => response.json()).then(json => {
          fetch(`${apiUrl}/user/emails`, {
            headers: {
              Authorization: `token ${access_token}`,
            },
          })
        });
      }
  });
const tokenRequest = await (
    await fetch(finalUrl, {
      method: "POST",
      headers: {
        Accept: "application/json",
      },
    })
  ).json();
  if ("access_token" in tokenRequest) {
    const { access_token } = tokenRequest;
    const apiUrl = "https://api.github.com";
    const userData = await (
      await fetch(`${apiUrl}/user`, {
        headers: {
          Authorization: `token ${access_token}`,
        },
      })
    ).json();
    console.log(userData);
    const emailData = await (
      await fetch(`${apiUrl}/user/emails`, {
        headers: {
          Authorization: `token ${access_token}`,
        },
      })
    ).json();
    console.log(emailData);
  } else {
    return res.redirect("/login");
  }
};

이것들을 전부 fetch하고 then을 쓰는 거다. 맨위 부터 시작해서 then안에 then, 또 then안에 then 그리고 또 fetch를 한다.

이거 완전 이상한 짓이다. 이걸 user email이랑 user 프로필에도 해줘야 하는데

그러다간 머리가 터질지도 모른다.

그래서 then을 쓰는 대신에 그냥 원래대로 하는거다.너무나 당연히 이 방법이 훯씬 좋다.

어쨋든 user데이터를 불러오고 있고, email도 불러오고 있다.

이제 user데이터랑 email데이터를 가지고 있으니까 유저의 Github ID도 알고 있다는거고,

user의 email들도 알고 있다는 거다.

이제 primary와 verified가 모두 true인 email을 찾아야 한다.

그래서 이 부분을 콘솔로 복붙해서 사용해 본다.

[
  {
    email: 'pkpanda@naver.com',
    primary: true,
    verified: true,
    visibility: 'private'
  },
  {
    email: '91738673+JooMercury@users.noreply.github.com',
    primary: false,
    verified: true,
    visibility: null
  }
]

const emails = [
  {
    email: 'pkpanda@naver.com',
    primary: true,
    verified: true,
    visibility: 'private'
  },
  {
    email: '91738673+JooMercury@users.noreply.github.com',
    primary: false,
    verified: true,
    visibility: null
  }
]

2개의 email을 가진 배열을 만들었다. 그런 다음에 이렇게 입력해 본다.

emails.find(email => email.primary === true && email.verified === true)
{email: 'pkpanda@naver.com', primary: true, verified: true, visibility: 'private'}

emails.find()을 써서 primary와 verified가 true인 email을 찾는다.

그러면 이런 식으로 결과가 나온다. 이런 코드를 쓰고 싶었던 거다.

이걸 브라우저에서 하는게 좋을거다. 콘솔이 훨씬 인터렉티브 하니까 말이다.

이렇게 primary와 verified가 모두true인 email을 찾아 봤다.

현재 찾고 싶은걸 array에서 찾는 방법이였다.

const email = emailData.find(
      (email) => email.primary === true && email.verified === true
    );
    if (!email) {
      return res.redirect("/login");
    }
  } else {
    return res.redirect("/login");
  }
};

아까 쓴 find()를 쓰면 된다. 그리고 만일 email이 없다면 user한테 verified된 email이 없을 수도 있기때문이다.

다시 login화면으로 redirect 한다.

나중에는 에러 notificaton을 보여주면서 redirect 시켜 본다.

만일 코드가 도착하게 되면 primary이면서 verified인 email이 있다는 뜻이다.

user데이터 또한 받게 된다. 그래서 user를 로그인 시킬수도 있고 아니면 계정을 생성 시킬수도 있다.

왜냐하면 email이 없다는 뜻일 테니깐 말이다.

그리고 동일한 user email은 갖고 있지만 한명은 일반 password로 로그인 하고

다른 하나는 Github로 로그인 하는 user를 어떻게 다룰지 알아 볼거다.

email과 password로 계정을 생성한 user가 Github로 로그인하려고 하면 어떻게 할 것인지 생각해 보는거다.

그리고 똑같은 email이 있다면 어떻게 할지도 말이다.

두개의 계정을 만들게 할 것인가? 아니면 그 계정들을 하나로 통합 할것인가?

user에게 이미 해당 email로 만든 계정이 있다고 에러를 보낼 것인가?

다음 파트에서 다뤄 보도록 한다.

현재는 만족스럽다. 왜냐하면 email이 있으니 어떤 user인지 알수 있다.

다음 파트에선 좀더 생각해봐야 할 필요가 있다.어떻게 중복된 email을 처리할건지 말이다.

fetch가 필요한데 fetch는 서버엔 없고 브라우저에만 존재한다.

사람들은 node-fetch라는 패키지를 만들었다.

https://www.npmjs.com/package/node-fetch

npm i node-fetch 설치해 보도록 한다.

현재 에러로 통해 자바스크립트와 NodeJS가 다른 플랫폼이라는 걸 알수 있다.

userController.js에서

import User from "../models/User";
import bcrypt from "bcrypt";
import fetch from "node-fetch";

그러면 이제 fetch가 정의 된다. request들을 해본다. node로 가 보면 에러는 안 보인다.

새로고침을 하면 코드는 만료가 된것 같다. node로 다시 가보면 에러가 뜬다.

어찌 되었든 작동은 한다. error: 'bad_verification_code',

이렇게 나온다. error_description: 'The code passed is incorrect or expired.',

확인해 보면 코드가 정확하지 않거나 만료되었을 수 있다. 라고 한다.

export const finishGithubLogin = async (req, res) => {
  const baseUrl = "https://github.com/login/oauth/access_token";
  const config = {
    client_id: process.env.GH_CLIENT,
    client_secret: process.env.GH_SECRET,
    code: req.query.code,
  };
  const params = new URLSearchParams(config).toString();
  const finalUrl = `${baseUrl}?${params}`;
  const data = await fetch(finalUrl, {
    method: "POST",
    headers: {
      Accept: "application/json",
    },
  });
  const json = await data.json();
  console.log(json);
  res.send(JSON.stringify(json));
};

그리고 맨 마지막에 이렇게 추가를 해줘야 한다. 그래야 프론트엔드에서 볼수 있다.

테스트를 해본다. 코드와 함께 되돌아오고 코드는 백엔드로 가서 결과를 보수 있을거다.

// 20220422091738
// http://localhost:4000/users/github/finish?code=be7cb0a94beec5341141

{
  "access_token": "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",
  "token_type": "bearer",
  "scope": "read:user,user:email"
}

이런 결과가 나온다. access_token이 생겼다. token_type은 bearer이고

scope은 read:user,user:email이다.

url에 나온 코드를 이용해서 Github백엔드에 request를 보내니 access_token이 생겼다.

이제 다음 단계로 access_token을 갖고 API에 접근한다.

이제 access_token을 가지고 user의 정보를 얻을수 있다.

다시 한번 되짚어 보면 Github에 user를 보내고 user가 Github에서

"yes"라고 하면 Github는 코드를 준다. 그 코드를 가지고 access_token으로 바꿔준다.

그럼 access_token으로 Github API를 사용해 user정보를 가져 온다.

이제 JSON에 있는 access_token을 가져오면 된다.

const json = await data.json();
  if("access_token" in json){
    // access api 
  }else{
    return res.redirect("/login")
  }
};

json에 access_token이 있는 경우 API에 접근하도록 한다.

그게 아니라면 res.render("login")을 할거다.

그러나 login을 render하는게 아니다. error를 render하는거다.

그래서 우선 redirect를 써본다. redirect("/login")이라고 한다.

만약 response안에 access_token이 없다면 login으로 redirect된다.

그러나 이렇게 하면 별로 좋지 않다. user에게 notification을 보여주고 싶다.

그건 나중에 해본다. 아직 user에게 notification을 못 보낸다.

Pug template을 render하는건 너무 불편하다.

그렇게 하면 URL에서 user가 template을 보게 된다.

user가 template를 봐선 안된다.

이건 단지 어디론가 데려다주는 URL일뿐이다.

http://localhost:4000/users/github/finish?code=be7cb0a94beec5341141

그래서 Controller밖에선 어떤것도 render하고 싶지 않다.

export const finishGithubLogin = async (req, res) => {
  const baseUrl = "https://github.com/login/oauth/access_token";
  const config = {
    client_id: process.env.GH_CLIENT,
    client_secret: process.env.GH_SECRET,
    code: req.query.code,
  };

이 모든 건 nitification을 구현하면 가능하다.

notification은 user가 /login으로 redirect하게 해줄테고

user는 /login에서 에러 메세지를 보게 될거다.

현재 이곳에서 render("/login")을 하면 너무 불편하다.

const json = await data.json();
  if("access_token" in json){
    // access api 
  }else{
    return res.render("login", {pageTitel})
  }

그리고 그 뒤에 pageTitle 같은 이런 것들을 쓰게 되면 코드가 너무 지저분해진다.

그래서 redirect("/login")을 사용한다.

나중에 notificaton을 보내면서 어떻게 redirect를 하는지 알아본다.

일단은 먼저 테스트해본다. JSON안에 access_token이 없다면 어떻게 되냐면

웹사이트를 새로고침을 해보면 알수 있다. 왜냐하면 현재 코드는 이미 2번씩이나 사용했는데

이건 2번씩 사용하지 못한다. 그래서 새로고침을 하면 login으로 redirect 된다.

왜냐하면 access_token이 JSON안에 없었기 때문이다.

JSON이 이렇게 생겼다는거 기억이 난다.

  access_token: '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',
  token_type: 'bearer',
  scope: 'read:user,user:email'
}

그런데 코드에서 이미 토큰이 사용되었다면 에러가 발생한다.

  error: 'bad_verification_code',
  error_description: 'The code passed is incorrect or expired.',

그렇기 때문에 지금은 다시 login URL로 redirect되는거고

나중에는 redirect되고나서 user에게 "로그인 할수 없습니다" 이런식으로 메시지를 보여주게 한다.

3단계는 GET URl을 통해서 인증을 위한 access_token을 보내준다.

Authorization: token OAUTH-TOKEN
GET https://api.github.com/user

  const params = new URLSearchParams(config).toString();
  const finalUrl = `${baseUrl}?${params}`;
  const tokenRequest = await (
    await fetch(finalUrl, {
      method: "POST",
      headers: {
        Accept: "application/json",
      },
    })
  ).json();
  if ("access_token" in tokenRequest) {
    const { access_token } = tokenRequest;
    const userRequest = await (
      await fetch("https://api.github.com/user", {
        headers: {
          Authorization: `token ${access_token}`,
        },
      })
    ).json();
    console.log(userRequest);
  } else {
    return res.redirect("/login");
  }
};

access_token을 JSON으로부터 넣어줘서

const {access_token} = json;

const userRequest = await fetch("https://api.github.com/user",{
   headers: {
          Authorization: `token ${access_token}`,
        },
  )

"https://api.github.com/user" URL을 넣어주고 그리고 headers에

authorization을 보내야 한다. 여기에 token이란 string을 집어 넣어준다.

그리고 JSON안에 있는 access_token을 쓰면 된다.

JSON에는 토큰이 있다는걸 기억해야 한다.

  access_token: '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',
  token_type: 'bearer',
  scope: 'read:user,user:email'
}

그러니 access_token을 fetch안의 headers로 보내준다.

그리고 awit을 2번씩이나 쓸 필요가 없다. 모든 await들을 괄호 안에 넣고

awati를 한 다음에 .json()을 해준다.

  const data = await (
    await fetch(finalUrl, {
      method: "POST",
      headers: {
        Accept: "application/json",
      },
    })
  ).json();

그래서 이건 필요가 없어 졌다.

const json = await data.json();

await를 또 다른 await 안에 넣어 주었다. 그리고 data대신에 token을 받게 된다.

  const tokenRequest = await (
    await fetch(finalUrl, {
      method: "POST",
      headers: {
        Accept: "application/json",
      },
    })
  ).json();

tokenRequest이라고 해준다.

만일 tokenRequest안에 access_token이 있다면 여기에도 똑같은걸 할거다.

if ("access_token" in json) {
 const { access_token } = json;

  if ("access_token" in tokenRequest) {
    const { access_token } = tokenRequest;

if ("access_token" in tokenRequest) {
    const { access_token } = tokenRequest;
    const userRequest = await (
      await fetch("https://api.github.com/user", {
        headers: {
          Authorization: `token ${access_token}`,
        },
      })
    ).json();
  } else {
    return res.redirect("/login");
  }
};

보다시피 fetch를 요청하고 있다. fetch가 돌아오면 해당 fetch의 JSON을 받게 된다.

그런후에 console.log(userRequest);를 해준다.

if ("access_token" in tokenRequest) {
    const { access_token } = tokenRequest;
    const userRequest = await (
      await fetch("https://api.github.com/user", {
        headers: {
          Authorization: `token ${access_token}`,
        },
      })
    ).json();
    console.log(userRequest);
  } else {
    return res.redirect("/login");
  }
};

조금 많이 복잡하긴 하다.

새로고침을 하고 Continue with Github를 해주면 누르면 다시 돌아오고 ,

code를 access_token으로 바꾼 다음에 access_token을 이용해 Github API로 간다.

그러면 user데이터를 볼수 있다.

NodeJS으로 가보면 잘 작동한다. 정보를 받아오고 있다.

보다시피 홈페이지는 계속 로딩중이다. 왜냐하면 아무것도 return하지 않아서 그렇다.

어쨌든 작동은 하고 있다. Github 프로필 정보를 가져온다.

이제 이걸 사용하면 된다. 하지만 문제가 있다. email이 null값이다.

무슨 말이냐면 email이 없거나 private이라는 뜻이다.

그래서 email이 null값일때를 대비해서 또 다른 request를 만들어야 한다.

일단 작동은 하고 있다. Github user의 정보를 가져오고 있다.

물론 아무것도 return을 해주지 않아서 계속 로딩 중이다.

이제 request를 끝낸다.

그리고 다시 새로고침으로 시작을 하면 URL이 바뀌는 것조차 보질 못했다.

모든게 너무 빨리 돌아가고 있다.

다음 파트에서 user의 email을 가져와 본다.

왜냐하면 여기서 email을 요청했는데 받지 못했다.

export const startGithubLogin = (req, res) => {
  const baseUrl = "https://github.com/login/oauth/authorize";
  const config = {
    client_id: process.env.GH_CLIENT,
    allow_signup: false,
    scope: "read:user user:email",
  };

일단 받은 code를 access_token으로 바꾸었다.

그 access_token을 가지고 Github API를 이용해서 user의 정보를 가져올수 있다.

일단 웹사이트에는 이 정도만 해도 충분하긴 하다. 깃헙 아이디만 필요한거라면 말이다.

하지만 현재 상태에서는 email이 필요하다.