로그인 기능 구현 / cookie-parser 만들어보기

1. 로그인 기능 구현

1/임시데이터생성

2/메인 페이지에서의 router 구현

3/ 로그인 페이지 router 구현 (get과 post)

4/ 메인 페이지에서의 router 구현 추가

5/ 로그아웃 router 구현

6/ profile 페이지 router 구현

2. cookie-parser 만들어보기

 

1. 로그인 기능 구현

 

1/ 임시데이터 생성

 

이건 DB 로 따로 처리해야하는 건데 배우는 단계이니 가입자가 한명뿐인 거처럼..ㅋ 데이터를 임의로 만들어줌

저번 CRUD 게시판 만들기 배울 땐 파일을 따로 빼서 require - module.exports로 데이터를 불러왔는데,

이번엔 데이터가 하나뿐이니 그냥 메인 서버.js 파일 상에 넣음

 

---

2/ 메인 페이지에서의 router 구현

 

이건 저번 주에 배운 내용이니 설명 생략 

 

mainServer.js 

main.html

---

3/ 로그인 페이지 router 구현 (get과 post)

 

<get 요청>

: 메인페이지 => 로그인 페이지 주기

 

mainServer.js 

login.html (get 요청으로 받은 후 보낼 응답 html)

 

여기까진 기본이다.

 

 

<post 요청>

 

: 두가지 조건을 걸자 => 로그인 성공했을 때 vs 실패했을 때

 

사용자가 form 데이터로 id와 pw를 넘겼을 때,

우리가 가진 데이터와 맞는지 비교하여 로그인 성공했을 때와 로그인 실패했을 때를 나눠서 응답 routing 하기

 

#1. 우선, post 요청으로 받은 데이터 쪼개서 파싱해오기

 

저번 주에 배웠던 내용  / post로 받은 데이터는 요청헤더가 아닌 요청바디로 온다.

 

반복되는 코드이므로
const {userid,userpw} = req.body  로 줄이기 가능

 

 

#2. 로그인 성공하면 로그인 아이디값으로 쿠키값 설정해주기 & 메인페이지로 가게 만들기

     (로그인 성공이란? : id, pw가 전부 우리의 임시데이터 user 객체의 속성값과 일치할 때)

     

     로그인 실패 시 로그인 페이지로 다시 가게끔 구성

 

---

 

4/ 메인 페이지에서의 router 구현 추가 (로그인 후 메인페이지 구성 바꾸기)

  

   다시 mainServer.js로 돌아가서 로그인 됐을 때와 안됐을 때의 화면 구성을 다르게 잡아보자.

   즉, 로그인 되었을 때 / 안되었을 때의 조건문 구성해보기

 

#1. 로그인 상태는 on/off 스위치와 같으므로 boolean값으로 변수로 잡아주자. 

 

let isLogin = false

로그인 상태를 변수 isLogin으로 잡고 false를 할당해줌
-> 로그인 안됐을 시 실행문 : isLogin은 그대로 false (OFF)
                                   + 메인html 파일로 isLogin 변수 넘겨주기
-> 로그인 됐을 시 실행문 : isLogin에 true를 재할당해주는 식으로 구성할 예정 (ON)
                                   + 메인html 파일로 isLogin 변수 넘겨줘서 화면 구성 바꿔주기

 

#2. 로그인이 안 되어 있을 땐 (OFF)

 

받은 쿠키값이 없을 것이니, 요청헤더의 쿠키값이 undefined일 때로 조건을 잡아주자.

이땐, isLogin변수가 false인 상태로 넌적스 (main.html) 에게 보내질 것이다. (좋은 코드는 아니지만 가라로 하는거니까...)

req.headers.cookie === undefined

 

 

#3. 로그인이 되었을 때 (ON)

 

로그인 성공했을 때 쿠키값으로 준 userid 잘라서 뽑아오기

(req.header객체의 cookie 속성값가져오기 -> 잘라서 배열에 담기 -> 배열 인덱스로 가져오기)

1- 요청 헤더 쪽 쿠키 속성값 가져오기
let cookie = req.headers.cookie
출력 : login=web7722

2- split 메소드 써서 특정 구분자 기준으로 나눠서 배열에 담아주기
cookie = req.headers.cookie.split('=') 
출력 : ['login','web7722']

3- userid 뽑아내기
let userid = cookie[1]
출력 : web7722

 

- 쿠키값에 담은 userid와 임시데이터의 userid값 비교해서 맞으면 isLogin = true 재할당

  + userid와 isLogin 변수 넌적스(main.html)로 넘겨주기

 

 

#4. 로그인됐을 시와 아닐 시 화면 구성 다르게 하기 (nunjucks 조건문)

 

nunjucks : 서버에서 받은 변수로 화면 꾸미기

nunjucks에서 if/else문 사용해보기
for문과 쓰는 방식이 거의 똑같다.
{% if 조건문 %} / {% else %} / {% endif %} 하면 끝

 

---

5/ 로그아웃 router 구현

 

로그아웃 응답으로 쿠키의 유효기간을 바로 만료시키는 개념으로 접근

Set-Cookie의 속성값은 한 스트링으로 다 넣어서 구성하고 ;로 구분지음
'login=web7722; Max-Age=0'

 

쿠키 없애고, 다시 메인페이지로 돌아가게끔 redirect

 

 

---

 

6/ profile 페이지 router 구현

 

- 쿠키 있나없나 확인해주는 조건문 걸고,

- 쿠키값있으면, 쿠키값의 userid와 임시데이터의 userid와 일치하는지 확인

    + userid랑 username 데이터 넌적스로 변수 넘겨주기

 

profile.html 구성 (변수받아서 활용)

끝!!

 

근데, 코드를 잘 보면 쿠키값을 쪼개는 과정, 파싱하는 부분의 코드가 중복된다.

그래서 쿠키를 파싱하는 건 따로 빼주는 걸 해보았다.

사실 npm install cookie-parser 로 외부 라이브러리를 깔아주면 되는데, 라이브러리의 중요성을 느끼게끔 직접 만드는걸 배워보았다..

 

---

2. cookie-parser 만들어보기

 

텍스트 -> 배열 -> 객체 형태 {cookie-name:cookie-value} 로 바꿔주는 과정  

 

 

1/ 실제 쿠키값을 받아온 것처럼 임의로 데이터를 만들어줌 

 

실제로 쿠키값을 받아오면 보통 string값으로 아래와 같은 구조로 뽑아져서 똑같이 만들어 준 것임

'쿠키네임=쿠키밸류; 쿠키네임2=쿠키밸류2; 쿠키네임3=쿠키밸류3; ...... 쿠키네임n=쿠키밸류n'

 

 

2/ 공통적으로 세미콜론(;) 으로 끝나므로 이걸 기준으로 split 해주면서 배열에 담아주기

 

 

출력해보면, 첫쿠키값 빼고는 다 맨 앞에 공백이 생겼다. 

 

 

 

3/ 기존 배열에서 한 요소씩 빼내면서, 앞에 공백을 없앰과 동시에 새로운 배열에 담아주기

.trim() 메소드
: 공백을 없애주는 메소드임

 

출력해보면, 공백이 없어짐

 

.map( ) 메소드를 쓰면,
2,3번을 합쳐서 이렇게 한 줄로 코드를 쓰는게 가능함

map(), filter(), forEach() 다시 연습해보기

 

 

4/ key:value 형태로 객체에 담아주기 

 

 - 공통된 (=) 등호를 기준으로 한개씩 뽑아주면 [key, value] 가 니 각 index로 뽑아서 변수에 담아준다. 

- spread 연산자로 기존 배열에 있던 애들을 풀어서 깊은 복사를 해주고,

https://yjleekr.tistory.com/21 (깊/얕복사 복습하기..)

 

- 그 다음 값으로 위에서 각 item[0], item[1]을 담아준 key:value 넣어주기,

 

근데, 이렇게 하면, key 부분은 신기하게 변수값이 찍히지 않고, string그대로 찍힌다. 

 이때, key부분을 대괄호로 감싸주면 해결 된다.

객체의 key부분에 변수가 들어가야한다면, 대괄호로 감싸줘야 먹힌다.

 

끝났다! 

 

정리하자면, 아래와 같은 과정이다. 

 

이 cookieParser.js는 끌어다 쓸거라 일련의 과정들을 function(cookieText)로 묶어서 cookieParser라는 변수에 담아주고, 이걸 module.exports로 내보낸다..