2021.11.15 > #5.0~#5.6 수강
2021.11.16 > 복습, 정리
2021.11.17 > #5.7~#5.10 수강

REF: Control + c -> 서버종료
Command + 클릭 -> 경로로 이동

TEMPLATES

#5.0 - Returning Html

• option1: JS파일안 문자열에 직접입력
  But 한 줄에 너무 많은 내용이 들어가고, 복붙으로 반복해야함

• option2: pug를 이용
  
  

#5.1 - Pug

Template Engine
템플릿을 이용해서 반복할 필요없이, 뷰를 만드는걸 돕는다.

• step1// Pug install

• step2// Pug를 우리의 view engine으로 설정하기.
  -> 이렇게 하면, Express가 html을 return하기 위해 Pug를 사용한다.

• step3// Pug파일을 생성해서 유저에게 보내기
  -> 기본적으로 Express는 views폴더안의 파일을 찾음.
  -> res.render("viewName");
  
  

#5.2 - Partials

• cwd(current working directory) 현재 작업 디렉토리
  : Node.js를 실행하는 디렉토리

• views의 default 경로: cwd/views
  -> 경로변경

	app.set("views", process.cwd() + "views경로");

• #{ }: Pug에서 JS나 변수를 사용하기.

• include 경로: Pug파일안에 다른 파일을 포함시키기.
  
  

#5.3 - Extending Templates

• inheritance(상속)
  : base.pug를 partials파일들에 extends(확장,즉 씨뿌리기?)해주기.
  partials파일들에 각각 아래와 같이 적어준다.

	extends base.pug

• block 키워드: 템플릿의 창문. 무언가를 채워넣을 수 있는 공간
  base를 확장한 후에, base의 block에 무언가를 채워넣을 수 있다.
  주의할 점은 키워드가 반드시 일치해야한다.
  
  

#5.4 - Variables to Templates

• 템플릿으로 변수보내기
  : render는 viewName과 템플릿에 보낼 변수 2가지의 인수(argument)를 받는다.
  여기서 변수는 무한으로 보낼 수 있다.

	res.render("viewName", {constName: " "})

#5.7 - Conditionals

• 변수를 다른 텍스트와 함께 쓰지 않고, 태그에 하나의 변수값만 넣으면,
  #{ } 대신 아래와 같이 변수명값을 받아도 된다.

	tag = constName

#5.8 - Iteration(반복)

elements의 list를 html에 보여주는 것.

• step1// controllers로부터 array 혹은 object인 변수명값을 받아야한다.

• step2// Y안의 각각의 X에 대해서 동일한 작업을 할 수 있다.
  Y는 array 혹은 object의 변수명값과 반드시 일치해야한다.
  X는 어느것을 입력하든 상관없다.

	each X in Y

#5.9 - Mixins

데이터를 받을 수 있는 partial
다른 데이터를 포함하지만 같은 형태의 html을 보여주는 것.

• step1// 아래와 같이 +Z(X)를 통해 정보를 Z로 보내준다.

	each X in Y
	  +Z(X)

• step2// 위에서 받은 X의 정보가 anything으로 받아진다.
  이 anything을 활용해서 다른 데이터를 받지만 같은 형태의 html을 짤 수 있다.

	mixin Z(anything)