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..
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. 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에는 아무 정보나 넣을 수 있..
1. 사용할 패키지들 node.js는 기존에 브라우저 안에서만 사용되던 언어였지만 브라우저 밖에서도 사용하기 위해 만들어졌으며, 프론트엔드와 백엔드에서 동시에 사용할 수 있다는 장점이 있다. node.js에는 npm을 통해 패키지를 관리한다. npm init을 사용하여 프로젝트를 생성하고 나면 package.json이 생성된다. json은 데이터를 전송할 때 사용하는 양식이며 package.json에는 해당 프로젝트의 패키지를 관리하기 위한 문서다. 우리가 npm을 사용하여 설치한 모든 것들은 package.json의 dependencies에 기록된다. dependencies는 프로젝트를 실행하기 위한, devDependencies는 개발자를 위한 패키지들이다. express라는 node.js의 프레임워..
1. Cookie Session (1) - 이전까지는 account가 존재하는지, account의 password가 맞는지만 확인하였음 - 이제는 서버가 로그인을 시도한 유저를 기억하는 방법을 알아야 함 - 그 방법 중 하나가 cookie이며, cookie를 이해하기 전 먼저 session에 대해 알아야 함 - session이란, 백엔드와 브라우저 간에 어떤 활동(history)을 했는지 기억(memory)하는걸 말함 - 백엔드와 브라우저간 정보가 있어야 됨 - 현재 home으로 이동하면 GET request가 발생하는데, 백엔드에서 HTML을 render하고 나면 연결이 끝남 - 즉 연결이 지속되지 않는 무상태(stateless) - request를 받고 처리되면 서버도 브라우저도 곧바로 ..
1. POST - 그동안은 router에서 get만 했었지만 backend에 post까지 하는 방법을 배워야함 - 우선 현재의 목표는 db에 있는 모든 것들을 나열 - 이미 home.pug에서 구현이 된 상태 - 유저가 한번에 1개의 영상만 볼 수 있도록 해야함 - 그 다음으로는 영상을 업로드 할 수 있어야 함 - https://github.com/Daniel-Jeon/wetube-loaded/commit/997d75b5d7fa8c0c90b5008f17d92954d2af83ee Study post(1) :) · Daniel-Jeon/wetube-loaded@997d75bbefore study db, study post!github.com // watch.pugextends base.pugblock c..
0. Returning HTML - 우리는 지금까지 HTML을 return 할때 controller에서 res.send()를 사용했음 - 한줄 정도의 HTML을 보내는건 상관없으나 한 페이지 전체를 보낼 경우 매번 많은 내용을 작성해야함 - 이 부분을 개선하기 위해 Template Engine을 사용할 것임 1. Pug - Template을 이용하여 View 만들기를 돕는 Engine - https://github.com/pugjs/pug/tree/master/packages/pug#syntax pug/packages/pug at master · pugjs/pugPug – robust, elegant, feature rich template engine for Node.js - pugjs/puggithu..
1. Route Tree - 사용자의 마인드가 되어 웹사이트이 구조를 어떻게 만들지를 구상해야 함 - globalRouter에 login search Router 만들기# Global/ -> Home/join - Join/login -> Login/search -> Search# User/user/:id -> See profile/user/logout -> Log out/user/edit -> Edit my profile/user/delete -> Delete my profile# Videos/videos/:id - > See watch video in my channel/videos/:id/edit -> Edit video/videos/:id/delete -> Delete video/videos/up..