D + 6
1. cookie-parser모듈 공부
2. 코드해결 > redirect 또는 reload 메소드 사용
3. i18n모듈 구조(?) 이해 ( json&ejs )
1. cookie & cookie-parser모듈
HTTP프로토콜은 connectionless(클라이언트가 서버에 요청을 하고 서버가 클라이언트에 응답을 보내면 접속을 끊음)이고, stateless(통신이 끝나면 상태정보를 유지하지 않음)하다. 그렇기 때문에 서버가 클라이언트를 식별할 방법이 필요하다. 그래서 쿠키와 세션을 사용한다.
쿠키는 클라이언트의 웹 브라우저에 저장되는 정보이다. 쿠키에는 이름, 값, 만료 날짜, 경로 정보가 들어있다. 쿠키는 로그인 상태를 유지하거나 사용자 정보를 일정 시간동안 유지해야 하는 경우에 주로 사용한다. 세션은 웹 서버에 저장되는 정보이다.
cookie-parser란 요청된 쿠키를 쉽게 추출할 수 있도록 해주는 미들웨어이다.
1 2 3 4 5 6 7 8 9 10 11 | 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); })
app.listen(3000) |
> req객체에 쿠키 속성이 부여된다.
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 http = require('http');
// HTTP 서버 생성 http.createServer(function(request, response){ // Request 헤더에 쿠키 정보가 있으면 쿠키 정보와 요청 헤더 출력 if (request.headers.cookie){ var cookie = request.headers.cookie.split(';').map(function(element){ var element = element.split('='); return { key: element[0], value: element[1] }; });
// Request 헤더의 쿠키 정보만 출력 var content = '<h1>Cookies</h1>'; content += '<h2>'+JSON.stringify(cookie)+'</h2>'; // Request 헤더 전체 content += '<h1>Request headers</h1>'; content += '<h2>'+JSON.stringify(request.headers)+'</h2>';
response.end(content); // Request 헤더에 쿠키 정보가 없으면 쿠키 생성 } else { // Response header의 Set-Cookie 속성을 사용하여 쿠키 생성 response.writeHead(200, { 'Content-Type': 'text/html', 'Set-Cookie': ['id=cmk', 'pw=cookie'] }); response.end('<h1>Set cookie</h1>'); } // 서버 실행 (http://127.0.0.1:3000) }).listen(3000, function(){ console.log('Server Running at port number 3000'); }); |
> 쿠키를 개체에 저장하면 자동적으로 JSON으로 변환된다.
<쿠키 정보 지우기>
1. 쿠키 삭제 방법 1
1 2 3 | app.get('/logout', function(req,res) { res.clearCookie(key); }); |
2. 쿠키 삭제 방법 2
1 | res.request.setCookie('쿠키명', '쿠키 설정값', '시간'); |
>쿠키 생성코드인데 ‘시간’에 -1을 주면 삭제가 된다.
2. cookieParser를 이용한 쿠키 삭제방법
1 2 3 | app.get('/', function(req, res){ res.clearCookie('lang').send(req.cookies.name); }); |
ㅡ> 둘의 차이를 잘 모르겠음
2. 코드 오류의 원인 찾기
1) 버튼을 눌렀을 때 바로 페이지 로딩이 되지 않는 현상인건지 확인하기 위해 reload와 redirect메소드를 사용하여 확인해 보았다. 두 메소드를 이용해서 실행해 보았지만 같은 결과가 나온다(버튼을 두 번씩 눌러야만 글자가 바뀌는 현상). 그렇기 때문에 버튼을 눌렀을 때 페이지가 로딩이 되지 않는 것은 아닌 것 같다.
2) 계속해서 관찰(?)해 본 결과 노드를 실행시키자 마자 제일 처음에 (한국어)버튼을 눌렀을 때 바로 한국어로 바뀔 때가 있고, 영어로 바뀔 때가 있었다. i18n.js파일에서 디폴트 값을 ‘en’으로 준 것 때문인지 확인해 보았으나 그것과는 상관이 없었다.
3) 이를 통해 로딩은 되지만 이전에 쿠키에 저장된 정보 때문인 것을 확인했다. 이전에 en을 저장되어 있으면 어떤 버튼을 누르든 영어로, 이전에 ko가 저장되어 있으면 한국어로 바뀌는 것이였다.
4) 그러므로 해결책은 이전에 저장된 쿠키를 초기화 시켜주어야 한다고 생각했다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<redirect & reload>
- redirect : 특정 페이지로 강제로 보내고자 할 때 사용한다. res.redirect(‘URL’);
- reload : 소스를 수정했을 때 자동으로 서버를 재시작해줄 때 사용한다.
* 자동으로 서버를 리로드 하는 방법 : nodemon모듈을 사용한다.
<라우팅에 대한 이해가 부족함>
라우팅은 URI의 정의, 그리고 URI가 클라이언트 요청에 응답하는 방식을 말한다. 라우트 메소드는 HTTP메소드 중 하나로부터 파생된다. 라우트 경로는 요청 메소드와의 조합을 통해, 요청이 이루어질 수 있는 엔드포인트를 정의한다. 라우트 경로는 문자열, 또는 정규식일 수 있다.
* app은 express서버 객체이다.
* send는 user에 응답 데이터를 전송한다. 문자열로 응답한다.
* render은 뷰 엔진을 사용해 문서를 만든 후 전송한다.
* route()메소드는 요청패스를 지정할 수 있다.
1 2 3 4 5 6 | var express = require('express'); var app = express();
app.use('/',function(req,res){ res.send('Hello world'); }); |
> 기본적인 라우트의 예시
1 2 3 4 | app.all('/secret',function(req,res){ console.log('ABC'); next(); });r |
> 모든 요청 메소드에 대해 한 경로에서 미들웨어 함수 로드하는데 사용
1 2 3 | app.get('/about',function(req,res){ res.send('about'); }); |
> 위 라우트 경로는 /about에 일치 시킨다.
> /about 대신에 정규표현식이 올 수도 있다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<<1월 15일 화요일 계획>>
아직 코드 오류에 대한 원인만 찾은 상태 ㅡ> 꼭 해결하기 (쿠키 사용해서)
쿠키 삭제방법 정확히 이해하기
i18n연동 예시 찾아보기(동적인 웹페이지 만들기)
'동계현장실습' 카테고리의 다른 글
| 19.01.17 목요일 (1) | 2019.01.18 |
|---|---|
| 19.01.15 화요일 (0) | 2019.01.15 |
| 19.01.11 금요일 (0) | 2019.01.11 |
| 19.01.10 목요일 (0) | 2019.01.10 |
| 19.01.09 수요일 (0) | 2019.01.09 |
