본문 바로가기

전체 글157

[Spring Boot & React] MongoDB와 WebSocket으로 구현하는 실시간 채팅 시스템 (JPA 하이브리드 설계) 실시간 통신이 필요한 채팅 서비스를 구현할 때, 데이터베이스 선택과 통신 프로토콜 설계는 가장 중요한 고민거리입니다. 이번 포스팅에서는 **MariaDB(JPA)**의 안정성과 MongoDB의 유연함을 결합한 하이브리드 아키텍처를 바탕으로, **WebSocket(STOMP)**을 이용해 실시간 채팅을 구현한 과정을 공유합니다. 1. 하이브리드 데이터베이스 설계 (JPA + MongoDB)모든 데이터를 한 곳에 담지 않고, 성격에 따라 데이터베이스를 분리하여 효율을 높였습니다.MariaDB (JPA): 채팅방 이름, 생성일, 최대 참여 인원 등 정적인 메타데이터를 저장합니다. 데이터 일관성이 중요한 '방 관리'에 적합합니다.MongoDB: 방대하게 쌓이는 **채팅 메시지(비정형 데이터)**를 저장합니다... 2025. 12. 14.
📝 [React/MUI] DataGrid 로우 클릭 이벤트와 Zustand를 활용한 동적 모달 구현 (feat. 유튜브 응원가 재생) 1. 개요 및 기술 스택최근 프로젝트에서 DataGrid(표)의 특정 로우(행) 클릭 시, 해당 행의 정보를 기반으로 상세 모달을 띄우고 유튜브 영상을 재생하는 기능을 구현했습니다. 이 글에서는 React Hooks, Material UI (MUI), **Zustand (전역 상태 관리)**를 사용하여 이 과정을 어떻게 효율적이고 깔끔하게 처리했는지 공유합니다.🛠️ 사용된 주요 기술기술 스택역할최적화 포인트Zustand전역 모달/다이얼로그 상태 관리props drilling 방지, 컴포넌트 간 결합도 최소화MUI DataGrid선수 목록 테이블로우 클릭 이벤트 (onRowClick) 활용react-youtube모달 내 유튜브 플레이어 렌더링간편한 재생/정지 제어useCallback이벤트 핸들러 최적화불.. 2025. 12. 12.
🚀 성능 최적화: React 커스텀 훅 useDebounce를 활용한 지연 검색 구현 안녕하세요! 프론트엔드 개발 시 마주치는 흔한 성능 저하 문제 중 하나는 불필요한 API 호출입니다. 특히 검색 기능에서 사용자가 키보드를 누를 때마다(onChange) 서버에 쿼리를 날리면, 서버 부하 증가와 함께 느린 사용자 경험을 유발합니다.저희 프로젝트에서도 DataGrid에 페이징을 적용한 선수 목록 검색 기능에서 이 문제가 발생하여, useDebounce 훅을 활용한 지연 검색(Debounced Search) 방식으로 성능을 획기적으로 개선했습니다.이 글에서는 이 최적화 방법을 상세 코드와 함께 공유합니다. 1. 🔍 문제 진단: 왜 onChange는 위험한가?기존의 검색 로직은 다음과 같이 작동했습니다.키 입력 (onChange) 발생 -> searchKeyword 상태 변경usePaging.. 2025. 12. 12.
[Vite/React + Spring Boot] 카카오 소셜 로그인 완벽 연동 가이드 📝 1단계: 카카오 개발자 센터 및 환경 설정1. 카카오 개발자 센터 설정 요약REST API 키: 발급 후 확인. (Client ID로 사용)로그인 Redirect URI: http://localhost:3000/oauth/kakao 등록.로그아웃 Redirect URI (SSO 해제용): http://localhost:3000 등록.동의 항목: 닉네임, 이메일 등 필수 항목 설정.2. 환경 변수 (.env) 설정 # .env (프로젝트 루트)VITE_KAKAO_REST_API_KEY="YOUR_REST_API_KEY"VITE_KAKAO_REDIRECT_URI="http://localhost:3000/oauth/kakao"💻 2단계: 프론트엔드 (React + Zustand) 구현 상세1. Logi.. 2025. 12. 11.

티스토리툴바