AWS ElastiCache로 Redis(or Valkey) 운영하기
·
서버
들어가며안녕하세요. 최근에 플러피라는 시험 제작 및 관리, 응시 서비스를 만들고 있습니다. 서버의 가용성을 높이기 위해서 서버를 이중화하려고 합니다. 가용성에 대해서 알고 싶으신 분들은 이 글을 참고하시면 좋을 것 같습니다. 기존에는 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..
스프링에서 AWS S3를 이용한 이미지 업로드 방법
·
서버
들어가며안녕하세요. 요즘 플러피라는 온라인 시험 문제 제작 및 관리 서비스를 개발하고 있습니다. 기존에는 시험 지문에 단순 텍스트만 작성할 수 있었어요. 보통 시험 문제에는 이미지가 필요한 경우가 많아서 문제를 제작하는데 불편함이 많았습니다. 그래서 이미지 업로드 기능을 추가하기로 결정했습니다. 이번 글에서는 스프링에서 S3를 이용한 이미지 업로드 방법에 대해서 알아보겠습니다.스토리지를 사용하는 이유왜 이미지를 서버에 직접 저장하지 않고, AWS S3와 같은 클라우드 스토리지에 저장할까요? 이미지를 서버에 저장하면 서버의 디스크 용량이 부족해질 수 있습니다. 서버의 경우 스토리지에 비해 용량 추가가 어렵고, 비용이 더 많이 들 수 있습니다. 분산 환경인 경우 서버마다 이미지를 동기화하는 것도 번거로울 수..
고가용성을 위한 단일 장애 지점(SPOF) 해결 방법
·
서버
들어가며최근에 티스토리 서비스가 중단되는 경우가 있었습니다. 이러한 경험은 블로그를 찾는 독자들에게 불편함을 줄 수 있고, 광고로 수익을 얻는 티스토리에게도 손실을 줄 수 있습니다. 2022년에 발생한 데이터센터 화재로 인해 카카오는 서비스 장애 피해 보상액으로 약 275억 원을 지급했다고 합니다. 이러한 사례들을 보면, 가용성이 무척 중요하다는 것을 알 수 있습니다. 이번 글에서는 단일 장애 지점(SPOF)에는 어떤 것들이 있는지 알아보고, 그것을 해결하기 위한 방법, 그에 따른 사이드 이펙트(Side Effect)에 대해서 알아보겠습니다.가용성(Availability)이란?위키피디아에 따르면, 가용성은 서버와 네트워크, 프로그램 등의 정보 시스템이 정상적으로 사용 가능한 정도를 말합니다. 가용성은 정..
낙관적 업데이트와 디바운스로 [좋아요 기능] 사용자 경험 향상시키기 with Tanstack Query
·
웹 프론트엔드
들어가며안녕하세요. 현재 플러피라는 온라인 시험 문제 제작 및 관리 서비스를 개발하고 있습니다. 최근에, 사용자들이 시험에 대해 피드백을 제공할 수 있도록 좋아요 기능을 추가했습니다. 사용자가 좋아요 버튼을 누르고, 서버의 응답을 받은 후 좋아요 수를 업데이트하는 방식은 사용자 경험이 좋지 않다고 생각했습니다.이번 글에서는 React Tanstack Query를 사용하여, 낙관적 업데이트(Opimistic Update)를 구현하는 방법에 대해서 알아보겠습니다. 또한, 디바운스(Denounce)를 사용하여, 사용자가 너무 많은 요청을 보내는 것을 방지하는 방법에 대해서도 알아보겠습니다.낙관적 업데이트란?먼저, 낙관접 업데이트(Optimistic Update)가 무엇인지 알아보겠습니다. 낙관적 업데이트는 사..
확장 가능한 좋아요 기능 설계 및 구현하기
·
서버
들어가며안녕하세요. 현재 플러피라는 온라인 시험 문제 제작 및 관리 서비스를 개발하고 있습니다. 최근에, 사용자들이 시험에 대해 피드백을 제공할 수 있도록 좋아요 기능을 추가했습니다. 서비스 사용자들은 좋아요 수를 통해 퀄리티가 높은 시험을 쉽게 찾아볼 수 있어, 서비스가 활성화될 수 있습니다. 서비스 개발자인 저는, 이 기능을 통해 수집한 데이터를 통해, 향후 개인 맞춤형 시험 추천 서비스 등을 제공할 수 있습니다.제목은 좋아요 기능이라고 했지만, 반응 기능이 더 적합할 것 같은데요.이번 글에서는 확장 가능한 좋아요 기능을 설계하고, 구현하는 방법에 대해 알아보겠습니다.기능 요구 사항좋아요 기능을 설계하기에 앞서, 기능 요구 사항을 정리해보겠습니다.로그인한 사용자는 시험에 대해서 좋아요를 할 수 있다...