J2ong 님의 블로그

안녕하세요! 이번 게시글에서는 웹소켓을 통한 실시간 메시지 전송 방법을 공유하려 합니다.제 프로젝트에서 가장 많은 시간을 할애한 기능입니다.📌 WebSoket과 STOMP의 이해우선 WebSoket과 STOMP가 무엇인지에 대한 이해가 필요합니다.저는 다른 관련 정보들을 읽어보고 제대로 이해하지 않은 채 WebSoket만을 통해 채팅 시스템을 구현했었는데요.WebSoket만으로 구현했을 때는 사용자가 채팅방에 참여할 때마다 새로운 WebSocket 연결을 관리해야 했고, 특정 방의 메시지만 받아야 하는데 이를 수동으로 필터링해야 해서 코드가 복잡해졌습니다.그제서야 검색을 통해서 STOMP에 대한걸 접해서 코드를 대폭 수정할 수 밖에 없었습니다. 그로 인해 시간을 많이 소비하게 되었네요.저처럼 다른 사..

안녕하세요! 이번 게시글에서는 저번 게시물에서 다룬 카카오 간편 로그인, 네이버 간편 로그인에 이어, Spring + React 프로젝트의 구글 간편 로그인 기능 구현 방법을 공유하려 합니다.📌 Google Cloud Console구글 간편 로그인을 구현하기 위해서는 카카오 간편 로그인과 네이버 간편 로그인 처럼 개발자 센터에서 API 설정을 해줘야 합니다.구글 로그인은 네이버 로그인과 동일한 방식으로 동작합니다.로그인 성공 후 인증 코드를 먼저 반환하고, 이 코드를 이용해 access token을 요청한 뒤 개인정보를 가져옵니다.자세한 사항은 구글 클라우드 API 문서를 참고해주세요. REST API 사용 | Identity Platform Documentation | Google Cloud의..

안녕하세요! 이번 게시글에서는 저번 게시물에서 다룬 카카오 간편 로그인에 이어, Spring + React 프로젝트의 네이버 간편 로그인 기능 구현 방법을 공유하려 합니다.📌 NAVER Devlopers네이버 간편 로그인을 구현하기 위해서는 NAVER Developers에서 애플리케이션을 등록하고 API 설정을 진행해야 합니다. 네이버 간편 로그인은 카카오와 조금 다른 방식으로 동작하는데요.카카오 로그인은 로그인 요청 후 받은 토큰으로 개인정보를 가져올 수 있지만,네이버 로그인은 로그인 성공 후 인증 코드를 먼저 반환하고, 이 코드를 이용해 access token을 요청한 뒤 개인정보를 가져올 수 있습니다.보다 자세한 사항은 네이버 로그인 개발 가이드를 참고하세요. 네이버 로그인 개발가이드 - LOGI..

안녕하세요! 이번 게시글에서는 Spring + React 프로젝트의 카카오 간편 로그인 기능 구현을 공유하려 합니다.📌 Kakao Devlopers우선 카카오의 간편 로그인 기능을 구현하기 위해서는 kakao developers를 설정해줘야 합니다. 저는 조금 더 간편하게 구현하기 위해서 JavaScript SDK를 이용해서 진행했습니다. 아래는 JavaScript SDK를 사용한 카카오 로그인 과정을 나타낸 시퀀스 다이어그램(Sequence diagram)입니다.자세한 설명은 카카오 개발자 센터 API 문서를 참고해주세요. Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.deve..

안녕하세요!이번 게시글에서는 Spring + React 프로젝트의 인피니트 스크롤을 활용한 페이징 구현 방법을 공유하려 합니다.📌 트래픽 최적화에 대한 고민웹 서비스를 개발할 때, 특히 SNS와 같은 데이터 중심 애플리케이션에서는 트래픽 최적화가 중요한 문제입니다.저 역시 TalkHub를 개발하면서 트래픽 감소 및 성능 최적화에 대한 고민을 많이 했습니다.제가 개발한 프로젝트에서 가장 많은 트래픽이 발생할 가능성이 있는 기능은 다음과 같습니다.게시글 리스트 조회 (피드 로딩) 메시지 리스트 조회 (채팅 내역 불러오기) 초기에는 한 번에 모든 데이터를 불러오는 방식을 고려했지만, 데이터가 많아질수록 서버 부하가 커지고 사용자 경험(UX)도 저하될 위험이 있었습니다.따라서, 페이징(Pagination) ..