http 모듈을 활용한 웹 서버 생성 및 쿠키 설정하기
최근에 리액트로 블로그 만들기 프로젝트를 진행하고 있는데 아쉽게도 마지막으로 계셨던 백엔드 개발자 분도 개인사정으로 팀을 떠나시게 되면서 프론트엔드 개발자 세 명만 남게 되었다.. (다행히 이번에 새로운 백엔드 개발자 분들이 들어오셨다..!) 그래서 급하게 며칠동안 백엔드 파트를 열심히 공부하게 되었는데 어차피 소셜 로그인 기능도 구현해야 하고 이래 저래 알아두면 다 도움이 되겠지라는 마음으로 Node.js로 웹 서버에서 쿠키를 설정해 사용자 인증을 하는 간단한 예제를 구현해 보았다. 그러나 현재 로그아웃 부분에서 302 응답 헤더를 보냈는데 이 부분이 제대로 구현되지 않고 있어 어떤 점이 문제인지 구글링 + 노마드 코더 개발 커뮤니티에 질문을 한 상태인데 아직까지 해결은 하지 못했다. 추후에 해결을 하게 되면 수정 코드도 같이 올릴 생각이다.
일단 http 모듈과 express가 기능 면에서 아주 큰 차이가 있는 것은 아니지만 기본적으로 express를 사용하면 라우팅과 rest api 처리를 http 모듈을 사용했을 때보다 훨씬 깔끔하게 처리할 수 있다. 그래서 다음번에는 express를 활용한 예제를 구현해서 공부할 생각이다.
이 쿠키를 활용한 코드도 다음에 express 프레임워크를 활용해서 리팩토링 할 수 있을 것 같다. (간단한 예제니까!)
일단 웹 서버를 공부하면서 프론트와 백엔드 통신 방식이나 배포 시 유의해야 될 점 등을 고려하다보니 전체적인 웹 개발에 대한 이해도가 엄청 높아진 기분이다. Express 모듈을 활용하면 react에서 react-router-dom을 사용해서 라우팅하는 것과 동일하게 백에서 라우팅을 처리해 줄 수 있는데 react에서 처리하는 라우팅은 SPA,즉 CSR이고 Express 모듈을 활용하면 전통적인 렌더링 방식인 SSR이 된다. 여기서 Express와 CSR, SSR을 너무 나가버리면 글이 너무 길어질 것 같아서 Express 모듈과 CSR과 SSR은 다음 포스팅에서 다루도록 하겠다.
여튼 모두 웹 개발을 위해서는 꼭 알고 있어야 하는 내용이라고 생각한다.
내가 만든 예제는 맨 처음 접속 시, 로그인 버튼을 두고 로그인 버튼을 누르면 로그인 폼을 렌더링한다. 로그인이 틀렸으면 틀렸다는 내용과 함께 다시 로그인 버튼을 렌더링하고 로그인에 성공하면 성공 문구와 함께 로그아웃 버튼을 렌더링 한다. 여기까지는 되는데, 문제는 로그아웃 버튼을 눌렀을 때 제대로 응답 헤더가 전달되지 않아 에러가 나고 있다. 얼른 이 부분을 수정해야 하는데, 생활 코딩 강의를 보고 코드를 한참 들여다 봐도 핵심부분에 있어서 내 코드와 로직이 다른 것 같진 않은데 왜 생활코딩님은 되고 나는 안 되는 건지 😂
여튼 추후에 수정 코드도 꼭 업로드 할 수 있도록 하겠다! 이제 얼른 passport 공부하고 카카오 소셜 로그인 기능을 구현해 봐야겠다!
2021.05.23 문제 해결
상위 코드 34~39번 라인 주석처리 하면 로그아웃 잘 된다! ^&^ 아마 로그아웃 처리 할 때 res.writeHead는 비동기처리이므로 남아 있는 쿠키 정보가 상위 코드 때문에 삭제 되지 못하고 시간 차 처리로 계속 값이 남아있던 것으로 짐작된다.. 역시 내 맘대로 동작하면 개발이 아니지~~ 여튼 이제 발 뻗고 잘 수 있을 것 같다.
.fin