얼굴 아이콘

리얼타임 웹 개발

2017-08-22

Socket.io Node.js Passport.js

나의 첫 외주 프로젝트

어쩌면 운이 좋았던 나의 첫 외주 프로젝트 그것은 작은 제안으로 시작되었다. 불과 2년전 unity를 과외했던 경험이 있었는데 그때 내 수업을 들었던 분이 지인이 웹이 필요하다고 하자 나를 추천해 줬던 것이다.

고객의 요청은 이렇다

‘사내 정보 공유 앱’

  1. 실시간으로 데이터를 주고 받았으면 좋겠다.
  2. 채팅창도 있었으면 좋겠다.
  3. 질문이 오고간다면 바로바로 확인 할 수 있었음 좋겠다.
  4. 포트폴리오로 사용하는건 좋으나, 공개는 불가능

frontend, backend를 해야했다.

‘부트스트랩을 적극적으로 사용했다.’

그렇게 첫 외주 프로젝트가 시작되었다.

스택

회원

회원가입에 있어서 이메일 인증이 필요하다고 전달 받았다. 물론 당연 이메일 인증은 필요했다.

Nodemailer를 통해 이메일 모듈을 개발했으며 가입 요청이 들어오면 회원가입 요청 이메일이 발송되게 하였다.

HTML 이메일 템플릿 처음부터 제작하기를 상당히 많이 참고해 클라이언트가 원하는 디자인에 맞게 이메일 인증을 구현하였다.

실시간 채팅

채팅은 Socket.io를 통해 개발했으며 국내에 나와있는 글들은 상당히 오래되어 제대로 작동하지 않는 부분이 많았다.

Cluster에서

Node.js는 싱글코어를 사용한다고 알려져 있다. 이를 효율적으로 사용하기 위해서 나머지 CPU에도 작업을 분배 해주는 일이 필요한데 나는 pm2 cluster사용해 해당 일을 원할하게 처리했다.

로그인 session이 cluster mode에서 공유되지 않는 문제

상당히 애를 먹었다. 나는 passport 를 사용했고 passport는 자동으로 캐시에 저장해 session을 관리했다. 옵션을 통해 redis에서 session을 관리했고 이 문제는 해결되었다.

실시간 질문글

클라이언트가 가장 중요시 여겻던 부분인데 따로 새로고침 하지 않아도 확인 할 수 있길 바랬다.

Socket을 통해 새로운 글이 등록되면 Json형식으로 보냈으며 (글의 id값과 제목 등)이를 받는 클라이언트는 새로운 글이 등록됐다는 글의 알림과 함께 새로운 글을 최상단에 배치했다.

그외에

그외에도 포인트 기능을 연동해서 간식을 사먹거나 하는 작은 게임을 마련해 사내 인원이 해당 게임을 플레이 후 포인트가 바로 올라가거나 내려가는 행위가 반영되어야 했다.

느낀점

웹 프레임워크가 반드시 필요하다고 느꼈다. 기존에는 React나 Vue가 대체 왜 필요한지 도저히 이해가 안갔으나 앞으로는 대체 React, Vue없이 어떻게 프론트엔드를 개발할 수 있을지 감이 오지 않는다.

그 밖에도 삽질했던 Passport에서의 session을 관리하는 부분이나 처음 접했던 redis 데이터베이스가 인상적이었다.

다음 프로젝트에서 실시간으로 데이터를 주고 받아야한다, 그리고 해당 데이터가 변동 가능성이 상당히 높다면 그런 부분은 redis로 만들어 보고싶다.