<aside> 💡 "동네방네” 는 지도 기반의 로컬 SNS 서비스입니다.
"우리 동네를 더욱 특별하게 만들어보세요!"
"나만 아는 장소를 지도에 표시하고 동네를 꾸며보세요!"
</aside>
Front-End
Tools
| 사용 기술 | 기술 설명 |
|---|---|
| (tanstack) React-query | 데이터 캐싱을 통한 불필요한 네트워크 요청 방지, 손쉬운 네트워크 상태 제공의 이유로 채택. |
| Zustand | 클라이언트 상태를 전역으로 관리하기 위해 사용 |
| TypeScript | 자바스크립트의 유연성을 유지하면서 컴파일 시점에 타입 체크를 통해 오류를 사전에 발견하여 안정적인 코드를 작성할 수 있도록 사용 |
| Vite | 번들링을 생략하여 개발 서버를 빠르게 구동하고 어플리케이션에 대한 변경사항을 빠르게 반영하기 위해 사용 |
| WebSocket | HTTP는 단방향 통신으로 클라이언트가 요청을 보내는 경우만 응답할 수 있어 실시간으로 서로 원할때 데이터를 주고 받을 수 있는 WebSocket을 적용 |
| SockJS | WebSocket이 모든 브라우저에서 지원되지 않는 문제로 인해, 다양한 전송 프로토콜을 지원하고 웹서버와 브라우저 간에 최적의 프로토콜을 선택하여 통신할 수 있는 해당 기술을 선택 |
| STOMP | STOMP는 메시지의 전송과 구독, 다양한 프로토콜과의 통합이 용이하여 메시지 전송과 관련된 복잡한 작업을 효과적으로 처리하고 설계, 유지보수 할 수 있기 때문에 WebSocket과 함께적용 |
| SSE | 단방향 통신만 필요한 알림의 경우, 웹소켓보다 더 경량화되어 쉽게 구현할 수 있고 서버 간의 데이터의 단순한 전달이 목적이므로 SSE 적용 |