만약 10000개의 데이터 정보를 map 으로 화면에 뿌리게 되면 어떻게 될까? 이정도는 클라이언트에서 잘 버틸 수 있을지도 모른다... 그럼 10만개는? 많은 데이터를 한꺼번에 뿌리는 방법이 아니라, 원하는 엔드 포인트에 다다랐을 때마다 갱신하는 방법을 사용하면 부하를 줄일 수 있기 때문에 인피니티 스크롤을 사용하게 된다. 인피니티 스크롤 데모 작동하는 것과 코드는 아래 데모에서 확인할 수 있다. See the Pen infinite scroll by Liebe97 (@Liebe97) on CodePen. 인피니티 스크롤 설명 인피니티 스크롤의 동작 방식은 다음과 같다. 1. 상위 root element 의 가시성을 확인하여 2. 가시성의 변화가 생겼을 때 3. loader.current 와 root ..

ArrayBuffer 타입의 데이터를 Blob 으로 만들려고 하면 아래와 같은 코드를 사용하면 된다. // new Blob([ ArrayBuffer 데이터 ], { type: 생성할 Blob 타입 } new Blob([ ArrayBufferData ], { type: "application/pdf" }

새창열기 새창열기 기능을 사용할 때 아래와 같은 코드를 사용할 것이다. // window.open(주소, 타겟(이름), 새창열기 옵션); window.open("https://www.naver.com/", "naver", "width=500,height=600"); 하지만 noopener 라는 옵션없이는 내부 보안 취약점이 생긴다고 하니 추가해주자. window.open("https://www.naver.com/", "naver", "width=500, height=600, noopener"); Blob 파일 열기 크롬에서는 PDF 와 이미지 뷰어를 기본적으로 제공하고 있다. 이를 이용해서 PDF 와 이미지 뷰어를 열 때 Base64, Blob, BufferArray 등을 이용하여 열 수 있다. 그 중 ..

next.js 에서 window.onbeforeunload 가 작동하지 않는 문제가 있었다... 새로고침 할 때는 작동하는데 라우터 이동 시에만 작동안하는 문제를 해결하려고 구글을 뒤져서 찾아냈다 https://stackoverflow.com/questions/63064778/next-js-warn-user-for-unsaved-form-before-route-change Next JS: Warn User for Unsaved Form before Route Change In Next How can i stop Router Navigation in Next JS. I am trying to use routerChangeStart event to stop navigation. useEffect(() => ..