Youtube
1.YouTube Clone. setting
유튜브 backend 만들기expressbabelnodemon등등 사용\-jmTube folder를 하나만들고\-npm init 하면,\-package json이 생긴다.\-npm i express\-extension에서 gitignore\-git에 repository
2.express Router
들어가기express의 router에 대해서 알아본다우리가 만들 router는globalRouter/ -> home/join -> join/login -> login/search -> searchuserRouter(/users)/users/:id -> see User/
3.Pug
YouTube에서 사용될 Front부분이 pug에대해서 알아보고,pug의 기본적인 사용 문법을 알아본다.우선, front page를 rendering하는 방법.controller에서 res.render('----')에서render부분에 rendering할 파일의 nam
4.form, input, get, post
들어가기1\. pug에서 form을 만드는 방법을 알아본다2\. form에 들어가는 input, submit등을 알아본다3\. form에서 POST로 data를 보내는 방법을 알아본다.4\. GET으로 data를 받는 방법을 알아본다. extends base.pug
5.mongoDB, mongoose
해당 포스트는 노마드코더님의 강의의 메모입니다. https://nomadcoders.co/ | 노마드코더 https://github.com/hoizzi/youtubeClone2022 | Hoizzi Github #6.7 MongoDB mongoDB는 do
6.DB connection, mongoDB, mongoosh(1)
들어가기DB연결 및 사용 방법을 알아본다.https://mongoosejs.com/docs/guides.html공식문서는 대단히 중요함.https://regexr.com/search에서 title에 { $regex:new RegExp(keyword,
7.DB connection, mongose, mongoDB(2)
들어가기controller에서 DB를 부르는방법을 알아보았다.이제 pug에 적용되는 부분을 확인한다.
8.User model, User Route
models에 User.js인 userSchema만들기userController만들기.확인만 할 것!확인만~
9.cookie-session, userController
cookie-session은 브라우져에 server에서 req가 들어가면,server에서 브라우저에게 id를 하나(session) 건네줌.F12, application에서 확인 가능.이것은 서버를 저장하거나, 서버를 껐다가 켜면 지워지는데, 이 세션을 mongoDB에
10.dotenv, Environment Variable, logout
환경변수.git에 업로드 되면 안되는 state를 dotenv를 통해서 관리한다.npm i dotenv루트에 .env를 만들어서 주요한 환경변수들을 담아놓음.그리고 gitignore에 .env를 포함시켜 준다.git에 upload되면 않되기 때문에
11.Edit Profile, seeProfile
EditProfile다른 부분은 크게 문재될게 없으나password edit할 경우 다시hash화 시켜야 되므로 password change부분에 집중해서 봐준다.NOTICE!!! session에 다시 입력시키는 이유는 session은 DB가 아닌memory에 writ
12.Protector/Public middleware
loggedIn 상태에 따라page에 접근여부를 결정하게 하는 middleWare
13.File Upload(image, video)
들어가기express에서 file upload를 알아본다.일단은 server에 먼저 올려보고 나중에 aws S3에 저장하고 path를 받아보는걸로 한다.express에서 file Upload를 하기 위해서는 multer를 이용한다.npm i multeruserSchem
14.delete Video
들어가기비디오 지우기~delete는 get으로 작동한다는 것을 명심한다.
15.github Login
들어가기 github로 로그인을 해 본다 flow가 거의 같기 때문에 이걸 익히면 kakao login, facebook login등을 쉽게 할 수 있음. https://docs.github.com/en/developers/apps/building-oauth-app
16.model(User, Video)
들어가기Model을 정리해본다
17.webpack(js, scss)
webPackJS를 pug파일에서, client쪽에서 사용할 수 있게 compile해 주는 library.여기서는 sass와 Js를 client에서, pug파일에서사용할 수 있게 webPack을 해 준다.sass는 css로 변환하고 css를 client에서사용할 수 있
18.scss
들어가기위의 POST에서 scss 사용하기 위한 config 작업을마무리 했으면, 실제 사용하는 방법을 알아보자.tailwind가 진리인듯.ㅜㅜ바로바로 compile될 수 있게npm run dev:assets를 실행시켜 놓아야한다.1\. src/client부분에 scs
19.Video Control(JS, scss, pug)
들어가기JS를 이용해서, watch.pug에 비디오 controler를 만들어본다.play, mute, fullScreen등등.JS를 다시 복습하고 익혀 보도록 한다.\---------부분은 참고만 하라고 남겨둠.
20.register watch count
video의 view count를 새어주는작업, 그리고 view count를 DB에 저장해서다시뿌려주는 작업.api를 사용하는데, rendering 하는것 없이 api가사용되는 구조를 잘 알아 놓는다videoController안에 '/api/id/view로 접근했을떄,
21.image/video upload s3
image와 video를 s3에 upload 해보자aws에 가입하고 bucket을 만든다. 검색창에서 S3라고 입력한다.2\. 검색에서 S3를 검색해서 이 페이지에 왔으면, 버킷만들기를 클릭한다.3\. 버킷이름은 unique로 하고 리전은 서울을 선택한다.4\. 객체
22.Comment Section
들어가기비디오에 댓글달기를 해 봅시다Comment 들어간 부분만 확인할것!!Comment들어간 부분만 확인한다.pug파일의 form에서 바로 server로 날리는 방법과js파일로 argument를 날리는 방법을 잘 비교하면서 잘 봐둔다.comment를 server에서
23.Deploy(mongo, git, heroku)
드디어 deploy를 해 봅시다!https://www.mongodb.com/에 가서 회원 가입을 한다.1\. 가입을 하게 되면 나오는페이지이다.2\. 왼쪽 맨 위에 폴더부분을 클릭하면 new project를 생성할 수 있게 되어있다. new project를