Moong

프론트 코드를 짜다 보면 하나의 UI를 확인하기 위해 여러 동작을 수행해야 하는 경우가 있습니다. 예를 들어 회원가입 완료 모달을 보기 위하여 특정 변수를 조작하거나, 회원가입 과정을 직접 해보아야 하는 번거로운 과정을 겪어야 합니다. storybook은 이러한 번거로움 없이 독립적인 환경에서 UI를 테스트 할 수 있도록 하는 유용한 툴입니다. storybook 도입 이유 - 독립적인 환경에서 UI 테스트 - 더 나은 컴포넌트 설계를 고안하게 됨 - 리팩토링 효과 설치 방법 react 프로젝트 root 경로에 다음 명령어를 입력해줍니다. (storybook 버전 7.0.7 기준으로 작성된 글입니다) npx storybook@latest init storybook 실행 # npm npm run storyb..

오늘은 아이콘과 알림음을 포함한 알림을 보내줄 수 있는 React custom hook을 만드는 법에 대해 알려드리겠습니다! 🔔 Notification API Notification API를 사용하면 웹에서도 사용자들에게 알림을 보내줄 수 있습니다. 📎 Notification 관련 링크 Notification 객체를 사용하면 쉽게 구현이 가능합니다! const notification = new Notification("Hi there!"); Notification 허용 상태 아래 화면을 다른 사이트들에서 많이 보셨죠! 유저가 해당 웹 사이트의 알림 권한을 허용했는 지에 따라 notification permission의 상태가 달라지게 됩니다. 1️⃣ default : 유저가 허용하지도, 차단하지도 않은 ..