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.14 Layouts with Pug Pug를 사용하는 이유 html과 css만으로 작업을 할 때에는 똑같은 것들을 반복하는 경우가 많기 때문에 별로 좋지 않다. html과 css는 프로그래밍 언어가 아니고, 논리적인 작업들을 할 수 없다. 계속 복사-붙여넣기 하는 건 고통스럽다. pug와 같은 것들로 작업을 하면, html을 생성하기 하는 javascript의 위력을 사용할 수 있다. views 폴더 아래에 layouts 라는 이름으로 새 폴더를 만들기 이 폴더 안에 layout 파일들을 만들 것이다. main 레이아웃 먼저 main.pug로 만든다. 이제 여기에 HTML 작성을 시작할 것이다. 이 파일은 모든 페이지들의 토대가 되는 파일이 될 것이다. 예를 들어, 모든 페이지는 header와 foo..

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.12 Recap(복습,중간점검) userRouter와 videoRouter도 완성하기 일단, 지난 시간에 globalRouter를 완성한 것 처럼, userRouter와 videoRouter도 완성한다. userController와 videoController에서 각각 필요한 함수를 작성하고 export해서 userRouter와 videoRouter에서 import하여 사용한다. ↑app.js ↑ userRouter.js 이 때 npm start를 해보면, localhost:4000/users가 아니라 localhost:4000/users/users 해야 접속이 되는 것을 볼 수가 있는데, 이는 app.js에서 routes.users라고 되어 있기 때문이다. 즉, app.js에서 app.use("/u..

2.11 MVC Pattern - Part. 3 컨트롤러 만들기(Controller) 이제 여기 이 구조에서 자유로워지기 위해 controller를 사용할 차례이다. 컨트롤러는 어떤 일이 어떻게 발생하는지에 관한 로직이다. 여기에 있는 모든 함수들을 말하는 것이다. 여기 이 함수들을 모두 컨트롤러에 담을 것이다. 1) controllers 폴더를 만든다. 그리고 그 안에는 비디오 컨트롤러(videoController.js)와 유저 컨트롤러(userController.js) 이렇게 두 개의 컨트롤러를 만들 것이다. 대게 프로젝트에 있는 각 모델마다 컨트롤러를 만들게 된다. route에는 global , users, videos가 있고 global 안에는 home, join, login,logout, sea..

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"..