Login - token을 cookie에 저장

국비학원 수업을 듣고 과제 및 프로젝트를 하느라고 정신이 없어서 블로그에 거의 오지 못했었다..

이제 내일 수료를 앞두고, 발표 자료까지 다 만들어둔 상태라

내가 만들기로 다짐하고서 진도를 나가지 못했던 내 개인 프로젝트에 박차를 가하려고 한다.

 

일단 이 프로젝트에 대해서 아무런 글을 쓴 적이 없었기 때문에,

 

사용 언어 및 개발 소재에 대해서만 간단히 언급하고 나서 이 포스팅에 대한 본격적인 내용을 작성해야겠다.

 

소재

가계부 웹 프로그램

(나중에 나아가서는 모바일 애플리케이션까지도 욕심이 있다)

 

사용 언어 및 프레임워크, 라이브러리

프론트엔드(React.js, Next.js, TypeScript)

백엔드(Node.js, Express.js)

 

시작한 이유? 계기?

모바일 애플리케이션 사용하면서 내가 필요하다고 느꼈던 기능들을 포함해서 프로그램을 만들어보고 싶었다.

재테크에 관심이 많아서 그 모든 것의 기초는 내 자금 관리라고 생각했기 때문에.

 

풀스택 개발자로 도전해보기 위한 내 첫걸음으로, 어려운 주제를 정한 건지도 모르겠다.

회계에 대해서 잘은 모르지만 이 참에 공부해볼 생각이다!

 

아무튼, 회원가입까지는 구현했는데, 로그인 기능을 만들다가 중단되었던 걸 재개한 상황이다.

회원가입 부분 기능을 구현하면서도 포스팅을 쓰면 좋았겠지만.. 지나간 과거는 어쩔 수 없지.

 

백엔드 코드. login router에 작성한 쿠키 관련 설정.

아직 localhost 환경에서 개발 중이라 여러 방해요소가 될 것 같아 http-only 설정은 잠시 미뤄두었다.

 

token을 redux store에서 관리하도록 설정해두었고,

위 백엔드 코드에서 보내온 토큰을 프론트엔드에서 쿠키에 저장하는 코드를 쓰기만 하면 된다!고 생각했는데

?? 왜 브라우저 콘솔창에 cookie에서 token을 찾지 못했습니다.가 뜨면서 else 블록으로 빠지는 거지??

 

개발자도구 Network 탭에 cookie에서는 token이 잘 적혀 있는데??

찾아보니까 이건 백엔드에서는 token을 잘 보내온 거라고 하는데..

 

심지어 Headers 탭에서 볼 수 있는 Response Header에도 Set-Cookie 잘 적혀있다..!!

 

 

그래서 어디까지 잘 진행이 되는 건지, 아닌지를 가늠하기 위해서 console.log를 찍어봤다.

 

그랬더니,

response.headers['set-cookie']도, token도 undefined가 나왔다.

(나중에 알고 보니 response.headers['set-cookie']가 undefined가 나온 건 웹 보안 및 개인정보 보호 문제 때문에 클라이언트인 브라우저에서 그 내용을 확인할 수 없도록 되어 있어서 undefined가 나오는 게 정상이라고 한다)

 

token이 undefined이었던 건,

 

검색했을 때

axios로 로그인 정보를 서버로 보낼 때, withCredentials 옵션을 true로 설정하면 된다고 하길래

추가해주었다.

 

그랬더니 콘솔창에 무시무시한 에러가 3개나 떴다.

 

이 이유를 또 탐색해봤더니,

 

백엔드 코드의 Express cors 미들웨어에서 origin 옵션을 *로 작성해둔 것에서

현재 내가 작성하고 있는 프론트엔드 주소인 http://localhost:3001로 특정지어 주면 된다고 하더라.

그렇게 로그인을 시도했더니

뜻대로 안 될때는 여기에 아무 것도 없었는데 ㄷ..됐다?!

Network 탭도 이렇게 바뀌었다!

redux store에 저장하고 있는 로그인 여부 상태를 console.log 찍어뒀었는데

그것마저 true!!!

 

와우 진짜 됐다!

 

으음.. 그런데 내가 token 만료 시간을 1시간으로 해뒀는데, 로그아웃 누르면 즉시 그 token이 파기되는 게 아닌 건가...?

 

좀 더 공부해 봐야겠다..

 

이로써 초보 풀스택 지망생의 첫 trobleshooting 포스팅 끝-