1. User Profile - 유저의 프로필 페이지를 만들어야 함 - 유저의 프로필 창에서 해당 유저가 올린 영상들을 확인할 수 있어야함 - 우린 로그인한 유저의 id로 가는 네비게이션을 만든거임 - 나중에는 모든 유저가 접근할 수 있게 만들거임 - 유저 프로필에서는 id를 user session에서 가져오지 않을거임 - 다른 유저들도 볼 수 있어야 하기 때문에 url에 있는 id를 가져올거임 - 이제 Video와 User를 어떻게 연결할지 알아야함 - 그전에 videos와 users를 모두 비워야함2. Video Owner - Video와 User를 연결해야 함 - id는 고유하므로 이걸 사용하여 연결 - users에는 유저가 업로드한 모든 영상의 id를 저장 videos에는 해당 영상을 ..
1. Video Model - https://github.com/expressjs/multer/blob/master/doc/README-ko.md#limits multer/doc/README-ko.md at master · expressjs/multerNode.js middleware for handling `multipart/form-data`. - expressjs/multergithub.com - 이미지 업로드 때 처럼 시작 - API를 보면 추가적으로 보낼 수 있는 옵션들이 존재함 - fileSize라는 옵션을 가지고 2개의 미들웨어에서 avatar 파일과 video 파일의 용량을 제한 - 영상이 잘 업로드되고 db에도 잘 등록 - 하지만 이전 파일들이 지워지지 않는 문제가 존재2. Watc..
1. Multer - 파일 업로드를 위한 middleware를 사용 - https://www.npmjs.com/package/multer multerMiddleware for handling `multipart/form-data`.. Latest version: 1.4.5-lts.1, last published: 2 years ago. Start using multer in your project by running `npm i multer`. There are 4721 other projects in the npm registry using multer.www.npmjs.com - 우리 form이 다르게 encode 될 거라는 의미임 - 이 것이 파일을 upload 하기 위한 유일한 조건 - API..
1. Edit Password Template - 비밀번호 변경은 계정정보를 설정하는 곳에서 따로 진행 - 비밀번호를 변경할 template을 만들고 userRouter에 route 만들고 controller에서 get post함수를 만들어서 import 시켜야 함 - 로그인 된 상태인 유저만 접근해야하니 protectorMiddleware를 사용 - 이제 슬슬 views 폴더에 파일이 많아지므로 다른 폴더들처럼 정리를 하는게 좋고 그에 맞게 각 파일마다 경로를 수정해야함 - 암호를 수정하는 것은 홈페이지에서 회원가입만 user만 해당되며, 소셜로그인이 된 user라면 change password 버튼이 보이지 않아야함 - 소셜로그인 user는 비밀번호 없이 가입했기 때문 - 첫번째 방법과는 다..
1. Edit Profile - router나 controller쪽은 이제 이해했으므로 제외 - locals를 배웠을때를 떠올려봐야함 - 우리는 saveUninitialized=false로 했기에 session에 변경점이 있어야 cookie가 생성됨 - 현재 계정정보를 변경하려는 상태이기에 우리는 이미 로그인을 한 상태 - localsMiddleware를 통해 locals object에는 로그인한 user 정보가 들어가있음 - 굳이 controller을 통해 로그인한 user 정보를 보낼 필요가 없다는 것 - template에서도 locals를 사용할 수 있음 - locals는 자동적으로 views에 import됨 - 여기서 문제점은 로그인하지 않은 user가 url을 강제로..
0. API - https://docs.github.com/ko/apps/creating-github-apps/authenticating-with-a-github-app/generating-a-user-access-token-for-a-github-app GitHub 앱에 대한 사용자 액세스 토큰 생성 - GitHub Docs사용자에게 앱 활동을 배정하기 위해 GitHub App에 대한 사용자 액세스 토큰을 생성할 수 있습니다.docs.github.com1. startGithubLogin - github 로그인 버튼을 누르면 userRouter에 생성한 route인 /users/github/start로 이동 - route는 startGithubLogin을 가지고 있고 이동시켜주는 역할만 수행 - 상단 링..
1. email - 들어가기에 앞서 굉장히 어려울 수 밖에 없는 과정이었기에 정리 - Github이 준 code를 가지고 access_token으로 교환했음 - code에는 우리가 뭘 하고자 하는 바가 명시되어 있음 - access_token은 Github API URL을 fetch하는데 사용되었고, 우리는 user의 public정보를 얻었음 - read:user를 하지 않았다면 access_token을 얻지 못했음 - access_token이 모든걸 할 수 있도록 허용한건 아니며 scope에 명시된 것만 허용해줌 - 현재 read:user를 통해 user의 정보는 잘 읽고 있으나 user:email은 잘 되고있지 않음 - 사실 이렇게 잘 안되는 이유는 강사가 access_token으로 많은..
1. Github Login - 이어서 하면 github에서 authorized버튼을 누른 이후 callback url로 연결되었음 - https://docs.github.com/ko/apps/oauth-apps/building-oauth-apps/authorizing-oauth-apps#2-users-are-redirected-back-to-your-site-by-github OAuth 앱 권한 부여 - GitHub Docs다른 사용자가 OAuth app에 권한을 부여하도록 설정할 수 있습니다.docs.github.com - 공식문서의 웹 애플리케이션 흐름 2번에 따르면 github에서 받은 토큰을 access 토큰으로 바꿔줘야함 - client_id는 또 사용되기에 .env에 넣을거임 - 어차피 ..
1. Dotenv - https://www.npmjs.com/package/dotenv dotenvLoads environment variables from .env file. Latest version: 16.4.5, last published: 9 months ago. Start using dotenv in your project by running `npm i dotenv`. There are 50409 other projects in the npm registry using dotenv.www.npmjs.com - dotenv 패키지를 사용하여 .env 파일을 읽게하고, 각 변수들을 process.env안에 넣을거임 - 중요한 것은 공식문서에도 나와있지만 당신의 앱 안에서 최대한 먼저 라고 되어 ..
1. Secret / Domain - secret이란, cookie에 sign할 때 사용하는 string - cookie에 sign하는 이유는 백엔드가 cookie를 줬다는걸 증명하기 위함 - session hijack이라는 해커의 공격 패턴이 존재하기 때문 - secret을 관리하기 위해 굉장히 길고 무작위로 생성되게 관리 - domain은 cookie를 만든 백엔드가 누구인지 알려줌 - 브라우저는 domain에 따라 cookie를 저장하도록 되어 있음 - 그리고 cookie는 domain에 있는 백엔드로만 전송 - 현재 웹사이트는 localhost이므로, 다른 웹사이트의 cookie를 받지 않음 - 일단 secret과 db url을 보호해야 하는데, 환경변수(environment file)..