[Frontend] 이것저것
1.[React] input에 숫자만 들어가게 하기 + 세자리 콤마 넣기
저는 onKeyDown과 onChange를 같이 설정하였습니다.(스타일링은 아직 안 했습니다...ㅎㅎ)keyDown: 숫자와 backspace, 방향키, delete키를 제외한 다른 키가 눌리면 이벤트를 처리하지 않습니다. 하지만 여기서 문제점은 영문에서는 키를 눌렀을
2.[CSS] 반응형으로 정사각형 만들기
before after
3.[PWA] Manifest doesn't have a maskable icon
https://developer.chrome.com/docs/lighthouse/pwa/maskable-icon-audit/?utm_source=lighthouse&utm_medium=devtools
4.PWA 푸시 알림에 커스텀 아이콘 적용하기
FCM(Firebase Cloud Messagin)을 사용하여 PWA에서 푸시 알림을 구현하였습니다. 커스텀 아이콘을 적용하기 위해서 서비스워커에서 설정을 해주어야 합니다.처음에 경로를 ../logo/cherryLogo.png로 상대경로로 지정하였지만, 올바르지 않은
5.[Next.js] FCM을 이용한 React 컴포넌트 상태 업데이트
FCM을 사용하여 푸시 알람을 받아 React 컴포넌트의 상태를 업데이트를 해봅시다! 그 전에 저는 BroadcastChannel을 사용하는 방법으로 구현하였기 때문에 BroadcastChannel에 대해서 집고 가겠습니다. BroadcastChannel 웹 브라우저에
6.[PWA] beforeinstallprompt로 설치 메세지 보여주기. + iOS 환경에서의 처리
사용자가 웹 사이트를 방문했을 때 다운로드를 받을 수 있는 사이트인지 잘 모르는 경향이 있습니다.그래서 설치를 유도하는 것이 중요하다고 생각해서 찾아보다 나온 beforeinstallprompt!PWA 설치 촉진 패턴beforeinstallprompt 이벤트는 웹사이트
7.PWA와 push 알림(feat. FCM)
기존 프로젝트에서 push 알람을 사용하기 위해 PWA에서 FCM을 사용하였는데 제대로 정리하기 위해 작성하기로 했다.웹과 네이티브 앱의 장점을 결합한 형태의 웹 애플리케이션이다.새롭게 떠오르는 웹 브라우저 API를 전통적인 점진적 향상(progressive enhan
8.[Zustand] useShallow 공식문서 읽기
공식문서: Prevent rerenders with useShallow객체나 배열의 최상위 레벨에서만 비교를 수행하는 얕은 비교 방식이다. 중첩된 객체나 배열의 내부 변경사항은 감지하지 않는다.Zustand에서 shallow 비교는 불필요한 리렌더링을 방지하는 역할을