안녕하세요. 모아밤 팀의 프론트엔드 개발자 이상훈입니다. 서론 모아밤에서는 백그라운드 환경에서도 사용자의 지속적인 참여를 유도하기 위해 파이어베이스에서 제공하는 푸쉬 알림 서비스인 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초마다 동일한 쿼리가 발생합니다. 해결 현재 모아밤 서비스는 쿠폰 정보 변경 가능성이 없다고 봐도 무방합니다. 또한 동일한 요청을 보내고 별도 연산없이 동일한 응답값을 보내고 있습니다. 따라서 캐싱 기능을 통해 성능을 개선할 수 있을 것이라 판단했습니다. 캐시란 무엇일까? 캐시는 값비싼 연산 결과 또는 자주 참조되는 데이터를 메모리 …