똑같은 삽질은 2번 하지 말자

개요예전부터 이해가 어려웠던 RSC에 대하여 인프런의 한 입 크기로 잘라먹는 Next.js 강의를 보고 어느정도 RSC가 무엇이며 어떻게 활용해야 하는지에 대해 알게 되었으므로 글로써 남기고자 한다. RSC의 등장배경User가 Nextjs로 만든 웹 어플리케이션에 접근할 때 SSR이 어떻게 이루어지며 Hydration이 언제 발생하는지에 대한 시퀀스 다이어그램이다.(여기서 Hydration이란 SSR로 만들어진 정적 HTML에 클라이언트 사이드의 Javascript가 다시 활성화되는 과정을 말한다. 즉, 서버에서 생선된 정적 HTML이 브라우저에 로드된 후, 해당 HTML에 Javascript를 삽입시켜 동적인 인터랙티브가 가능하게 만드는 과정이다.) 여기서 RSC의 등장배경이 되는 문제를 찾아볼 수 있..

보호되어 있는 글입니다.

개요 next/image에 대해서...! 공식문서를 보는게 물론 베스트이긴 하지만, 왜 사용해야 하는지 그리고 어떻게 사용하는지에 대해 간단하게 적어보고자 한다. Next/image란? Next.js 프레임워크 내에서 제공되는 최적화된 이미지 컴포넌트이다. 이 컴포넌트는 웹 페이지의 성능을 향상시키기 위한 여러 기능들을 제공한다. 제공하는 기능에 대해서는 자동 최적화: 이미지를 자동으로 최적화하여 불필요한 바이트를 제거하고, 적절한 이미지 형식 (예: WebP)으로 변환해준다. 지연 로딩: 이미지는 기본적으로 loading="lazy" 속성이 적용되어 뷰포트에 들어올 때까지 로딩되지 않는다. Placeholder제공: 이미지가 다운로드 되지 않았을때 그 이미지에 맞는 크기의 Placeholder를 세팅해..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

개요 화면내에 화면 전체의 스크롤이 있고 어떤 작은 컨텐츠 박스에도 스크롤이 있는 상황인데 마우스를 갖다대는 영역이 컨텐츠박스 내부라면 컨텐츠박스만 스크롤이 되고 외부의 영역은 스크롤 안되게끔 하기 해결방법 ...생략 wheel 이벤트의 기본동작을 방지하면 되는거였다. 처음에는 wheel 이벤트의 버블링에 의해 외부스크롤이 움직이는거라 생각해서 @wheel.stop으로 대응하려 했지만, 여전히 외부스크롤이 조금씩 움직이거나 내부 컨텐츠 박스의 최대 스크롤에 도달 했을때 외부 스크롤이 움직이고 있었다. 그래서 챗 지피티한테 이런 저런 질문을 날린 결과 휠 이벤트의 기본동작에 의해 이벤트가 버블링 되므로 기본동작을 막아야 한다고 한다. 휠 이벤트의 기본동작을 보면 사용자가 스크롤 가능한 영역에 마우스 휠을 ..

개요 throttling 해야하는데 라이브러리를 쓰기 보다는 실제로 구현해 보고 싶었다. 코드 function throttle any, U>(func: T, limit: number): (...funcArgs: Parameters) => void { let inThrottle = false; return function (this: U, ...args: Parameters) { if (!inThrottle) { func.apply(this, args); inThrottle = true; setTimeout(() => (inThrottle = false), limit); } }; } inTrottle -> javascript의 클로저를 이용해 전역변수와 같은 역할을 시킨다. any, U> -> thrott..

보호되어 있는 글입니다.