지금까지 공부한 NestJS의 구조와 기능과 Socket.io를 적용해보기 좋은 예제가 무엇일까 생각을 하다가. 지역기반 채팅앱을 만들어보기로 했다. 앱을 만드는 과정을 공유하면서 내용을 추가로 정리하면 좋을 것 같아 블로그 포스팅 시리즈를 만들기로 했다. (스스로에 대한 감시도 겸사겸사...)

나중에 지역기반 서비스를 확장할 생각이 있기 때문에 미리 만들어 보는 것은 좋을 것이라 생각한다. (기획은 있으나 막상 들어가는 기능들을 구현하려면 공부할 내용이 많았다....)

지역기반 채팅앱인 이유는 각 지방 사람들이 이야기할 수 있는 공간이 있으면 좋겠다 생각해서 만들어보기로 했다. 물론 지금도 소모임이나 카카오톡 오픈 채팅방이 있지만 조금 더 청년층이 접근하기 좋은 채팅방을 만들고자 한다. (이 부분 때문에 나이 제한을 걸지는 고민 중)

혼자 개발을 진행할 예정이라 지금은 실제 서비스를 만든다보기보다는 배운 내용을 복습하고 익히는 과정으로 삼고자 한다.

우선은 백엔드 위주로 (거의 ) 공부를 했기 때문에 백엔드 로직을 우선 만들고 그에 맞는 프론트 부분을 맞춰서 공부하려고 한다.

그리고 중간에 TDD 및 데브옵스 요소(젠킨스 , 도커)를 적용할 수 있다면 해보려고 한다.

전체 기능 구성

💫 로컬, 구글, 카카오 소셜 로그인

가장 기본인 회원가입 기능을 다룰 때 총 3가지의 전략으로 진행을 하려고 한다.

우선 사이트에서 로컬로 가입을 하는 경우에는 기존대로 email, password를 받아 회원가입을 진행하도록 하고자 한다.

다음으로 소셜 로그인 같은 경우 기존에 진행해볼 기회가 없었기 때문에 이번에 만들면서 Oauth의 개념도 확실히 정리하고 싶다.

구글과 카카오만 진행을 하는 이유는 구글은 전세계적으로 가입을 하기 쉬운 플랫폼(전세계를 노리는 건 아니지만)이기 때문이고 카카오는 한국 서비스 대부분에서 지원을 하는 기능이기 때문이다.

💫 위치 정보 받아서 유저 정보에 반영

위치 정보를 기반으로 (해당 유저가 권한을 허용했다는 전제로) 그 유저의 위치 정보를 설정하여 해당하는 지역에 채팅방에 들어갈 수 있는 권한을 주고자 한다.
위치는 기존 유저에 정보에 업데이트하는 식으로 진행을 하고 한 위치만 설정할 수 있도록 하고자 한다.

이를 위해 카카오맵 api를 이용해보려고 한다. 실제 기능을 구현해본 적이 없기 때문에 수정사항이 생길 수 있다.

💫 위치 정보 기반 채팅방 추천

위에 입력된 정보를 바탕으로 자신이 설정한 주소에 맞는 채팅방에서 대화가 가능하도록 하려고 한다.

예를 들어 경기도 성남시 거주자는 경기도 채팅방 또는 성남시 채팅방에 들어갈 수 있는 것이다.

💫 채팅 정보 기록

채팅로그를 남겨서 다시 채팅방에 접속하면 이전에 채팅 기록들을 불러낼 수 있도록 하려고 한다.

✅ 백엔드 기능 마인드맵

프레임워크

프레임워크는 NestJs를 사용을 할 예정이다. 채팅기능과 기존 crud기능을 한 프로젝트에 담을 예정이기 때문에 조금 더 정확한 아키텍쳐구조가 있는 NestJS가 좋을 것 같다고 생각했다.(개인적으로 구조가 잡혀있고 TypeScript와 호환성이 좋은 NestJS를 선호한다)

인증 - 인가

인증은 위에 언급한대로 local 전략과 Oauth 2가지 방향으로 진행을 하고 Passport의 strategy를 여러개 설정하여 각 API를 만드는 방향으로 진행하려고 한다.

그리고 로그인 시 토큰은 Jwt를 통해 쿠키에 담아서 인가를 진행을 할려고 한다.

채팅

실시간 소통

실시간 소통은 Socket.io를 통해서 진행하려고 한다. 네스트와 호환이 잘되기도 하고 NameSpace와 Room 기능을 적극 활용하려고 하기 때문에 Socket.io가 적합하다고 생각했다.

채팅방 리스트

채팅방 리스트를 유저의 위치 정보에 맞춰서 뿌려주는 기능이 필요하다. 경기 성남 유저면 경기 채팅방 + 성남시 채팅방

채팅 내용

채팅방에서 진행된 유저의 채팅 로그를 조회하는 기능이 필요하다. 이 채팅은 Broadcast를 이용해서 다른 유저가 새로운 채팅을 작성한 경우에도 내용 확인이 가능해야 한다.

데이터베이스

데이터베이스는 총 2가지를 사용한다. 우선 User부분은 mariaDB와 typeorm을 이용해서 RDBMS에 기록을 하려고 한다.
향후 서비스가 확장이 된다면 여러 스키마가 추가되는 경우가 생길 것이기 때문에 확장성을 생각해서 RDBMS로 진행하려고 한다.

그리고 실시간으로 데이터가 쌓이는 채팅 내용같은 경우 NoSQL에 Collection으로 자료를 쌓기만 하면 되기 때문에 몽고DB로 진행을 하는 것이 적합할 것이라 생각했다.

물론 한 프로젝트에 2가지 데이터베이스를 각각 써보는 것이 처음이기 때문에 향후 막히게 되면 아마 MongoDB로만 진행을 할 것 같다.

Third Party API

이 경우는 처음 위치 정보를 가져오는 기능을 위해 카카오맵 API를 이용하여 정보를 받아오고 이를 User 정보에 업데이트 하는 식으로 진행을 하려고 한다.

Documentation을 위해서 Swagger를 이용해서 Nest에 직접 데코레이터로 심어 Dpcumetation을 진행하려고 한다.

✅ 프론트 엔드 기능 마인드맵

프레임워크

개인적으로 공부를 진행한 것이 React이고 관련해서 참고자료를 가지고 있기 때문에 react의 컴포넌트 개념을 익혀가면서 제작을 해보려고 한다.

(우선은 react로 진행을 하기전에 static html파일을 바탕으로 기능을 확인 후 react로 업그레이드 하는 식으로 진행을 하는 것이 현실적일 것 같다. )

회원가입/로그인

소셜로그인 부분과 로컬 로그인 부분에 대해서 각각 페이지/api를 만들어야 할 것이다.

위치정보

위치 정보를 받아 백엔드에 전달하는 과정이 필요하다.

Chat room list

user 정보에 담긴 위치 정보를 바탕으로 그에 맞는 chat room을 보여주어야 한다.

chat log

채팅 기록을 조회해서 보여준다.

✅ 데브옵스 기능 마인드맵

테스트같은 경우 TDD로 적용을 하면서 작업을 할 지 기능을 만들고 테스트를 할 지는 모르겠지만 통합테스트는 꼭 진행해보려고 한다. 통합테스트 같은 경우 DB가 어지러워지는 것을 막기 위해 테스트용 DB를 이용해보려고 한다.

테스트툴은 NestJs에서 적극 지원하는 Jest를 이용해서 익숙해지려고 한다.

배포같은 경우 도커를 이용해서 배포를 진행해보려고 하고 젠킨스까지 할 수 있으면 적용해보고 싶다.

---

혼자 진행을 하는 것이라 얼만큼의 기간이 걸릴지는 모르겠지만 최대한 Scrum을 짜고 진행을 해보려고 한다.