-
Chapter3. 익스프레스 건드려 보기서버/Node.js 2017. 11. 17. 15:45
1. 스캐폴딩
새 프로젝트를 시작하거나 혹은 PPT를 만들 때, 매번 처음부터 뼈대가 되는 '템플릿'코드를 작성하거나, 만드는 사람은 극히 일부분일 것이다. 대부분은 기본 틀을 만들어두고, 프로젝트를 시작할 때마다 여기서 수정하는 방식을 이용한다. 이러한 아이디어를 '스캐폴딩'이라고 한다.
루비 온 레일즈에서는 자동으로 스캐폴딩을 생성하는 프로그램을 만들었는데, 이는 기존의 템플릿 컬렉션 중에서 선택하는 것이 아닌 직접 세련된 프레임워크를 생성할 수 있다는 큰 장점을 지니고 있다.
익스프레스는 루비 온 레일즈의 아이디어를 받아들여, 프로젝트를 시작할 때 스캐폴딩을 만드는 유틸리티를 제공한다. 다만 우리가 배우는 과정에서는 익스프레스의 스캐폴딩 유틸리티가 뛰어나지도 않으며, 직접 해보는 것에 초점을 맞추고 있으니 익스프레스의 스캐폴딩 유틸리티를 사용하지는 않을 것이다. 허나 후에 어느정도 지식이 쌓이고 템플릿을 보는 눈이 높아졌을 때, 비슷한 유틸리티를 제공해주는 다른 프로그램을 찾아보기를 바란다.
2. 메도라크 여행사 웹사이트
'한 권으로 끝내는 Node & Express'에서는 메도라크 여행사 사이트를 따라 만들어 보았다. 나도 예제를 따라해보고 후에 노드를 익히고 나서 내가 원하는 페이지를 만들도록 하겠다.
3. 흐름도
하나의 과정을 시작할 때 중요한 것이 전체의 흐름을 아는 것이다. 이 때문에 모든 일을 실제로 하기 전에는 "계획"이라는 단계가 존재한다.
여기서 이 Chapter3의 흐름도를 정리하고 하나하나 따라해보자.
1. 익스프레스 설치
2. 앱 파일 만들기(라우트와 핸들러)
3. 뷰와 레이아웃을 이용하기 (뷰 엔진 설정 -> 템플릿 구성 -> 기존 라우트 교체)
4. 정적 파일과 뷰 처리
5. 뷰의 동적 콘텐츠 포함
4. 초기 단계
먼저 익스프레스를 설치해보자. 익스프레스는 node의 패키지의 일종이기 때문에 npm을 통해서 다운받을 수 있다. 한 가지 알아둘 점이 존재하는데 그것은 바로 package.json 파일인데, 이 파일을 통해 npm은 프로젝트 의존성과 메타데이터를 관리한다.
프로젝트 의존성이란?
프로젝트를 개발 혹은 실행하는 데 있어서 필요한 패키지 혹은 모듈에 프로젝트 의존성을 지녔다고 말한다. package.json 파일에서는
--save(실행에 필요한 경우) 혹은 --save-dev(개발에 필요한 경우)를 npm 명령어의 입력값으로 주면 json 파일에 저절로 입력되어 관리된다.
메타데이터란?
메타데이터는 데이터가 어떠한 데이터인지에 대한 설명서라고 생각하면 이해하기 쉽다. 메타데이터에는 데이터 자체에 대한 설명, 다른 데이터와의 관계들을 포함한다.
터미널 창에 npm init을 입력하게 되면 몇 가지 질문을 거쳐 package.json 파일을 생성할 수 있다 ('진입점-entry point'를 묻는 질문에는 meadowlark.js 혹은 프로젝트 이름을 쓰면 된다).
npm init을 통해 package.json 파일을 만들었다면, 다음 단계는 익스프레스 설치이다. 다음 npm 명령어를 실행한다.
npm install --save express
npm install을 실행하면 지정한 패키지(이 경우, express)를 node_modules 디렉토리에 설치한다. node_modules 디렉토리는 언제든 npm에서 다시 생성할 수 있다.
이제 본격적으로 meadowlark.js 파일을 만들어 보자. 이 파일은 우리 프로젝트의 진입점(entry point)으로 앞으로의 과정에서 이 파일을 '앱 파일'이라고 부를 것이다.
var express = require('express');
// 익스프레스 함수를 객체화시켜 app 변수에 담아 편리하게 사용
var app = express( );
// 포트 설정
app.set('port', process.env.PORT || 3000);
// 라우트 설정
app.get('/', function(req, res){
res.type('text/plain');
res.send('Meadowlark Travel');
});
app.get('/about', function(req, res){
res.type('text/plain');
res.send('About Meadowlark Travel');
});
// 커스텀 404 페이지(404 핸들러)
app.use(function(req, res, next){
res.type('text/plain');
res.status(404);
res.send('404 - Not Found');
});
// 커스텀 500 페이지
app.use(function(err, req, res, next){
console.error(err.stack);
res.type('text/plain');
res.status(500);
res.send('500 - Server Error');
});
// 리스닝 설정
app.listen(app.get('port'), function(){
console.log('Express started on http:// localhost:' + app.get('port') + '; press Ctrl - C to terminate.');
});
현재는 각 메소드에 대해 자세하기 알아두기 보다는 그 쓰임새에 주목하자.
app.get - 라우트 지정
app.use - 미들웨어를 추가할 때 쓰는 메소드 ( 라우트와 일치하지 않는 모든 것을 처리하는 폴백 핸들러)
app.listen - 리스닝 설정
4. 뷰와 레이아웃 설정
뷰와 레이아웃을 설정하기 전에 뷰와 레이아웃의 개념과 사용 목적을 알아보자.
뷰(View)
뷰는 화면상에서 유저 인터페이스를 구성하는 기본 빌딩블록, 즉 간단하게 말해서 화면상에 보여지는 부분의 기본 베이스이다. 뷰는 사용자에게 전송될 수 있는 모든 것을 의미하는데, PDF, PGN, 기타 클라이언트에서 렌더링할 수 있는 것은 무엇이든 전송할 수 있다. 여기서 뷰는 HTML을 의미한다.
레이아웃(Layout)
각각의 뷰들을 화면상에 배치하고 구성해주는 것을 레이아웃이라고 한다. 레이아웃은 하나의 프레임워크라고 생각하면 이해하기 쉽다.
사용목적
뷰와 레이아웃을 사용하면 모든 HTML에서 반복되는 코드를 유지보수할 때 편리하다. 만약 모든 페이지의 내용을 기존의 것에서 다른 틀로 바꾸려면 모든 파일을 바꿔야하지만, 레이아웃을 쓰면 사이트의 모든 페이지에서 공통 프레임워크를 사용하므로 레이아웃 형태만 바꾸면 되므로 간단하다.
우리는 에릭 페라이우올로의 express-handlebars 패키지를 써서 핸들바 지원을 추가하여 뷰와 레이아웃 설정을 할 것이다. 프로젝트 디렉토리에서 다음 명령어를 실행하자.
npm install --save express-hadlebars
그 다음 meadowlark.js에 다음 행을 추가하여 뷰 엔진을 설정하자.
var app = express( );
// 핸들바 뷰 엔진 설정
var handlebars = require('express-handlebars');
.create({ defaultLayout : 'main' }); // defaultLayout으로 main을 사용하겠다
app.engine('handlebars', handlebars.engine);
app.set('view engine', 'handlebars');
이렇게 하면 뷰 엔지이 만들어지고, 익스프레스는 기본적으로 이 엔진을 사용한다. 이제 views 디렉토리를 만들고, 그 안에 layouts 디렉토리를 만든다. 이렇게 준비가 끝나면 이제 우리 사이트의 템플릿을 만들어보자.
defaultLayout으로 main을 사용하겠다고 했으니 views/layouts/main.handlebars 파일을 만들어 기본 레이아웃으로 사용하자.
<!doctype html>
<html>
<head>
<title>Meadowlark Travel</title>
</head>
<body>
{{{body}}}
</body>
</html>
{{{body}}} 영역에 보여주길 원하는 View를 전달하면 그것이 클라이언트에게 보여진다. 따로 레이아웃을 명시하지 않는다면 모든 뷰에서 이 레이아웃을 사용한다.
이제 홈페이지의 뷰 페이지인 views/home.handlebars 를 만든다.
<h1>Welcome to Meadowlark Travel</h1>
어바웃 페이지는 views/about.handlebars 이다.
<h1>About Meadowlark Travel</h1>
404 페이지는 views/404.handlebars 이다.
<h1>404 - Not Found</h1>
마지막으로 서버 에러 페이지는 views/500.handlebars 이다.
<h1>500 - Server Error</h1>
이렇게 뷰 페이지를 만들었다면, 기존 라우트를 교체하여 이들 뷰를 사용할 수 있도록 하자.
app.get('/', function(req, res){
res.render('home');
});
app.get('/about', function(req, res){
res.sender('about');
});
// 404 폴백 핸들러
app.use(function(req, res, next){
res.status(404);
res.render('404');
});
// 500 에러 핸들러
app.use(function(err, req, res, next){
console.error(err.stack);
res.status(500);
res.sender('500');
});
이렇게 모든 코드를 교체하고 실행 결과를 보면 뷰가 렌더링되는 걸 확인할 수 있다. 소스를 보면 views/layouts/main.handlebars에서 만든 템플릿 HTML이 들어 있을 것이다.
5. 정적 파일과 뷰
익스프레스는 미들웨어를 통해 정적 파일과 뷰를 처리한다.
static 미들웨어는 정적 자원을 담고 있는 하나 이상의 디렉토리를 지목해서 특별한 처리 없이 클라이언트에 전송할 수 있게 해준다. 이 디렉토리에 클라이언트 측으로 보내야 할 이미지, CSS 파일, 클라이언트 자바스크립트 파일 등을 저장한다.
프로젝트 디렉토리 안에 public 서브 디렉토리를 만들자. 이 디렉토리는 public, 즉 클라이언트와 공유할 파일을 이 디렉토리 안에 저장해 둬 아무런 조건 없이 클라이언트에 보내기 위함이다. 라우트를 선언하기 전 부분에 static 미들웨어를 다음과 같이 추가하자.
app.use(express.static(__dirname + '/public')); // public 디렉토리 내부 파일들은 모두 static 미들웨어가 처리한다.
static 미들웨어는 클라이언트에 전송할 각 정적 파일마다 라우트를 만들고 그 파일을 반환하는 것과 같은 효과를 지닌다.이제 public 안에 img 서브디렉토리를 만들고 logo.png 파일을 그 안에 넣자. 그러면 /img/logo.png를 참조하기만 하면 static 미들웨어에서 파일을 전송하고 콘텐츠 타입도 적절히 설정한다. 이제 로고가 모든 페이지에서 나타나도록 레이아웃(main.handlebars) 을 수정하자.<body><header><img src='/img/logo.png' alt = 'Meadowlark Travel Logo'></header>{{{body}}}</body>6. 동적 콘텐츠 뷰
뷰의 진정한 위력은 동적 정보를 담을 수 있다는 데에 있다.
어바웃 페이지에 '포춘 쿠키' 콘텐츠를 넣고 싶다고 해보자. meadowlark.js 파일에 다음과 같이 포춘 쿠키 배열을 정의하여 삽입하자.
var fortunes = [
'f', 'o', 'r', 't', 'u', 'n', 'e', 's',
];
어바웃 페이지의 뷰를 수정하자.
<h1>About Meadowlark Travel</h1>
<p>
Your fortune for the day:
</p>
<blockquote>{{fortune}}</blockquote>
이제 어바웃 라우트를 수정하여 무작위 포춘 쿠키를 전송하도록 하자.
app.get('/about', function(req, res){
var randomFortune =
fortunes[Math.floor(Math.random( ) * fortunes.length)];
res.render('about', { fortune : randomFortune });
});
이제 서버를 재시작하고 /about 페이지로 이동하면 무작위 포춘 쿠키가 나타나게 된다.
이렇게 가장 기초적인 과정을 완료햇따. 현재는 매우 단순하지만 완전한 웹 사이트에 필요한 기초는 모두 지니고 있다. 다음부터는 조금 더 세밀하게 알아보도록 하자.
'서버 > Node.js' 카테고리의 다른 글
MVC 흐름 (0) 2017.11.25 [Pug(구 Jade)] Error - Cannot read property 'length' of undefined (0) 2017.11.25 모듈 알아보기 (0) 2017.11.17 Chapter2. 웹 서버 만들기 (0) 2017.11.15 Chapter1. 노드 시작하기 (5) 2017.11.15