Do it! NodeJs 프로그래밍 - Day 6
1. 제목은 아래와 같은 순서로 작성해 주세요. (복사 붙여넣기로 써도 좋아요.)
예시) [2일차] Do it! 점프 투 파이썬 / 116~148p / 03. 프로그램의 구조를 쌓는다! 제어문
[차수] 도서명 / 페이지 / 소제목 (책의 챕터명 또는 나만의 방식으로 작성)
[6차]Do it! Node.js 프로그래밍/336페이지~421페이지/ 08. 뷰 템플릿 적용하기 + 09. 패스포트로 사용자 인증하기
이제 아래 가이드를 따라 스터디 노트를 작성해 봅시다.
2.책 DB를 넣어주세요 (제목 쓰는 칸 아래 정보 첨부 > 책 DB 클릭)
헷갈리실 땐 '편집자P의 스터디 노트 쓰는 법'을 참고해 주세요. : https://cafe.naver.com/doitstudyroom/21995
정재곤
이지스퍼블리싱 2017.03.06
3. 나의 스터디 흔적을 사진으로 보여주세요. 책상(모니터)과 책이 함께 보인다면 최고!
예시) 지우쭈님의 된다! 7일 실무 엑셀을 공부한 흔적: https://vo.la/LBxH
4. 이번 스터디는 어떠셨나요? 특별히 좋았던 점이나 어려웠던 점을 공유해 주세요. 다음에 이 책을 공부할 스터디 룸의 독자분들을 위해 큰 조언이 됩니다. (200자 이내로 작성해 주시면 충분합니다!)
예시) 뚜기님의 Do it! 점프 투 파이썬 스터디 노트 : https://vo.la/WhN6
ejs는 jsp의 el문법과 비슷해서 익숙하게 사용할 수 있었습니다.
패스포트 모듈로 로그인과 회원가입 기능을 만들어 보았는데, 정해진 코드를 입력하는 부분이라 크게 어렵지는 않았습니다. 페이스북 로그인 실습을 해볼 수 있어서 좋았습니다.
5. 열심히 실습한 코드를 저장해 첨부해 주시거나 자랑할 스크린샷이 있다면 올려주세요.
08-1 ejs 뷰 템플릿 사용하기
지금까지 사용자에게 결과를 응답으로 보내면서 자바스크립트 코드를 직접 입력하는 방법을 사용했었는데 이 방식은 각각의 요청을 처리하는 함수마다
응답 코드를 문자열로 넣어 주기 때문에 오탈자가 생기기 쉽다.
이를 방지하기 위해여 ejs라는 뷰 엔진을 사용하면 좀 더 쉽고 간편하게 뷰 페이지를 만들 수 있다.
app js 파일에 뷰 엔진을 설정하고 응답코드를 보내는 곳에 ejs 파일을 읽어들여 페이지를 표현해주는 코드를 설정하면 된다.
ejs 파일은 기존의 html 파일과 거의 흡사하게 만들기 때문에 html에 익숙한 분이라면 쉽게 사용할수 있다.
08-2 pug 뷰 템플릿 사용하기
pug 뷰 템플릿을 사용할 때 가장 큰 주의사항은 들여쓰기이다.
tab 키를 이용한 들여쓰기나 스페이스를 잘못 사용하면 pug가 제대로 처리되지 않는다.
과거에는 jade를 사용했으나 pug로 바뀌었다.
확장자는 .pug를 사용하고 사용하는 방식은 다음과 같다.
doctype html
html
head
title "성공"
body
block content
#container1234556
p "조회에 성공했습니다."
app.js의 뷰엔진에 등록하는것은
app.set('views', __dirname + '/views');
app.set('view engine', 'pug');
와 같은방식으로 설정한다.
09-1 패스포트로 로그인하기
- 패스포트(passport)는 노드에서 사용할 수 있는 사용자 인증 모듈입니다.
- 패스포트는 순전히 인증 기능만 담당합니다.
- 패스포트는 수백 가지의 인증 방식을 제공하는데, 어떤 인증 방식을 사용할 것인지 결정하는 것이 스트래지(Strategy)입니다.
- 로컬 인증 방식(Local Strategy) : 데이터베이스에 저장된 사용자 정보와 비교함
- OAuth 인증 방식 : 페이스북이나 트위터의 계정을 사용하여 인증함
- 플래시 메시지(Flash Message) : 리다이렉트를 사용하여 응답을 보낼 때 사용, 상태 메세지를 응답 웹 문서 쪽으로 전달할 때 사용함
- 로컬 인증 방식을 사용하려면 먼저 passport-local 모듈을 설치해야 합니다.
09-2. 로컬 인증하기
로컬 인증을 위해 데이터베이스 스키마와 패스포트 설정하기
이전까지는 아이디와 비밀번호를 사용해 사용자 정보를 확인했다. 이번에는 이메일을 아이디로 사용하고 비밀번호와 함께 인증하도록 변경한다. 이렇게 하려면 먼저 데이터베이스 스키마를 변경해야 한다.
스트래티지를 설정하고나면 인증방식이 결정된다. 그런데 전형적인 웹 요청 처리 과정에서는 인증 정보가 로그인을 요청할 때만 전달된다. 즉, 로그인 이후에는 인증정보가 전달되지 않는다. 따라서 로그인 이후에 들어오는 요청 정보는 세션을 확인해야 한다. 인증에 성공하면 세션이 만들어지고 사용자의 브라우저에 쿠키로 유지된다. 그 이후에 요청이 있을 때는 인증 정보가 들어있지 않고 세션을 확인하는 쿠키 값만 들어있다. 패스포트에서는 로그인 세션을 지원하는데, 사용자 인증을 성공했을 때 사용자 정ㅇ보를 세션에 저장하거나 세션으로부터 사용자 정보를 복원할 수 있다.
로그인과 회원가입 화면을 만들기 위한 라우팅 함수 등록하기
클라이언트에서 사용할 수 있는 기능은 7가지이다. 각 기능별로 라우팅 함수를 만든 후 웹서버에 등록한다. 로그인의 경우, get방식으로 요청할 때는 단순히 ejs 뷰 템플릿으로 결과 웹 문서를 만들어 응답한다. post방식으로 요청할 때는 패스트 모듈에서 사용자 인증을 처리하도록 한다.
로그인과 회원가입 화면을 만들기 위한 뷰 템플릿 만들기
뷰 템플릿을 부트스트랩을 사용하여 구성한다.
로그인 회원가입 기능 실행하여 확인하기
몽고디비가 실행되었는지 먼저 확인한 후 명령프롬프트 창을 열고 app.js파일을 실행한다.
