유튜브 클론코딩

코드를 작성하다보면, 사소한 에러나 큰 에러가 발생하게 될것이다.에러 발생 시 아래 내용대로 해결해보자.1\. 에러 발생 시 스스로 고친다.(구글링 등)2\. 에러메세지를 보고 고쳐봐도 에러가 발생할 시에는 에러에 대한 질문을 제3자에게 하게될 것인데, "안돼요, 어떡

NodeJS를 쉽게 말하면 크롬 V8 자바스크립트 엔진으로 빌드 된 자바스크립트 런타임이다.브라우저 밖에서 돌아가는 자바스크립트90년대 JS는 웹사이트와 상호작용을 할 수 있도록 만들었기 때문에 브라우저에서만 사용이 가능했었다.Ryan Dahl은 NodeJS를 만들어서

npm 은 자바스크립트 프로그래밍 언어를 위한 패키지 관리자이다.자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자이다.yarn이랑 거의 똑같은것임(페북이 만든 패키지 매니저)https://www.npmjs.com/

git initgithub에 Repository 생성 및 URL 복사원격저장소에 추가git remote add origin https://github.com/jjinichoi/wetube-reloadednpm init아래처럼 물어보는 것에 답하면 package

babel은 우리가 작성한 최신 JS를 NodeJS가 이해할 수 있는 JS로 바꿔준다.바벨 설치 바로가기(https://babeljs.io/setupNode를 클릭 후 설치 방법 확인아래 명령어를 입력 후 설치를 하게되면 package.json에 devDepe

import express from "express"express function을 사용하면 express application을 생성해준다.이제 app이 express application이 된 것app이 listent해야 한다 했을 때 무엇을 listening해야

서버가 request에 respond하도록 하는 법

서버가 request에 respond하도록 하는 법서버에게 get request에 어떻게 응답하는 지http request가 어떻게 작동하는지(언제 시작되고 언제 종료되는 지)express와 연관된 코드는 express application이 만들어진 다음부터 코드를

서버가 request에 respond하도록 하는 법서버에게 get request에 어떻게 응답하는 지http request가 어떻게 작동하는지(언제 시작되고 언제 종료되는 지)첫번째 인자는 request object(req) 두번째 인자는, response object

중간에 있는 소프트웨어1\. Middlewares는 request와 response 사이에 있다브라우저가 request한 다음, 서버가 응답하기 전 Middlewares가 있는 것2\. Middlewares는 handler(controller)고, 모든 handler(

app.use() golobal middleware를 만들 수 있게 해줌 (어느 URL에도 작동하는 middleware) app.use() 은 무조건 get위에 와야한다. (get보다 아래 있으면 middleware이 작동하지 않음) 모든 route에서 이 함수를 사용

https://www.npmjs.com/package/morganmiddleware는 직접 작성할 수 도 있고 설치할수도 있는데 morgan은 설치하는 것 중 하나.morgan은 node.js 서버로 구성된 웹 환경에서 HTTP request 로그를 관리하기

http://expressjs.com/ko/api.htmlRouter는 controller와 URL관리를 쉽게 해줌. 쉽게 말해 미니 어플리케이션을 만들게 해줌작업중인 주제를 기반으로 URL을 그룹화 해줌모든 Express 애플리케이션에는 app router가

컨트롤러와 라우터 나누기모든 파일은 분리된 모듈server.js에 있는 아래 소스 router js파일에 잘라내기router js에서 import express하기js는 각자 자기세계를 가짐.이미 server.js에 express를 import했어도 globalRout

하지만, 추후 라우터 함수의 내용이 점점 늘어날 것이기 때문에 라우터와 컨트롤러가 같은 곳에 있는 것은 좋지 않은 것이다.하여, 컨트롤러 파일을 따로 만들어야 한다.globalController가 없는 이유는?글로벌 라우터는 url을 깔끔하게 하기 위해 쓰는것일 뿐예시

유저 입장을 생각하여 플랜짜기(기본)나중에 댓글기능과 좋아요 기능을 추가할 예정홈(/)을 간다.로그인하지 않았다면 로그인(/login)2-1. 회원가입을 안했다면 회원가입(/join)2-2. 회원가입이 되어있으면 로그인(/login)홈으로 돌아와서 동영상 검색(/sea

:id는 파라미터라고 부른다.:id에서 id는 다른 이름으로해도 괜찮음(예: potato) 중요한 것은 앞에 ':'를 넣는것파라미터는 url안에 변수를 포함시킬 수 있게 해준다.노마드코더 영상 url 확인 시https://nomadcoders.co/wetube

HTML의 문자열써서 보내는 방법(기본)컨트롤러안에 작성하기에는 너무 내용이 많다.Pug (ㄱㅇㅇ😍)템플을 이용해서 뷰를 만드는것을 도와줌설치https://www.npmjs.com/package/pug gitHubhttps://github.com/p

Pug 반복페이지별로 pug를 작성하다보면 header나 footer같은 경우 계속 반복해서 작성해야하는 번거러움이 있다.

https://pugjs.org/language/inheritance.html일종의 베이스를 만들어줌(레이아웃의 베이시 혹은 HTML의 베이스)모든 파일들이 그 베이스에서부터 확장해 나감base.pug 생성home.pug, watch.pug, edit.pug

title같이 앞에 뒤에 내용이 반복되고 앞에가 변경되는 글일 경우 변수로 만들어 준다.\`\`edit.pugbase.pug그렇다면 템플릿으로 어떻게 변수를 보낼까?어디서 템플릿을 렌더링하는지 생각해보자. 바로 컨트롤러다.videoController.pug1\. hom

HTML의 요소들을 예쁘게 만들어줌(CSS는 맨 마지막에 할것이기 때문에 임시방편으로 이걸로 스타일 적용하고 실습)https://andybrewer.github.io/mvp/base.pug https://pugjs.org/language/conditi

https://pugjs.org/language/iteration.html✔Pug는 each과 while을 지원한다.1\. template에는 array인 변수(variable)이 있어야함videoController.js2\. each 적고, 보여주고 싶은 v

https://pugjs.org/language/mixins.htmlmixins을 사용하면 재사용 가능한 pug blocks을 만들 수 있음mixin은 partial이긴 하지만, 데이터를 받을 수 있는 partial임(mixin은 똑똑한 partial이다!!)

data를 어떻게 백엔드에 post하는지 배워보자1\. 가짜 database에 있는 모든 비디오 나열하기 (이전 실습때 완료(mixin))✅2\. 유저가 하나의 비디오를 볼 수 있게 하기3\. 영상 수정 기능4\. 비디오 업로드 기능home에 나열된 비디오 클릭 시 /

data를 어떻게 백엔드에 post하는지 배워보자1\. 가짜 database에 있는 모든 비디오 나열하기 (이전 실습때 완료(mixin)) ✅2\. 유저가 하나의 비디오를 볼 수 있게 하기(완료) ✅3\. 영상 수정 기능4\. 비디오 업로드 기능a링크 만들기absolu

data를 어떻게 백엔드에 post하는지 배워보자1\. 가짜 database에 있는 모든 비디오 나열하기 (이전 실습때 완료(mixin)) ✅2\. 유저가 하나의 비디오를 볼 수 있게 하기(완료) ✅3\. 영상 수정 기능4\. 비디오 업로드 기능