전체 글(71)
-
Offset, Cursor 기반 페이지네이션 [타임라인 기능 구현]
페이지네이션이란?일반적인 경우 많은 양의 데이터를 조회할 때 한 번에 가져오지 않고 페이지로 쪼개서 가져온다. 이를 페이지네이션(Pagination)이라고 하며 특정한 정렬 기준에 따라, 지정된 갯수의 데이터를 가져오는 것이다.페이지네이션은 대표적으로 다음과 같이 두 가지 방식으로 처리된다.오프셋 기반 페이지네이션 (Offset-Based Pagination)커서 기반 페이지네이션 (Cursor-Based Pagination)각각의 특징과 장단점을 살펴보고, 커서 기반 페이지네이션으로 타임라인 기능을 구현한 경험을 작성하겠습니다. 오프셋 기반 페이지네이션LIMIT, OFFSET 쿼리를 사용해 '페이지' 단위로 구분하여 응답하도록 구현한다. SELECT * FROM feed ORDER BY feed_id..
2024.08.16 -
[프로젝트] 캐시를 통한 좋아요, 팔로우 로직 최적화
Flickr(플리커) 프로젝트 개발 중 Redis 캐시를 사용해 다음 로직을 구현했습니다. 1. 피드 좋아요 누르기, 해제하기 위 사진처럼 어떤 게시글에 하트를 누름으로써 좋아요 누름/해제 기능이 일어납니다.주의 사항 : 사용자는 게시글 좋아요를 단시간동안 여러 번 클릭할 수 있음하트를 누르는 것만으로 체크/해제가 발생함좋아요 로직은 사용자가 빠른 시간에 파바박 클릭할 수 있어, 짧은 시간에 많은 요청이 들어올 수 있습니다. 이런 경우 프런트단에서 디바운싱, 쓰로틀링을 통해 막아줄 수 있다고 합니다. 저는 쓰로틀링 기법을 사용했습니다. 디바운스(Debounce)연속적으로 발생하는 이벤트를 제어하며, 일정 시간 동안 이벤트가 발생하지 않을 때 마지막 이벤트만을 처리하는 방법입력이 멈춘 후, 일정 시간 동..
2024.08.10 -
[프로젝트] Pagination 으로 피드 랜덤조회 개선
Flickr(플리커) 개인 프로젝트 개발 중에, k6을 이용해 부하 테스트를 해보고 성능 개선 경험을 적어보려고 한다. k6란?오픈 소스 성능 테스트 툴로, 쉽고 간편하게 스크립트를 작성하고, 테스트 해볼 수 있음성능이 뛰어나고 테스트가 간편해 채택하였다.MAC 에서 k6 설치brew install k6 위 명령어로 새로운 script.js 스크립트 파일을 생성해, 테스트를 수행할 수 있다. 플리커 홈 화면 홈에서 새로고침을 할 때마다 전체 피드중에서 랜덤하게 15개를 골라 출력한다.즉 랜덤한 피드(게시글) 15개를 가져오는 로직이 이 서비스의 핵심 기능 중 하나라고 볼 수 있다. 상황 : user 데이터 1000개, feed(게시글) 데이터 10만개라고 가정하고, 부하 테스트를 진행해보자.사진과 같..
2024.08.08 -
[프로젝트] 레디스 Pub/Sub, RabbitMQ 도입으로 구조 개선
노닥 노닥 프로젝트 개발 중에,게시글 작성 시, 작성한 사람의 팔로워들에게 실시간으로 알림 전송누가 자신을 팔로우하면, 알림 전송일주일 치 알림 정보를 저장하고 있어야 함위 알림 기능을 SSE(Sever Sent Events), Redis 로 구현했었다. 관련 포스팅 : https://matt1235.tistory.com/80 클라이언트가 서버에게 subscribe 요청을 보내 SSE 연결을 맺은 후에, 이벤트가 발생 시 서버 -> 클라이언트로메시지를 실시간으로 보내주었다. SSE 연결, 알림 시퀀스 다이어그램 위 그림을 보면 Redis sorted_set 에서 1주일 치 게시글 가져오기 부분이 있다.해당 기능은 timestamp 로 score 를 부여했기에 rangeByScore 쿼리로 현재 ~ 과..
2024.06.18 -
[프로젝트] SSE 로 실시간 알림 기능 구현하기
노닥 노닥 프로젝트 개발 중에,팔로우 한 사용자가 새 게시글을 작성한 경우 팔로워에게 실시간으로 알림 전송알림은 최소 1주일 치의 정보를 가지고 있어야 함 (접속하지 않은 경우에도 알림은 쌓여야 한다.)위 상황에서 알림을 보내는 기능이 필요했다. 대표적으로 Polling, 웹 소켓, SSE 방식을 생각해 볼 수 있는데 폴링은 리소스 낭비가 심할 것 같았고,웹 소켓처럼 양 방향 통신이 필요한 것도 아니었기에, SSE 를 선택했다. (SSE 관련 자세한 내용 설명은 생략합니다.)관련 포스팅 : https://matt1235.tistory.com/79 웹 소켓 & SSE(Server Sent Events)웹 소켓과 SSE를 알아보기 전, 우선 클라이언트와 서버 간의 HTTP 통신에 대해 알아봅시다. HTTP..
2024.06.13 -
웹 소켓 & SSE(Server Sent Events)
웹 소켓과 SSE를 알아보기 전, 우선 클라이언트와 서버 간의 HTTP 통신에 대해 알아봅시다. HTTP 통신HTTP 1.1 이하에서는 클라이언트가 서버에게 요청을 보내고, 응답을 받는 단방향 통신만 가능했습니다.즉 서버가 클라이언트에게 메시지를 보내기 위해서는, 먼저 요청을 받아야 했습니다. 위 방식은 상황에 따른 한계도 분명 존재합니다. 다음 예시를 봅시다. 채팅 앱 내가 상대방에게 메시지를 보내려면 클라이언트에서 서버로 요청을 보내면 된다. OK내가 상대방의 메시지를 보려면 어떻게 해야 할까? 내가 요청을 보내야지만 응답을 받을 수 있다면서..HTTP 에서는 이 문제를 Polling(폴링)으로 해결할 수 있습니다. Polling Polling 을 통해 클라이언트가 주기적으로 서버에게 요청을 보내,..
2024.06.10