📌 나만모른닭 프로젝트 내 사용기술 선정이유 정리 포스팅 입니다 :)
1. styled-components
선정이유
JavaScript로 작성된 컴포넌트에 스타일을 바로 정의하는 Css-in-Js 방식을 사용하여 빠르게 프로젝트를 진행시키기 위함.👍장점
- 자유로운 CSS 커스텀 컴포넌트를 만들 수 있다.
- 모바일 지원이 가능하다
- 중복될 가능성이 높은 className의 중복을 막을수 있음
- 컴포넌트의 props를 참조할 수 있으며, props의 값에 따라 스타일을 다르게 적용할 수 있음.
2. Redux- toolkit
선정이유
컨포넌트 내에서 관리하는 상태값이 페이지 이동으로 인해 유지되지 않는 문제가 생김.상태의 일관성을 유지하기 위해 전역으로 상태값을 저장할 수 있는 방법이 필요했음👍장점
- 리덕스 툴킷은 리덕스 보다 코드가 간결하고 전용 dev tool, 사용에 있어 익숙함 등, 개발 시 문제가 생길 경우 보다 빠르게 원인을 찾아낼 수 있음
- Redux사용의 단점이라 할 수 있는 보일러플레이트 코드를 줄일 수 있음
- 패키지 의존성을 줄일 수 있음 ( Redux 사용시 immer, redux devtool 등의 라이브러리들을 설치해야 하는 경우가 자주 발생 하는데 Redux-Toolkit 의 경우 이러한 라이브러리를 내장하고 있음 )
3. WebRTC (Mesh)
선정이유
실시간 화상 및 음성 채팅 기반의 게임 서비스를 만들기 위해서 도입
사비스 특성상 한 게임룸의 최대 인원이 4명인 점을 고려하여 peer간의 직접 연결이 클라이언트의 부하를 심하게 주지 않을것으로 판단하여 실시간성이 보장되고 서버의 부하가 적은 Mesh 방식을 채택👍장점
- 최초의 peer 간 연결 정보 중계이외의 서버 부하가 발생하지 않기 떄문에 서버자원 소모가 적음
- peer 간 직접 연결로 데이터 송수신이 이루어지므로 실시간성이 보장 됨
( peer 간 연결이 늘어날 수록 클라이언트의 부하가 심해 질 수 있음)
4. STOMP + SockJS
선정이유
텍스트 채팅을 구현함에 있어 WebSocket을 관리하여 메시지 처리를 필요가 있었고, 다양한 브라우저에서 채팅 기능을 동일하게 작동할 수 있도록 일관성을 보장할 필요가 있었음.👍장점
- SockJs : WebSocket을 지원하지 않는 브라우저를 대상으로 xhr-streaming, xhr-polling을 제공해 WebSocket을 지원할 때와 동일하게 기능이 작동하도록 도와줌.
- STOMP : 메시지에 대한 관리를 pub/sub으로 관리하여 메세지를 공급하는 주체와 소비하는 주체로 나누어 같은 Topic(게임 방)을 구독하는 대상에게 쉽게 메시지를 보낼 수 있음.
개발 블로그