스럽 공식 블로그

1. 문제현재 스럽의 서버는 다음과 같이 총 3개로 이루어져 있습니다.Admin API Batch 또한 스럽의 데이터베이스는 50개가 넘어가는 테이블을 가지고 있습니다. 이 두 가지 상황이 겹쳐 문제가 발생하였습니다.JPA를 사용하는 환경에서 데이터베이스 테이블이 50개가 넘어가면, JPA Entity 또한 50개가 넘어가는 상황이 됩니다. 이에 따라서 하나의 JPA Entity가 수정/추가/삭제되면 3번의 중복된 작업을 해야 했습니다. 2. 해결할 방법 모색2-1. 각 서버에서 필요한 JPA Entity만 사용하기가장 먼저 떠올린 방법은 JPA Entity의 특징을 사용하는 것이었습니다. JPA Entity가 있고, 데이터베이스 테이블이 없을 때는 문제가 발생하지만, 데이터베이스 테이블은 있고, JP..

Backend 2024. 9. 30. 15:14

정보 공유 게시글은 Sluv 서비스의 핵심이 되는 기능입니다.핵심이 되는 기능이다 보니 한 페이지에 많은 데이터가 보여지며, 이는 성능 저하로 이어졌습니다.   한 페이지에 많은 데이터가 몰리다 보니 정보 공유 게시글 상세 조회에는 총 11개의 Entity가 필요한 상황이 벌어집니다. 최초의 성능 PostMan으로 성능을 측정해 보니 최초 호출 시 0.8초, JPA 캐시 호출 시 0.5초의 성능을 보여주었습니다. 이 정도면 준수(?)하지 않나라고 생각하고, JMeter로 부하 테스트를 진행하였습니다.JMeter의 Thread Group 설정은 100명이 1초 안에 동시에 접속하는 것으로 가정하였습니다.이럴 수가.. 테스트 결과를 보고 눈을 의심했습니다...최소 시간은 PostMan에서 JPA 캐시 호출의..

Backend 2024. 1. 22. 01:58

AI는 많은 기능들을 자동화할 수 있다는 장점이 있습니다. Sluv도 관리 및 편의성 개선을 위해 필요한 작업을 자동화하기 위해 2가지의 AI를 도입하게 되었습니다. 도입 이유 1. 커뮤니티 서비스의 관리 특성 Sluv은 연예인 손민수템의 정보를 공유하는 커뮤니티 서비스입니다. 커뮤니티 서비스를 운영하며 중요한 부분은 부적절한 내용을 관리하는 것입니다. 그중에서 우리는 부적절한 댓글에 주목하였습니다. 클린봇의 도입 기존의 댓글 관리 구조는 다음과 같았습니다. 1. 사용자가 부적절한 댓글을 신고한다. 2. 신고된 댓글을 관리자 페이지에서 관리자가 확인 후 제한한다. 3. 작성자에게 패널티를 부여한다. 4. 1달 사이에 작성자의 총 패널티가 3이상 이라면 작성자의 이용을 정지한다. 해당 구조는 이용자가 신고..

AI 2024. 1. 8. 16:05

스럽에서 중요한 비중을 차지하는 검색기능! 스럽은 연예인의 아이템 정보를 검색하는 앱입니다. 때문에 검색 기능이 많은 비중을 차지합니다. 특히! 아이템 + 커뮤니티 게시글 + 사용자를 모두 검색하는 통합검색은 가장 중요한 검색 기능입니다. 스럽의 검색 API 스럽의 검색 API는 총 4개로 구성되어 있습니다. 1. 아이템 게시글 검색 API. 2. 커뮤니티 게시글 검색 API. 3. 사용자 검색 API. 4. 아이템 + 커뮤니티 게시글 + 사용자를 모두 검색하는 통합 검색 API. 1~3번은 API Server 내부에서 ELK Server의 API를 호출합니다. 4번은 API Server 내부에서 1~3번의 기능을 모두 호출합니다. 성능이 떨어지는 통합검색.. 기존의 통합검색 API의 속도는 최대 20초..

Backend 2023. 10. 7. 18:17

서비스를 만들면 꼭 필요한 기능. 바로 이미지를 업로드하는 것입니다. Sluv의 1차 MVP 당시 이미지 업로드는 S3에 접속 정보를 프론트가 관리했고, 프론트에서 이미지를 업로드 한 뒤, S3 주소를 서버에게 전달해주는 구조였습니다.첫번째 문제점 위와 같은 방식으로 관리를 할 때 프론트에서 S3의 접속 정보를 관리하기 때문에 서버에서 관리하는 것보다 보안적인 측면에서 약하다는 문제가 있었습니다. 첫번째 해결방법 기존의 방식을 버리고, S3의 접속 정보를 서버에서 관리하며, 프론트에서 서버로 이미지 파일을 전달해주는 방식으로 해결하였습니다. 하지만 또 다른 문제점이 발생했습니다. 두번째 문제점Sluv의 서비스는 사진이 매우매우 중요하며, 또한 한번의 요청에 많이 사진이 저장되어야 하는 구조입니다. 때문에..

Backend 2023. 7. 29. 15:33

CI/CD 툴인 Github Actions와 웹 애플리케이션 개발/배포/관리를 완전관리형(PaaS) 서비스 AWS Elastic Beanstalk을 사용합니다. 컨테이너 환경에서 Springboot 어플리케이션을 자동으로 빌드, 테스트, 배포하기 위한 CI/CD 파이프라인을 구축해보겠습니다. 왜 Docker 컨테이너 환경에서 Springboot 어플리케이션을 실행해야 할까 Springboot 어플리케이션을 컨테이너 환경에서 배포하려면 운영 체제와 라이브러리, 실행 환경 등 모든 요구 사항을 수동으로 설치 및 구성해야 합니다. 이 작업은 어플리케이션을 여러 환경에서 실행할 때 일관성을 유지하기 어렵고, 매우 복잡하고 시간이 많이 소요됩니다. Dockerfile을 사용하면 Springboot 어플리케이션의 ..

Infrastructure 2023. 4. 30. 14:57

AWS Elastic Beanstalk이란 AWS Elastic Beanstalk는 클라우드에서 웹 애플리케이션을 개발, 배포 및 관리하기 위한 완전관리형(PaaS) 서비스입니다. 개발자는 Elastic Beanstalk를 사용하여 웹 애플리케이션의 인프라를 프로비저닝하고, 코드를 업로드하고, 환경을 관리하며, 애플리케이션을 실행할 수 있습니다. Elastic Beanstalk는 애플리케이션을 실행하는 데 필요한 인프라를 자동으로 프로비저닝합니다. 개발자는 Elastic Beanstalk에서 애플리케이션을 실행하기 위한 서버 인스턴스, 로드 밸런서, 데이터베이스 등과 같은 컴포넌트를 선택할 수 있습니다. Elastic Beanstalk는 웹 애플리케이션을 실행하는 데 필요한 환경을 제공합니다. 환경은 애..

Infrastructure 2023. 4. 30. 14:42

2차 MVP 개발을 시작하며 프론트엔드 파트에서 가장 고민한 부분은 서버 상태(Server State) 관리였습니다. 본 포스팅에서는 왜 스럽이 서버 상태 관리를 위해 React Query를 선택했으며, React-Query를 어떻게 사용하고 있는지에 대해 공유해보려 합니다. React-Query란? React Query는 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어 주는 React 라이브러리입니다. React-Query를 사용하면 애플리케이션에서 서버 데이터를 가져오는 데 필요한 로직을 분리할 수 있으므로, 코드가 더 간결하고 유지 보수가 용이해집니다. 또한, 캐싱을 사용하면, 동일한 데이터를 반복해서 가져와야 할 경우, 서버에 불필요한 요청을 보내지 않고 빠르게..

Frontend 2023. 4. 30. 12:32