Building a static sitewith Node and Express [2]

static사이트를 다시 만들어 봅시다.

 

 

데이터를 컨트롤러에서 view로 전달해주는 방식을 알아봅시다.

 

 

뷰에 데이터나, content가 들어있으면 안됩니다.

 

데이터가 어디서 오든 보여주는 역활만 하면 됩니다.

 

모델은 데이터를 저장하고 , 컨트롤러는 데이터를 처리하고 , 뷰는 처리된 데이터를 보여준다 .

 

저번에 뷰에 다 넣었는데 이번에는 데이터를 컨트롤러로 옮겨와보겠습니다.

최종적으로 컨트롤러에 있는 데이터가 모델로 넘어갈 것입니다.

 

모델은 데이터에 들어가 있습니다.

컨트롤러가 처리해서 뷰로 갑니다.

 

홈페이지부터 시작해봅시다

 

데이터가 컨트롤러에 정의되어 있습니다.

컨트롤러에 있는 변수에 저장하고 뷰에 전달합니다.

 

 

컨트롤러에 옮겨보겠습니다.

현제는 이렇게 되어있을 것입니다.

 

 

헤더부분을 바꿔보겠습니다.

가져오는 부분을 바꿔봅시다.

pageHeader는 배열로 되어있습니다.

title과 strapline은 같이 움직입니다.

 

 

컨트롤러가 뷰에게 데이터를 전달하도록 만듭시다

아까 render 함수에 

location-list(.pug)에 보내기로 했습니다.

 

컨트롤러가 보낸 데이터를 받아야 합니다.

pageHeaer.title로 가져옵니다.

 

h1= 을 써서 변수를 할당합니다.

 

  하나당 빈칸 하나가 생성됩니다.

 

#{ } 은 문자열 사이에 값이 끼워들어갈 때 쓰는 방식입니다.

 

 

문자열 중간에 #{} 로 변수값을 쓸 수 있습니다.

자바스크립트 코드 처럼

h1= "Welcome to " + pageHeader.title

처럼 쓸 수 있습니다.

 

 

컨트롤러에 어떤 정보를 보내야 할까요?

위 클릭하는 부분을 보내야 합니다.

 

보내야할 데이터 입니다.

자바스크립트 객체로 생성해서 보내봅시다.

 

 

반복되는 데이터 배열을 컨트롤러에 넘겨야 합니다.

render함수에 뒷부분에 넣어줍니다.

뒷부분에 locations 배열을 넣어줍니다.

 

 

location-list.pus에 보낼 데이터들입니다.

 

pageHeader부분과 locations배열이 있습니다.

 

 

 

컨트롤러에서 보낸 데이터를 뷰 템플릿에서 받아서 처리를 해야합니다.

lcoations 배열을 location변수로 받아옵니다.

 

each in 문으로 받아옵시다.

 

 

반복되는 내용들에 대해

location 이름이 바뀌어야 할 것입니다.

 

each문 안에 들어가야 할 내용입니다.

반목문 돌때마다 이름이 필요합니다.

 

템플릿이 동작한다면 html로 변환합니다 그 결과는

이런식으로 됩니다.

 

facilities도 해결할 수 있습니다.

 

코드로 데이터하고 뷰를 저장하는 방법을 살펴봅시다

별점을 주는 경우 span을 설정했습니다.

 

채워져 있는 것이 실제 평점 입니다.

 

'-' 을 붙혀주면 자바스크립트 코드를 브라우저에게 전달하는 것이 아니라 직접 실행하도록 해줍니다.

 

pug템플릿 엔진이 for문을 돌려야 합니다.

 

rating은 배열안에 있습니다.

속이 찬 별표는 fas를 붙히고

비어있는 별표는 far를 붙힙니다.

 

star rating 코드는 다른데도 필요합니다.

 

재사용을 할 수 있게 만드는게 좋습니다.

 

mixins을 알아봅시다

function 데신에 mixin을 사용합시다.

 

함수와 비슷합니다.

rating 매개변수를 받아들이 수 있습니다.

 

호출을 어떻게 할까요?

+함수이름 으로 합니다.

 

 

+로 실행합니다.

location.rating으로 파라미터를 줍니다.

 

extends layout 밑에다가 mixis 정의를 둡니다.

 

그러면 다른 파일이 호출해서 못습니다.

 

include 파일을 만듭시다.

_includes 라는 폴더를 만들고

pug파일을 하나 더 만든다음 mixin정의를 내립시다.

 

필요로하는 파일에서 쓰는 법

include를 합니다.

 

최종 뷰는 이렇게 됩니다.

 

 

homelist 컨트롤러를 봐보시다

컨트롤러안에 데이터가 다 들어있습니다.

 

나머지 3개의 뷰도 바꿔봅시다