" / : id " 반드시 id 를 쓸 필요는 없다.":" parameter라고 부른다.point는 url 안에 변수를 포함 시킬수 있게 해준다.만약 parameter를 이용하지 않는다면 모든 url마다 router 새로 만들어야 줘야 한다.절대 이렇게 코드를 짜면
" / : id " 뒤에 숫자만 오게 해 보겠다. ab 뒤에 "\*"는 모든걸 뜻하고 cd가 온다. abcd, abxcd, abRANDOMcd, ab123cd,이렇게 올수 있다는 거다.ab 다음에 "+"가 있는데 "+" 는 b가 얼마든지 많아도 된다.abcd, abb
현재 문자열만 return하고 있다. 그래서 HTML로 return을 해보겠다.두가지 옵션이 있다.res.send("")안에 다가 HTML의 문자열을 써서 보내는 방법이 있다.browser가 그 HTML을 실행해서 보게 된다.이런식으로 작성을 하게 되면 browser가
에러가 났던 걸 고치는 방법은 디폴트 값을 바꾸는 거다.한가지 해결 방법은 views폴더를 src밖으로 꺼내는 거다. (너무나도 단순, 무식한 방법이다.)이 방법은 별로 추천하지 않는다.모든 코드를 정리하기에도 보기에도 src폴더 안에 있는게 좋다.그래서 express
이제 inheritance(상속) 개념에 대해 알아 보자.상속이란 일종의 베이스를 만드는 거다.(레이아웃의 베이스 혹은 html의 베이스)그러면 모든 파일들이 그 베이스에서 부터 확장해 나간다.views폴더에다 bass.pug 파일을 만든다.doctype htmlhtm
이번엔 Title 부분 반복적으로 쓰는 부분을 수정해 본다.일단 hoem.pug, edit.pug, watch.pug에 있던 부분은 싹다 지워 준다.base.pug에 추가 해준다.여길 보면 trending이 home을 렌더링하는걸 알수 있다.videoController
간략하게 pug의 장점에 대해서 알아 보겠다.pug는 깔끔하다.지저분하게 HTML을 쓰지 않는다. (반복적인 사용을 안하게 해준다.)파이썬 처럼 깔끔한 코드를 쓸수 있게 해준다.태그를 닫는걸 신경 쓰지 않아도 된다.모든 탭과 띄어쓰기로 구분이 된다.express에게 렌
html 태그에 몇가지 기본 스타일을 입혀준다. https://andybrewer.github.io/mvp/이 사이트로 가보면 정보가 나온다.base.pug파일에 넣어 준다.pug스타일로 변경해준다.그리고 home.pug파일에base.pug 파일에(간격을 잘
conditionalsiterationmixing일단 이 세가지가 있다.conditionals를 가장 많이 쓰게 된다.if, if else ...base.pug이렇게 작성 해주면 Title이 중앙으로 오게 된다.여기서 알아야 할것이 있다.이렇게 쓰게 된다면 text가
if, else if conditional을 없앤다.Iteration은 기본적으로 elements의 list를 보여준다.videoController.jstreding 안에 video들이 들어가게 된다.데이터 베이스에서 가져올거다.그래서 가짜 비디오의 array을 만든거
videoController.js이런식으로 나온다. 수정 가능 하다.videos안에 video가 있으니 video는 title이 있다.home.pug으로 가서 video.title이라 적는다.숫자일 필요도 없고 객체여도 된다. mixin이라는 걸 이용해 볼거다.mi
왜냐하면 두가지를 프론트 엔드에서 꽤 자주 사용 하게 된다.거의 Iteration을 자주 쓰고 mixin은 가끔 쓰게 될것이다.Iteration은 array의 모든 element에 대해 특정 행동을 취할때 사용한다. videoController.js에서 video라는
왜냐하면 back end에 data를 저장하는게 요점이기 때문이다.지금 데이터를 받기만 하고 있다. 이걸 저장할수 있게 해본다.videoRouter.js를 보면 하고 있는건 get 밖에 없다.post 하는 법을 알아 보겠다.먼저 array로 된 database를 가지
page title은 watching + video.title로 주고 있다.이제 부터 모든 비디오들을 템플릿에 보내 줄거다.그 템플릿의 이름은 watch이다 .videoController.js여기서 video는 video:video와 같다. ES6을 사용해서 저렇게 짧
videoRouter.js videoController.js id/edit 경로가 router에 등록 되어 있다. edit이라는 컨트롤러를 사용하는데 아직 하는 일이 없다. 기본적으로 watch에서 했던 걸 적용해 준다. videoController.js
전 단계에서 submit button을 클릭할때 form 의 행동을 어떻게 통제하는지 알아봤다. method라는게 바로 form과 back end 사이의 정보 전송에 관한 방식이라는 걸 배웠다. 만약 get method를 사용하면 그 form 에 있는 정보가 url
이전까지 데이터를 back end로 보내는지에 대해 알아 봤다.edit.pugform을 이용해서 해봤다. form 안에 input을 넣고, 각 input에 name을 줬다.또 method는 post를 사용했다. 이렇게 하면 post request을 back end로 보
지금까지 배웠던 것들을 한번 더 연습해 보도록 하자. 유저가 form 을 get하고 그 form을 post하면 그게 controller를 발동시켜서유저들이 redirect되거나 페이지에서 뭔가를 보게 된다. database 없이 해볼거지만 잘 이해하고 넘어가는게 중요하
Upload Video를 누르는 순간 post requesr를 /videos/upload url에 보내게 된다. 그리고 videoRouter.js에 route를 만들어 놨다. videoRouter.route("/upload").get(getUpload).post(p