하리하링웹

useSWR에는 크게 3가지의 hook들이 있다. useSWR useSWRInfinite useSWRImmutable(1.@ 버전부터 제공) useSWR은 Next.JS에서 csr로 페이지를 만들고자 할 때 없어서는 안될 hook이라고도 말할 수 있을 정도로 사용했을 때 얻는 퍼포먼스, 편의성이 엄청나게 크다. 먼저 useSWR은 유저가 페이지에 머물거나 다른 페이지에 있다가 페이지로 다시 돌아왔을때, 네트워크가 끊겼다가 다시 복구가 되었을 때 설정해놓은 key값으로 get요청을 보내 데이터를 다시 revalidate한다는 점이 핵심적인 feature라고 말할 수 있다. 이 때 data 값을 useSWR이 알아서 캐싱하게 되고 만약 새로 불러온 값이 기존에 캐싱된 값과 같다면 따로 component를 r..

TailwindCSS 3.0이 얼마전에 Release되었는데 3.0에서 새로 추가된 기능들을 소개합니다. -JIT(Just-in-time) 기존에는 따로 Mode설정을 해야 사용할 수 있었던 JIT가 이제는 따로 설정하지 않아도 all time사용할 수 있게 되었습니다. -기본 Color Pallete 종류 추가 아래의 Pallete가 2.@ 버전이고 위가 3.@버전입니다. 위의 Pallete외에도 2가지의 Gray theme Pallete가 추가되었습니다. -box-shadow에서 color 선택 가능 기존에는 Shadow 색을 변경하는 명령어가 없었지만 이제는 shadow-blue-500/50와 같이 색을 지정할 수 있습니다. -scroll-snap api가 추가되었습니다. Keen-slider라이브..

최근에 네이버 웹툰에서 나온 짤 중 위와 같은 짤이 있는데 이 짤이 많이 유행하고 사람들이 말풍선 안의 대사를 직접 수정해서 많이 쓰는 것 같아서 이를 편하게 하기 위해 김성모 짤 생성기 페이지를 직접 만들어서 무료로 배포해보았다. 만든 뒤 몇 명의 지인에게 먼저 뿌려서 테스트를 진행하고 개드립이라는 자주 눈팅하는 커뮤니티에 뿌려보았는데 정말 상상할 수 없을 정도의 엄청난 호응을 받고 배포한지 약 1시간만에 모든 커뮤니티 사이트에 다 퍼져서 엄청나게 많은 사용자가 들어왔다. (심지어 Retention 비율이 높은 편이다.) 대충 트래픽이 일주일에 10만명 쯤 됐었으며 저번 주 일요일에 공개하고 딱 일주일이 된 지금까지 총 15만개의 짤을 생성하였다. 심지어 이렇게 많은 사람이 들어오는 페이지임에도 호스팅..

Tailwind CSS는 부트스트랩과 비슷한 역할을 한다고 말할수도 있지만 좀 자세히 알아보면 부트스트랩의 상위호환격이라도도 말할 수 있는 프레임워크이다. 그동안 tailwind외에도 styled component, sass를 다 써보았지만 왜 최종적으로 tailwind를 사용하게 되었는지에 대해 이 글에서 소개하려 한다. tailwind의 가장 큰 장점은 사용이 편리하다는 점이다. 예를들어 16px의 padding을 주고 싶을 때 기존에는 클래스를 선언한 뒤 해당 클래스명을 불러와서 사용하는식으로 css를 사용했다면 tailwind는 class부분에 p-4와 같이 입력하면 tailwind프레임워크가 이를 확인하고 해당 부분에 알아서 16px의 padding을 적용시켜준다. tailwind를 처음 사용하..