Building a static sitewith Node and Express [1]

static 사이트를 만들어보자

 

전체에서 동그라미 친 부분을 작성할 겁니다.

첫 번째 버전 뷰에 모든 데이터를 포함합니다.

 

 

 

 

 

express에 라우터를 지정합니다.

locations에는 3개의 페이지가 있고

about 는 1개의 페이지가 있습니다.

 

 

 

 

4개의 패이지와 url을 매핑시켜야 합니다.

표준을 지정해야 합니다.

/ = 홈페이지로 요청이 들어오면(=장소를 쭉나타내는 홈페이지)

location = 세부사항을 보여주는 페이지가 되야할 것입니다.

reivew = 리뷰를 달려고할 때 리뷰 폼을 나타내는 페이지가 될 것입니다.

about = about페이지가 나와야 합니다.

 

 

라우터와 컨트롤러를 분리시켜야 합니다.

컨트롤러를 Collection으로 나눕니다.

Locations과 Others로 나눕시다.

 

아키택쳐 관점으로 

앱에는 라우터가 들어있고

라우터에는 컨트롤러가 있을 겁니다.

컨트롤러 안에는 각각이 사용하는 관련 컨트롤러를 사용할 것입니다.

 

 

 

라우터에서 컨트롤러 파일을 참조해야 합니다.

라우터에서 참조를 해서 앱에서 받은 내용을 전달할 수 있습니다.

 

라우터에서 require를 시켜줍니다.

할당을 해주면 라우터에서 2개의 컨트롤러 파일을 참조할 수 있는 형태가 되었습니다.

 

 

 

 

라우터를 설정해봅시다.

index.js에는 2개의 라우트를 가져야 합니다.

 

Locations 컬렉션에 있는 3 개의 스크린을 위한 라우트
Others 컬렉션에 있는 About 페이지를 위한 라우트

 

라우터의 역활은 단순히 들어오는 요청 URL 을 애플리케이션 기능의 특정 부분(=컨트롤러)에 매핑시켜 주는 매핑 서비스일 뿐이다

 

 

 

라우트 파일을 설정해 봅시다.

homelist란 컨트롤러를 /(=홈페이지) 에 요청이 들어오면

 

/location을 요청하면 locationInfo 라는 컨트롤러로 연결해라

 

 

 

컨트롤러를 설정해 봅시다

index.pug가 생략되있는 것입니다.

 

render이 pug를 html로 변환시켜서 브라우저에게 보여주는 것 입니다.

 

main.js를 others.js로 이름을 변경해봅시다.

 

 

 

 

Others의 컨트롤러를 설정합시다.

변수를 about으로 바꿉니다.

 

 

Locations에 해당하는 3개의 컨트롤러를 만들어 봅시다.

title만 변경시키고 나머지는 동일하게 하고 시험해봅시다.

exports객체를 써가지고 노출시켜야 합니다.

 

 

nodemon으로 사용할 때 에러가 날 수 있습니다.

만약 실행을 한다면

이런 내용이 나올 것입니다.

 

 

 

 

 

views 를 생성해 봅시다.

콘텐트와 레이아웃을 집어넣어 봅시다.

 

 

부트스트랩을 간단히 살펴봅시다.

그리드 시스템은 12칼럼 그리드로 만듭니다.

화면을 12칼럼으로 고르개 분리합니다.

 

각 테그, 엘리먼트마다 컬럼의 수를 정의할 수 있습니다.

 

css레퍼런스 라고 합니다. 

사용방법은

CSS 레퍼런스와 컬럼수를 결합해서 사용할 수 있습니다.

이 태그는 '컬럼을 sm디바이스 이상에 대해서는 6개의 컬럼만 써라' 라고 지시하는 겁니다.

 

 

위 태그를 화면으로 실제로 보면

데스크탑에서는 DIV 가 12개중 6개를 쓰고

폰은 12개를 다 씁니다.

 

 

Pug 탬플릿 부트스트랩을 HTML 프레임워크를 설정해봅시다.

공통적인 부분이 있는데 

위쪽에는 navigation bar

아래논 Footer

중앙에는 Content가 있습니다.

 

 

layout.pug에 레이아웃을 조정합시다

block content 위 아래에 navigation섹션, footer 섹션을 추가해야 합니다.

 

 

네비게이션을 알아봅시다.

상단에 고정되야 합니다.

 

내비게이션에 

- 홈페이지에 링크된 Loc8r 로고
- /about URL 페이지를 가리키는 About 링크

2개를 만들어 봅시다.

 

block content위에 적어야 합니다.

 

Pug테그는 들여쓰기 가지고 통제를 하기 때문에 줄을 잘맞춰야 합니다.

 

 

 

내용을 부트스크랩으로 감싸봅시다

block content를 .container로 감싸면 내용을 부트스트랩의 컨테이너로 인식합니다.

 

컨테이너 클래스를 가지는 div태그는 우니도우의 가운데에 배치됩니다.

 

 

 

Footer를 알아봅시다

content의 컨테이너에 같이 들어가게 합니다.

 

 

들여쓰기를 할 때 스페이스바로 할지 tap으로 할지 1가지만 정해야 합니다.

 

 

이런 모양이 나올것입니다.

 

 

가장 적절한 탬플릿을 만들어봅시다

주 목적은 lcoation리스트를 보여줘야 합니다.

 

가운대 부분을 만들어야 합니다.

각 location 에는 이름 , 주소 , 거리 , 사용자 등급과 시설 목록이 있어야 합니다.

또한 페이지에 헤더를 추가하여 , 사용자가 처음 방문했을 때 그들이 보고 있는 것이 무엇인지를 알 수 있 도록 약간의 텍스트를 둡시다.

 

 

스케치를 해봅시다.

모바일에서는 사이드바가  아래로 내려갑니다.

 

 

 

뷰하고 컨트롤러로 연관을 지어봅시다.

1. 새로운 view파일을 생성하여 controller에 연결합니다.

index.pug뷰의 내용을 복사해서 locations-list.pug로 저장합니다.

2: homepage의 컨트롤러에게 새로운 뷰를 사용하고 싶다고 말해 준다
홈페이지의 컨트롤러 app_server/controllers 의 locations.js 파일
homelist 컨트롤러에 의해 호출되는 뷰를 변경하려면 아래처럼 수정한다

 

 

템플릿을 코딩해봅시다

location-list는 장소들을 쭉 보여줘야 합니다.

 

 

 

main영역을 만들어 봅시다.

이제 location-list의 뼈대는 만들어 졌으니 내용을 채워야 합니다.

 

일단 가짜 데이터를 넣어봅시다.

 

 

 

레이아웃을 다시 봐봅시다.

sm에서는 12개 다쓰고 md이상에서는 8개만 쓰라는 뜻입니다.

 

Starcups라는 가짜 데이터를 만들어 봅시다.

fa-star는 속이 찬 별입니다.

거리는 100m라고 넣어두었습니다.

주소는 p테그로 넣어두고

주소도 span으로 넣어두었습니다.

 

이게 하나의 장소에 대한 정보입니다.

 

이것을 출력해보면

 

 

 

이제 하나로 묶어보겠습니다.

레이아웃, 영역구조, 가짜 데이터를 묶어보겠습니다.

 

 

layout에 끼워들어가서 layout의 block content쪽에 끼워 넣겠다라는 것입니다.

 

 

히로쿠에 올려서 시험해 봅시다

 

 

4개중에 홈페이지에 대한 뷰를 만들어봤습니다.

 

이제 3개의 뷰를 더 추가해야 합니다.

 

 

디테일을 보여주는 페이지를 만들어봅시다.

세부정보를 보여주는 페이지 입니다. 보면 엄청 복잡해보입니다.

 

한 지역에 대한 것이 모든 것이 이 페이지에 들어가야 합니다.

 

 

 

첫 번째로 컨트롤러를 연동시켜줘야 합니다.

컨트롤러를 location-info라고 정합시다.

 

 

구글 웹을 이용해서 위치 정보를 얻어옵니다.

 

스타일도 추가해봅시다.

css파일을 다운받아서 집어넣으면 됩니다.

 

location으로 요청하면 만들었던 것이 출력이 될것입니다.

 

 

 

 

 

리뷰페이지를 만들어 봅시다.

입력을 위한 form을 만듭시다.

일단 컨트롤러를 배정해둡니다.

 

block content라고 선언된 부분이 layout에 가게 됩니다.

 

 

 

about 페이지를 만들어 봅시다.

about 컨트롤러를 만듭니다.

 

뷰도 만들어 봅시다.

 

마지막으로 Heroku에 넣어봅시다.