막하는스터디 두번째만남 Express(20151025)

오늘은 장표 보다는 expressjs.com 의 API Reference 사이트를 중심으로 공부해 봐요!

Node.js 기반의 작고 유연성 있는
웹/모바일 애플리케이션을 만들 수 있는 프레임워크
Source : http://expressjs.com/
http://expressjs.com 에서 보다 자세한 이야기를…

npm install express-generator –g
Source : http://expressjs.com/starter/generator.html

템플릿 엔진으로 EJS를 사용.
앱 폴더에서 아래 명령으로 파일 준비
express --ejs
아래 명령으로 설치 진행
npm install

아래 명령을 통해 앱을 구동
그리고 http://127.0.0.1 으로 접속

Express 없이 만들어 봤던, 폼 페이지를 만들어봅니다.
app.js 파일을 열어, 앞서 만든 route 파일을 연결해 줍니다.
routes 에서 지정한 템플릿 파일을 views 폴더에 .ejs 파일 확장자를 붙여 만든다.
* 정적인 콘텐츠는 public 폴더에 두고, 사용합니다.
routes 폴더에 URL을 정의해 둘 JS 파일을 만든다.

이름, 이메일, 하고 싶은 말 등을
입력 할 수 있는 폼을 제공하는
/hello/form 을 만듭니다.
/hello/formSubmit 이라는 주소로,
POST 메서드로 전송하게 하고,
전송 받은 내용을 다시 출력해 봅니다.

URL을 정의하고, 어떤 View를 사용할지, 어떤 데이터를 View에서 사용할 수 있도록 할지 정의합니다.
MVC 디자인 패턴에서, Controller에 해당한다고 볼 수 있습니다.

Express.js API를 공부하다 보니, 지난 시간에 파라미터 값을 받는 과정이
더 이상 유효하지 않다는 사실을 알았어요! 위와 같이 변경해야 한답니다.

require()를 통해 작성한 hello 모듈을 불러오고, 이것을 app.use()를 통해,
/hello 아래에 연결시켜 줍니다.

컨트롤러에서 전달한 변수를 출력 할 때에는 <%=변수명%>으로 작성하면 됩니다.
변수 값에서 < , > , & , “ 등의 값은 각각 < , > , & , " 등으로 치환되는데, (XSS 문제 때문에)
원본 그대로 출력하고 할 때에는, <%-변수명%>으로 작성합니다.

Express에서 제공하는 API에 대해,
활용법을 확인할 수 있습니다.
Express.js.com의 API reference 메뉴를 클릭!
Source : http://expressjs.com/4x/api.html

var express = require('express');
var app = express();
Express 애플리케이션을 만들기 위해서는, 아래 2줄을 작성하는 것에서 부터 시작됩니다.

HTTP 요청에 대한, 라우팅 기능
미들웨어(middleware) 설정 기능
HTML View 렌더링 기능
템플릿 엔진 등록 기능
메인 앱
서브 앱 서브 앱 서브 앱

Request
Response
클라이언트로부터받은 정보들을 접근할 때
클라이언트에게정보를 제공할 때
Application 애플리케이션 전체에 관한 정보를 접근할 때
Router 라우터 기반의 미들웨어를 만들 때(서브 앱)

app.locals
app.mountpath
애플리케이션 내 지역 변수로 사용 할 수 있음.
서브 애플리케이션이 메인 애플리케이션의
어느 경로에 마운트되었는지 확인할 때 사용할 수 있음.

app.locals.title = 'My App';
app.locals.email = 'me@myapp.com';
app.js 에 아래와 같이 추가해 주세요.
<%=title%>
<%=email%>
그리고 지난 시간에 만든, form.ejs 파일에 아래와 같이 변수 값을 출력하도록 추가해 보세요.
그리고, node binwww 명령으로 express 애플리케이션을 구동하세요.
앱 전역에 선언된 변수로, ejs 템플릿 내에서도 사용할 수 있어요.

app.locals.title = 'My App';
app.locals.email = 'me@myapp.com';
아래와 같이 애플리케이션 변수를 만들어 사용하는 것과,
title = 'My App';
email = 'me@myapp.com';
아래와 같이 전역 변수를 선언 후, 사용하는 차이는?

<%
title = “Your App”;
email = “Your email address”;
%>
<%=title%>
<%=email%>
form.ejs 파일에 아래와 같이 변수 값을 다른 값으로 대입하는 코드를 넣어서 테스트 해 봐요.
어떤 변화가 있는지!
차이를 알게 되었다면, 어떤 경우에 쓰면 될까 생각해 봐요!

var admin = express();
admin.on('mount', function (parent) {
console.log('Admin Mounted');
console.log(parent); // refers to the parent app
});
admin.get('/', function (req, res) {
res.send('Admin Homepage');
});
app.use('/admin', admin);
이벤트가 발생하면, 어떻게 할지 정의할 수 있어요.
(그런데... 오늘은 우리가 쓸 일이 없는 듯…)

app.disable(), enable() 애플리케이션 설정의 사용 유무를 변경 할 때
app.disabled(), enabled() 애플리케이션 설정 상태를 확인 할 때
app.set() , app.get() 애플리케이션 설정 값을 변경 할 때
app.engine() 템플릿 엔진을 등록 할 때
app.path() 서브 애플리케이션이 마운트된 경로를 확인할 때
app.use() 미들웨어를 현재 애플리케이션에 마운트 할 때

app.param() 특정 파라미터에 대한 처리가 필요 할 때
app.render() HTML 렌더링이 필요할 때 사용
app.route() HTTP 동작에 대한 라우트 설정할 때
app.all() … get() , post() , delete() , put() HTTP 요청별 처리할 내용을 기술 할 때
app.listen() 노드의 http.Server.listen()과 같음.

http://expressjs.com/4x/api.html#app.settings.table
아래 사이트에 방문해 확인해 봐요.
간단한 예로,
경로의 대/소문자를 구별할지 여부를 지정할 수 있어요!
(참고로 기본 값은 구별하지 않도록 되어 있어요)

app.disable('trust proxy');
app.get('trust proxy');
// => false
app.enable('trust proxy');
app.get('trust proxy');
// => true
disable(“속성 명”) 은 해당 속성을 사용하지 못하도록 할 때
enable(“속성 명”) 은 해당 속성을 사용 할 수 있도록 할 때
예시의 trust proxy 의 경우, 프록시 서버를 통해 접근하는 것에 대한 신뢰 여부인데,
기본적으로 X-Forwarded- 로 시작하는 헤더로 오는 정보를 신뢰할 것인지 설정합니다. ( 이후 장표에서 자세히 …)

disabled(“속성 명”) 은 해당 속성이 사용하지 못하도록 되어 있는지 확인 할 때 사용합니다.
app.disabled('trust proxy');
// => true
app.disabled('trust proxy');
// => false

enabled(“속성 명”) 은 해당 속성이 사용 가능하도록 되어 있는지 확인 할 때 사용합니다.
app.enabled('trust proxy');
// => false
app.enabled('trust proxy');
// => true

set(“속성 명”) 은 해당 속성의 값을 바꿀 때,
get(“속성 명”)은 해당 속성의 값을 획득할 때 사용
app.set('view engine', ‘ejs');
app.get('view engine');
// "My Site"
예시의 view engin은 뷰 템플릿 엔진의 종류를 설정할 때 사용합니다.

파일과 템플릿 엔진을 연결할 때 사용
app.engine('jade', require('jade').__express);
app.engine('html', require('ejs').renderFile);
EJS 템플릿 파일도 위와 같은 방식으로, html 확장자를 가진 파일로 연결시킬 수 있어요!

미들웨어를 현재 애플리케이션에 연결할 때 사용할 수 있어요.
경로를 생략하면, “/”에 마운트됩니다.
app.use('/admin', function(req, res, next) {
// GET 'http://www.example.com/admin/new‘
console.log(req.originalUrl); // '/admin/new‘
console.log(req.baseUrl); // '/admin‘
console.log(req.path); // '/new‘
next();
});
next()가 없으면 어떤 일이 일어날까요?

경로에 대한 단일 라우터를 만들 때 사용 가능
하나의 경로에 대해 중복해서 여러 HTTP 메서드 처리를 등록하는 경우, 유용하게 사용 가능.
var app = express();
app.route('/events')
.all(function(req, res, next) {
// 모든 HTTP 메서드에 대해 대응
})
.get(function(req, res, next) {
// GET 메서드에 대해 대응
})
.post(function(req, res, next) {
// POST 메서드에 대해 대응
})

주소에서 사용되는 파라미터에 대한 트리거를 걸 때 사용함.
app.param('user', function(req, res, next, id) {
// 사용자 상세 정보를 사용자 모델을 호출해 획득한다.
User.find(id, function(err, user) {
if (err) {
next(err);
} else if (user) {
req.user = user;
next();
} else {
next(new Error('failed to load user'));
}
});
});
(예시) http://www.somestudy.com/user/caoy
User라는
모델이 있다고
가정하고,

모든 HTTP 메서드에 대해 대응해야 할 때 사용
app.all('*', requireAuthentication, loadUser);
app.all('*', requireAuthentication)
app.all('*', loadUser);
all() 메서드외 get() , post() , put(), delete() 메서드가 있어요!
그런데, get() 메서드가 겹치네요? 아까 뭐라고 배웠더라~

제목에서 나열한 메서드는 모두 콜백 함수가 있는데,
콜백 함수가 받는 인자는 아래 형태로 모두 같아요!
function(req, res, next, value) {
// 첫 번째 자리로 전달되는 인자는 Request 오브젝트
// 두 번째 자리로 전달되는 인자는 Response 오브젝트
// 세 번째 자리로 전달되는 인자는 다음으로 실행될 오브젝트
// 네 번째 자리로 전달되는 인자는 파라미터 값(param()에서만!)
}
필요에 따라, 콜백 함수에서 인자를 받는 것을 생략할 수 있습니다.

req.app /
res.app
req.baseUrl
메인 애플리케이션에 접근할 때
URL 경로가 어디에 마운트되었는지 확인 할 때
req.body
key-value 쌍의 전송 받은 데이터 (기본 값은 undefined)
body-parser 혹은 multer 모듈을 미들웨어로 사용할 수 있음
req.cookies 웹 브라우저가 보내 온 쿠키 정보를 확인 할 때
req.ip /
Req.ips
클라이언트의 IP주소를 획득할 때

req.originalUrl
req.params
접속한 전체 주소를 확인할 때(경로 부분+쿼리스트링)
경로에 포함된 파라미터 값을 획득 할 때
req.path 접속 한 주소에서 경로 부분을 확인 할 때
req.query 접속한 주소에서 쿼리스트링으로 전달 된 값을 획득 할 때(GET방식)
req.xhr XHR 호출인지 여부를 구분할 때(헤더의 X-Requested-With로 판별)

res.headerSent
res.locals
웹 브라우저로 헤더가 전송되었는지 여부
응답용 지역 변수로, app.locals과 동일

req.get(“필드 명”) 웹브라우저가 보내온 헤더의 특정 필드 값을 획득 할 때
accepts(), acceptsCharsets(), acceptsEncodings() 등등과 같은
메서드가 몇 개 있지만… 실제 활용율이 떨어져서 생략합니다.

res.append(“필드 명” [ , “값 ” ] )
= res.set() , res.header()
웹브라우저로 응답하는 헤더에 추가 할 때
res.attachment( [ “파일명” ] ) 파일 다운로드(첨부형식) 헤더를 추가할 때
res.cookie( “쿠키 명“ , “값” [ , 옵션 객체] ) 쿠키를 설정할 때
res.clearCookie( “쿠키 명 ” ) 쿠키를 삭제할 때
res.download( 파일 경로 [, “파일명” ] [, 함수 ] ) 파일 다운로드를 처리할 때

res.end( [ “데이터” ] ) 웹 브라우저로 보낼 데이터(문자열) & 종료
res.json ( [ 객체 ] ) JSON 형식으로 응답할 때
res.jsonp ( [ 객체 ] ) JSONP 형식으로 응답할 때 (?callback=)
res.location ( “이동될 주소” )
res.redirect( [상태코드,] , “이동될 주소”)
특정 주소로 리디렉트 처리 할 때
res.render( “뷰 파일 ” [, 지역변수] [, 콜백] ) HTML 렌더링을 할 때

res.send( “내용” ) 웹 브라우저로 보낼 데이터(문자열)
res.sendStatus( 응답코드 ) HTTP 응답 코드를 설정 할 때
res.type(“파일 확장자 혹은 MIME타입”) 응답 콘텐츠에 대한 콘텐츠 타입 지정할 때

막하는스터디 두번째만남 Express(20151025)

More Related Content

What's hot (20)

Similar to 막하는스터디 두번째만남 Express(20151025) (20)

막하는스터디 두번째만남 Express(20151025)