안녕하세요. 모아밤 팀의 프론트엔드 개발자 이상훈입니다. 서론 모아밤에서는 백그라운드 환경에서도 사용자의 지속적인 참여를 유도하기 위해 파이어베이스에서 제공하는 푸쉬 알림 서비스인 FCM을 활용했는데요. 개발하던 당시에는 아직 서비스 워커에 익숙하지 않은 상황이었기에 웹 푸쉬를 위한 서비스 워커만 실행하거나, 혹은 MSW를 위한 서비스 워커를 실행하는 등 분기 처리를 했었으나 이번에 둘을 동시에 실행할 수 있도록 리팩토링 했었던 과정을 기록해보고자 합니다. Web Worker Web Worker는 브라우저의 메인 스레드가 아닌, 별도의 백그라운드 스레드에서 작업을 수행할 수 있는 기술입니다. 자바스크립트는 싱글 스레드로 동작하는데요. 때문에 무거운 작업을 사용자가 바라보는 화면의 처리를 담당하는 UI 스레드와 동시에 수행한다면, 사용자는 해당 작업이 수행되는 동안은 UI가 느려지거나 멈추는 경험을 하게 될 것입니다. 이런 경우에 Web Worker를 활용할 수 있습니다. 리액트 …

안녕하세요. 모아밤 팀의 프론트엔드 개발자 이상훈입니다. 서론 사용자에게 서비스가 복잡하다는 인상을 주지 않도록 한 번에 많은 정보를 노출하지 않고 순차적으로 제공하는 패턴을 이용하기도 합니다. 모아밤 프로젝트도 이런 패턴을 그룹방을 만드는 기능에서 활용해 보았는데요, 사용자 경험 측면에서 스크롤이 길어지는 것 보다는 다른 스텝으로 나누어서 제공하는 것이 좋다는 판단을 했었기 때문입니다. 이번 글에서는 퍼널 컴포넌트를 개발했던 이야기를 공유해보고자 합니다. 구현 방법 고민 이러한 기능을 구현하는 방법에는 크게 2가지가 있겠다고 생각했고, 각각의 방법을 채택했을 때의 특징도 고려해보았습니다. 각각의 스텝마다 페이지 라우팅 경로 지정하기 스텝마다 router 객체에 등록해야 하는데, 스텝이 많아질수록 번거로운 과정이 될 수 있다고 생각했습니다. 사용자가 URL를 임의로 변경하여 중간 스텝을 건너뛸 수 있다고 생각했습니다. 하나의 페이지 컴포넌트에서 상태에 따라 조건부 렌더링하기 조건…

안녕하세요. 모아밤팀의 서버 개발자 박세연입니다! Custom Secuirty를 만들면서 통합 테스트를 하게 되면 해당 필터를 거치게 되면서 테스트에 설정이 많아졌습니다. 이는 곧 개발 속도가 늦춰지는 문제가 발생하면서 이를 간편하게 만들어 주고자 Support 클래스를 만들게 되었는데, 그 도입 과정에 대해 공유하고자 합니다. 상황 모아밤 서비스에서는 따로 Spring security를 도입하지 않았습니다. 그렇기에 로그인 및 cors등 여러 필터를 직접 구현해야 했습니다. 문제는 테스트 코드를 작성하면서 발생했습니다. , 테스트 같은 경우에는 단위 테스트 및 DB와의 단위 테스트만 했기 때문에 문제가 없지만, 에서는 전체 통합 테스트를 진행하기로 했습니다. 이렇게 되니 모든 통합 테스트의 custom filter를 거치게 되면서 테스트가 실패하고, 통과하기 위해 쿠키에 토큰을 넣어주는 등의 기본 설정들을 해줘야 합니다. 이로인해, 테스트를 작성하는데 많은 시간이 들어가고, 테…

안녕하세요. 백엔드 데브코스 4기를 무사히 수료한 모아밤팀 서버 개발자 홍혁준입니다. 이번 포스팅에서 Caching에 대해 이야기를 풀어내 보려고 합니다. 감사합니다. 개요 문제 현재 모아밤 서비스의 문제점은 Moabam Tech - 실시간 선착순 쿠폰 이벤트 도입기 포스팅을 보면 알 수 있듯 대기열 등록 및 쿠폰 발급 부분에서 DB에 동일한 요청을 계속해서 보내고 있습니다. 즉 불필요한 쿼리가 발생하고 있습니다. 원인 사용자들이 선착순 쿠폰 발급을 위해 쿠폰 발급 요청을 하기 때문에, 단기간에 동일한 요청이 여러번 발생합니다. 또한 스케줄러로 인해 1초마다 동일한 쿼리가 발생합니다. 해결 현재 모아밤 서비스는 쿠폰 정보 변경 가능성이 없다고 봐도 무방합니다. 또한 동일한 요청을 보내고 별도 연산없이 동일한 응답값을 보내고 있습니다. 따라서 캐싱 기능을 통해 성능을 개선할 수 있을 것이라 판단했습니다. 캐시란 무엇일까? 캐시는 값비싼 연산 결과 또는 자주 참조되는 데이터를 메모리 …

안녕하세요. 모아밤팀의 서버 개발자 박세연입니다! 랭킹 시스템을 도입했던 경험을 공유하고 싶어 작성합니다. 서비스 분석 모아밤 서비스의 경우 이용자들은 매일 인증을 통해 경험치를 얻게 됩니다. 경험치를 기준으로 랭킹이 있다면, 서로 경쟁을 통해 더욱 열심히 인증을 참여하게 될 것이고, 사용자가 서비스를 지속적으로 사용하게할 수 있는 좋은 방법이라 생각하여 도입하게 되었습니다. 랭킹의 기준 모아밤에서 랭킹의 기준은 사용자가 인증할 때 마다 쌓이는 경험치입니다. 랭킹에서 보여주는 데이터 랭킹에서는 현재 , , 을 보여주고 있습니다. 모아밤 랭킹 서비스의 트래픽 특성 랭킹 서비스에서 크게 와 , 2가지 트래픽이 존재합니다. 랭킹 업데이트 매시 15분 모든 회원에 대해 업데이트를 진행 랭킹 조회 사용자의 요청을 통해 랭킹 조회 페이지에 접근할 때 위와 같은 특성을 봤을 때 대부분의 트래픽은 랭킹조회에서 발생하는 것을 알 수 있습니다. 설계 1. DB만으로 구성 가장 단순한 구조로 DB만…

안녕하세요. 현재 데브코스 4기로 활동 중인 모아밤팀 서버 개발자 홍혁준입니다. 이번 포스팅에서 실시간 선착순 시스템에 대해 이야기를 풀어내 보려고 합니다. 감사합니다. 배경 저희 모아밤 서비스는 사용자들을 위해 쿠폰 이벤트를 도입하게 되었습니다. 현재 생각 중인 쿠폰은 선착순으로 진행하는 이벤트로 사용자들이 다양한 종류의 N개 쿠폰을 선착순으로 지급 받도록 할 계획입니다. 선착순 쿠폰 발급 이벤트는 짧은 시간에 많은 트래픽이 발생합니다. 중요한 점은 서버가 다운되지 않고 수량 제한에 맞춰 정확하게 쿠폰이 발급되어야 합니다. 이런 사항들을 모아밤에서는 어떻게 해결했는지 살펴봅시다. 요구사항 사용자들은 정해진 재고에 따라 선착순으로 쿠폰을 발급 받을 수 있다. 동일한 이벤트에서 동일 사용자가 쿠폰을 중복하여 발급 받을 수 없다. 쿠폰은 발급 후 쿠폰함 혹은 결제창에서 1회 사용 가능하다. 고민사항 N번의 선착순일 때, 정확하게 N번 발급해줄 수 있어야 합니다. 쿠폰 발급 요청을 여러…

안녕하세요. 현재 데브코스 4기로 활동 중인 모아밤팀 서버 개발자 홍혁준입니다. 이번 포스팅에서 예외 처리에 대해 이야기를 풀어내 보려고 합니다. 감사합니다. 배경 모아밤에서는 @RestControllerAdvice와 @ExceptionHandler를 통해 예외 처리를 진행하고 있습니다. 하지만 왜? 해당 방식을 사용할까요? 단순 예외 처리가 아닌 일반적인 요청 흐름과 예외 발생 시, 흐름을 파악하여 왜 해당 방식을 사용하게 되었는 지 살펴봅시다! 사전 지식 BasicErrorController 스프링은 예외 처리를 위한 BasicErrorController를 구현했습니다. 그리고 스프링 부트는 예외 발생 시, 기본적으로 로 예외 요청을 다시 전달하도록 WAS 설정이 되어 있습니다. 즉, 별도 설정이 없다면 예외 발생 시, BasicErrorController로 예외 처리 요청이 전달됩니다. BasicErrorController는 accept Header에 따라 예외 페이지를 반…

안녕하세요. 현재 데브코스 4기로 활동 중인 모아밤팀 서버 개발자 홍혁준입니다. 이번 포스팅에서 에 대해 이야기를 풀어내 보려고 합니다. 감사합니다. 모아밤 서비스에는 어떤 Push 알림이 필요할까? 푸시 알림이란 사용자가 서비스를 사용하고 있지 않은 상황에서도 사용자에게 알림을 보내는 방법입니다. 푸시 알림을 가장 단순하게 구현하는 방법은 방식으로 주기적으로 서버에 편지 도착 여부를 묻는 요청을 보내는 방법이 있는데요. 이 방식은 과 방식이 있는데, 은 서버가 줄 데이터가 없음에도 주기적으로 요청과 응답 작업을 반복해야 해서 불필요한 트래픽이 발생합니다. 반면 은 방식에 비해 불필요한 요청과 응답을 반복하지 않아도 되지만, 클라이언트와 연결을 계속 유지해야 해서 서버 자원을 소모하게 되죠. 이런 단점들로 인해 을 찾아보게 되었습니다. 모아밤 서비스는 앱, 웹을 지원해야 합니다. 그리고 현재 모아밤에서 구현하고자 하는 기능은 사용자가 원할 때, 다른 사용자에게 제한된 횟수…

안녕하세요. 현재 데브코스 4기로 활동 중인 모아밤팀 서버 개발자 홍혁준입니다.  이번 포스팅에서 에 대해 이야기를 풀어내 보려고 합니다. 감사합니다. 배경 모아밤에서는 다음 요구사항을 위해 저장소를 활용하게 되었습니다. 사용자는 다른 사용자에게 12시간 마다 1회 콕 알림을 보낼 수 있다. 사용자는 자신이 속한 방의 인증타임에 알림이 울립니다. 개인적으로 프로젝트 코드를 누군가가 클론한다면, 그 즉시 개발 및 테스트를 시작할 수 있어야 한다고 생각합니다. 때문에, 테스트 할 수 있는 환경 구성을 위해 를 적용하게 되었습니다. 기술 환경은 다음과 같습니다. Spring Data Redis 를 마치 이용하듯 인터페이스를 제공하는 입니다. Lettuce 로 현재 에서 공식 지원하는 클라이언트입니다. 추가로 도 공식 지원하지만, 거의 업데이트 되지 않아서 를 선택하게 되었습니다. Embedded Redis H2와 같은 내장 Redis 데몬입니다. 즉, 로컬 환경 를 실행하지 않아도…