웹사이트 주소

https://kihat.tk
첫 몇달 동안은 문제없이 접속이 잘 됐지만 무료 도메인을 사용해서 그런가 시간이 갈수록 연결이 안되는 빈도가 늘어나고 있습니다.
그래서 곧 닫을 생각이고 velog 혹은 github 블로그를 시작하기로 마음을 먹었습니다.

기술 스택

프론트엔드

1. HTML, CSS
2. React, NextJS, TypeScript
3. Redux, Redux-Saga
4. Styled Component
5. SunEditor(텍스트 에디터)

처음에는 자바스크립트로 개발을 했지만 후에 타입스크립트로 다시 했습니다.

React는 제가 자주 사용하는 프레임워크이기 때문에 사용하게 되었고 Next js는 Server Side Rendering을 편하게 하기 위해 선택했습니다.

웹사이트에 전반적으로 쓸 수 있는 데이터를 관리하기 위해 Redux를 사용했고 서버로부터 들어오는 데이터를 Redux와 연동시키기 위해 Redux-Saga를 택했습니다.

포스팅을 위한 텍스트 에디터로 처음에는 DraftJS를 선택했으나 여러 기능들을 넣으려하니 구성이 복잡해서 SunEditor로 바꾸었습니다.

백엔드

1. Express.js
2. Passport.js
3. MySQL
4. Redis

우선 서버는 사람들이 많이 사용하는 프레임워크 중 하나인 Express.js로 선택했습니다. 전에도 사용해본 적도 있고 많은 사람들이 쓰는만큼 이 프레임워크를 보조해주는 라이브러리들이 많았습니다.

로그인 로직을 구현하기 위해 Passport.js를 선택했습니다. 훗날 카카오나 페이스북 로그인을 추가할 수도 있을 것 같아 이를 편하게 해주는 Passport.js가 좋아보였습니다.

데이터베이스로는 관계형 데이터베이스인 MySQL을 이용했습니다. 유저와 게시글 또는 댓글 등을 관계로 연결하면 좋을 것 같아 택했습니다.

마지막으로 로그인 세션을 위해 Redis를 사용했습니다.
처음에는 사용하지 않았지만 node.js의 cluster로 여러 프로세스를 이용해 서버를 돌리니 프로세스마다 서로 다른 세션을 가지게 되니 문제가 생겼습니다.
그래서 이를 통합해주기 위해 Redis를 사용하였고 더 나아가 중복 로그인 시 어떻게 처리할지를 Redis를 이용해 구현할 수 있었습니다.

배포

1. AWS, Vercel, Heroku
2. LetsEncrypt, Cloudflare

처음에는 AWS + LetsEncrypt 조합을 사용하여 HTTPS로 배포하였습니다. 그러나 문제점은 AWS는 1년 동안만 무료였기 때문에 이를 감안해서 프론트엔드는 Vercel에 백엔드는 Heroku에 배포하였습니다. 그리고 HTTPS 보안은 Cloudflare를 통해 하였습니다.