2.15 Partials with Pug views폴더> partials폴더> header.pug, footer.pug 파일 만들기 partials는 페이지의 일부분이다. 조직적인 목적으로만 만들어진다. views 폴더 아래에 partials 폴더를 만들고 header.pug , footer.pug라는 파일을 만든다. footer.pug 만들기 footer 파일에는 footer 태그를 추가하자. 이 안에는 유튜브 아이콘이 들어갈 것이다. fontawesome에서 아이콘을 추가한다. footer 태그에 footer라는 클래스를 추가하고, div에는 footer_icon이라는 클래스를 추가한다. (div는 div라고 안적어주고 클래스이름만 적어줘도 된다) icon 다음에는 footer__text가 클래스명인..

2.13 Installing Pug(퍼그 설치) Pug란? Pug는 view 엔진을 말함 pug 설치하기 콘솔에 npm install pug 로 설치한다. set함수로 application 설정하기 - app.set("view engine", "pug"); https://expressjs.com/ko/4x/api.html#app.set expressjs 공식 홈페이지> API 참조 > application> app.set() set 함수: application의 설정을 하는 함수 name과 value가 필요하다. 우리는 view engine 설정을 바꿀것이다. view engine 설정의 기본 값은 undefined인데 이것을 pug로 바꿀것이다. app.js에 다음과 같은 코드를 추가한다. app.se..

2.10 MVC Pattern - Part. 2 그냥 별거아닌데 app.js에서 경로만 /users, /videos로 바꾸고 시작! URL 만들기(routes.js) routes.js 파일을 만든다. → 쪼개서 처리하는 것이 좋기 때문, 나중에 다른 곳에서 같은 URL을 사용해야할 수도 있다. 어딘가 다른데서 사용하려면 이 구조를 내가 외워야 한다는 것이다. 좀 더 편하기 위해 URL을 변수로 선언해서 모아놓은 routes.js 파일을 작성한다. routes.js파일을 만들어서, 어디에서든 이 URL을 불러다 쓸것이다. (왜 그런지는 나중에 보게 될 것이다.) // GLobal(전역적인 것들) const HOME = "/"; const JOIN = "/join"; const LOGIN = "/login"..

2.9 MVC Pattern - Part. 1 MVC 패턴 지금까지 미들웨어,라우팅에 대해서 알아봤고 이제 MVC를 알아볼 것이다. - MVC: Model, View, Control을 의미한다. Model: 데이터 View: 데이터가 어떻게 생겼는지 Controller: 데이터를 보여주는 함수(데이터를 찾는 함수) MVC는 패턴이다. 패턴은 일종의 끝내주는 구조 같은 것 userRouter.js , videoRouter.js 만들기(URL과 함수를 분리하기 위해) 1. app.js에서 이 주석 처리한 부분들을 삭제한다.↑(왜냐하면 라우터로 만들어줄 거기 때문에) 2. router.js -> userRouter.js로 이름을 변경하고(뭐 무슨 import창뜨는데 ok함) 3. videoRouter.js도 ..

2.8 Express Core : Routing 새로운 파일을 만든다.(init.js) index.js → app.js로 파일 이름을 바꾼다. app.js에서 일부분 삭제한다. (왜냐면 저 부분을 init.js에서 작성할거기 때문에) (↑주석처리된 부분을 지우는 것이다) init.js에서 application을 시작하도록 한다 자바스크립트 ES6에는 흥미로운 부분이 있는데, 모듈이라는게 있어서 우리 코드를 공유할 수 있다.다른 파일에서의 코드를 가져다가 사용할 수 있다. 예를 들어, app.js에서 express, morgan, helmet 등등을 불러 썼었는데 이것들도 어딘가에서 불러온 것이다.(import) express,morgan,helmet 같은 것들은 node_modules 안에서 찾아온 것 ..

2.4 Handling Routes with Express GET / POST 브라우저에서 localhost:4000에 접속했을 때 보이는 Cannot GET / 을 보면 GET이 대문자로 표시되어 있다. GET 어떠한 정보를 가져와서 조회하기 위해서 사용되는 방식 예) 웹사이트에 접속하려고 하면 youtube.com과 같은 URL을 적는다. 이때 브라우저가 GET Method를 통해 페이지를 읽어온다. POST 데이터를 서버로 제출하여 추가 또는 수정하기 위해서 사용하는 방식 예) 웹 사이트에 로그인 할 때에는 POST method를 통해서 데이터를 서버로 전송한다. GET request로는 정보를 전달할 수가 없고 POST request로는 정보를 전달할 수 있다. 예를 들어, 영상에 코멘트를 단다고..