dogFootHistory

웹 접근성을 고려해야 하는 이유

날씨는 맑음 — Sun, 12 Apr 2026 13:48:25 +0900

웹 접근성을 고려해야 하는 이유

서비스를 진행하면 항상 최고 사양의 휴대폰으로 진행할 수 없는 사용자가 있고, 몸이 조금 불편하신 사용자도 있을 수 있다. 그런 경우이더라도 서비스는 모두에게 최대의 효율성을 제공하려고 노력을 해야한다. 이러한 이유로 웹 접근성을 고려해야하고, 프론트 개발자가 갖추어야 할 자질이라 생각한다.

인식이 가능해야 함( Perceivable )

사용자가 콘텐츠를 “볼 수 없더라도” 이해 가능해야 함.

예:

이미지에 대체 텍스트 제공
영상 자막 제공
색상만으로 상태 전달 금지
충분한 대비 제공

조작 가능해야 함 ( Operable )

마우스 없어도 조작 가능해야 함.

예:

Tab 이동 가능
Enter / Space 동작 가능
포커스 표시 보임
키보드 함정 없음

- 통신을 하거나, 계산이 진행하는 버튼인 경우는 <button>를 사용해야 웹 접근성에 안전함. <div>를 사용하면 키보드로 조작하는 데 이슈 발생함.

이해 가능해야 함( Understandable )

UI가 예측 가능하고 명확해야 함.

예:

라벨 있는 입력창
명확한 에러 메시지
일관된 네비게이션
지나치게 복잡한 문구 지양

- label과 관련 있는 input태그는 id-for 일치시켜야 함.

주의해야할 점.

div 남발하지 말고 의미 있는 태그 사용

header
main
nav
button
form
label
table

[개인 프로젝트] StockList 개인 토이 프로젝트 회고록

날씨는 맑음 — Fri, 27 Mar 2026 15:17:06 +0900

- 프롤로그

이번 토이 프로젝트를 진행함으로써 나만의 기준을 하나 세우고 진행했다. '비효율적인 코드라도 상관없다. 납득할만한 충분한 근거가 있다면'이다. 나도 프론트 개발자로 업무를 하고, 토이 프로젝트를 몇번 해봤지만, 돌아보면 남들이 쓰니깐 쓰는 코드가 많았던거 같다. 정확힌 이유 없이 쓰는거다. 그래서 이번 토이 프로젝트를 진행하면서 내가 왜 이 코드를 썼고 그 근거를 나 스스로에게 납득 시키려고 노력을 했다.

우선 사용한 기술 스택은

Next.js 16
React 19
TypeScript
React Query v5
Zustand
Tailwind CSS
Vitest
Testing Libary

주요 구현 기능으로는

- 주식 목록 조회
- 종목 검색
- 가격 / 등락률 정렬
- 관심종목 저장 및 유지
- 종목 상세 페이지 조회
- 캔들 차트 조회
- 종목 관련 뉴스 조회

중점적으로 본 항목

- CSR과 SSR을 어떠한 상황에 써야하고, 어떻게 쓰면 사용자가 느끼기에 자연스럽다고 느낄지.

- 충분한 테스트를 진행함으로써 안정적인 코드 운용

- 책임분리적인 컴포넌트 세분화

- 상태관리 라이브러리를 통한 코드 안전성

- App Router 기반 라우팅과 API Route 구성

github - https://github.com/kimdonghyeok135/stockList

GitHub - kimdonghyeok135/stockList: stockList Study

stockList Study. Contribute to kimdonghyeok135/stockList development by creating an account on GitHub.

github.com

배포 링크 - https://stock-list-p82m.vercel.app

후기..

레거시 프로젝트로 업무를 진행했던 내가 이런 토이프로젝트를 진행함에 처음에는 막막하기도 했고, 진행도 뎌디긴 했지만. 꾸준함으로 완성했다. 항상 10을 할 수는 없지만 항상 꾸준히 하기만 한다면 좋은 결과가 있다고 믿고 프로젝트를 만들었다.

[Next] useOptimistic

날씨는 맑음 — Thu, 18 Sep 2025 21:55:52 +0900

useOptimistic이란

사용자 인터페이스(UI)를 서버 응답 전에 미리 업데이트하여, 애플리케이션이 더 빠르고 반응성이 좋게 느껴지도록 만드는 React 훅

useOptimistic은 임시적인 "낙관적(optimistic)" 상태를 만들어 관리합니다.

액션 시작: 사용자가 버튼을 클릭하여 서버 액션을 호출합니다.
낙관적 상태 업데이트: 서버 액션이 실행되기 전에 useOptimistic 훅이 제공하는 함수를 호출하여 UI의 상태를 즉시 변경합니다.
서버 통신: 실제 서버 액션이 백그라운드에서 실행됩니다.
최종 상태 적용: 서버 액션이 성공적으로 완료되면, Next.js는 최신 서버 상태로 UI를 다시 렌더링합니다. 이때 임시적인 낙관적 상태는 사라지고 실제 데이터가 화면에 표시됩니다.
실패 시 복구: 만약 서버 액션이 실패하면, UI는 원래의 상태로 되돌아갑니다.

JavaScript

// `app/comments/page.tsx`
"use client";

import { useState } from "react";
import { useOptimistic } from "react";
import { addComment } from "./actions"; // 서버 액션 import

export default function Page() {
  const [inputValue, setInputValue] = useState("");

  // useOptimistic 훅 사용
  const [optimisticComments, addOptimistic] = useOptimistic(
    [], // 초기 상태 (여기서는 댓글 목록 배열)
    (currentComments, newComment) => [ // updater 함수: 현재 상태와 새로운 값으로 낙관적 상태를 반환
      ...currentComments,
      { text: newComment, sending: true }, // 임시로 'sending' 속성 추가
    ]
  );

  return (
    <div>
      {optimisticComments.map((comment, index) => (
        <div key={index}>
          {comment.text}
          {comment.sending && <span>... 전송 중</span>}
        </div>
      ))}
      <form onSubmit={async (e) => {
        e.preventDefault();
        const commentText = inputValue;

        addOptimistic(commentText); // ✅ 서버 응답 전에 UI를 즉시 업데이트

        await addComment(commentText); // 서버 액션 호출 (비동기)

        setInputValue("");
      }}>
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
        <button type="submit">댓글 추가</button>
      </form>
    </div>
  );
}

useOptimistic은 사용자에게 즉각적인 피드백을 제공함으로써 애플리케이션의 반응성을 극대화하는 강력한 도구입니다.

[Next] generateStaticParams

날씨는 맑음 — Sat, 13 Sep 2025 11:07:09 +0900

generateStaticParams이란

Next.js에서 동적 라우트(Dynamic Routes)를 정적으로 생성할 때 사용하는 함수입니다. 이 함수는 빌드 타임에 실행되어 어떤 동적 경로를 미리 만들지 결정하는 데 사용됩니다.

왜 필요한가요?

동적 라우트는 URL에 변수(예: [slug], [id])를 포함하는 경로를 의미합니다. 예를 들어, 블로그의 [slug] 페이지는 post-1, post-2 등 다양한 slug 값을 가질 수 있습니다.

generateStaticParams를 사용하면, 서버가 각 요청에 대해 페이지를 동적으로 렌더링하는 대신, 빌드 시점에 모든 가능한 slug 값에 대한 페이지를 미리 생성할 수 있습니다. 이렇게 미리 만들어진 HTML 파일은 CDN에 배포되어 매우 빠르게 사용자에게 전달될 수 있습니다.

작동 방식 ⚙️

빌드 타임 실행: generateStaticParams 함수는 next build 명령어가 실행될 때 딱 한 번 실행됩니다.
매개변수 배열 반환: 이 함수는 동적 세그먼트에 들어갈 매개변수(params) 객체의 배열을 반환해야 합니다. Next.js는 이 배열의 각 객체에 대해 정적 페이지를 생성합니다.
정적 페이지 생성: 반환된 매개변수 배열에 따라 동적 라우트 페이지가 모두 빌드됩니다.

코드 예시

블로그 게시물 페이지를 정적으로 생성하는 예시입니다.

JavaScript

// app/blog/[slug]/page.tsx

// 1. generateStaticParams 함수를 정의합니다.
export async function generateStaticParams() {
  const posts = await getPostsFromDatabase(); // DB 또는 API에서 모든 게시물 데이터를 가져옴

  // 2. 각 게시물에 대한 slug를 포함하는 객체 배열을 반환합니다.
  return posts.map((post) => ({
    slug: post.slug,
  }));
}

// 3. 페이지 컴포넌트는 매개변수를 받습니다.
export default function PostPage({ params }: { params: { slug: string } }) {
  // params.slug를 사용하여 특정 게시물 데이터를 가져와 렌더링
  return (
    <div>
      <h1>게시물 제목: {params.slug}</h1>
      {/* ... */}
    </div>
  );
}

주의할 점 ⚠️

빌드 시점: generateStaticParams는 빌드 시에만 실행되므로, 런타임에 동적으로 추가되는 새로운 게시물은 자동으로 포함되지 않습니다. 새로운 게시물이 추가되면 빌드를 다시 해야 합니다.
dynamicParams: generateStaticParams를 정의하면 dynamicParams의 기본값이 true에서 false로 변경됩니다. 이는 generateStaticParams가 반환하지 않은 경로에 접근하면 404 페이지를 반환한다는 의미입니다. 만약 알 수 없는 경로도 서버에서 동적으로 렌더링하고 싶다면, dynamicParams = true를 명시적으로 설정해야 합니다

[Next] Route Segment Config

날씨는 맑음 — Thu, 11 Sep 2025 21:33:28 +0900

Route Segment Config는 Next.js의 **앱 라우터(App Router)**에서 특정 경로(segment)의 동작 방식을 제어하는 설정 파일입니다. 이 파일을 사용하면 페이지나 레이아웃의 정적/동적 렌더링 방식, 캐싱 전략 등을 세밀하게 조정할 수 있습니다.

page.tsx 또는 layout.tsx 파일 내에서 export const 문을 사용하여 설정 변수를 정의합니다.

주요 설정 옵션

1. dynamic

이 옵션은 경로 세그먼트의 렌더링 방식을 제어합니다.

'auto' (기본값): Next.js가 자동으로 정적(Static) 또는 동적(Dynamic) 렌더링을 판단합니다.
'force-static': 해당 경로를 무조건 정적으로 렌더링합니다. 요청이나 쿠키와 같은 동적 데이터가 있더라도 빌드 시 HTML을 생성합니다.
'force-dynamic': 해당 경로를 무조건 동적으로 렌더링합니다. 모든 요청에 대해 서버에서 렌더링을 다시 수행합니다.

사용 예시:

JavaScript

// app/blog/[slug]/page.tsx
export const dynamic = 'force-static';

2. revalidate

이 옵션은 정적 렌더링된 페이지의 재검증(revalidation) 주기를 설정합니다.

false: 캐싱하지 않고, 항상 동적으로 렌더링합니다.
0: 캐싱하지만, 매 요청마다 캐시를 재검증합니다.
number: 캐시의 유효 기간을 초 단위로 설정합니다. 이 시간이 지나면 다음 요청 시 페이지를 다시 렌더링합니다.

사용 예시:

JavaScript

// app/products/page.tsx
export const revalidate = 60; // 60초마다 페이지를 재검증합니다.

3. fetchCache

fetch 함수에 대한 캐싱 동작을 제어합니다. revalidate 옵션과 연동되어 동작하며, 기본값은 auto입니다.

'force-no-store': 모든 fetch 요청을 캐싱하지 않도록 강제합니다.
'default-no-store': 기본적으로 캐싱하지 않지만, revalidate 옵션이 설정된 fetch 요청은 캐시합니다.

왜 필요한가?

Route Segment Config는 Next.js의 핵심 기능인 **하이브리드 렌더링(Hybrid Rendering)**을 세밀하게 제어하는 데 필수적입니다. 개발자는 각 페이지의 특성(예: 자주 바뀌는 데이터 vs. 정적인 콘텐츠)에 따라 최적의 렌더링 방식을 선택하여 성능과 SEO를 동시에 향상시킬 수 있습니다.

공식문서를 참고하자

https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config

[Next] unstable_cache

날씨는 맑음 — Thu, 11 Sep 2025 20:47:43 +0900

unstable_cache란?

unstable_cache는 특정 함수 호출의 결과를 캐싱해서, 같은 인수로 함수가 다시 호출될 때 데이터베이스를 다시 조회하거나 API를 호출하는 대신 캐시된 값을 즉시 반환하게 만듭니다. 이로써 불필요한 데이터 요청을 줄여 응답 시간을 단축하고 서버 부하를 줄일 수 있습니다.

이 함수는 Next.js의 내장 캐싱 시스템과 통합되어 동작하기 때문에, 일반적인 메모이제이션(memoization) 함수보다 더 강력합니다. 특히 Vercel 환경에서 배포될 때 Next.js 캐시 레이어와 긴밀하게 작동하도록 설계되었습니다.

사용법

unstable_cache는 revalidate와 tags라는 두 가지 주요 옵션을 사용합니다.

JavaScript

import { unstable_cache } from 'next/cache';

const getMyData = unstable_cache(
  async (userId) => {
    // 이 함수의 결과가 캐시됩니다.
    // userId가 같은 요청이 오면 이 코드는 다시 실행되지 않습니다.
    const data = await fetch(`https://api.example.com/data/${userId}`);
    return data.json();
  },
  ['my-data-key'], // 캐시 식별자
  {
    revalidate: 60, // 60초마다 캐시 갱신
    tags: ['posts'], // 'posts' 태그가 무효화될 때 함께 무효화
  }
);

주요 옵션

revalidate: 캐시의 유효 기간을 초 단위로 설정합니다. 이 시간이 지나면 다음 요청 시 함수가 다시 실행되어 캐시를 갱신합니다.
tags: 캐시에 태그를 부여합니다. revalidateTag(‘posts’) 함수를 사용하여 특정 태그를 가진 모든 캐시를 수동으로 무효화할 수 있습니다. 이는 데이터가 변경되었을 때 즉시 캐시를 최신 상태로 만드는 데 유용합니다.

추가적으로

revalidatePath의 역할

revalidatePath는 사용자가 특정 페이지에 접근했을 때 생성된 HTML 캐시를 무효화합니다. 이렇게 캐시가 무효화되면, 다음 요청 시 해당 페이지는 캐시된 데이터를 사용하는 대신 서버에서 다시 렌더링되어 최신 정보를 가져오게 됩니다.

이 기능은 CMS(콘텐츠 관리 시스템)나 백엔드에서 데이터가 업데이트되었을 때, 프런트엔드 페이지를 자동으로 갱신해야 할 때 특히 유용합니다.

사용법

revalidatePath는 revalidateTag와 유사하게 동작하지만, 태그 대신 **경로(path)**를 기반으로 캐시를 무효화합니다.

JavaScript

// app/actions.ts (Server Action 예시)
"use server";

import { revalidatePath } from 'next/cache';

export async function createPost() {
  // 1. 데이터베이스에 새 게시물 추가
  await db.post.create({ /* ... */ });

  // 2. 게시물 목록 페이지의 캐시를 초기화
  revalidatePath('/posts');
}

위 코드에서 createPost라는 서버 액션이 실행되면, revalidatePath('/posts')가 호출되어 /posts 경로의 캐시가 무효화됩니다. 다음 사용자가 /posts 페이지에 접근하면, Next.js는 최신 게시물 목록을 포함하여 페이지를 다시 렌더링하게 됩니다.

fetch함수에서도 비슷한 기능을 사용할 수 있다

fetch 함수의 캐싱 기능

Next.js 환경에서 fetch 함수는 기본적으로 자동으로 캐시를 적용합니다. 이 동작은 cache 옵션을 통해 제어할 수 있습니다.

cache: 'force-cache' (기본값): fetch는 요청을 캐시하고, 동일한 URL에 대한 다음 요청 시 캐시된 결과를 사용합니다. 서버 컴포넌트에서 fetch를 사용하면 이 옵션이 기본적으로 활성화됩니다.
cache: 'no-store': 요청을 캐시하지 않고, 항상 새로운 데이터를 가져옵니다. 동적인 데이터나 자주 변경되는 데이터를 가져올 때 유용합니다.
cache: 'no-cache': 요청을 캐시하지만, 다음 요청 시 서버에 데이터를 재검증(revalidate)하여 최신 버전인지 확인합니다.

revalidate 옵션을 통한 재검증

fetch 함수는 revalidate 옵션을 사용하여 시간 기반 캐시 재검증을 설정할 수 있습니다.

JavaScript

// 60초마다 캐시 갱신
const response = await fetch('https://api.example.com/data', {
  next: { revalidate: 60 } // 60초가 지나면 다음 요청 시 캐시 갱신
});

위 코드는 revalidate 태그를 사용한 것과 유사하게, 60초마다 데이터가 자동으로 갱신됩니다.

태그를 이용한 재검증 (tags)

fetch 함수는 revalidateTag와 직접적으로 연동되는 tags 옵션도 제공합니다.

JavaScript

// 'posts' 태그를 사용하여 fetch 요청
const response = await fetch('https://api.example.com/posts', {
  next: { tags: ['posts'] }
});

// 데이터가 업데이트되면 태그를 통해 캐시를 초기화
// (서버 액션, 라우트 핸들러 등에서 사용)
import { revalidateTag } from 'next/cache';

revalidateTag('posts');

[Next] Parallel Routes

날씨는 맑음 — Sun, 7 Sep 2025 10:28:09 +0900

Parallel Routes란

Parallel Routes는 Next.js에서 하나의 레이아웃 내에 여러 개의 페이지를 동시에 렌더링할 수 있게 해주는 기능입니다. 전통적인 라우팅 방식이 페이지 전체를 교체하는 것과 달리, Parallel Routes는 페이지의 특정 섹션만 독립적으로 로드하거나 업데이트할 수 있습니다.

이 기능은 복잡한 대시보드나 UI를 구성할 때 특히 유용합니다. 페이지의 각 부분을 분리하여 관리하고, 사용자가 상호작용하는 부분만 동적으로 업데이트함으로써 전반적인 성능과 사용자 경험을 향상시킬 수 있습니다.

작동 방식 ⚙️

Parallel Routes는 @ 기호로 시작하는 특별한 폴더, 즉 **'슬롯(slots)'**을 만들어 정의합니다. 각 슬롯은 독립적으로 렌더링되는 UI 컴포넌트를 나타냅니다.

예를 들어, 대시보드에 사용자 프로필과 통계 차트가 동시에 보이는 구조를 만들고 싶다면, 다음과 같은 폴더 구조를 사용할 수 있습니다.

/app
├── dashboard/
│   ├── @user/
│   │   ├── page.tsx      // 사용자 프로필 컴포넌트
│   ├── @analytics/
│   │   ├── page.tsx    // 통계 차트 컴포넌트
│   ├── layout.tsx      // 메인 대시보드 레이아웃
├── page.tsx

이 구조에서 dashboard/layout.tsx 파일은 @user와 @analytics 슬롯을 **props**로 받아서 원하는 위치에 렌더링합니다.

주요 활용 사례 ✨

대시보드: 가장 일반적인 사용 사례입니다. 최근 활동, 사용자 목록, 차트 등 여러 독립적인 섹션을 하나의 페이지에 보여줄 때 유용합니다.
영구적인 UI: 음악 플레이어나 채팅 위젯처럼 사용자가 페이지를 이동해도 계속해서 보이는 UI 요소를 만들 수 있습니다.
조건부 렌더링: 사용자의 역할(예: 관리자 vs. 일반 사용자)에 따라 다른 슬롯을 조건부로 렌더링할 수 있습니다.

코드 구현 예시

Parallel Routes의 핵심은 부모 layout.tsx 파일에서 슬롯을 props로 받아 렌더링하는 것입니다.

JavaScript

// app/dashboard/layout.tsx

export default function DashboardLayout({
  children,
  user,
  analytics,
}: {
  children: React.ReactNode;
  user: React.ReactNode;
  analytics: React.ReactNode;
}) {
  return (
    <div>
      <div className="flex">
        {user}        {/* @user/page.tsx의 콘텐츠를 렌더링 */}
        {analytics}   {/* @analytics/page.tsx의 콘텐츠를 렌더링 */}
      </div>
      <div className="main-content">
        {children}    {/* /dashboard/settings와 같은 메인 라우트의 콘텐츠를 렌더링 */}
      </div>
    </div>
  );
}

이 설정을 통해 모든 슬롯(@user, @analytics)과 메인 콘텐츠(children)가 동일한 레이아웃 내에서 동시에 렌더링됩니다. 이는 관심사를 명확히 분리하고 더 나은 사용자 경험을 제공하는 효과적인 방법입니다.

[Next] Intercepting Route

날씨는 맑음 — Sun, 7 Sep 2025 09:53:34 +0900

Intercepting Routef란

Next.js의 **인터셉팅 라우트(Intercepting Routes)**는 사용자가 현재 페이지에 머물면서도 다른 라우트로 이동한 것처럼 보이게 하는 고급 라우팅 기능입니다. 마치 팝업 모달처럼 현재 페이지 위에 새로운 페이지를 렌더링하는 효과를 구현할 때 주로 사용됩니다.

이 기능의 핵심은, 사용자가 라우트를 이동할 때 URL은 변경되지만 실제 페이지 전환이 일어나지 않고 현재 페이지의 컨텍스트를 유지하는 것입니다. 이를 통해 사용자 경험을 매끄럽게 만들고, 불필요한 페이지 리로드를 줄일 수 있습니다.

작동 방식 ️‍♂️

Next.js에서 인터셉팅 라우트를 사용하려면 파일 시스템에서 특정 경로 앞에 (...) 문법을 추가합니다. 이 문법은 Next.js에게 해당 라우트를 인터셉트할 의도임을 알려줍니다.

예를 들어, photos 페이지에서 특정 사진을 클릭했을 때 모달을 띄워 사진 상세 정보를 보여주고 싶다고 가정해 봅시다.

/app
├── dashboard
│   ├── page.tsx
├── photos
│   ├── page.tsx          // 메인 사진 갤러리 페이지
│   └── [id]
│       └── page.tsx      // 일반적인 사진 상세 페이지
├── (..)photos
│   └── [id]
│       └── page.tsx      // ✅ 인터셉팅 라우트

이 구조에서 사용자가 /photos/[id]로 이동하면, Next.js는 두 가지 경로를 확인합니다.

일반적인 라우트: 사용자가 브라우저 주소창에 /photos/123를 직접 입력하거나 외부에서 접근한 경우, Next.js는 photos/[id]/page.tsx를 렌더링합니다.
인터셉팅 라우트: 사용자가 /photos 페이지에서 <Link>를 통해 photos/123으로 이동한 경우, Next.js는 (..)photos/[id]/page.tsx를 찾아 현재 photos 페이지 위에 모달처럼 겹쳐 렌더링합니다.

주요 장점

향상된 사용자 경험: 페이지 전체를 새로 로드하지 않고 필요한 정보만 팝업 형태로 보여주어 사용자가 맥락을 잃지 않게 합니다.
성능 최적화: 페이지 리로드가 없어 불필요한 데이터 재요청이나 렌더링 오버헤드를 줄일 수 있습니다.
간결한 URL: 모달이 띄워져도 URL은 실제 경로(/photos/[id])를 유지하므로, 북마크하거나 공유하기에 편리합니다.

인터셉팅 라우트 문법

인터셉팅 라우트의 문법은 상대 경로를 나타내는 .을 사용하며, 부모 라우트 세그먼트의 수에 따라 달라집니다.

(.): 같은 폴더 레벨의 라우트를 가로챕니다.
_ 또는 (..): 한 단계 위 폴더의 라우트를 가로챕니다.
(..): 두 단계 위 폴더의 라우트를 가로챕니다.
(...): 루트 폴더의 라우트를 가로챕니다.

[Next] IntersectionObserver

날씨는 맑음 — Sat, 6 Sep 2025 17:08:58 +0900

IntersectionObserver란

웹 브라우저 API로, 개발자가 특정 요소가 뷰포트(viewport)나 다른 요소(루트)와 교차하는지(intersecting) 여부를 비동기적으로 감지하는 데 사용됩니다. 즉, 사용자가 화면을 스크롤할 때 특정 요소가 화면에 나타났는지, 혹은 사라졌는지를 효율적으로 알아내는 도구입니다.

주요 역할과 장점

스크롤 애니메이션/효과: 스크롤이 특정 지점에 도달했을 때 요소를 페이드인(fade-in)시키거나 나타나게 하는 애니메이션을 구현할 수 있습니다.
지연 로딩 (Lazy Loading): 이미지가 화면에 보일 때만 로딩하도록 구현하여 초기 페이지 로딩 속도를 향상시킬 수 있습니다. 이는 사용자가 스크롤을 내릴 때 비로소 이미지를 불러오는 방식입니다.
무한 스크롤: 페이지 맨 아래에 도달했을 때 자동으로 다음 콘텐츠를 불러오는 무한 스크롤 기능을 구현할 수 있습니다.
성능 최적화: 기존의 scroll 이벤트 리스너는 모든 스크롤 동작마다 코드를 실행하여 성능 저하를 일으킬 수 있습니다. IntersectionObserver는 교차 상태 변화가 발생할 때만 콜백 함수를 실행하므로 훨씬 효율적입니다.

기본 사용법

IntersectionObserver를 사용하는 단계는 간단합니다.

Observer 생성: IntersectionObserver 객체를 생성할 때, 두 개의 인자를 전달합니다. 첫 번째는 교차 상태가 변경될 때 실행될 콜백 함수이고, 두 번째는 교차를 감지할 환경을 설정하는 옵션 객체입니다.
관찰 시작: observer.observe(targetElement) 메서드를 사용하여 교차를 감지할 **타겟 요소(target element)**를 지정합니다.

코드 예시:

JavaScript

// 옵션 설정: 뷰포트의 10%가 보이면 콜백 함수를 실행
const options = {
  root: null, // 뷰포트(브라우저 화면)를 기준으로 관찰
  rootMargin: '0px',
  threshold: 0.1 // 타겟 요소가 10% 보일 때
};

// IntersectionObserver 객체 생성
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // isIntersecting이 true이면, 타겟 요소가 뷰포트에 보인다는 의미
      console.log('요소가 화면에 나타났습니다!');
      // TODO: 요소에 애니메이션을 적용하거나 데이터를 로딩하는 코드 작성
      // 더 이상 관찰할 필요가 없다면,
      // observer.unobserve(entry.target);
    }
  });
}, options);

// 관찰할 요소 지정
const target = document.querySelector('.my-element');
observer.observe(target);

위 예시는 .my-element가 화면에 나타날 때 콘솔에 메시지를 출력하는 간단한 코드입니다. 이를 활용하여 지연 로딩, 스크롤 애니메이션 등 다양한 기능을 구현할 수 있습니다.

[Next] middleware

날씨는 맑음 — Sat, 30 Aug 2025 14:58:12 +0900

Next.js에서 middleware란

미들웨어(Middleware)**는 사용자가 특정 페이지로 이동하기 전에 실행되는 코드입니다.

middle의 역할

인증(Authentication): 로그인하지 않은 사용자가 특정 페이지(예: 마이페이지, 관리자 페이지)에 접근하는 것을 막고 로그인 페이지로 리다이렉트합니다.
권한 부여(Authorization): 로그인한 사용자라도 특정 권한이 없는 경우(예: 일반 사용자가 관리자 페이지에 접근) 접근을 차단합니다.
리다이렉션: 특정 조건(예: 구 버전 URL)에 따라 다른 페이지로 이동시킵니다.
A/B 테스트: 사용자에게 무작위로 다른 버전의 페이지를 보여주는 A/B 테스트를 구현할 때 사용합니다.
다국어(i18n): 사용자의 언어 설정에 따라 적절한 언어 버전의 페이지로 안내합니다.

Next.js에서는 middleware.ts 또는 middleware.js 파일을 프로젝트의 루트 디렉토리에 생성하기만 하면 미들웨어가 자동으로 활성화됩니다.

/
├── app/
├── pages/
├── middleware.ts  <-- 여기에 미들웨어를 작성합니다.
├── package.json

단! middleware에서는 node.js 코드를 실행할 수 없습니다!

Node.js 코드를 사용할 수 없는 이유

미들웨어가 엣지에서 실행되는 주된 이유는 성능을 극대화하기 위함입니다. 사용자의 요청이 원본 서버까지 가지 않고도 전 세계에 분산된 엣지 서버에서 즉시 처리될 수 있습니다. 이렇게 되면 인증이나 리다이렉션 같은 작업이 매우 빠르게 이루어집니다.

하지만 이러한 속도를 위해, 미들웨어는 Node.js 환경에서 사용되는 파일 시스템(fs), http 모듈, 또는 다른 Node.js 전용 라이브러리(예: bcrypt)를 사용할 수 없습니다. 이 때문에 console.log와 같은 기본적인 기능만 사용이 가능합니다.