하리하링웹

javascript에서 Code splitting을 해서 Dynamic하게 import를 진행할 때에 주의해야 할 점이 있다. 이 글에서는 Next.JS의 dynamic을 사용하여 예를들어 설명해보겠다. import dynamic from 'next/dynamic'; import { useState } from 'react'; import { Button } from '@/components/ui'; const DynamicComponent = dynamic(() => import('@/components/test/DynamicComponent')); export default function TestPage() { const [isRender, setIsRender] = useState(false); ..

위 사진에서 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하기 위한..

https://may10.vercel.app/ 위 링크의 개인 프로젝트를 개발하다가 겪은 MongoDB의 connection limit 관련된 이슈를 해결한 방법에대해서 정리해볼려고한다. 평범하게 프로젝트를 개발하던 중 위의 이미지와 같이 DB의 connection이 exceeded 되었다는 메일이 엄청나게 오는것을 발견하였다. 처음에 이를 발견하고 일단 cluster의 데이터를 확인해보았으며 실제로 shared cluster의 경우 maximum connection이 500인데 500을 몇 번이나 터치하는것을 확인할 수 있었으며 실제로 이로인해서 DB가 터지기까지 하는것을 확인하였다. 해결하려고 db connection 관련된 코드를 찾아보았으나 코드상으로는 문제를 발견하지 못했으며 이로인해서 주말 내..

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

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