[먼저 보면 좋은 게시글]
- [웹기본개념] HTTP 그리고 REST API 다가가기 : http://jinbroing.tistory.com/96 (HTTP 메서드 참고)
- [node.js] express 라우팅, CRUD / 쿼리스트링 : http://jinbroing.tistory.com/97 (라우팅이란 참고)
- [node.js] express 그리고 템플릿엔진 ejs : http://jinbroing.tistory.com/107
[서버에 요청할 때 구분해서 쓰자]
- 서버에 정보를 요청(Read)할 때는 GET
- 서버에 클라이언트가 정보를 전달할 때에는 POST
[서버로 데이터를 전송할땐]
- 클라이언트가 서버로 데이터를 전송할 땐 POST
- express POST 방식 구현하기
[서버로 데이터 전송 구현해보기]
0) 서버 환경 : express 4.x + ejs(템플릿 엔진) : express로 웹서버 구축하는 방법 - 먼저 보면 좋은 게시글 4번째 참고
1) /views 디렉토리 아래 login.ejs 파일 만들기
2) /routes/index.js 접근 후 라우팅 코드 추가 : 클라이언트의 http://도메인/login 에 대한 응답 요청 /views/login.ejs 파일 응답
1 2 3 | router.get('/login', function(req, res, next){ res.render('login', { title: 'login' }); }); | cs |
- 로그인 폼이 있는 페이지는 GET 방식으로 요청 응답 : login 페이지(.html 파일)에 대한 응답일 뿐 아직 로그인 정보 주는 것 아님
- 로그인 정보를 넘겨주고 서버는 그에 대한 응답을 할 때에는 POST를 사용
- 정보를 작성하는 동작과 정보를 전달하는 동작을 구분할 줄 알아야함
3) /views/login.ejs 파일에 접근하여 로그인 폼 만들기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> <meta charset="utf-8" /> </head> <body> <!-- 로그인폼 --> <form action="/login" method="post"> 아이디 : <input name="user_id" type="text" /><br /> 비밀번호 : <input name="user_pwd" type="password" /><br /> <input value="로그인" type="submit" /> </form> </body> </html> | cs |
- html 태그를 설명하자면 form은 input(입력칸)을 하나로 묶어주는 태그
- form 태그 속성으로 action과 method가 있음
- form 속성 action : 작성한 정보를 어디로 보낼지(라우팅)
- action 속성의 값으로는 2번에서 작성한 login과 동일함, 그러나 HTTP 메소드 차이로 구분 : GET이냐 POST냐
- form 속성 method : 정보를 전달할 때 어떤 HTTP 메소드를 사용할 것인지
- method 속성의 값으로는 정보를 전달할 때 GET말고 POST를 사용할 것(전달할 정보를 주소창에 나타내지 않음, 조금 더 보안)
- input 태그에 속성 중 name : 정보 전달 시 input 태그에 들어간 정보는 이런 정보 라는 것을 알리기위해 이름 부여하는 것
4) /routes/index.js 다시 접근 후 로그인 정보를 받아 처리하는 액션 지정해주기 : 라우팅
1 2 3 4 5 6 7 8 | router.post('/login', function(req, res, next){ console.log(req.body); var id = req.body.user_id; var pwd = req.body.user_pwd; res.redirect('/'); }); | cs |
- req(요청 객체 : 요청 정보가 담김)의 속성 중 body(객체 형태)에 3번 항목 form 내부 로그인 정보가 담겨있음
- req.body.user_id, req.body.user_pwd로 추출하면 됨 : req.body.input태그에 내가 지정한 태그 name 속성의 값
- 위와 같이 받은 정보를 db에 담겨져있는 아이디, 비밀번호와 비교한 후 결과를 응답해주면 됨
- res.redirect() : 넘길 페이지 파일을 정할 때 사용하는 res 객체 메소드, 로그인 성공/실패 따라 redirect 페이지를 달리할 때 사용
- 자바스크립트 알아야겠죠? : 콜백은 js 함수가 일급이라 가능하다, 자바스크립트 변수는 함수 레벨 스코프를 가진다 등
- 물론 로그인을 이렇게하면 보안상 아주 좋지 않음
- 알아둬야할 것 : express는 기본적으로 POST 방식으로 전달하는 데이터는 undefined 처리
- 그럼에도 불구하고 처리 가능한 것은 body-parser 미들웨어(라이브러리) 덕분
- 위의 이미지처럼 express 프로젝트를 만들 때 기본적으로 package.json에 설정되어서 설치됨
- 아래 이미지는 app.js(프로젝트 총괄 파일)에 body-parser 미들웨어가 인클루드 되어있는 것을 캡쳐한 것
- 원래 res 객체가 가지고 있지않은 정보 전달 프로퍼티(body 객체)가 bodyparser에 의해 추가됨
- 아래 이미지는 전달되는 req.body 내용을 보기위해 console로 찍어본 것
[더 알아보기]
- 같은 주소 라우트 지정 정리하기 : express 라우트 다루기
- package.json, 미들웨어
- 로그인 정보 암호화시키기
[참고자료]
1) 생활코딩, Express-POST 방식을 이용한 정보 전달 : https://opentutorials.org/course/2136/11949
2) express 공식홈페이지, 기본 라우팅 : http://expressjs.com/ko/starter/basic-routing.html
'nodejs' 카테고리의 다른 글
| [node.js] 모듈과 미들웨어 개념 (0) | 2017.05.23 |
|---|---|
| [node.js]Supervisor로 웹서버 자동 재시작하기 (0) | 2017.05.15 |
| [node.js] express 그리고 템플릿엔진 ejs (0) | 2017.05.01 |
| [node.js] express 기본구조 생성 (0) | 2017.04.30 |
| [node.js] express 라우팅, CRUD / 쿼리스트링 (0) | 2017.04.20 |
댓글