comdraft

작업 과정을 글 초안으로.

Github Commit 을 기술 블로그의 초안으로 활용하고, 다듬어 어디든 게시하세요.

새 초안

작성 화면 예시

dev-note / image-lab

a8f2c91

feat: 이미지 지연 로딩 적용

+ const observer =
+   new IntersectionObserver(
+     onIntersect
+   );

커밋의 맥락을 글의 흐름으로

IntersectionObserver로 이미지 지연 로딩 구현하기

화면에 보이는 이미지부터 불러오도록 로딩 방식을 바꿨습니다. 이번 글에서는 구현 과정과 확인할 점을 정리합니다.

AI 초안 · 게시 전 검토 필요

바로 시작해보세요.

  1. 01

    Github 연결

    Github 계정으로 로그인합니다

  2. 02

    저장소/커밋 내역

    저장소의 커밋 내역을 불러오고 선택합니다.

  3. 03

    AI 초안 작성

    커밋에 대한 설명을 프롬프트에 넣어 초안을 만듭니다.

  4. 04

    검토 후 게시 및 내보내기

    사이트 내 게시하거나 내보내어 다른 곳에서 활용하세요.

기술 개발 블로그 습관

간단하게 시작하고 초안을 만들어 꾸준히 글을 만들어보세요.

예시

서비스 이해를 위한 샘플 저장소와 초안입니다.

선택한 커밋

3개 선택

dev-note / image-lab

개인 공개 저장소 · main

  • a8f2c91

    feat: 이미지 지연 로딩 적용

    src/components/LazyImage.tsx

    IntersectionObserver로 화면 진입 감지

  • b74e3d0

    refactor: 이미지 로딩 훅 분리

    src/hooks/useLazyImage.ts

    관찰 로직을 재사용 가능한 훅으로 분리

  • c19d5a2

    fix: 언마운트 시 observer 해제

    src/hooks/useLazyImage.ts

    cleanup에서 disconnect() 호출

이 기록을 하나의 글로 정리

초안 편집기

검토 전 초안

HTMLMD게시하기
React이미지 최적화

IntersectionObserver로 이미지 지연 로딩 구현하기

왜 바꿨나요?

화면 밖의 이미지까지 한꺼번에 요청하지 않도록, 이미지가 화면에 들어올 때 로딩하는 방식으로 변경했습니다.

어떻게 구현했나요?

IntersectionObserver로 이미지의 화면 진입을 감지합니다. 관찰 로직은 useLazyImage 훅으로 분리하고, 컴포넌트가 언마운트되면 observer를 해제하도록 정리했습니다.

TypeScript · cleanup

useEffect(() => {
  observer.observe(image);
  return () => {
    observer.disconnect();
  };
}, [image]);

무엇을 확인할까요?

스크롤할 때 이미지가 정상적으로 나타나는지, 화면을 벗어난 뒤 관찰이 정리되는지 확인해야 합니다. 실제 성능 변화는 별도의 측정이 필요합니다.

AI가 작성한 초안입니다. 코드와 설명을 검토한 후 게시하세요.

꼭 확인하세요

초안을 만들기 전 반드시 확인해주세요.

  1. 01

    제 3자인 LLM API 에 코드가 보내집니다. 조직 및 비공개 저장소는 권하지 않습니다.

  2. 02

    민감한 코드가 포함된 커밋을 보내지 않도록 하세요.

  3. 03

    커밋 내 코드를 사이트 어디에도 저장하지 않습니다.