34 :: 회원가입, Passport.js, Session Store, CSR 댓글 기능, MongoDB Aggregation

엘리스 SW 엔지니어 트랙 34일차

온라인 강의날

 

 

어제 알아본 Passport.js로 인증 기능과

회원가입, Session Store, 회원과 게시글 연동, CSR 댓글 기능 구현 등

이렇게 봐서는 도저히 이해할 수 없는 내용 시작!

 

 

회원가입

비밀번호 데이터베이스에 그대로 저장하면

관리자가 모든 회원 비밀번호 확인가능

=> 암호화 한다, Hash 방법

 

Node.js hash 사용방법

기본 제공 모듈 crypto 이용

간단한 알고리즘(sha1), 강력한 알고리즘(sha224, sha256 등) 사용

마지막에 16진수로 만들어준다(digest)

// hash 
const hash = crypto.createHash('sha1')
hash.update(password)
hash.digest("hex")

 

회원가입 구현

1. 회원가입 페이지 구현
2. script로 이메일 형식, 비밀번호 확인 문자 확인
3. form 이용 post 요청 전송
4. 회원가입 처리 및 redirect

 

 

Passport.js와 로그인

Express.js 앱에 간단하게 사용자 인증 도와주는 패키지

유저 세션 관리 및 다양한 로그인 방식 추가 가능

 

다양한 로그인 방식 구현하기 위해

=> strategy라는 인터페이스 제공

 

strategy

Passport가 로그인 방식을 어떻게 처리할지에 대한 인터페이스 미리 설계

이 설계된 구현체를 Passport에 붙이면 로그인 flow 구현 가능

설계된 다양한 구현체 있다(facebook, google 등)

 

passport-local

username, password를 사용하는 로그인 구현체

 

로그인 구현

1. 로그인 화면 구성
2. passport-local strategy 로그인 구현
3. passport.js 설정
4. passport로 요청 처리

 

Passport는 자동으로 session에 저장한다

 

serializeUser와 deserializeUser 

session 이용해서 user 사용할 때에는

serializeUser와 deserializeUser 설정해야된다

세션에 user 정보 변환해서 저장하고 가져오는 기능 제공

 

세션 사용시 serializeUser, deserializeUser 작성 안하면

passport 로그인 안된다

 

 

Session

웹 서버가 클라이언트 정보를

클라이언트별로 구분해서 서버에 저장

클라이언트 요청시

Session ID 사용해서 클라이언트 정보 다시 확인하는 기술

Cookie는 클라이언트가 정보 저장하고 요청시 정보 보낸다

 

Session 작동 방식

1. 서버는 세션 생성해서 세션 구분자 Session ID를 클라이언트에 전달
2. 클라이언트는 요청시 Session ID 함께 담아서 요청
3. 서버는 전달받은 Session ID로 해당 세션 찾아서 클아이언트 정보 확인

 

Express.js의 session

express-session 패키지 사용해서

간단하게 session 동작 구현 가능

특별한 설정 없이, 자동으로 session 동작 구현

=> 자동으로 session id 클라이언트에 전달, 클아이언트 정보 확인

 

 

Session Store

express-session 패키지는 session을 기본적으로 메모리에 저장

=> 앱 종료시 로그인 해제

=> 서버 간 세션 정보 공유 X

 

여러 Express 어플리케이션을 Session Store로 연결

Session Store은 종료가 안된다

 

connect-mongo 패키지

connect-mongo 패키지 이용해서

MongoDB을 session store로 사용가능

express-session 패키지의 옵션으로 전달 가능

 

자동으로 session 값이 변경 될 때

updqte되고 session 호출될 때 find 한다

 

connect-mongo 예시

 

 

회원과 게시글 연동

방법을 실습했다

 

 

CSR로 댓글 기능 구현

구현 방법

1. 페이지 로드시 필요한 리소스 클라이언트에 선언
2. 클라이언트에 필요한 데이터 비동기 호출
3. 클라이언트가 전달받은 데이터 가공, 리소스 사용해서 화면에 표시

 

클라이언트에 리소스 선언

다양한 방법있다

HTML Template, React.js, Vue.js 등

 

데이터 비동기 호출

HTML이 아닌

데이터만 주고 받을 수 있는 API 구성 (JSON)

 

브라우저 비동기 HTTP 요청을 fetch 함수 이용

 

 

MongoDB Aggregation

MongoDB에서 Document 가공, 연산 기능

RDBMS에서 SQL로 하는 기능들 유사하게 구현

(SQL의 GROUP BY, DISTINCT, COUNT, JOIN 등)

 

Aggregation 사용 이유

MongoDB의 Find는 검색 필터링, 정렬만 제공

 

다른 Collection에서 데이터 가져오거나

갬석된 테이터 그룹화 등

Aggreagation으로 가능

 

Aggregation 동작

Stage의 배열로 이루어졌다

순차적으로 다음 Stage로 결과를 보낸다

 

Aggregation 사용 예시

1. 작성자별 게시글 수 모으고
2. 게시글 개수 10개 초과인 작성자 찾고
3. 해당 작성자를 회원 collection에서 검색

Aggregation 종류 많다

외울 필요 X

 

MongoDB 홈페이지 stage 설명, 예제 코드

링크 => https://docs.mongodb.com/manual/meta/aggregation-quick-reference/#stages

 

 

login by Micah Williams #unsplash