D+5
힘듦ㅇ,,,ㅎ
1. set, get, use함수 정확히 이해
2. render메소드 이용해서 js파일 통해서 ejs파일로 넘기기
3. Node.JS와 i18n 연동(예제 코드 완벽히 이해)
4. cookie-parser 모듈 공부
1. get, set, use 사용 이해
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | var express = require('express'); var http = require('http');
var app = express();
//get메소드는 미들웨어 함수가 적용되는 HTTP메소드이다. //'/'는 미들웨어 함수가 적용되는 경로(라우트)를 말한다. //req:클라이언트 요청 정보를 담은 객체 //res:요청한 클라이언트로 응답을 위한 app.get('/', function(req,res,next){ next(); });
//URL에 따라 라우팅 모듈을 설정한다 app.use('/', routes); app.use('/users',users);
//views, 템플릿이 있는 디렉토리 app.set('views', './views');
//view engine, 사용할 템플릿 엔진 app.set('view engine', 'ejs'); |
2. render() 메소드 이용해서 ejs파일-js파일 연결
- 아이디와 비밀번호를 입력받아서 post방식으로 넘기면(요청) 아이디와 비밀번호를 js파일의 라우터 함수를 통해 변수에 저장하여 렌더링한 후 ejs <% %>통해 변수를 적용시킨 후 ejs파일을 html코드로 화면에 띄워준다.
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 36 37 38 39 | var express = require('express') , http = require('http') , path = require('path') , fs = require('fs') , ejs = require('ejs');
var LS = fs.readFileSync('./views/login_success.ejs', 'utf8');
var bodyParser = require('body-parser') , static = require('serve-static');
var app = express();
app.set('port', process.env.PORT || 3000);
// body-parser를 이용해 application/x-www-form-urlencoded 파싱 app.use(bodyParser.urlencoded({ extended: false }))
app.use('/public', static(path.join(__dirname, 'public')));
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;
var LS2 = ejs.render(LS, {userid:paramId, userpass:paramPassword});
res.writeHead(200, {'Content-Type': 'text/html'}); res.write(LS2); res.end(); }); app.use('/', router);
http.createServer(app).listen(app.get('port'), function(){ console.log('Express server listening on port ' + app.get('port')); }); |
<app.js 파일>
1 2 3 4 5 6 7 8 9 10 11 12 | <html> <head> <meta charset = "UTF-8"> <title>로그인 성공 페이지~!!</title> </head> <body> <h1>☆로그인 성공★</h1> <div><p>사용자 아이디 : <%= userid%></p></div> <div><p>사용자 비밀번호 : <%= userpass%></p></div> <br><br><a href='/public/login.html'>다시 로그인하기</a> </body> </html> |
<login_success.ejs 파일>
3. Node.JS와 i18n 연동
i18n모듈을 사용하기 위해서는 npm i -S i18n을 통해 모듈 설치를 해주어야 한다.
* 실습 *
- (html파일) 본문의 글을 <한국어>버튼을 누르면 한글로, <영어>버튼을 누르면 영어로 바뀌게 하는 화면을 만들어 본다.
html파일로 실행시킨다.
제출 버튼(한국어 또는 영어 버튼)을 누르면 /ko 또는 /en로 전송(요청)이 된다.
app.js 파일의 라우터 함수(/ko로 요청 받았을 때, /en으로 요청 받았을 때로 나뉜다)에서 ejs파일로 렌더링 해준다.
3번의 내용은 cookie로 구분(?)해준다.
ejs파일이 화면에 노출된다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | //ko로 받았을 때 router.route('/ko').get( function(req, res) { console.log('/ko 처리함.'); res.cookie('lang','ko'); res.render('index.ejs'); }); app.use('/', router);
//en으로 받았을 때 router.route('/en').get(function(req, res) { console.log('/en 처리함.'); res.cookie('lang','en'); res.render('index.ejs'); }); app.use('/', router); |
- app.js에서의 라우터 함수
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html> <head> <title>연습해보기</title> </head> <body> <h1 name="in"><%= __('안녕')%></h1> <form method="get" action="/ko"> <input type="submit" value="한국어"/> </form> <form method="get" action="/en"> <input type="submit" value="영어"/> </form> </body> </html> |
- ejs 파일
주소도 올바르게 바뀌고 로그도 제대로 찍히지만 버튼을 두 번 눌러야 바뀐다. js파일의 라우터 내부에 문제가 있는 것 같다. reload함수나 redirect함수를 추가하면 해결할 수 있을 것 같다.
4. cookie-parser 모듈
쿠키는 클라이언트 웹 브라우저에 저장되는 정보이다. 쿠키를 사용해서 클라이언트와 서버간에 정보를 주고 받을 수 있다.
<쿠키 파서 모듈 사용 코드>
1 2 3 4 5 6 7 8 9 | var express = require('express') var cookieParser = require('cookie-parser')
var app = express() app.use(cookieParser())
app.get('/', function(req, res) { console.log('Cookies: ', req.cookies); }) |
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
1. cookie-parser모듈 공부
2. 코드해결 > redirect 또는 reload 메소드 사용
3. json&ejs
'동계현장실습' 카테고리의 다른 글
| 19.01.15 화요일 (0) | 2019.01.15 |
|---|---|
| 19.01.14 월요일 (0) | 2019.01.14 |
| 19.01.10 목요일 (0) | 2019.01.10 |
| 19.01.09 수요일 (0) | 2019.01.09 |
| 19.01.08 화요일 (0) | 2019.01.08 |