YouTube clone

NPM프로젝트 폴더에서 %npm init를 터미널에서 실행한다. 입력하라고 나오는 것을 입력해준다. package.json파일이 생기면 성공이다. 나의 프로젝트를 하나의 패키지로 만든다고 생각하자. package.json 폴더와 index.js이제 프로젝트를 누군가와

GETGET메소드로는 어떤 내용을 불러올 수 있구요.POSTPOST메소드로는 내용을 수정할 수도 있구요. ex) form서버에 request를 보내면 서버는 response를 보내야합니다. 이게 express.js에서 어떻게 하면 구현할 수 있을까요? 아래 코드를 봅시

babel은 es6의 최신 javascript code를 표준 javascript code로 변환해줍니다.

루트파일을 다시 작성하면 서버를 껐다 켜야 적용이 되는데요. 개발의 편의를 위한 패키지를 하나 소개합니다. 프로젝트 폴더 경로에서 %npm install nodemon -D을 터미널에 입력합니다. -D를 붙이는 이유는 프로젝트를 위한 dependecies가 아니라 개발

express.get을 살펴봅시다. 사용자가 '/'로 접속하면 handleHome을 실행하게 되죠. 이 사이에 하나의 함수를 추가할 수 있고 이게 바로 middleware입니다. 사용자가 '/'에 접속하면 어떻게 될까요? 계속 로딩만 될겁니다. 왜냐면 middlewar

middleware중에 Morgan과 Helmet이라고 하는 패키지가 있습니다. 로그를 제공하는 middleware라고 정의하겠습니다.%npm install morgan을 터미널에 입력합니다. 사용 방법은 아래와 같습니다.위와 같이 middleware에 morgan을

프로젝트를 진행하면 여러 모듈로 관리하는게 좋습니다. 여러 모듈로 관리하기 위해선 import, export 과정이 필요한대요. es6에서의 import와 export를 공부해봅니다.우리가 작성한 파일 중에 app.js 라는 이름을 갖는 파일이 있다고 하고 그 파일이

웹사이트를 보면 홈이 있구요. 뭐 개인 사용자를 위한 메뉴도 있구요. 네비게이션 바를 통해 이동할 수 있는 곳도 있구요. 비밀번호도 변경하구요. 여러 페이지로 사용자를 보낼 수 있는게 바로 라우팅 입니다. 라우팅을 해주는게 Router라고 정의하겠습니다.Express모

router를 MVC pattern을 적용해서 분리해봅시다. 우리가 필요한 페이지가 크게 '/', '/users', '/videos'라고 합시다.routers라는 폴더를 만들고 폴더 안에 globalRouter.js, userRouter.js, videoRouter.j

Router-2에서 봤듯이 url이 늘어날수록 개발자도 기억을 하거나 확인하기가 어려워집니다. url 구조를 한곳에서 변수로 관리해봅시다. 먼저 routes.js 파일을 만들어 줍니다.참고사항 : express는 :부분을 변수로 처리함자 이렇게 위와 같이 URL을 정리

controller는 모델마다 필요합니다. 지금 진행중인 프로젝트인 유튜브 클론 같은 경우에는 user와 video 2가지 모델이 있다고 볼 수 있습니다. 따라서 2가지의 controller를 만들어보겠습니다. 프로젝트 폴더에 controllers 폴더를 만들고 use

pug는 express에 설치하기도 쉽구요. pug는 view engine 입니다.express에 view와 관련된 view-engine 설정이나 기본 디렉토리 설정은 여기(https://expressjs.com/en/5x/api.html터미널에 %npm in

폴더 depth를 글로 표현하는 것보단 이미지를 보는게 나을 것 같아서 위의 이미지 첨부하였습니다. 참고바랍니다.레이아웃은 왜 만들까요? 레이아웃을 만들어두면 프로젝트의 탬플릿이 많아도 쉽게 관리가 가능하기 때문입니다.pug는 html과 다르게 태그를 열고 닫고가 없고

부품을 만들어서 로봇을 조립하듯이 partial로 나누어 관리하는 것도 많은 장점이 있습니다. 큰 틀을 만드는 것 만큼의 장점이 있죠. 페이지의 일부분이 될 partial을 만들어봅시다. layout과

pug로 layout을 작성했죠. html이라고 생각하면 우리는 링크(anchor)를 이용하는 경우도 많습니다. 여기에 '/home'이라고 적다보면 우리가 앞서 routes.js 하나의 파일로 URL을 관리하는 의미가 퇴색되겠죠. 따라서 middleware를 사용해서

모든 탬플릿에 적용되는 local-variables를 정의하는 방법을 배웠구요. 이번에는 특정 탬플릿에만 적용되는 변수를 정의하는 방법을 배우겠습니다. local-variable은 middleware를 통해 전달했었죠. 이번에는 res.render를 이용해보겠습니다.위

유저가 검색한 내용을 받아와서 결과를 내주기 위해선 먼저 내용을 받아와야 겠죠. 이걸 form을 이용해서 만들어 보겠습니다.actionform 결과를 보낼 주소methodname해당 값이 의미하는 바

이번에는 회원 가입 form을 만들어보겠습니다. 우선 join.pug에 코드를 추가하겠습니다.

실제 데이터베이스를 만들고 확인하다보면 수정할 부분이 있으면 번거롭기 때문에 더미 데이터를 만들고 이 더미 데이터를 실제 데이터베이스에서 불러온다고 생각하고 진행해보겠습니다.videoFile 참고 해주시구요. videos라는 배열을 만들어 두개의 video객체를 넣어주

반복되는 pug코드를 줄이기 위한 것이라고 생각하면 됩니다. 아니 그렇게 생각하면 partials도 반복되는 pug코드를 줄이기 위한 것 아닌가요? 라고 할 수 있습니다. 맞습니다. 두 가지 모두 반복되는 코드를 줄이기 위한 것이지요. 하지만 mixin이 parital

join form에 이어서 login form을 만들어보도록 하겠습니다. login.pug login도 비밀이 유지되어야 하는 form 이기 때문에 method를 post로 하겠습니다. userController post method를 갖는 login 페이지에서 응

MongoDB는 NoSQl database로서 규칙이 적고 간단하여 초보자가 사용하기 좋은 database입니다. MongoDB는 처리속도가 빨라 채팅과 같은 환경에서 유리합니다.글을 참고하여 brew로 다운로드하면 됩니다.제 설치과정은 아래와 같습니다.%brew in

프로젝트를 open source로 진행한다거나등의 경우에 open source이더라도 사용자의 정보를 open해선 안되겠죠. 이럴때 dotenv를 이용합니다.%npm install dotenv 터미널에 입력.env 파일을 프로젝트 폴더에 생성해주고 아래와 같이 비밀로

이번 시간에는 데이터 베이스 모델을 생성해보겠습니다.프로젝트 폴더에 models라는 폴더를 생성하고 그 안에 Video.js 파일을 만들어보겠습니다. 모델 파일명은 클래스 이름을 정하듯이 대문자로 시작하게 만들었습니다.코드 작성에 앞서 두가지 개념에 대해 짚고 넘어갑니

저번 시간에 Video model을 생성했었죠. 유튜브를 생각하면 video도 있고 video에 댓글도 달리겠죠. Comment Model을 또 만들어봅시다.근데 생각해보면 video가 없다면 comment도 없겠죠? 댓글을 달 곳이 없으니까요. 그러면 video와 c

비디오, 댓글 model에 이어 User 모델을 생성해봅니다.위에서 export한 User를 database와 연결해주기위해 init.js에서 import해줍니다.

middleware를 통해 중간에 upload하려는 파일을 가지고 올 수 있다는 얘기를 했던게 기억이 나시나요? 기억이 나지 않더라도 오늘 다시 되새기며 공부해보겠습니다.multer는 파일 업로드를 위해 사용되는 node.js middleware입니다. multer를

자 이제 사용자가 upload한 video가 home 화면에서 재생되어야 정상적인 동작이 이루어진 건데요. 하지만 재생이 되지 않을 겁니다. 어떤 이유에서 이렇게 됐냐면 우리가 파일을 videos 폴더에 저장했는데요. video의 src가 localhost:3000/v

%npm install fluent-ffmpeg를 터미널에 입력

웹사이트의 기본인 CRUD중에 CREATE를 완료했고 이번엔 READ를 해보겠습니다. 비디오를 클릭하면 비디오 상세 페이지로 이동하는데요. 상세 페이지에서 비디오를 볼 수 있게 만들겠습니다.비디오 상세페이지 주소: localhost:4000/videos/videoId주

생성한 비디오를 수정하거나 삭제할 수 있도록 해주겠습니다. 앞의 내용과 매우 유사하기 때문에 자세한 설명은 생략하도록 하겠습니다.

npm package인 ESLint에 대해 알아보겠습니다.%npm install eslint -g를 터미널에 입력합니다. -g를 뒤에 붙인 이유는 우리가 지금 진행하고 있느 프로젝트 뿐만 아니라 모든 프로젝트에서 사용하기 위함입니다. %eslint --init를 터미널

Regular Expression(정규식)은 문자열의 검색을 위해 많이 사용되는데요. 이 사이트에서 정규식과 문자열을 입력하고 그 결과를 확인할 수도 있고 다른 유저가 만든 정규식을 볼 수도 있습니다. 참고하시구요.우리는 이 정규식을 이용해서 비디오 검색 기능을 만들어

webpack은 모듈 번들러입니다. 최신의 es6나 scss 등을 사용해 작성한 파일들을 webpack에게 주면 webpack은 브라우저가 알아들을 수 있는 일반적인 js와 css로 변환시켜준다고 생각하면 됩니다.설치 링크를 보고 CLI도 설치하시면 됩니다.설명(htt

이번 시간에는 webpack을 통해 변환한 파일을 탬플릿 파일에 연결하며 주의할 사항에 대해 얘기하겠습니다.video src 연결할때처럼 서버입장에서는 static 폴더에 대한 접근에 대해 실행할 함수를 알지 못하기 때문에 app.js에서 static 폴더 접근에 대한

Passport JS는

저번시간까지 해서 user register(join)단계까지 완료했습니다. 이번 시간에는 등록한 user를 login시키는 방법을 알아봅니다.join이 성공적으로 이루어지면 바로 사용자를 postLogin 시키기위해 아래와 같이 작성.postJoin 함수를 middle

세션은 쿠키와 비슷하지만 쿠키는 브라우저에서 세션은 서버에서 관리한다는 면에서 다릅니다. 세션이 쿠키보다 보안적으로 우수하므로 로그인과 같은 작업에 보통 사용합니다. 세션을 사용하기 위해서 expressjs에서는 express-session을 추천하고 있습니다.%npm

이 글은 로그인 기능 구현글을 읽은 뒤에 읽으면 좋습니다.이때까지 저는 현재 로그인한 유저를 session에 저장하는 걸 passport에게 전적으로 맡겼습니다. 또한 middleware를 통해 현재 로그인한 유저에 대한 정보(deserialize된 정보)를 logge

로그인을 했던 유저가 서버 재시작으로 인해 강제 로그아웃 되는 이유는 세션이 메모리에 저장돼서 서버 재시작과 동시에 날아가기 때문이라고 했습니다. 세션을 메모리가 아닌 다른 곳에 저장하여 서버 재시작과 관계없이 세션을 유지해보겠습니다. 설치 Mongostore %np

passport의 strategy중 하나인 github strategy를 설치하고 사용해보겠습니다.%npm install passport-github등록 링크Application name웹사이트 이름 Homepage URL웹사이트 URLAuthorization call

passport-local-mongoose를 이용해서 유저가 비밀번호를 변경할 수 있는 방법을 알아보겠습니다. 문서위의 이미지는 공식 문서에서의 changePassword 설명 내용입니다.기존 changePassword 함수를 getChangePassword와 post

이번 시간에는 video를 업로드할때 uploader(user) 정보를 포함하도록 변경하겠습니다. 변경에 앞서 기존에 저장된 video를 삭제해줍니다.%mongo%use youtube(데이터베이스명)%db.videos.remove({})WriteResult({ "nRe

브라우저에서 제공하는 video 탬플릿을 사용해도 좋지만 video player를 버튼 하나하나 직접 구현해보겠습니다.CSS trick동영상에 커서를 올렸을 때 control button이 활성화되는 걸 구현하기 위해서 control들의 기본 opacity값을 0으로

playButton을 만들고 click evnetListener를 추가하여 재생 및 멈춤 기능을 만들어보겠습니다.init triggerjavascript파일은 모든 탬플릿에 적용되기 때문에 videoContainer에 undefined값이 들어있을 수도 있습니다. un

오늘 만들어볼 기능은 크게 2가지 입니다.1\. volume 버튼을 눌렀을 때 mute, unmute 기능2\. inputtype=range를 이용해서 volume 조절하기

이번 시간에는 비디오 전체화면 기능을 추가해보겠습니다.requestFullscreen어떤 요소든 전체 화면으로 만듭니다. 참고 또한, video 자체가 아니라 videoContainer를 fullscreen으로 만들건데요. 그 이유는 video만 fullscreen으로

재생중인 video의 전체시간과 현재 재생중인 위치를 표시하도록 하겠습니다.

Ajax(Asynchronous JavaScript and XML, 에이잭스)는 비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다.\- 위키백과 -'/api'데이터 베이스를 변경하기 위한 URL'/api/:id/view'데이터 베이

댓글을 일반적인 post method 요청으로 추가할수도 있지만 AJAX로 구현하는 이유는 바로 페이지를 새로고침하는걸 보고싶지 않기 때문입니다.videoDetail page에 댓글을 남길 수 있는 form을 추가해주겠습니다. form의 위치는 각자 원하는 위치에 넣어

project 설치 %npm install aws-sdk %npm install multer-s3 .env middlewares.js multer storage config multer의 storage default값은 node.js 파일 시스템입니다. s3로 변경

mLab mLab이란? mLab 사용법 mLab에 접속하셔서 SIGN UP 하시고 SIGN IN 해줍니다. mongodb 아디이 있으시면 따로 가입하지 않으셔도 될겁니다. Build a Cluster cluster tier 선택 우리는 작은 어플리케이션을 목표로 하고

자 이제 우리는 Building for Production을 할건데요. 우리가 현재는 babel을 사용해서 코드를 변환하고 있지만 project app.js views 경로 설정 view engine 폴더 경로의 default값은 프로젝트 폴더(package.jso

$brew install heroku/brew/heroku 터미널에 입력$heroku create 터미널에 입력$git push heroku master