[SWM] 소마 7월 회고 - 기술 및 아키텍처 설계, 스프린트 시작

1. 기술 및 아키텍처 설계

프런트엔드 기술 스택의 경우에는 프런트엔드 개발 담당인 연수생B가 구성 후 우리에게 공유하였다. 나와 연수생A는 백엔드 파트 기술 스택 구성과 AWS 아키텍처 설계를 담당하였다. AWS 아키텍처 설계의 경우, 우리의 담당 멘토님이신 멘토님A의 도움을 받았다. 멘토님A는 현재 AWS 커뮤니티 빌더(Community Builder)로 활동하시는 AWS 전문가이시다. 덕분에 이전에 경험해보지 못한 보안과 대용량 트래픽을 고려한 서버/DB 아키텍처를 설계하고 구축해 볼 수 있었다.

1.1. 기술 스택 선택하기

프론트엔드 파트에서 선정된 기술 스택은 다음과 같다.

• TypeScript/ReactJS
• React-Router
• Styled-Components
• Zustand

 

백엔드와 데이터베이스 파트에서 최종적으로 선택한 기술 스택은 다음과 같다.

• TypeScript/Nest.js
• Socket.io
• TypeORM/MySQL
• (+) Redis

연수생A와 백엔드 기술 스택 선택에 대한 이야기를 나누어본 결과 공통적으로 객체 지향 프로그래밍(OOP)에 대한 관심을 가지고 있었다. 하지만 나와 연수생A 모두 Node.js와 Express을 주로 활용해왔는데 우리가 익숙하게 사용했던 JavaScript는 객체 지향적으로 설계하기에는 까다로운 부분들이 있다. 따라서, 객체 지향적인 문법과 구조를 지원하는 TypeScript를 활용하기로 결정했다. 처음에는 대표적인 객체 지향 언어인 Java를 고려해보기도 했지만 짧은 기간 내에 새로운 언어와 프레임워크를 익혀 활용하는 것은 완성도 있는 결과물을 도출해야하는 프로젝트의 특성 상 한계가 있을 것이라고 판단했다. TypeScript는 기본적으로 JavaScript를 기반으로 하기 때문에 빠르게 익히고 활용하기에 적합했으며, 타입 시스템으로 에러 발생 가능성을 사전에 방지하는 등의 장점도 있다. 백엔드 프레임워크는 TypeScript와 궁합이 좋은 NestJS를 선택했다. NestJS는 다양한 라이브러리를 쉽게 설치하며 기능을 확장할 수 있다는 Node.js의 장점은 그대로 가지면서 모듈/컴포넌트 기반으로 재사용성과 유지보수성이 높은 코드 구조를 설계할 수 있다. 이또한 결국엔 완벽한 객체 지향을 위한 선택이었던 것이다. '지금갈게' 서비스의 경우 '실시간성'이 가장 핵심적인 구현 요소이기 때문에 양방향 통신을 통한 실시간 요청을 처리를 위한 웹소켓으로 Socket.io를 활용한다. 데이터베이스의 경우 관계형 DB인 MySQL을 사용하되 TypeORM으로 매핑할 예정이다.  

1-2. AWS 대용량 아키텍처 구성하기

최종적으로 구성된 AWS 시스템 구성도는 다음과 같다.

• Amazon S3/CloudFront
• Amazon EC2/ELB/NatGateway
• Amazon AutoScalingGroup
• Amazon Route53/CertificateManager
• Amazon RDS/ElasticCacheForRedis

서버 아키텍처는 대용량 트래픽과 보안, 고성능을 고려한 구성해봤다. 소마에서 팀별로 클라우드 지원금을 지급하기 때문에 AWS 환경에 직접 구축도 해볼 수 있었다. 우선 연수생A와 함께 멘토님A의 도움을 받아 실제 프로젝트에 적용될 스펙과 동일하게 연습용 클라우드 환경 구축 실습을 진행했다. 클라이언트 측은 S3를 사용하여 웹사이트를 호스팅했고, 이에 전송 속도와 보안성을 높이고자 CDN 서비스인 Cloudfront를 덧붙혔다. 서버 측은 두 개의 EC2 인스턴스와 ELB를 활용하여 분산 서버를 구축했다. 이때, 보안을 고려하여 두 개의 EC2 인스턴스는 두 개의 가용영역 내 각각의 프라이빗 서브넷 영역에 위치시키고, 외부 인터넷 통신을 위한 Nat Gateway와 프라이빗 인스턴스 접근을 위한 bastion host까지 구축했다. 이들은 Auto Scaling Group으로 인스턴스 수와 크기가 자동으로 관리된다. 관계형 데이터베이스의 경우 RDS를 이중화하여 데이터베이스 장애 등에 대비하고, 읽기 전용 복제본(Replica)으로 분산 DB를 구성하여 데이터베이스 조회 성능을 높혔다. 마지막으로 데이터 캐싱과 메시지 PUP/SUB을 지원하기 위한 ElastiCache for Redis를 Master-Slave 구조로 이중화했다.

 

 

2. 스프린트 시작

첫 스프린트가 시작되었다. 먼저, Jira 팀 페이지에 전반적은 로드맵과 백로그를 정의한 후 담당자까지 지정해서 등록하였다. 이전까지는 중구난방으로 할 일을 정의하고, 아무나 해당 일처리를 진행했다면 애자일(스크럼) 개발 방식 도입 후에는 능률이 확실히 올랐다. 우선, 스프린트와 백로그를 확실하게 정의하고 이를 기록으로 남겨두게 되어 프로젝트 진행 현황이나 내가 해야할 일을 한눈에 확인할 수 있었고, 스프린트 기간이 정해져 있다 보니 작업들이 뒤로 밀리지 않고 체계적으로 마무리가 된다는 느낌을 받았다. 또, 중간중간 발생하는 이슈들에 대해 일정 딜레이 없이 효과적으로 관리할 수 있었다.

2-1. Socket.io를 활용한 채팅방 만들어보기

나와 연수생A 모두 Socket.io와 같은 웹소켓은 처음 사용해 보았다. 자세한 통신 방법이나 사용법에 대한 이해도 부족했기 때문에 Socket.io를 본 프로젝트에 바로 적용하는 것은 무리가 있다고 판단했다. 따라서, 스터디를 통해 웹소켓(Socket.io)에 대한 기본지식 및 개념을 공부하고, 채팅방을 구현하는 미니 프로젝트를 개인적으로 진행해 보기로 했다. 스터디는 Socket.io 공식문서(https://socket.io)와 유튜브 강의 등의 학습자료로 공부한 후 그 내용을 레퍼런스와 함께 노션에 정리해서 공유했다. 이후 소켓 통신을 구현할 수 있는 대표 예제를 참고하여 채팅방 프로그램을 구현했다. namespace와 room의 개념, 그리고 발행(Publish)에 해당하는 emit과 구독(Subscribe)에 해당하는 on 기능을 활용했다. 백엔드와 데이터베이스 파트 또한 공식 문서 등을 활용해 NestJS와 TypeORM/MySQL로 구현하는 방법을 익혀 적용했다. 

https://github.com/J1Yun/simple-chatting-web

GitHub - J1Yun/simple-chatting-web: NestJS, TypeORM, Socket.io를 활용한 채팅 구현 실습

 

2-2. JWT와 Passport를 활용한 로그인 인증 기능 구현하기

본격적인 MVP 개발에 들어가기 이전에 먼저 서비스 로직과 관계없는 로그인 인증 기능을 구현하기로 했다. 기존에 토이 프로젝트를 진행할 때는 주로 쿠키와 세션을 통해 인증 기능을 구현해왔지만 이번에는 확장성을 고려해 토큰 기반의 인증 방식을 채택했다. 그 중에서 가장 대표적인 JWT 토큰을 활용해 로그인 정보를 관리한다. 로그인 성공 시 서버는 JWT 토큰을 발급해 이를 클라이언트에서 관리하도록 넘겨준다. 토큰 인증 방식 및 JWT와 관련한 상세 내용은 블로그 포스팅을 참고하면 된다. JWT와 더불어 Passport.js라는 라이브러리도 함께 사용한다. Passport.js JWT 토큰으로 '인증'을 수행할 수 있도록 하는 Node.js의 미들웨어이다. passport에는 여러 strategy(전략)이 있는데 단순히 JWT 토큰을 읽어와 사용자를 인증하도록 아래 사진과 같이 JwtStrategy를 작성했다. 이와함께 @UseGuards() 데코레이터를 통해 사용자 정보 확인이 필요한 API 호출 시 인증 과정이 수행되도록 구현했다.

JwtStrategy