User Profile

User Profile개발/Node.js2024. 11. 14. 14:58@DanielRepo

Table of Contents

1. User Profile

- 유저의 프로필 페이지를 만들어야 함

- 유저의 프로필 창에서 해당 유저가 올린 영상들을 확인할 수 있어야함

- 우린 로그인한 유저의 id로 가는 네비게이션을 만든거임

- 나중에는 모든 유저가 접근할 수 있게 만들거임

- 유저 프로필에서는 id를 user session에서 가져오지 않을거임

- 다른 유저들도 볼 수 있어야 하기 때문에 url에 있는 id를 가져올거임

- 이제 Video와 User를 어떻게 연결할지 알아야함

- 그전에 videos와 users를 모두 비워야함

2. Video Owner

- Video와 User를 연결해야 함

- id는 고유하므로 이걸 사용하여 연결

- users에는 유저가 업로드한 모든 영상의 id를 저장 videos에는 해당 영상을 올린 유저의 id를 저장

- ObjectId를 사용하려고 하는데 다른 것들과 다르게 노란색이 아님

- 노란색으로 활성화 된 코드들은 자바스크립트에서 제공하는 코드임

- ObjectId는 mongoose에서만 사용할 수 있음

- reference는 mongoose에게 owner에 id를 저장하겠다고 알려줘야 하기 때문에 사용

- 하지만 아직까지 어떤 모델과 연결할지 알려주지 않은 상태

- 그래서 우린 mongoose에게 이 owner가 어떤 모델의 ObjectId인지 알려줄거임

- 이제 Video에 owner 항목이 추가되었음

- owner는 라이언 스티커에 있는 ObjectId임

- 중요한건 mongoose에게 ObjectId가 ref:User에서 온다고 알려줌

- 여기서 populate 기능을 사용

- populate는 mongoDB와 함께 mongoose 라이브러리를 사용할 때 참조 관계를 통해 연결된 데이터를 함께 가져올 수 있도록 해주는 기능

- 우리는 이 기능을 통해 영상을 업로드한 사람에게만 수정 삭제버튼이 보이도록 만들거임

- 영상의 수정 삭제 버튼을 상황에 따라 숨길려면 로그인된 유저의 id와 영상의 owner id가 일치할 때 보여주면 됨

- 보이기엔 같은 값이지만 owner id는 ObjectId인데, 로그인한 유저의 id는 string이기 때문

- 로그인한 유저로 확인하면 버튼이 보이고, 다른 브라우저나 시크릿모드를 사용하여 접속하면 버튼이 보이지 않음

- watch 페이지에서 업로드한 유저의 이름을 알아야함

- 아주아주 잘나옴

- db에 두번이나 요청하기 때문에 맘에 들진 않음

- 지금까지는 업로드한 유저의 id를 videos에 저장하면 좋은 이유를 알아본 거임

- 그리고 postUpload에서 Video를 생성할 때 로그인된 사용자의 id를 owner에 넣었다는 것을 기억해야 함

3. Populate

- 1/2번에서 우리는 영상 소유자의 id를 저장하고, watch 페이지에서 영상 소유자의 이름을 보여주도록 했음

- 머리가 좋은 사람은 User 모델에 레퍼런스가 무슨 쓸모가 있는지 궁금할 수 있음

- 왜냐면 video.owner가 로그인한 유저의 id라는걸 직접 해주고 있었음

- 지금부턴 mongoose의 도움을 받을 거임

- 레퍼런스를 통해 mongoose는 ObjectId가 User에서 오는걸 알고 도와줌

- 그래서 mongoose가 나를 찾게 만들어 볼 거임

- populate는 owner를 실제 데이터로 채워줌

const video = await Video.findById(id).populate("owner");

video : {
  meta: { views: 0, rating: 0 },
  createdAt: 2024-11-14T05:44:16.402Z,
  hashtags: [ '#22', '#22' ],
  _id: 67358e68155f4638846a4984,
  title: '22',
  description: '22',
  fileUrl: 'uploads\\videos\\09473ba56cdbf7e4982dcb7cff55f571',
  owner: {
    socialOnly: false,
    _id: 67358e60155f4638846a4983,
    email: '1@1',
    username: '1',
    password: '$2b$05$trAXPWGlMXbfDdOJBuTp/Oz0El5XCk.QbJ7h/jw1Pwq2lg1tHpgEa',
    name: '1',
    location: 'london',
    __v: 0
  },
  __v: 0
}

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

- populate를 통해 mongoose가 영상을 찾고, 그 안에서 owner도 찾아줌

- ref:User를 통해 User에서 왔다는걸 알고 있음

- 또한 2번에서는 템플릿에서 양쪽을 전부 string으로 바꿔서 확인했지만, 이제는 object이므로 수정