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)..
1. 정리app.use( session({ secret: "Hello!", resave: true, saveUninitialized: true, })); - 해당 middleware는 express-session이라는 module에서 왔으며, 브라우저가 백엔드와 상호작용 할 때 마다 브라우저에 cookie를 전송 - cookie는 백엔드에서 브라우저에게 주는 정보인데 정해진 규칙이 있음 - 매번 백엔드에 request 할 때 마다 브라우저는 자동적으로 request에 cookie를 덧붙임 - 브라우저는 매번 백엔드의 localhost에 있는 URL로 request를 보낼 때 마다 cookie가 request와 함께 전송된다는 것을 알고 있음 - cookie에는 아무 정보나 넣을 수 있..
콘티를 간략하게나마 짜두는게 좋을거 같아서 파워포인트로 대충 만들었다.유튜브는 결국 홈을 가더라도 업로드된 영상들이 출력되야 하니 rootRouter는 기본적인 경로들만 분배를 한다.기본적으로 videoController에서 많은 것들을 처리하게 된다.영상 시청, 영상 업로드가 주 컨텐츠이니까.상단과 사이드바는 고정적이므로 base에 두고 로그인 여부에 따라 달라진다.로그인을 하지 않았다면, 기본적으로 상단에 검색바와 로그인, 사이드바에는 쇼츠 내페이지 시청기록 버튼을 둔다.로그인을 했다면, 기존 base에서 로그인이 사라지고 영상업로드 유저정보관리 버튼을 보이게 하고, 사이드바에서도 구독 버튼이 추가되며 내 채널을 생성한 유저일 수 있으므로 그에 따라 추가한다.사실 이과정은 별거 없기도 하고 chatg..