최근에 피드줍줍 서비스를 우아한테크코스 캠퍼스내에 QR을 부착해서 사용자들을 유입시키고있습니다ㅎㅎ 우테코 캠퍼스의 건의사항을 근로 팀원이 코치님들에게 전달한다는 느낌으로요! 생각보다 많은 분들이 사용해주셨는데요! 그만큼 사용자에게 발생하는 오류를 재빠르게 해결할 필요성도 크게 느껴졌습니다. 사용자에게 오류가 발생했을때 그 사실을 파악하고, 해결하기위한 방법으로 Sentry를 도입하기로 했습니다. 이번에는 Sentry를 어떻게 세팅했는지, 어떤 결과를 얻었는지를 기준으로 글을 써보려고 합니다. 시작하게 된 계기- 사용자가 에러를 제보해도 정확히 언제, 어떤 상황에서 발생했는지 모르겠음 (실제로 크루가 이거 안돼요! 했는데 너무 잘돼서 울고싶었던 적이 있습니다.)- 에러가 얼마나 많은 사용자에게 영향을 미치..

최근 피드백 서비스 '피드줍줍'의 프론트엔드는 성능 최적화 작업을 진행했습니다. 목표는 Lighthouse의 점수를 더 좋게(ㅎㅎ)만드는것이었는데, 목표를 이루진 못했지만 충분히 의미있는 개선들이 있었어서 공유해보고자합니다! 이번에는 Lighthouse에 반영되지 않았던 개선들과 왜 반영되지 않았는지에 대해서 설명해보려고 합니다.시작하게 된 계기피드줍줍을 사용해주시는 분들께서 가끔 버벅거린다는 피드백을 해주셨습니다. 실제로 확인해보니 main.js 파일이 무려 11.5MB나 되더라구요! 이건 분명히 문제가 있다고 생각해서 본격적인 최적화 작업에 들어갔습니다. 문제가 여기에만 있지 않을테니 할수있는한 문제를 찾아보고 최적화 작업들을 순서대로 진행해보았습니다. 시도한 성능 최적화들1. 요청크기줄이기소스코드..

최근에 React PWA 프로젝트에 FCM(Firebase Cloud Messaging)을 이용한 푸시 알림 기능을 구현했는데, 생각보다 고려할 점들이 많았어서 경험을 공유해보려고 한다. 이 글의 목표는 FCM알림에 대해서 대략적으로 이해하고, 세팅할수 있으며 각 오류에 대응할 수 있는 기본적인 정보를 얻는 것! 구현 목표웹 브라우저에서 푸시 알림 받기포그라운드(탭 열린 상태)와 백그라운드(탭 닫힌 상태) 모두 지원사용자가 알림 ON/OFF를 쉽게 설정할 수 있는 토글 기능PWA 환경에서도 푸시 알림 받을 수 있게 하기 전체 흐름 이해하기FCM 알림의 기본 흐름은 다음과 같다 1. 사용자 알림 권한 요청브라우저에서 Notification.requestPermission() 실행.사용자가 허용해야 이후..