JavaScript 12

React로 토스트 알람(Toast Notification) Provider 만들어보기

위 사진에서 UI를 담당하는 Notification Component가 아니라 이를 구현하기 위한 Provider를 만들 예정이다. 필요한 기능들은 아래와 같다. 1. 토스트기능 2. Auto dismiss on/off 기능 3. dismiss ms 설정 기능 4. success,alert,info 3가지 종류 라이브러리는 안쓸 수 있으면 최대한 안쓰기로 마음먹었기에 별다른 토스트 라이브러리를 사용하지 않고 직접 구현하였다. 먼저 기본적으로 필요한 Type들을 정의해준다. 자동으로 Notification가 닫히는 시간을 5초로 정의하였으며 Auto Dismiss유무는 True로 정의하였다. 이 값은 사용자가 Option값을 넣지 않았을때의 기본값이다. 이후 Notification을 Provide하기 위한..

frontend 2023.01.14

useSWR 똑똑하게 사용하기

useSWR이 좋은 라이브러리라고는 이미 널리 알려져 있음에도 불구하고 useSWR에 관련된 대부분의 글들에서 좀 더 다양하게 응용하여 사용하는 방법에 대해 다루는 경우는 많이 보지못했기에 가볍게 useSWR의 좀 더 섹시한 사용방법중 한가지를 공유하고자 글을 작성하게 되었다. 먼저 공식문서의 useSWR의 간단한 사용 방법은 다음과 같이 되어있다. 또한 많은 사람들이 아마? useSWR을 이러한 방법으로 사용하고 있을 것이다. 물론 이러한 방법으로 사용하는것이 나쁜것은 절대 아니다. 하지만 이런 방식으로 사용을 할 때에 간과하는 부분이 있을수도 있을 것 같다. 가장 핵심적인 이유는 바로 저 첫번째 인자가 단순하게 api path를 적는것이 아닌 key라는 것이다. useSWR은 저 key를 기반으로 f..

frontend 2023.01.14