[O'REILLY] Node & Express - 3장 : Express

1. 스캐폴딩

- 스캐폴딩(비계, 발판) 이란 루비에서 도입한 개념이다. 프로젝트의 뼈대를 미리 만들어두고, 새 프로젝트를 시작할 때마다 뼈대(템플릿)를 복사하면 된다는 아이디어이다.

- 익스프레스는 스캐폴드를 생성하는 유틸리티를 제공한다.

- 단, 익스프레스의 스캐폴딩 유틸리티는 서버사이드에서 HTML을 생성하는 방향에 치중해있고, API나 단일페이지 App에는 큰 도움이 되지 않는다.

- express-generator 문서에서 확인할 수 있다.

 

2. 메도라크 여행사 웹사이트

- 이 책에서는 가상의 회사 메도라크 여행사의 웹사이트를 예제로 사용한다.

 

3. 초기 단계

- 설치 : 터미널에 npm init -y 입력.

- package.json 의 entry point(main) : 'meadowlark.js'

- 설치 : 터미널에 npm i express

- npm과 package.json에 관한 설명은 생략

 

meadowlark.js

처음 배울 땐 따라쳐보는게 좋지

- 최소한의 서버를 만들었다. 터미널에 node meadowlark 를 입력하면 서버가 구동된다.

- http://localhost:3000으로 이동하면 404가 표시된다.

404 내 생일인데

- 꿀팁 : npm i -g nodemon -D 이라고 터미널에 입력하면 nodemon 라이브러리가 설치된다. (전역적으로, dev옵션으로) 

- 터미널에 node 파일명 대신에 nodemon 이라고 쓰면 서버가 저장될 때마다 재실행되며 지속된다. 개꿀이다. (단, package.json에 main 파일명을 잘 입력해야 한다. 여기서는 meadowlark.js 라고 입력했다.)

nodemon! 근데 업데이트해야되네

- 이제 홈페이지와 어바웃페이지에서 사용할 경로를 추가한다. 404 핸들러 앞에 이렇게 추가하자.

get요청을 받아보자아

- app.get은 라우터를 추가하는 메서드이다. app.get은 경로와 함께 두가지 매개변수를 받는다.

- 경로는 라우트이다. 경로는 기본적으로 대소문자 구분이 없고, 경로 끝에 슬래시가 있든 없든 똑같이 작동하며, 쿼리스트링을 무시한다.

- 함수는 라우트가 일치할 경우 호출할 함수이다. req와 res (요청과 응답) 객체가 매개변수로 전달되는데, 이는 나중에 자세히 다룬다.

 

- 404와 500 페이지는 조금 다르게 처리했는데, app.use()를 사용했다.

- app.use는 미들웨어와 관련된 메서드이다. 지금은 일단 라우터가 일치하지 않을 경우 사용할 일종의 폴백 핸들러라고 생각해도 된다.

- 익스프레스에서는 라우트와 미들웨어의 순서가 중요하다. 만약 404 핸들러를 라우트보다 먼저 작성했다면, 홈과 어바웃은 작동하지 않고 무조건 404로 연결해준다.

- 익스프레스는 콜백 함수가 받는 매개변수 숫자를 통해 404와 500 핸들러를 구분한다. 이는 나중에 에러라우트에서 다룬다.

 

4. 뷰와 레이아웃

- MVC 패러다임을 안다면, 뷰의 개념에도 익숙할 것이다. 여기서는 뷰를 HTML이라고 간주한다.

- 익스프레스는 여러가지 뷰 엔진을 지원하며 추상화 레벨 또한 다양하다.

- Pug라는 뷰 엔진에 특히 특화된 모습을 보이는데, 익스프레스 만든사람이 Pug도 만들었다. 개천재인가보다.

- 퍼그는 사실 좀 구리고, 이 예제에서는 핸들바라는 템플릿 프레임워크를 사용한다. (Pug 모습을 보면 왜 구린지 알 것이다.)

pug의 모습. 니가 무슨 파이썬이냐

- 핸들바는 HTML은 그대로 작성하고, 특별한 태그를 사용하면 핸들바가 그 태그에 콘텐츠를 삽입하는 방식이다.

- 설치 :

npm i install express-handlebars

- 다음 시간에는 meadowlark.js 메인 서버 파일에 뷰엔진을 설치하고 handlebar를 세팅해본다.