2025/07 23

메인페이지 무한 스크롤 기능

kkrap 프로젝트의 메인페이지에서 다른 사람들의 폴더들을 구경할 수 있는 무한 스크롤 기능을 구현하게 되었다 그 과정에 대해 기술한다.기능 개요무엇을 위한 기능인가?사용자가 다른 사용자들의 폴더를 시간순으로 탐색할 수 있도록, Instagram 피드처럼 무한 스크롤 방식으로 폴더 목록을 제공하는 기능사용자에게 어떤 가치를 제공하는가?다양한 사용자들의 관심사를 탐색정보 큐레이션의 범위를 넓혀 콘텐츠 확장성을 높인다팔로우 없이도 콘텐츠 소비가 가능하므로 서비스 체류 시간 증가로 이어진다기능 목적 및 배경왜 이 기능이 필요해졌는가?초기 서비스 구성에서 사용자가 직접 검색하거나 팔로우한 사람들의 폴더만 볼 수 있지만 사용자의 탐색 흐름이 단절 된다는 생각에 이 기능을 추가 또한 로그인 없이 탐색 가능함 공개된..

커서 기반 페이지네이션이란?

우리가 알고 있는 페이지네이션 자체는 리스트 데이터를 잘라서 몇 개씩 보여주는 것이 목적페이지네이션에는 방식 2가지가 있다.offset 기반 페이지네이션 (LIMIT / OFFSET)커서 기반 페이지네이션 (cursor-based)offset 방식 문제점10개씩 자를 때 → 21~30번째데이터SELECT * FROM folders ORDER BY created_at DESC LIMIT 10 OFFSET 20; 문제는데이터가 많아질 수록 offset 건너 뛰는 비용 증가실시간으로 데이터 추가/삭제 되면 페이지 결과가 깨짐 == 데이터 중복/누락 예를 들어사용자가 페이지 2까지 봤는데 그 사이 새로운 폴더가 추가되거나 삭제되면 사용자한테 같은 데이터가 중복 보이거나 빠짐 → 데이터가 변경되는 환경에서 페이지..

폴더 검색 기능 설계 문서(ElasticSearch)

kkrap 프로젝트에서 일주일 내 좋아요, 스크랩순 집계 기능과 특정 폴더를 검색해야하는 기능에 있어서 일반적인 SQL문 보다 좀 더 검색이 빠른 무언가를 해결하기 위한 과정이 필요했다 그 과정에 대해 기술한다.기능 개요우리 서비스에서 다음과 같은 기능을 만들게 되었는데 조회의 속도가 빠른 무언가 도구가 필요했다.폴더명, 설명, 작성자 → 검색어 입력시 검색최신순, 좋아요 순, 스크랩순 → 정렬된 결과 반환한달 내 좋아요 Top 10 → 집계팔로우한 사람들의 폴더만 보여주기 → 조건 검색그래서 이걸 구현하기 위해 검색 엔진이라는 걸 발견하게 되어 도입해보려고 하였다. 기능 목적 및 배경왜 이 기능이 필요해졌는가?기존 RDB 기반 LIKE 검색은 다음과 같은 문제점이 있었습니다:대량 데이터에서 다음과 같은..

ElasticSearch란?

폴더명, 폴더 설명, 폴더 작성자 → 검색최근 일주일, 한달 홈 페이지에서좋아요순, 스크랩순빅데이터, 검색, 정렬, 필터링, 집계를 빠르게 해주는 검색 엔진 → 검색 기능에 특화된 데이터베이스일반적인 관계형 DB는 검색 속도가 느림 예를 들어제목 + 내용+ 태그 포함된 키워드 검색 → 이런 복잡한 쿼리를 RDB로 하면 느림그래서 빠른 검색/필터/정렬/랭킹이 필요할 땐 elasticsearch 어떤 역할?데이터 검색(Full-Text Search)필터링(조건 검색)정렬(최신순 좋아요순 등)집계(기간별 카운트, TOP10, 평균값 계산) → 검색 엔진 + 데이터 분석 엔진 역할을 동시에 함 elastic search 데이터 구조index → 테이블 느낌docuemnt → 레코드/행 느낌field → 컬럼 느..

검색 엔진이란?

원하는 정보를 빠르게 찾기 위해 미리 색인(Index)를 만들어 놓고 거기서 생각하는 시스템그냥 데이터를 다 읽으면서 찾는 게 아니라미리 목차, 색인표 만들어두고 색인표에서 빠르게 위치 찾아서 검색하는 원리예를 들어 네이버, 구글, 유튜브, 쇼핑몰, 쿠팡, 인스타그램→ 검색창에 키워드 입력 → 바로 검색 결과 뜸 이게 검색 엔진 덕분임수박맨 ~ 수십억 건의 데이터를 1초안에 검색 결과 반환 이게 왜 필요하냐면일반 DB로 검색하면 느림 데이터가 많아지면 모든 데이터를 다 읽어야해서 시간 오래 걸림미리 색인을 만들어서 검색 검색 엔진의 핵심 색인(Index)책 → 페이지별 목차사전 → 단어별 색인 검색 엔진이 하는 일크롤링 (데이터 수집) → DB에서 데이터 가져오기색인(indexing) → 단어/문서/필드..

URL 메타데이터 추출 기능 개선 문서 - (EC2 대응)

https://wo-dbs.tistory.com/238 URL 메타데이터 추출 기능 문서kkrap 프로젝트에서 url을 저장하는 기능이 필요했다. url을 저장 후 사용자를 위해 제목, 파비콘, 썸네일을 추출하는 기능이 추가적으로 필요하였는데 이 부분의 개발 과정에 대해서 기술한다. 기wo-dbs.tistory.com 위 블로그에서 보듯이 kkrap 프로젝트에서 url을 저장하는 기능을 Jsoup으로 구현하였다. 하지만 EC2 서버에서는 제대로 작동이 되지 않아서 어떻게 문제를 찾았고 어떤 원인이었는지 과정을 기술하였다. 개요링크 저장 시 Jsoup을 통해 메타데이터(title, thumbnail, favicon)를 추출하는 기능이 구현되어 있으나, EC2 서버 환경에서는 일부 썸네일 및 파비콘이 정상적..

URL 메타데이터 추출 기능 문서

kkrap 프로젝트에서 url을 저장하는 기능이 필요했다. url을 저장 후 사용자를 위해 제목, 파비콘, 썸네일을 추출하는 기능이 추가적으로 필요하였는데 이 부분의 개발 과정에 대해서 기술한다. 기능 개요해당 기능은 사용자가 링크를 저장할 때, 해당 URL의 제목, 썸네일 이미지, 파비콘 정보를 자동으로 추출하여 저장하는 기능이다. 서비스에서 링크들을 수집하는 기능이 필요하고 거기에 대한 정보를 보여줄 기능이 필요하여 이 메타데이터를 추출하게 되었다. 기능 목적 및 배경사용자가 링크를 저장할 때 단순한 URL 텍스트만 보여줄 경우, 시각적 정보 부족으로 인해 UX가 떨어짐메타데이터를 자동 추출하면 링크의 내용을 직관적으로 파악할 수 있음특히 SNS, 뉴스, 유튜브 등에서 제목과 썸네일, 파비콘의 정보가..

팔로잉 활동 폴더 피드 기능 문서

kkrap 프로젝트 팔로잉 페이지에서 내가 팔로잉 하고 있는 사람들의 일주일 동안 생성한 폴더에 대해서 보여주어야했다. 이 기능의 과정을 기술한다. 기능 개요팔로우 중인 사용자의 최근 활동 이력을 조회하는 기능으로, 사용자는 자신이 팔로잉한 유저들이 최근 7일 이내에 생성된 폴더를 조회한다. 기능 목적 및 배경사용자가 팔로우한 사람의 폴더 생성을 확인함으로써, 새로운 유용한 콘텐츠나 폴더를 발견할 수 있게 한다.커뮤니티적 상호작용 유도, 콘텐츠 확산, 플랫폼 체류 시간 증가 등의 효과를 기대한다. 설계 전략팔로잉 활동 피드 구현에 대한 방법은 3가지가 떠올랐다.행동을 저장하는 DB를 하나 만드는데 여기서도 2가지가 있다.사용자 행동 이력 DB → 사용자가 행동한 것만 넣어주고 SELECT에서는 전부 JO..

[Spring boot] REST API

REST API대중적으로 가장 많이 사용된 애플리케이션 인터페이스이 인터페이슬르 통해 클라잉너트는 서버에 접근하고 자원을 조작할 수 있다.REST란?Representational State Transfer의 약자로 월드 와이드 웹(WWW)과 같은 분산 하이퍼미디어 시스템 아키텍처의 한 형식주고 받는 자원(Resource)에 이름을 규정하고 URI에 명시해 HTTP 메서드(GET, POST, PUT, DELETE)를 통해 해당 자원의 상태를 주고 받는 것을 의미REST API란?API는 Application Programming Interface의 약자로 애플리케이션에서 제공하는 인터페이스를 의미API를 통해 서버 또는 프로그램 사이를 연결할 수 있다.REST API는 REST 아키텍처를 따르는 시스템/애..

[Spring boot] 디자인 패턴

소프트웨어를 설계할 때 자주 발생하는 문제들을 해결하기 위해 고안된 해결책이다.디자인 패턴에서 ‘패턴’이라는 단어는 애플리케이션 개발에서 발생하는 문제는 유사한 경우가 많고 해결책도 동일하게 적용할 수 있다는 의미를 내표한다.but 디자인 패턴이 모든 문제의 정답은 아니며, 상황에 맞는 최적 패턴을 결정해서 사용디자인 패턴의 종류대표적 분류 방식인 ‘GoF 디장니 패턴’ == ‘Gang for Four’의 줄임말구체화하고 체계화해서 분류한 4명의 인물 의미Gof 디자인 패턴은 생성 패턴, 구조 패턴, 행위 패턴의 총 3가지로 구분됨생성 패턴 → 객체 생성에 사용되는 패턴, 객체를 수정해도 호출부가 영향 받지 않는다.구조 패턴 → 객체를 조합해서 더 큰 구조를 만드는 패턴행위 패턴 → 객체 간의 알고리즘이..