들어가며안녕하세요! 요즘 플러피(Fluffy)라는 온라인 시험 제작 및 관리 서비스를 개발하고 있습니다. 보통 시험 문제에는 다양한 이미지들이 포함되어 있습니다. 플러피 서비스 또한 시험 지문에 이미지를 추가할 수 있는 기능을 만들었습니다. 처음에는 클라이언트에서 이미지를 서버로 전송하고, 서버에서 다시 AWS S3로 업로드하는 방식으로 작업했습니다. 이 방식이 궁금하신 분들은, 이전에 작성한 스프링에서 AWS S3를 이용한 이미지 업로드 방법 글을 참고해주세요. 하지만 이 방식에는 몇 가지 아쉬운 점이 있었습니다. 이미지 업로드의 경우, 이미지가 서버를 거쳐야 하기 때문에 서버의 부하가 커지고, 업로드 속도 또한 상대적으로 느립니다. 이미지 조회의 경우, S3에서 이미지를 직접 가져오기 때문에 조회 속..

들어가며스프링 애플리케이션을 테스트하다 보면, 예상치 못한 데이터 충돌로 인해 테스트가 실패하는 상황을 경험할 때가 있습니다. 특히, 하나의 스프링 컨텍스트에서 생성된 인메모리 데이터베이스를 여러 테스트가 공유하거나, 싱글톤 컨테이너 패턴으로 생성한 Testcontainers 인스턴스를 여러 테스트에서 함께 사용하는 경우, 테스트 간 데이터가 서로 영향을 주며 의도치 않은 충돌이 발생할 가능성이 높습니다. 이런 문제를 완전히 방지하기 위해, 각 테스트마다 서로 다른 컨텍스트를 사용하거나, 매번 새로운 컨테이너를 띄우는 방법도 있습니다. 하지만, 이 방식은 테스트 실행 속도를 매우 느리게 만들 수 있습니다. 따라서, 테스트 간 완전한 독립성은 유지하기 어렵더라도, 테스트 후 데이터를 정리해 다음 테스트에 ..

들어가며안녕하세요! 최근 저는 플러피(Fluffy)라는 온라인 시험 제작 및 관리 서비스를 개발하고 있습니다. 이번 글에서는 플러피의 테스트 환경에서 겪었던 문제들을 소개하고, 이를 해결하기 위해 Testcontainers를 도입한 경험을 공유해보려고 합니다. 기존 테스트 환경에서 겪었던 문제실제 환경과 테스트 환경의 차이로 인한 문제플러피는 서비스 중인 환경에서 데이터베이스로 PostgreSQL을 사용하고 있습니다. 테스트 환경에서는 인메모리 데이터베이스인 H2를 사용하게 됩니다. 문제는, H2와 PostgreSQL의 문법 차이로 인해 테스트 환경에서는 문제없이 통과되던 코드가 실제 서비스 환경에서는 예외를 일으키는 상황이 발생한 것입니다. 예를 들어, H2에서는 GROUP BY를 사용할 때, GROU..

들어가며안녕하세요! 플러피라는 온라인 시험 문제 제작 및 관리 서비스를 개발하고 있습니다. 시험을 출제할 때, 응시자가 시험을 한 번만 제출할 수 있게 하거나 여러 번 제출할 수 있게 하는 옵션이 있습니다. 한 번만 제출하게 하기 위해서는 동시성 문제를 해결해야 합니다. 이번 시간에는 분산락을 이용하여 중복 생성 문제를 해결하는 방법에 대해서 알아보겠습니다.  문제 상황제출에 관한 서비스 코드는 다음과 같습니다. 편한 이해를 위해 부분 생략했습니다. 한 번 제출과 여러 번 제출 옵션이 있기 때문에 분기 처리를 합니다. 한 번만 제출 가능한 경우 이미 제출 했을 시 예외를 발생시킵니다.@Servicepublic class SubmissionService { // 생략 ... @Transa..

들어가며안녕하세요. 최근에 플러피라는 시험 제작 및 관리, 응시 서비스를 만들고 있습니다. 서버의 가용성을 높이기 위해서 서버를 이중화하려고 합니다. 가용성에 대해서 알고 싶으신 분들은 이 글을 참고하시면 좋을 것 같습니다. 기존에는 EC2 1대에 Docker를 통해 Spring과 Redis를 운영하고 있었습니다. 키값 저장소인 레디스는 여러 서비스에서 접근하기 때문에 분리하려고 합니다.  이번 글에서는 프리티어(Free Tier)에서 ElastiCache를 사용하는 방법에 대해서 알아보고, EC2에서 동작하는 Spring과 연결할 때 주의할 점에 대해서 알아보겠습니다.AWS ElastiCache 사용법AWS ElastiCache 생성하기ElastiCache 페이지로 이동하고, Valkey 생성을 시작해..

들어가며안녕하세요. 요즘 플러피라는 온라인 시험 문제 제작 및 관리 서비스를 개발하고 있습니다. 기존에는 시험 지문에 단순 텍스트만 작성할 수 있었어요. 보통 시험 문제에는 이미지가 필요한 경우가 많아 현재 방식은 문제를 만드는데 불편함이 있었습니다. 그래서 마크다운 에디터를 도입하게 되었고, 이를 활용한 이미지 업로드 기능을 추가하게 되었습니다. 이번 글에서는 마크다운 에디터에 이미지 업로드 후 이미지 링크를 삽입하는 방식을 알아보겠습니다. 개발 환경현재 플러피 서비스의 웹 클라이언트는 다음과 같은 환경에서 개발되고 있습니다.React.jsTypeScript@uiw/react-md-editor다양한 마크다운 에디터 라이브러리 중 @uiw/react-md-editor를 선택한 이유는 다음과 같습니다.Re..

들어가며안녕하세요. 요즘 플러피라는 온라인 시험 문제 제작 및 관리 서비스를 개발하고 있습니다. 기존에는 시험 지문에 단순 텍스트만 작성할 수 있었어요. 보통 시험 문제에는 이미지가 필요한 경우가 많아서 문제를 제작하는데 불편함이 많았습니다. 그래서 이미지 업로드 기능을 추가하기로 결정했습니다. 이번 글에서는 스프링에서 S3를 이용한 이미지 업로드 방법에 대해서 알아보겠습니다.스토리지를 사용하는 이유왜 이미지를 서버에 직접 저장하지 않고, AWS S3와 같은 클라우드 스토리지에 저장할까요? 이미지를 서버에 저장하면 서버의 디스크 용량이 부족해질 수 있습니다. 서버의 경우 스토리지에 비해 용량 추가가 어렵고, 비용이 더 많이 들 수 있습니다. 분산 환경인 경우 서버마다 이미지를 동기화하는 것도 번거로울 수..

들어가며안녕하세요. 현재 플러피라는 온라인 시험 문제 제작 및 관리 서비스를 개발하고 있습니다. 최근에, 사용자들이 시험에 대해 피드백을 제공할 수 있도록 좋아요 기능을 추가했습니다. 사용자가 좋아요 버튼을 누르고, 서버의 응답을 받은 후 좋아요 수를 업데이트하는 방식은 사용자 경험이 좋지 않다고 생각했습니다.이번 글에서는 React Tanstack Query를 사용하여, 낙관적 업데이트(Opimistic Update)를 구현하는 방법에 대해서 알아보겠습니다. 또한, 디바운스(Denounce)를 사용하여, 사용자가 너무 많은 요청을 보내는 것을 방지하는 방법에 대해서도 알아보겠습니다.낙관적 업데이트란?먼저, 낙관접 업데이트(Optimistic Update)가 무엇인지 알아보겠습니다. 낙관적 업데이트는 사..