19.01.10 목요일

D+4

1. 어제 공부한 내용 정리

2. 라우팅 다시 공부하기

3. 뷰 템플릿(ejs)

*do it! node.js책으로 공부한 내용입니다.

parse는 문자열을 받아 객체로 반환하고 format은 객체를 받아 문자열로 반환한다.

1 2 3 4 5 6 7 8

var url = require('url'); //주소문자열을 객체로 만들기 var curURL = url.parse('https://www.search.naver.com/search.naver?query=steve+jobs&where=m&sm=mtp_hty'); //url객체를 문자열로 만들기 var curStr = url.format(curURL);

<일반적으로 지정하는 디렉토리 이름 정리>

• ./node_module : express 앱에 필요한 module을 저장

• ./public : 정적(html, css, js, 이미지 파일 등)인 파일들을 저장

• ./views : HTML view템플릿(ejs파일)을 저장

• app.js : 메인 소스 코드

• package.json : module 파일로, 의존성 및 npm 스크립트 명령어를 저장

* 요청에 대한 응답을 처리하는 함수 = 미들웨어

* 각각의 요청에 맞는 함수들을 분리해주는 장치 = 라우터

* 일일이 요청 url을 일일이 확인하는 것이 번거로워, 이를 해결하는 것 = 라우터 미들웨어

1 2 3 4 5 6 7 8 9 10 11 12

// Express 기본 모듈 불러오기 var express = require('express')  , http = require('http')  , path = require('path'); // 익스프레스 객체 생성 var app = express(); // 기본 속성 설정 app.set('port', process.env.PORT || 3000); app.use('/public', static(path.join(__dirname, 'public')));

cs

- 10번째 줄 코드의 설명 : 이 코드를이용해서 node.js의 포트를 설정한다. 디폴트 값을 3000으로 설정했고, 환경변수에 PORT라는 이름으로 포트명을 지정했을 경우에 그 포트명을 사용하도록 한다는 의미이다.

- 12번째 줄 코드의 설명 : 파일의 위치를 path.join(__dirname, ‘view’)로 정의하였다. __dirname은 현재 수행중인 파일의 위치를 가리킨다. 이 코드를 추가해 주고 URL을 (기존 주소/public/파일명.html)로 해 주면 된다.

1. 라우터 미들웨어 사용해서 로그인 페이지 만들기

1

<form method="post" action="/process/login">

cs

- login.html, 로그인 화면에서 post방식으로 넘겨준다. action은 url자리인데, 위와 같은 방식으로 써주면 폼 페이지를 호스팅하는 같은 서버로 전송되지만 서버의 다른 url로 전송이 된다. (기존 주소/process/login으로 전송 된다.)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

// 라우터 객체 참조 var router = express.Router(); // 라우팅 함수 등록 router.route('/process/login').post(function(req, res) {    console.log('/process/login 처리함.');    var paramId = req.body.id || req.query.id;    var paramPassword = req.body.password || req.query.password;        res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});    res.write('<h1>Express 서버에서 응답한 결과입니다.</h1>');    res.write('<div><p>Param id : ' + paramId + '</p></div>');    res.write('<div><p>Param password : ' + paramPassword + '</p></div>');    res.write("<br><br><a href='/public/login.html'>로그인 페이지로 돌아가기</a>");    res.end(); }); // 라우터 객체를 app 객체에 등록 app.use('/', router);

- app.js, html파일의 form태그에서 /process/login으로 넘겨주었기 때문에 5번째 줄의 route 함수에 ‘/process/login’을 넘겨 받으면(이전 주소/process/login이 실행 되면) 콜백 함수를 실행시켜 준다.

2. URL 파라미터 + 오류 페이지 보내기(express-error-handler 미들웨어)

url뒤에 ?기호를 붙이면 요청 파라미터(query string)을 추가하여 보낸다. URL 파라미터는 요청 파라미터와 달리 URL주소의 일부로 들어간다.

* 토큰이란?,,,

1 2 3 4

// 등록되지 않은 패스에 대해 페이지 오류 응답 app.all('*', function(req, res) {    res.status(404).send('<h1>ERROR - 페이지를 찾을 수 없습니다.</h1>'); });

- 오류 페이지 보여주기 : 라우터 미들웨어는 특정 패스가 등록되어 있는지 순서대로 확인한다. 그렇기 때문에 post()메소드 아래쪽에 app.all()메소드를 호출해야 한다.

1

<form method="post" action="/process/login/mink">

- action값으로 ‘/process/login/mink’값을 넣었기 때문에 URL파라미터로 mink가 전달이 될 것이다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

var errorHandler = require('errorhandler'); // 에러 핸들러 모듈 사용 var expressErrorHandler = require('express-error-handler'); // 라우팅 함수 등록 router.route('/process/login/:name').post(function(req, res) {    console.log('/process/login/:name 처리함.');        var paramName = req.params.name;        var paramId = req.body.id || req.query.id;    var paramPassword = req.body.password || req.query.password;        res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});    res.write('<h1>Express 서버에서 응답한 결과입니다.</h1>');    res.write('<div><p>Param name : ' + paramName + '</p></div>');    res.write('<div><p>Param id : ' + paramId + '</p></div>');    res.write('<div><p>Param password : ' + paramPassword + '</p></div>');    res.write("<br><br><a href='/public/login.html'>로그인 페이지로 돌아가기</a>");    res.end(); }); // 라우터 객체를 app 객체에 등록 app.use('/', router); // 404 에러 페이지 처리 var errorHandler = expressErrorHandler({    static: {      '404': './public/404.html'    } }); app.use( expressErrorHandler.httpError(404) ); app.use( errorHandler );

- ‘/process/login’을 ‘/process/login/:name’으로 바꾸어 주었는데, 이는 /process/login뒤에 오는 값을 파라미터로 처리하겠다는 의미이다.

- express-error-handler 미들웨어를 사용해서 404.html페이지를 응답으로 보내준다.

3. 쿠키와 세션 관리하기

사용자가 로그인한 상태인지 아닌지 확인할 때 쿠키나 세션을 사용한다. 쿠키는 클라이언트 웹 브라우저에 저장되는 정보이며, 세션은 웹 서버에 저장되는 정보이다.

cookie-parser 미들웨어 사용하여 쿠키를 설정하거나 확인한다.

4. ejs 뷰 템플릿 사용하기

MVC 패턴이란 Model-View-Controller 패턴으로 눈에 보이는 부분은 뷰, 뷰로 표현되는 데이터를 제공하는 것은 모델, 처리되는 과정을 담당하는 것은 컨트롤러로 구분한다. 다시 말해 라우팅 함수는 컨트롤러, 데이터를 저장하거나 조회하는 함수를 모델, 결과를 보여주기 위해 만든 함수를 뷰라고 한다.

express에서는 ejs, pug등의 뷰엔진을 제공한다. ejs를 사용하면 웹 문서에서 사용하는 태그를 그대로 템플릿 안에 넣을 수 있다.

1 2

app.set('views', __dirname + '/views'); app.set('view engine', 'ejs');

cs

- 뷰 엔진(속성 값)을 ejs로 설정하는 코드이다.

* ejs파일 속의 <% %>사이에는 자바스크립트 코드를 넣을수 있으며 <%= %>는 =뒤에 변수를 넣을 수 있고, 그 변수의 값을 웹 문서에 출력할 수 있다.

* 혼자 해보기 *

로그인 화면(html)에서 아이디와 패스워드를 입력 받아서 post방식으로 넘기면 이 두 파라미터를 app.js에서 userid와 userpass 변수로 렌더링을 한 후 로그인을 했다는 ejs 페이지를 띄우는 웹 페이지를 만들어 본다.

① login.html - 로그인 화면에서 아이디와 비번 입력 받고 /process/login으로 제출

② app.js - 라우터 사용해서 /process/login요청 받으면 받아온 아이디와 비번을 변수로 랜더링

③ app.js&login_success.ejs - 랜더링 한 변수를 <%= %>에 대입

④ app.js - ejs파일을 화면에 보여줌

> 랜더링 하는 부분이 잘못된 것 같다. 내일 다시 할 것

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

1. ejs 파일로 넘기는 거 다시 해 보기

2. ejs 보충 해서 공부

3. Node.JS와 i18n 연동(예제 코드 완벽히 이해)