포트폴리오 프로젝트에서 GSAP의 ScrollTrigger를 사용하여 수평 스크롤 애니메이션을 구현했다. 이때 PC에서는 스크롤에 따라 프로젝트 카드들이 수평으로 이동하는 애니메이션이 동작하고, 모바일과 태블릿에서는 일반적인 세로 스크롤 레이아웃을 유지하도록 구현을 시도했지만, 생각한대로 실행되지 않았다.

1. Resize 이슈

레이아웃이 화면 크기에 따라 다르기 때문에, GSAP 애니메이션의 적용 여부도 화면 크기에 따라 달라져야 했다.

• PC 화면: GSAP ScrollTrigger 애니메이션 적용 ✅
• 모바일/태블릿: GSAP 애니메이션 비활성화 (일반 레이아웃) ❌

위 환경에서 화면 너비가 resize 될때마다 GSAP 애니메이션을 동적으로 활성화 또는 비활성화를 해야하는데, 기존 코드가 정상동작하지 않아 새로고침 없이는 반응형으로 구현되지 않는 문제가 발생했다.

!youtube[UUzLg9m2BsQ?si=2A078UXxLGBAIjey]

기존 코드

'use client';
...

const SideProjects = () => {
  const sectionRef = useRef<HTMLElement | null>(null);
  const wrapperRef = useRef<HTMLUListElement | null>(null);
  const { isMobile, isLoaded } = useIsMobile();

  useGSAP(() => {
    if (!isLoaded || isMobile) return;
    if (!sectionRef.current || !wrapperRef.current) return;

    gsap.registerPlugin(ScrollTrigger);

    const section = sectionRef.current;
    const wrapper = wrapperRef.current;
    const sections = gsap.utils.toArray<HTMLLIElement>('.my-projects-section');

    if (sections.length === 0) return;

    const gap = 70;
    const boxWidth = 800;
    const viewportWidth = window.innerWidth;

    const wrapperRect = wrapper.getBoundingClientRect();
    const wrapperLeft = wrapperRect.left;
    const centerOffset = (viewportWidth - boxWidth) / 2 - wrapperLeft;

    gsap.set(wrapper, { x: centerOffset });

    const totalSections = sections.length;
    const scrollDistance = (boxWidth + gap) * (totalSections - 1);

    const snapPoints = sections.map((_, index) => index / (totalSections - 1));

    const animation = gsap.to(wrapper, {
      x: centerOffset - scrollDistance,
      ease: 'none',
      scrollTrigger: {
        trigger: section,
        start: 'top top',
        end: () => `+=${scrollDistance + viewportWidth}`,
        pin: true,
        scrub: 0.5,
        snap: {
          snapTo: (progress) => {
            // 가장 가까운 snap 포인트 찾기
            let closest = snapPoints[0];
            let minDistance = Math.abs(progress - snapPoints[0]);

            snapPoints.forEach((point) => {
              const distance = Math.abs(progress - point);
              if (distance < minDistance) {
                minDistance = distance;
                closest = point;
              }
            });

            return closest;
          },
          duration: { min: 0.1, max: 0.3 }, // 빠른 snap
          delay: 0,
        },
        invalidateOnRefresh: true,
      },
    });

    ScrollTrigger.refresh();

    return () => {
      animation.kill();
      ScrollTrigger.getAll().forEach((trigger) => {
        if (trigger.vars.trigger === section) {
          trigger.kill();
        }
      });
    };
  }, [isLoaded, isMobile]);

  return (
    <S.SideProjects id='my-projects' ref={sectionRef}>
      <Inner>
        <Title text={`MY ✨ \nPROJECTS`} />
      </Inner>
      <S.SideProjectsInner ref={wrapperRef}>
        {sideProjectsList.map((item, index) => (
          <S.SideProjectsInnerBox key={`${item.title}-${index}`} className='my-projects-section'>
            ...
          </S.SideProjectsInnerBox>
        ))}
      </S.SideProjectsInner>
    </S.SideProjects>
  );
};

export default SideProjects;

useIsMobile.ts

모바일 여부(isMobile)와 초기 로드 완료 상태(isLoaded)를 반환하는 커스텀 훅이다.

import { useState, useEffect } from 'react';
import { BREAKPOINT } from '../../../_constant/breakpoint';

export const useIsMobile = (breakpoint: number = BREAKPOINT) => {
  const [isMobile, setIsMobile] = useState(false);
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    const checkIsMobile = () => {
      const mobile = window.innerWidth <= breakpoint;
      setIsMobile(mobile);
      setIsLoaded(true);
    };

    checkIsMobile();
    window.addEventListener('resize', checkIsMobile);

    return () => window.removeEventListener('resize', checkIsMobile);
  }, []);

  return { isMobile, isLoaded };
};

기존 코드에서는 useIsMobile 를 사용했는데, 정상적으로 실행되지 않았다. 그 이유를 찾아보니, 커스텀훅의 경우 React 상태(isMobile) 변경에만 의존하기 때문에 GSAP이 resize 를 직접 감지하지 못하고 있었던 것이다.

2. 해결: gsap.matchMedia()

하지만 이러한 문제는 GSAP 에서 제공하는 기능으로 쉽게 해결할 수 있었다..!

gsap.matchMedia() 란?

GSAP 에서는 미디어 쿼리에 따라 조건부로 애니메이션을 활성화/비활성화할 수 있는 matchMedia() 메서드를 제공해준다.

const mm = gsap.matchMedia();

mm.add('(min-width: 1081px)', () => {
  // PC 화면에서만 실행되는 애니메이션
  gsap.to(element, { x: 100 });
});

mm.add('(max-width: 1080px)', () => {
  // 모바일/태블릿에서만 실행되는 애니메이션
  gsap.to(element, { y: 100 });
});

주요 특징:

• 미디어 쿼리 조건에 따라 애니메이션을 자동으로 활성화/비활성화
• 조건이 맞지 않게 되면 내부의 ScrollTrigger가 자동으로 kill되고 revert 가 실행됨
• mm.revert()를 호출하면 모든 matchMedia 인스턴스가 정리됨
• 리사이즈 이벤트를 자동으로 감지하여 조건에 맞게 애니메이션 재적용

!youtube[CQxLO4GRnf0?si=Ax2kABeVKvpLAm6i]

적용 코드

'use client';

import { BREAKPOINT } from '@/app/_constant/breakpoint';

const SideProjects = () => {
  const sectionRef = useRef<HTMLElement | null>(null);
  const wrapperRef = useRef<HTMLUListElement | null>(null);

  useGSAP(() => {
    if (!isLoaded) return;
    if (!sectionRef.current || !wrapperRef.current) return;

    const mm = gsap.matchMedia();

    // PC 화면에서만 ScrollTrigger 애니메이션 적용
    mm.add(`(min-width: ${BREAKPOINT + 1}px)`, () => {
      gsap.registerPlugin(ScrollTrigger);

      const section = sectionRef.current;
      const wrapper = wrapperRef.current;
      const sections = gsap.utils.toArray<HTMLLIElement>('.my-projects-section');

      if (!section || !wrapper || sections.length === 0) return;

      const gap = 70;
      const boxWidth = 800;
      const viewportWidth = window.innerWidth;

      const wrapperRect = wrapper.getBoundingClientRect();
      const wrapperLeft = wrapperRect.left;
      const centerOffset = (viewportWidth - boxWidth) / 2 - wrapperLeft;

      gsap.set(wrapper, { x: centerOffset });

      const totalSections = sections.length;
      const scrollDistance = (boxWidth + gap) * (totalSections - 1);

      const snapPoints = sections.map((_, index) => index / (totalSections - 1));

      const animation = gsap.to(wrapper, {
        x: centerOffset - scrollDistance,
        ease: 'none',
        scrollTrigger: {
          trigger: section,
          start: 'top top',
          end: () => `+=${scrollDistance + viewportWidth}`,
          pin: true,
          scrub: 0.5,
          snap: {
            snapTo: (progress) => {
              let closest = snapPoints[0];
              let minDistance = Math.abs(progress - snapPoints[0]);

              snapPoints.forEach((point) => {
                const distance = Math.abs(progress - point);
                if (distance < minDistance) {
                  minDistance = distance;
                  closest = point;
                }
              });

              return closest;
            },
            duration: { min: 0.1, max: 0.3 },
            delay: 0,
          },
          invalidateOnRefresh: true,
        },
      });

      ScrollTrigger.refresh();

      return () => {
        animation.kill();
        ScrollTrigger.getAll().forEach((trigger) => {
          if (trigger.vars.trigger === section) {
            trigger.kill();
          }
        });
      };
    });

    return () => mm.revert();
  }, [isLoaded]);

  return (
    <S.SideProjects id='my-projects' ref={sectionRef}>
      {/* ... JSX 내용 ... */}
    </S.SideProjects>
  );
};

export default SideProjects;

위 내용을 바탕으로 matchMedia() 를 사용한 후, 화면 크기에 따라 자동으로 애니메이션이 적용되고 제거되면서 GSAP 기능이 포함된 반응형 레이아웃을 정상적으로 구현할 수 있었다🥹

3. 또 다른 문제 (feat.레이아웃 와장창)

하지만 예상치 못한 문제가 발생했는데... 내용은 아래와 같았다

문제 상황

• ✅ PC → Mobile로 리사이즈: 정상적으로 동작
• ❌ Mobile → PC로 리사이즈: 레이아웃이 깨지고 GSAP 애니메이션이 이상하게 동작

말 그대로 PC 화면에서 모바일로 리사이즈할 때는 애니메이션이 정상적으로 비활성화되었지만, 모바일에서 PC로 리사이즈할 때는 요소의 위치가 엉망이 되고 애니메이션이 제대로 동작하지 않는 현상이 발생하는 것이다🤬

!youtube[eoNpb8KhxkQ?si=-_unlKvnNBcPeN3M]

원인 분석

AI 를 사용하여 분석해봤는데, 주요 원인은 GSAP 애니메이션이 요소에 인라인 스타일을 직접 적용하기 때문인것으로 확인됐다. 쉽게 말해, 문제의 흐름은 아래와 같이 흘러간다.

문제의 흐름:

1. PC 화면에서 GSAP가 transform: translateX(...)와 같은 인라인 스타일을 요소에 적용이 됨 (아래와 같은 형식으로!)

   <ul style="transform: translate3d(-XXXpx, 0px, 0px); ...">...</ul>

2. 모바일로 전환될 때 matchMedia()가 애니메이션을 비활성화 (kill)

3. 하지만 이미 적용된 인라인 스타일(transform, x 등)이 완전히 제거되지 않고 남아있음

4. 모바일에서 PC로 다시 돌아올 때:

   • 이전에 남아있는 (모바일의)인라인 스타일
   • 새로운 애니메이션 계산값
   • CSS 스타일

   이 세 가지가 충돌하여 레이아웃이 깨지게된 것이다

즉 gsap.matchMedia의 조건에 맞지 않을 때 revert() 가 자동으로 실행되면서 애니메이션을 되돌리지만, 스타일이 변경되기 전의 원래 인라인 상태로 완벽하게 되돌린다는 보장이 없기 때문에 이런 문제가 발생하게 되었다.

4. 진짜 최종 해결

ScrollTrigger.saveStyle()

GSAP는 이런 문제를 해결하기 위해 ScrollTrigger.saveStyles() 메서드를 제공한다고 한다.

ScrollTrigger.saveStyles('.my-projects-section, .my-projects-section *');

역할:

1. 애니메이션 적용 전 요소의 원래 인라인 스타일을 기록
2. matchMedia()가 애니메이션을 비활성화할 때 저장된 스타일로 자동 복원
3. 스타일 충돌을 방지하고 레이아웃을 원상복구

사용 시점:

• 컴포넌트가 마운트되고 DOM이 준비된 후
• 애니메이션이 시작되기 전에 한 번만 호출
• useEffect를 사용하여 적절한 타이밍에 호출

위 내용을 토대로 아래와 같이 코드를 수정해봤다. 🔽

수정된 코드

'use client';

import { BREAKPOINT } from '@/app/_constant/breakpoint';

// GSAP ScrollTrigger 플러그인 등록
if (typeof window !== 'undefined') {
  gsap.registerPlugin(ScrollTrigger);
}

const SideProjects = () => {
  const sectionRef = useRef<HTMLElement | null>(null);
  const wrapperRef = useRef<HTMLUListElement | null>(null);

  // 애니메이션 대상 요소의 원본 스타일을 저장
  useEffect(() => {
    if (typeof window !== 'undefined' && isLoaded) {
      ScrollTrigger.saveStyles('.my-projects-section, .my-projects-section *');
    }
  }, [isLoaded]);

  useGSAP(() => {
    if (!isLoaded) return;
    if (!sectionRef.current || !wrapperRef.current) return;

    const mm = gsap.matchMedia();

    mm.add(`(min-width: ${BREAKPOINT + 1}px)`, () => {
      const section = sectionRef.current;
      const wrapper = wrapperRef.current;
      const sections = gsap.utils.toArray<HTMLLIElement>('.my-projects-section');

      if (!section || !wrapper || sections.length === 0) return;

      ...

      const animation = gsap.to(wrapper, {
        ...
      });

      ScrollTrigger.refresh();

      return () => {
        animation.kill();
        ScrollTrigger.getAll().forEach((trigger) => {
          if (trigger.vars.trigger === section) {
            trigger.kill();
          }
        });
      };
    });

    return () => mm.revert();
  }, [isLoaded]);

  return (
    <S.SideProjects id='my-projects' ref={sectionRef}>
      {/* ... JSX 내용 ... */}
    </S.SideProjects>
  );
};

export default SideProjects;

주요 변경 사항

1. ScrollTrigger.saveStyles() 추가

   useEffect(() => {
     if (typeof window !== 'undefined' && isLoaded) {
       ScrollTrigger.saveStyles('.my-projects-section, .my-projects-section *');
     }
   }, [isLoaded]);

   • DOM이 준비된 후 애니메이션 대상 요소의 원본 스타일을 저장
   • *를 포함하여 자식 요소까지 저장하여 안전하게 처리
   • isLoaded가 true가 된 후 실행되어 DOM이 완전히 준비된 상태에서 저장

2. gsap.registerPlugin() 위치 변경

   • 컴포넌트 외부로 이동하여 한 번만 등록되도록 수정
   • matchMedia() 콜백 내부에서 중복 등록 제거

3. invalidateOnRefresh: true 유지

   • 리사이즈 시 ScrollTrigger가 계산값을 재계산하도록 유지
   • saveStyles()와 함께 사용하면 더욱 안정적

결과

이제 아래 사항이 모두 해결된 모습을 확인할 수 있었다 ✨

• GSAP 애니메이션 여부가 PC/Tablet/Mobile 사이즈별로 정상 작동
• Mobile -> PC 로 resize 될 때 해당하는 화면 레이아웃대로 정상 복귀

!youtube[6NVnyykWw3M?si=VByikpB2tmR2gXll]

참고

• GSAP ScrollTrigger.matchMedia() 문서
• GSAP ScrollTrigger.saveStyles() 문서

Next.js와 Supabase를 사용한 프로젝트에서 이미지 업로드 기능을 구현할 때, 초기에는 Next.js 서버(API Route)를 경유하는 방식으로 구현했다. 하지만 그 과정에서 여러 문제점들이 발견되어 Supabase의 Signed URL 방식을 활용한 직접 업로드 방식으로 전환하게 되었다

지인들에게 각각 모바일, pc 로 이미지테스트를 부탁했을 때 아래와 같은 에러들이 발생한 상황이었다..

기존 이미지 업로드 방식

구현 방식

기존에는 클라이언트에서 파일을 Next.js 서버(API Route)로 전송하고, Next.js 서버에서 Supabase Storage에 업로드하는 방식이었다.

클라이언트 코드 (PostForm.tsx)

// API Route로 파일 업로드
const handleUpload = async (formData: FormData) => {
  try {
    const res = await fetch('/api/upload', {
      method: 'POST',
      body: formData,
    });

    const result = await res.json();

    if (!res.ok) {
      const errorMessage = result.error || `업로드 실패 (상태 코드: ${res.status})`;
      throw new Error(errorMessage);
    }

    return result;
  } catch (error) {
    if (error instanceof Error) {
      if (error.message.includes('Failed to fetch') || error.message.includes('NetworkError')) {
        throw new Error('네트워크 연결에 문제가 있습니다. 인터넷 연결을 확인해주세요.');
      }
      throw error;
    }
    throw new Error('파일 업로드 중 알 수 없는 오류가 발생했습니다.');
  }
};

서버 코드 (api/upload/route.ts)

export async function POST(req: NextRequest) {
  try {
    const formData = await req.formData();
    const files = Array.from(formData.entries()).map(([, file]) => file as File);

    const result = await Promise.all(
      // 여러 파일 한 번에 업로드 처리
      files.map(async (file) => {
        const supabase = await createServerSupabaseClient();
        const { data, error } = await supabase.storage
          .from(process.env.NEXT_PUBLIC_STORAGE_BUCKET!)
          .upload(file.name, file, { upsert: true });
        if (error) {
          throw new Error(error.message);
        }
        return { data };
      }),
    );
    return NextResponse.json({ result });
  } catch (err: unknown) {
    const error = err as Error;
    return NextResponse.json({ error: error.message }, { status: 500 });
  }
}

⚠️ 기존 방식의 문제점

• 다수의 이미지 업로드 시 413 Payload Too Large 에러 발생
• 업로드되는 파일이 Next 서버를 경유하면서 자체 파일 용량을 제한 (Next.js의 API Route나 Server Actions은 기본적으로 요청 본문(Payload) 크기를 1MB에서 4MB 사이로 매우 작게 설정한다고 한다.. 어쩐지 4mb 정도가 넘어가면 에러가 계속 떴는데 이 부분도 원인이었다..)
• 에러 응답이 JSON 형식이 아닐 때 파싱 실패

✅ 해결 방법: Signed URL 방식

Supabase의 Signed URL 방식을 사용하면 클라이언트에서 직접 Supabase Storage에 업로드할 수 있다고 한다. 이 방식을 사용하게 되면 Next.js 서버는 딱 Signed URL을 발급하는 역할만 하게 된다. Signed URL은 일정 시간 동안만 유효하고 Next.js 서버에서 인증된 사용자에게만 발급이 되는데, 이에 따라서 보안상 안전하게 사용할 수 있다고 한다.

새로운 구현 방식

서버 코드 (api/upload/route.ts) - Signed URL 발급만 담당

supabase 의 createSignedUploadUrl() 를 통해 presignedUrl 을 발급해준다

import { NextRequest, NextResponse } from 'next/server';
import { createServerSupabaseClient } from 'utils/supabase/server';

export const runtime = 'nodejs';
export const maxDuration = 60;

// Signed URL 발급 전용 API
export async function POST(req: NextRequest) {
  try {
    const supabase = await createServerSupabaseClient();
    const bucket = process.env.NEXT_PUBLIC_STORAGE_BUCKET;

    if (!bucket) {
      return NextResponse.json(
        { error: 'Missing bucket name' },
        { status: 500, headers: { 'Content-Type': 'application/json' } },
      );
    }

    const body = await req.json();
    const { fileName, fileType } = body;

    if (!fileName || !fileType) {
      return NextResponse.json(
        { error: 'fileName & fileType required' },
        { status: 400, headers: { 'Content-Type': 'application/json' } },
      );
    }

    // 안전한 파일명 생성
    const safeNameBase = fileName.replace(/[^a-zA-Z0-9._-]/g, '_') || 'image';
    const fileExt = fileName.split('.').pop()?.toLowerCase() || 'jpg';
    const finalName = `${Date.now()}_${Math.random()
      .toString(36)
      .substring(2, 8)}_${safeNameBase}.${fileExt}`;

    // Signed URL 생성
    const { data, error } = await supabase.storage.from(bucket).createSignedUploadUrl(finalName);

    if (error) {
      return NextResponse.json(
        { error: error.message },
        { status: 500, headers: { 'Content-Type': 'application/json' } },
      );
    }

    if (!data?.signedUrl || !data?.path) {
      return NextResponse.json(
        { error: 'Failed to create signed URL' },
        { status: 500, headers: { 'Content-Type': 'application/json' } },
      );
    }

    return NextResponse.json(
      { signedUrl: data.signedUrl, path: data.path },
      { status: 200, headers: { 'Content-Type': 'application/json' } },
    );
  } catch (err) {
    return NextResponse.json(
      { error: (err as Error).message ?? 'Unknown error' },
      { status: 500, headers: { 'Content-Type': 'application/json' } },
    );
  }
}

클라이언트 코드 (PostForm.tsx) - 직접 업로드

const handleUpload = async (files: File[]): Promise<Array<{ path: string }>> => {
  // 순차 업로드로 JSON 파싱 에러 방지
  const uploadResults: Array<{ path: string }> = [];

  for (const file of files) {
    try {
      if (!file) throw new Error('파일이 없습니다.');

      // 1) 서버에서 signed URL 요청
      const signRes = await fetch('/api/upload', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          fileName: file.name,
          fileType: file.type,
        }),
      });

      // 응답이 JSON인지 확인
      const contentType = signRes.headers.get('content-type');
      if (!contentType || !contentType.includes('application/json')) {
        const text = await signRes.text();
        throw new Error(`서버 응답 오류 (상태: ${signRes.status}): ${text.substring(0, 100)}`);
      }

      let signData;
      try {
        signData = await signRes.json();
      } catch {
        const text = await signRes.text();
        throw new Error(`JSON 파싱 실패: ${text.substring(0, 100)}`);
      }

      if (!signRes.ok) {
        throw new Error(signData.error || 'Signed URL 발급 실패');
      }

      if (!signData.signedUrl || !signData.path) {
        throw new Error('Signed URL 또는 경로가 없습니다.');
      }

      // 2) signed URL로 직접 Supabase에 업로드
      const uploadRes = await fetch(signData.signedUrl, {
        method: 'PUT',
        headers: {
          'Content-Type': file.type,
        },
        body: file,
      });

      if (!uploadRes.ok) {
        throw new Error(`Supabase 업로드 실패: ${uploadRes.statusText}`);
      }

      // 최종적으로 저장된 경로 반환
      uploadResults.push({ path: signData.path });
    } catch (err) {
      throw new Error(
        err instanceof Error ? `업로드 실패 (${file.name}): ${err.message}` : '업로드 실패',
      );
    }
  }

  return uploadResults;
};

개선 후 결과

• Next.js 서버는 파일을 받지 않고 Signed URL만 발급하므로 메모리 사용량이 크게 감소
• Next.js 서버를 거치지 않으므로 Next.js의 자체의 파일 크기 제한 없이 업로드 가능 (Supabase Storage의 제한만 따름)
• 순차 업로드로 변경하여 JSON 파싱 에러를 방지
• 서버 응답 형식 검증 강화
• 클라이언트에서 직접 Supabase로 업로드하므로 더 빠른 업로드 속도

이렇게 Supabase의 Signed URL 방식을 사용하여 이미지 업로드 기능을 개선했다. 파일 크기 제한을 완화하는것에서 그치지 않고 Next.js 서버 부하를 줄일 수 있었고, 부가적으로 개별 파일에 대한 에러나 JSON 관련 등 에러 처리를 강화했다.

위와 같은 개선을 통해 사용자 경험을 향상시키고, Next.js 서버 리소스를 효율적으로 사용할 수 있게 되었다.

인스타그램 클론 프로젝트 J-Stagram 의 피드 형식 게시글 기능을 만드는 과정에서, 게시글 리스트를 불러오는 것까지 완성 후 해당 게시글의 작성자를 불러오는 작업을 진행중이었다. 이를 Supabase 의 Admin API 인 listUsers() 를 통해 현재 가입된 모든 사용자 리스트를 불러왔다. 그 이후 게시글의 user_id(supabase 의 User 와 연결됨) 에 해당하는 유저를 찾아 작성자의 프로필 사진 및 이름을 담은 user 정보 객체를 담고자 했다.

export async function getPosts({ searchInput = '' }): Promise<PostWithImages[]> {
  const supabase = await createServerSupabaseClient();

  const { data: posts, error } = await supabase
    .from('posts')
    .select(
      `
      id,
      title,
      content,
      user_id,
      created_at,
      images (url)
    `,
    )
    .eq('is_public', true)
    .like('title', `%${searchInput}%`)
    .order('created_at', { ascending: true });

  if (error) handleError(error);

  // Admin client 사용
  const supabaseAdmin = await createServerSupabaseAdminClient();
  const { data: allUsers, error: usersError } = await supabaseAdmin.auth.admin.listUsers();

  if (usersError) handleError(usersError);

 ...
}

listUsers() 를 통해 모든 사용자 데이터를 allUsers 라는 이름으로 가져왔는데, 이를 posts 데이터를 return 하기 전에 user_info 형태로 끼워줄 생각이었다.

이때 find 메서드를 사용하려다, 커서를 활용하여 더 좋은 방법이 없는지 검색해보니 Map 객체를 활용하면 더 좋을 것이라는 내용이 있었다.

MDN 문서에 따르면, Map은 키와 값 쌍을 저장하고, 넣은 순서를 기억하며 숫자, 문자, 객체 등 어떤 값도 키로 쓸 수 있는 객체라고 한다. 즉 효율 좋고 빠른 키-값 저장소로, id → 객체 형태로 매핑할 수 있는 훨씬 깔끔한 구조를 만들 수 있었다.

const userMap = new Map(
  allUsers.users.map((u) => [
    u.id,
    {
      email: u.email,
      user_metadata: u.user_metadata,
    },
  ]),
);

return posts.map((post) => ({
  ...post,
  images: post.images ?? [],
  user_info: userMap.get(post.user_id) ?? null,
}));

Map 을 사용하면 위와 같이 유저 데이터를 매핑 할 수 있다. get 은 Map이나 객체에서 특정 키에 해당하는 값을 가져오는 메서드인데, 이를 통해 게시글의 작성자 user_id 로 키 값인 user 의 id 와 바로 대조하여 값을 찾을 수 있다.

결과를 봤을 때, posts 의 각 post 마다 해당하는 유저 데이터가 잘 삽입이 된 것을 확인할 수 있었다.

{
  "id": 2,
  "title": "게시글1",
  "content": "게시글 내용입니드아아앙",
  "user_id": "e007aca1-3f90-48fe-acaf-7d6ee201e56a",
  "created_at": "2025-09-12T07:40:11.341386+00:00",
  "images": [
    {
      "url": "https://ejxzslfkaxsbcabuiqzs.supabase.co/storage/v1/object/public/gallery/IMG_2576.JPG"
    },
    {
      "url": "https://ejxzslfkaxsbcabuiqzs.supabase.co/storage/v1/object/public/gallery/IMG_5620.jpg"
    }
  ],
  "user_info": {
    "email": "konnimey@naver.com",
    "user_metadata": {
      "avatar_url": "http://k.kakaocdn.net/dn/bvW2Ym/btsQcnFilfU/tDTGJkVGS1ps69BHoAHwr1/img_640x640.jpg",
      "email": "konnimey@naver.com",
      "email_verified": true,
      "full_name": "혜진",
      "iss": "https://kapi.kakao.com",
      "name": "혜진",
      "phone_verified": false,
      "preferred_username": "혜진",
      "provider_id": "4363702432",
      "sub": "4363702432",
      "user_name": "혜진"
    }
  }
}

사용자의 프로필 사진과 이름이 잘 뜨는 것도 확인할 수 있었다

Map vs find 둘의 차이를 더 쉽게 알아보자

new Map 과 find 는 둘 다 "특정 데이터를 찾아내는 역할"을 할 수 있는데, 내부 동작 방식이 달라서 성능 차이가 있다.

1. find

배열에서 조건에 맞는 첫 번째 요소를 찾는 메서드

const users = [
  { id: '1', name: '철수' },
  { id: '2', name: '영희' },
  { id: '3', name: '민수' },
];

// id가 '2'인 사용자 찾기
const user = users.find((u) => u.id === '2');
console.log(user); // { id: '2', name: '영희' }

이는 조건에 맞는 요소를 찾을 때까지 배열을 앞에서부터 끝까지 검사하며, 최악의 경우 배열 전체를 다 돌아야 한다. 지금같은 사이드 프로젝트에서처럼 사용자 데이터가 적을 때는 괜찮지만, 이후 실제 운영업무를 수행할 때 데이터가 수천~수만 건 이상이되면 성능이 저하될 우려가 있다.

2. Map

키-값 쌍을 저장하는 자료구조이며, 키로 바로 접근이 가능하다.

const userMap = new Map([
  ['1', { id: '1', name: '철수' }],
  ['2', { id: '2', name: '영희' }],
  ['3', { id: '3', name: '민수' }],
]);

const user = userMap.get('2');
console.log(user); // { id: '2', name: '영희' }

get() 을 사용하면 바로 해당하는 값을 찾으며, 데이터가 많아져도 성능이 거의 일정하다. 다만 find처럼 조건부 탐색(ex. "name이 영희인 사용자")에는 적합하지 않다는 단점이 있다.

두 개념 모두 장단점이 있지만, find 의 경우엔 매번 전체 배열을 돌면서 찾아야 하기 때문에 성능이 나빠지므로 조건이 붙지 않는 탐색의 경우엔 Map 객체를 적극 사용하는 것이 좋을 것 같다..!

Next.js 환경에서 Supabase 의 스토리지를 연결하여 파일업로드를 하는 작업을 진행하고 있었다. 하지만 계속 400 BadRequest 가 떠서 Supabase 공식문서 및 여러 곳에서 검색을 해보았지만 명확한 원인을 찾지 못했다…🙁

파일을 선택한 후 “파일업로드” 버튼을 누르면 Supabase 의 스토리지에 저장되도록 로직을 짜놓은 상태

storageActions.ts

'use server';

import { createServerSupabaseClient } from 'utils/supabase/server';

function handleError(error: Error) {
  if (error) {
    console.error(error);
    throw error;
  }
}

export async function uploadFile(formData: FormData) {
  const supabase = await createServerSupabaseClient();
  const file = formData.get('file') as File;

  const { data, error } = await supabase.storage
    .from(process.env.NEXT_PUBLIC_STORAGE_BUCKET)
    .upload(file.name, file, { upsert: true });

  handleError(error);
  return data;
}

AddFileZone.tsx

'use client';

import React, { useRef } from 'react';
import * as S from './styled';
import Button from '@/app/_modules/common/components/button/button/Button';
import { uploadFile } from 'actions/storageActions';

const AddFileZone = () => {
  const fileRef = useRef<HTMLInputElement>(null);

  return (
    <S.AddFileZone
      onSubmit={async (e) => {
        e.preventDefault();
        const file = fileRef.current?.files?.[0];
        if (file) {
          const formData = new FormData();
          formData.append('file', file);
                    await uploadFile(formData);
        }
      }}
    >
      <input type='file' ref={fileRef} />
      <Button
        type='submit'
        text='파일 업로드'
        iconName='plus'
        filled
      />
    </S.AddFileZone>
  );
};

export default AddFileZone;

서버액션 파일에서 uploadFile 함수를 가져와 선택된 file 을 인수로 넣어 작동하게끔 해놓았다.

하지만 계속 에러가 뜨는 상황이었다.

수정

결국 AI 를 통해그 원인을 찾아보니, Next.js 에서는 서버액션을 할 때 FormData 형식의 데이터를 받는데 제한이 있다고 한다. 그래서 아래와 같이 수정을 했다.

AddFileZone.tsx

'use client';

import React, { useRef } from 'react';
import * as S from './styled';
import Button from '@/app/_modules/common/components/button/button/Button';

const AddFileZone = () => {
  const fileRef = useRef<HTMLInputElement>(null);

  // API Route로 파일 업로드
  const handleUpload = async (formData: FormData) => {
    const res = await fetch('/api/upload', {
      method: 'POST',
      body: formData,
    });
    const result = await res.json();
    if (!res.ok) throw new Error(result.error || 'Upload failed');
    return result.data;
  };

  return (
    <S.AddFileZone
      onSubmit={async (e) => {
        e.preventDefault();
        const file = fileRef.current?.files?.[0];
        if (file) {
          const formData = new FormData();
          formData.append('file', file);
          try {
            const result = await handleUpload(formData);
            console.log(result);
          } catch (err) {
            alert((err as Error).message);
          }
        }
      }}
    >
      <input type='file' ref={fileRef} />
      <Button type='submit' text='파일 업로드' iconName='plus' filled />
    </S.AddFileZone>
  );
};

export default AddFileZone;

서버액션인 uploadFile 을 무시하고, 따로 API Router 를 통해 클라이언트 요청을 진행했다.

route.ts

import { NextRequest, NextResponse } from 'next/server';
import { createServerSupabaseClient } from 'utils/supabase/server';

export async function POST(req: NextRequest) {
  try {
    const formData = await req.formData();
    const file = formData.get('file') as File | null;
    if (!file) {
      return NextResponse.json({ error: 'No file provided' }, { status: 400 });
    }

    const supabase = await createServerSupabaseClient();
    const { data, error } = await supabase.storage
      .from(process.env.NEXT_PUBLIC_STORAGE_BUCKET!)
      .upload(file.name, file, { upsert: true }); // safeName을 key로 사용
    if (error) {
      return NextResponse.json({ error: error.message }, { status: 500 });
    }
    return NextResponse.json({ data });
  } catch (err: any) {
    return NextResponse.json({ error: err.message || 'Unknown error' }, { status: 500 });
  }
}

이렇게 했더니 잘 동작하는 모습을 볼 수 있었다..!

하지만 파일 형식의 데이터가 왜 서버액션에서 지원이 안되는걸까 ㅠㅠ

슬라이드 배너를 만들 때, 각 요소 썸네일 이미지의 색을 추출해 배경색을 깔아달라는 디자인의 요청이 있었다. 그래서 발견한 것이 ColorThief 라는 라이브러리..! ColorThief 는 Javascript만 사용하여 이미지에서 색상 팔레트를 가져오는 라이브러리라고 한다.

ColorThief 를 설치 후 import 해주자

npm i --save colorthief

import ColorThief from 'colorthief';

const imageRef = useRef<HTMLImageElement>(null);
const colorThief = useRef<ColorThief | null>(null);
const [colorList, setColorList] = useState<string[]>([]);
const [error, setError] = useState<string | null>(null);

useEffect(() => {
  colorThief.current = new ColorThief();
}, []);

ColorThief 인스턴스를 생성한 후 ref에 저장해주자

imageRef 역시 img 요소를 반복문으로 저장해주고 있다.

const { slides, options, isAutoPlay = true, onClick } = props;
// slides: 슬라이드 요소(ReactNode)가 담긴 배열

<S.EmblaContainer className='embla__container'>
    {slides?.map((slide, index) => (
      <S.EmblaSlide
        className='embla__slide'
        $isOnClick={!!onClick}
        key={index}
        onClick={() => onClick?.(slide)}
      >
        <S.EmblaSlideContent>
          <S.EmblaSlideImage>
            <S.EmblaSlideImageBadge>
              {slide.isNew && (
                <CommonBadge
                  label='NEW'
                  color='primary.blue'
                  bgColor='secondary.skyblue'
                  borderNone
                />
              )}
            </S.EmblaSlideImageBadge>
            {error && <div>오류 발생: {error}</div>}
            <img
              ref={imageRef}
              src={slide?.attach?.realPath}
              alt={slide?.title}
              onLoad={handleImageLoad(index)}
              crossOrigin='anonymous'
              style={{ display: 'block' }}
              className={`embla-slide-image-${index}`}
            />

            ...

img 가 로드될 때를 기점으로 이미지를 참조하여 colorThief 내장함수인 getColor() 의 인수로 넣어준다.

이때, getColor() 함수가 내부적으로 img 의 데이터를 가져오려 하면서 아래와 같은 예외 상황이 발생할 수 있다.

• 이미지가 cross-origin 상태일 때 (CORS 문제),
• img가 아직 완전히 로드되지 않았을 때

이런 상황을 대비해 try/catch 문을 사용해주자.

그렇게 하면 rgb 세가지 숫자를 반환해주는데(ex. 23, 31, 54), 이때 이 세가지 값들이 들어간 dominantColor 를 colorList 에 rgb 문자 형식으로 넣어주면 된다.!

const handleImageLoad = (index: number) => (event: React.SyntheticEvent<HTMLImageElement>) => {
  const img = event.currentTarget;

  if (colorThief.current) {
    try {
      const dominantColor = colorThief.current.getColor(img);
      const rgbString = `rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})`;
      setColorList((prev) => {
        const newList = [...prev];
        newList[index] = rgbString;
        return newList;
      });
      setError(null);
    } catch (err) {
      setError('색상 추출 중 오류가 발생했습니다.');
      console.error(err);
    }
  }
};

하지만 새로고침을 했을 경우 색상이 추출되지 않는 상황이 발생했다.

이는 useEffect 로 따로 설정을 해주었다.

위에서 언급했듯이, 이미지가 완전히 로드되었을 때를 기점으로 불러주는것이 바람직하기 떄문에 img.complete 등의 조건부를 넣어주자.

// 새로고침 or 슬라이드가 변경되거나 컴포넌트가 마운트될 때 색상 추출 시도
  useEffect(() => {
    if (slides && colorThief.current && Array.isArray(slides)) {
      // 약간의 지연 후 색상 추출 시도 (이미지가 로드되었을 가능성)
      const timer = setTimeout(() => {
        slides.forEach((_, index) => {
          const img = document.querySelector(`.embla-slide-image-${index}`) as HTMLImageElement;
          if (img && img.complete && img.naturalWidth > 0) {
            try {
              const dominantColor = colorThief.current!.getColor(img);
              const rgbString = `rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})`;
              setColorList((prev) => {
                const newList = [...prev];
                newList[index] = rgbString;
                return newList;
              });
            } catch (err) {
              console.error(`색상 추출 실패 (인덱스 ${index}):`, err);
            }
          }
        });
      }, 100);

      return () => clearTimeout(timer);
    }
  }, [slides]);

마지막 코드를 추가해주니 새로고침을 했을 때도 정상적으로 색상이 잘 추출되는 것을 확인할 수 있었다..! ☺️

검색 AI 기능쪽에서 현재 AI 답변 결과는 컨텐츠에 따라 문단으로 분류되어 데이터가 내려오는데, 그 컨텐츠의 title 값을 한글 제목으로 치환해야 했다. 그래서 redux 의 state 값을 활용하던 중 아래와 같은 useSelector 를 사용한 쪽에서 에러가 발생했고, 내가 사용한 곳 외에도 해당 state 값을 불러온 모든 부분에서 같은 에러가 발생하고 있었다 😱

“Selector unknown returned a different result when called with the same parameters. This can lead to unnecessary rerenders. Selectors that return a new reference (such as an object or an array) should be memoized:”

리덕스에서 common 의 enum 값은 다음과 같은데, 내가 사용하고자 한 것은 ‘ai-search-category-type’ 라는 데이터였다.

commonSlice.ts

import { createSlice } from '@reduxjs/toolkit';
import { createSelector } from '@reduxjs/toolkit';

import { AppState } from '../types';

type Enum = {
  key: string;
  value: any;
};

const initialState = {
  enum: {},
};

const commonSlice = createSlice({
  name: 'common',
  initialState,
  reducers: {
    setEnum: (state, actions) => {
      state.enum = actions.payload;
    },
  },
});

export const { setEnum } = commonSlice.actions;

// Selectors
export const selectEnums =
  (selectors: string[] = []) =>
  ({ common }: AppState) => {
    const result: Enum[][] = [];
    selectors.forEach((selector) => result.push(common.enum[selector]));
    return result;
  };

export default commonSlice.reducer;

selectEnums 활용:

가져오고자 하는 enum 데이터의 key 값이 담긴 배열을 인수로 넣어 사용

import { useSelector } from 'react-redux';
import { selectEnums } from '@common/persistence/store/slices/commonSlice';

const [aiSearchCategoryTypeList] = useSelector(selectEnums(['ai-search-category-type']));

문제점

기존 코드에서 selectEnums 는 반환되는 값의 형태가 배열이다. 이때 result는 매번 새로운 배열([])로 생성되는데 이는 결국 useSelector 가 호출될 때마다 새로운 배열이 참조되었던 것이었다.

그렇다.. 이 부분이 문제의 원인이었다.

useSelector는 useState와 같은 개념으로, 같은 데이터를 가지고 있더라도 배열이 새로 생성되면 다른 값으로 인식해서 불필요한 리렌더링을 유발한다고 한다.

해결

createSelector 로 메모이제이션 적용

현재 selectEnums는 Reselect의 createSelector를 사용하지 않아서, 캐싱 없이 무조건 새로운 배열을 반환하고 있었다. 여기서 Reselect 는 기본적으로 메모이제이션을 제공하는 라이브러리이다.

createSelector 는 새로운 값을 반환할 때 다시 리렌더링 되더라도 이전의 로직을 수행하는 대신 캐싱해두었던 값을 반환해준다.

즉, 같은 입력이 들어왔을 때 기존 값을 재사용할 수 있다는 것이다.

import { createSelector } from '@reduxjs/toolkit';

...

export const selectEnums = (selectors: string[]) =>
  createSelector(
    (state: AppState) => state.common.enum,
    (enums) => selectors.map((selector) => enums[selector] || []),
  );

createSelector 로 코드를 수정한 후 다시 실행해보니 말끔히 사라진 에러를 확인할 수 있었다.

참고:

https://velog.io/@hahagarden/useSelector-최적화로-리렌더링-줄이기 https://velog.io/@2ast/React-redux-toolkit의-createSelector로-state-reselect하기

검색 페이지에서 탭을 누를때마다 그에 해당하는 뉴스 목록이 나오도록 구현중이었다. 근데 여기서 하나의 문제가 발생했는데… “정책뉴스” 라는 탭의 목록 api 요청 시간이 다른 탭보다 오래걸려 요청중 다른 탭을 누르면, 다른 탭의 목록 데이터가 뿌려진 그 이후에 한 번 더 이전에 요청된 목록 데이터값이 덮어씌어지는 이슈가 있었다.

...
const useSearchList = () => {
  const router = useRouter();

  const [searchType, setSearchType] = useState<string>();
  const [searchList, setSearchList] = useState<any[]>([]);
  const [isFetching, setIsFetching] = useState(false);

  const currentAbortController = useRef<AbortController | null>(null);

  ...
  const getSearchList = useCallback(
    async (newSearchType: string) => {
      setIsFetching(true);
      const { word } = router.query;

      try {
        const params: SearchListParameter = new SearchListParameter({
          size: LIST_SIZE,
          word: word as string,
        });
        const {
          data: { content, last },
        } = await axios.get<SearchListResponse>(
          `/api/search/${newSearchType}${params.stringify()}`);
        setSearchType(newSearchType);

        // 요청값을 content 목록에 담음
        setSearchList(content);
      } catch (error: any) {
        console.error(error.response || error);
      } finally {
        setIsFetching(false);
      }
    },
    [router],
  );

...

setSearchList 에 데이터의 content 배열이 들어가는 구조다. 현재 이전의 요청이 한 번 더 setSearchList 에 들어가고 있다.

문제점

정책뉴스 탭 클릭

정책뉴스 목록 api 가 요청중인 pending 상태일 때, 중간에 “소플 Today” 라는 탭을 누르면 소플 Today의 목록 api 가 요청되는데, 이전에 보냈던 정책뉴스 목록 api 가 그대로 남아 요청중임을 알 수 있다.

몇 초 뒤 정책뉴스 목록 요청값이 뒤 늦게 들어오면서, 원래 “소플 Today” 데이터 값이 “정책뉴스” 데이터로 바뀌어버린 것을 확인할 수 있다.

그래서 이전에 요청된 api 를 중간에 취소할 수 있을까 하며 구글을 찾아봤는데 그 해결책은 바로 AbortController 였다.

AbortController

AbortController 는 자바스크립트에서 비동기 작업을 중단 할 수 있도록 도와주는 API 로, 특히 fetch 요청을 취소하거나 setTimeout 등의 작업을 중단할 때 유용하게 쓰인다고 한다. → 공식문서

Axios 요청 취소

AbortController 의 기본적인 형태로 아래와 같이 사용할 수 있다.

const controller = new AbortController(); // 새로운 요청 취소 컨트롤러 생성

axios.get("https://api.example.com/data", { signal: controller.signal })
  .then((response) => console.log(response.data))
  .catch((error) => {
    if (error.name === "AbortError") {
      console.log("요청이 취소됨");
    } else {
      console.error(error);
    }
  });

// 요청 취소
controller.abort();

• 새로운 AbortController 인스턴스를 생성
• get 요청의 두번째 인수로 { signal: controller.signal } 를 전달 (해당 요청을 AbortController로 제어하기 위해서)
• controller.abort() 로 연결된 요청을 취소

해결

수정한 코드는 아래와 같다.

     const currentAbortController = useRef<AbortController | null>(null);

  ...
  const getSearchList = useCallback(
    async (newSearchType: string) => {
      setIsFetching(true);
      const { word } = router.query;

      // ✅ 이전 요청 취소
      currentAbortController.current?.abort();

      // ✅ 새로운 AbortController 생성
      const controller = new AbortController();
      currentAbortController.current = controller;

      try {
        const params: SearchListParameter = new SearchListParameter({
          size: LIST_SIZE,
          word: word as string,
        });
        const {
          data: { content, last },
        } = await axios.get<SearchListResponse>(
          `/api/search/${newSearchType}${params.stringify()}`,
          { signal: controller.signal }, // ✅ 요청 취소 가능하도록 signal 전달
        );
        setSearchType(newSearchType);

        // ✅ 요청이 취소되었으면 상태 변경 x
        if (controller.signal.aborted) return;
        setSearchList(content);
      } catch (error: any) {
        console.error(error.response || error);
      } finally {
        setIsFetching(false);
      }
    },
    [router],
  );

...

• useRef를 사용해서 컴포넌트가 리렌더링돼도 기존 AbortController를 유지
• api 요청이 가기전에 이전 요청을 취소한 후, 다시 정상적으로 요청이 될 수 있도록 AbortController 를 새롭게 생성
• 요청이 취소된 상태일 땐 setSearchList 에 데이터가 담기지 않도록 함

결과

이전의 요청이 pending 중인 상태에서 다른 탭을 눌러도, 그 이전의 요청이 취소되어 정상적으로 리스트가 로드된 것을 확인할 수 있었다!

참고: https://gobae.tistory.com/145 https://velog.io/@jhjung3/AbortController로-fetch-요청-취소하기

selectbox 에 스타일을 주고싶은데 Selectbox 의 경우 selectbox 태그를 사용하면 스타일을 커스텀 하는데 한계가 있기 때문에 ul, li 태그를 사용하여 option 을 구현하는등 따로 selectbox 전체를 직접 커스텀해서 구현해주어야 한다.

import React, { forwardRef, useEffect, useRef, useState } from 'react';
import * as S from './SelectFilter.styles';

export interface OptionType {
  value: any;
  label: string;
}

export interface OptionTypeArray extends Array<OptionType> {}

interface SelectProps {
  ...
}

const SelectFilter = forwardRef<HTMLDivElement, SelectProps>(
  (
    {
      options,
      value,
      label,
      defaultValue,
      onChange,
      size = 'default',
      width,
      placeholder,
      isFullWidth = false,
      isDisabled = false,
      error,
      name
    },
    ref
  ) => {
    const [isOpen, setIsOpen] = useState<boolean>(false);
    const [selectedOption, setSelectedOption] = useState<
      OptionType | undefined
    >(() => {
      if (value) {
        return options.find((opt) => opt.value === value);
      }
      return defaultValue;
    });
    const selectListRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
      if (value) {
        const option = options.find((opt) => opt.value === value);
        setSelectedOption(option);
      }
    }, [value, options]);

    const toggleDropdown = (
      event: React.MouseEvent | React.KeyboardEvent
    ): void => {
      event.preventDefault();
      event.stopPropagation();
      // Enter 키로 실행되지 않도록 처리
      if ((event as React.KeyboardEvent).key === 'Enter') {
        return;
      }
      if (isDisabled) {
        setIsOpen(false);
        return;
      }

      setIsOpen(!isOpen);
    };

    const handleOptionClick = (
      option: OptionType,
      event: React.MouseEvent
    ): void => {
      event.preventDefault();
      event.stopPropagation();
      setSelectedOption(option);
      setIsOpen(false);
      if (onChange) {
        onChange(option.value);
      }
    };

    const getIsSelected = (option: OptionType): boolean => {
      return selectedOption?.value === option.value;
    };

    useEffect(() => {
      const handleOutsideClick = (event: MouseEvent) => {
        if (
          selectListRef.current &&
          !selectListRef.current.contains(event.target as Node)
        ) {
          setIsOpen(false);
        }
      };

      if (isOpen) {
        document.addEventListener('mousedown', handleOutsideClick);
      }
      return () => {
        document.removeEventListener('mousedown', handleOutsideClick);
      };
    }, [isOpen]);

    const handleButtonKeyDown = (event: React.KeyboardEvent): void => {
      if (!selectedOption) return;

      const currentIndex = options.findIndex(
        (opt) => opt.value === selectedOption.value
      );

      if (event.key === 'ArrowDown') {
        // 아래 방향키: 다음 옵션으로 이동 (순환)
        const nextIndex = (currentIndex + 1) % options.length;
        changedValue = options[nextIndex];
        setSelectedOption(options[nextIndex]);
        event.preventDefault();
      } else if (event.key === 'ArrowUp') {
        // 위 방향키: 이전 옵션으로 이동 (순환)
        const prevIndex = (currentIndex - 1 + options.length) % options.length;
        changedValue = options[prevIndex];
        setSelectedOption(options[prevIndex]);
        event.preventDefault();
      }
      if (event.key === 'Enter') {
        if (onChange) onChange(changedValue.value);
      }
    };
    return (
      <S.SelectContainer
        $size={size}
        $isFullWidth={isFullWidth}
        ref={selectListRef}
      >
        {label && <S.SelectLabel>{label}</S.SelectLabel>}
        <S.SelectButton
          $size={size}
          $isOpen={isOpen}
          $isDisabled={isDisabled}
          $width={width}
          onClick={toggleDropdown}
          onKeyDown={handleButtonKeyDown}
          $error={!!error}
          name={name}
        >
          <p>{selectedOption?.label || placeholder}</p>
          <span />
          {isOpen && (
            <S.OptionsList>
              {options.map((option) => (
                <S.Option
                  key={option?.value}
                  onClick={(e) => handleOptionClick(option, e)}
                  $isSelected={getIsSelected(option)}
                  value={option?.value}
                  role="option"
                >
                  {option?.label}
                </S.Option>
              ))}
            </S.OptionsList>
          )}
        </S.SelectButton>
      </S.SelectContainer>
    );
  }
);

SelectFilter.displayName = 'SelectFilter';

export default SelectFilter;

키보드를 통한 value 값 변경

이때 접근성을 위해 마우스 클릭 뿐만 아닌 키보드를 사용하여 selectbox 의 value 를 바꿔주는 경우도 고려해야하는데, 아래와 같이 구현이 되었다.

...
const SelectFilter = forwardRef<HTMLDivElement, SelectProps>(
  (
    ...
  ) => {
    ...
        // 키보드를 통한 option 의 value 변경
    const handleButtonKeyDown = (event: React.KeyboardEvent): void => {
      if (!selectedOption) return;
      const currentIndex = options.findIndex(
        (opt) => opt.value === selectedOption.value
      );

      if (event.key === 'ArrowDown') {
        // 아래 방향키: 다음 옵션으로 이동 (순환)
        const nextIndex = (currentIndex + 1) % options.length;
        changedValue = options[nextIndex];
        setSelectedOption(options[nextIndex]);
        event.preventDefault();
      } else if (event.key === 'ArrowUp') {
        // 위 방향키: 이전 옵션으로 이동 (순환)
        const prevIndex = (currentIndex - 1 + options.length) % options.length;
        changedValue = options[prevIndex];
        setSelectedOption(options[prevIndex]);
        event.preventDefault();
      }
      if (event.key === 'Enter') {
        if (onChange) onChange(changedValue.value);
      }
    };

    return (
      <S.SelectContainer
        $size={size}
        $isFullWidth={isFullWidth}
        ref={ref}
      >
        {label && <S.SelectLabel>{label}</S.SelectLabel>}
        <S.SelectButton
          ...
          onKeyDown={handleButtonKeyDown} // 키보드 이벤트 감지
          ...
        >
         ...
        </S.SelectButton>
      </S.SelectContainer>
    );
  }
);
...

selectbox 의 버튼이 포커싱 되었을 때 onKeyDown 이벤트를 걸어 키보드 사용이 감지되었을 때 handleButtonKeyDown 콜백함수가 실행되도록 했다.

윗방향 키는 event.key === 'ArrowUp , 아랫방향 키는 event.key === 'ArrowDown' 로 설정이 되고 그에 따라 현재 value 값을 기준으로 순환되어 변경되도록 작업을 했다.

% 와 같은 나머지 연산자를 사용하여 맨 마지막 혹은 맨 처음 index 에 다다랐을 때 다음에 선택되는 index 가 맨 처음 혹은 맨 마지막 index 가 되는, 이른바 순환되는 구조를 구현할 수 있었다.

SelectBox 외 다른 부분 클릭 시 드롭다운 off

const selectListRef = useRef<HTMLDivElement>(null);
...
useEffect(() => {
  const handleOutsideClick = (event: MouseEvent) => {
    if (
      selectListRef.current &&
      !selectListRef.current.contains(event.target as Node)
    ) {
      setIsOpen(false);
    }
  };

  if (isOpen) {
    document.addEventListener('mousedown', handleOutsideClick);
  }
  return () => {
    document.removeEventListener('mousedown', handleOutsideClick);
  };
}, [isOpen]);

...
return (
  <S.SelectContainer
    ...
    ref={selectListRef}
    ...
  >

useRef 를 사용하여 다른 부분을 클릭할 시 드롭다운이 닫히는 구조도 추가해주었다.

이전에는 selectbox 의 겉 부분만 스타일을 주거나, mui 같은 이미 커스텀화 되어있는 selectbox 를 사용해 왔기에 이런 작업의 경험이 없었다. 드롭다운 부분까지의 커스텀을 위해 아예 처음부터의 기능까지 새로 구현된 selectbox 를 다루게 된 점은 좋은 경험이었다고 생각한다.

소플이라는 서비스에서 패널회원에 가입하는 루트를 작업하고 있었다. 패널회원에 가입하기 위해서는 로그인, 본인인증 두 가지 루트를 거쳐야 한다. 로그인이 안된 경우 로그인 페이지로 잘 리다이렉트 되는데, 본인인증의 경우 인증 후 패널 가입 페이지가 아닌 메인페이지(’/’)로 리다이렉트 되고 있었다.

처음 panel/intro 로 링크를 받으면 아래와 같은 분기가 태워진다.

1. 로그인이 안되었을 경우 → 진입도 전에 바로 로그인 페이지로 리다이렉트
2. 본인인증이 안되었을 경우 → 패널회원 가입하기 버튼 클릭 시 본인인증 페이지(/certification) 로 이동 후 다시 panel/join 으로 리다이렉트
3. 본인인증이 되었을 경우 → 바로 본인인증이 완료된 표시와 함께 폼 등장

문제

하지만 2번 조건에서 본인인증 직후 바로 패널 가입 페이지(panel/join)으로 넘어가야하는데, 메인페이지(/) 로 리다이렉트되는 상황이었다. 그 이후 새로고침을 해야 4번 상황이 정상 동작했다..🤔

서버사이드 렌더링 환경이며, 코드는 다음과 같다.

...
const { session, url } = context.req;
let certificated = false;
let redirectUrl = '/';

if (url && !url.includes('_next')) {
  redirectUrl = url;
}

try {
    // 로그인 상태 체크
    const user = await checkAuth(session);
    if (user) {
      // 본인인증여부 체크하는 로직
            ...
      if (checkCertification && !certificated) { // checkCertification - props 이며, boolean 값
        return {
          redirect: {
            permanent: false,
            source: redirectUrl,
            // 본인인증되지 않은 상태이면 인증페이지로 이동 > 인증 > 다시 이전 페이지로 redirect
            destination: `/certification?redirectUrl=${encodeURIComponent(redirectUrl)}`,
          },
        };
      }
    } else {
      store.dispatch(setUserMeta(null));
    }
  } catch (error: any) {
    if (redirect) {
      return {
        redirect: {
          permanent: false,
          source: redirectUrl,
          destination: `/login?redirectUrl=${encodeURIComponent(redirectUrl)}`,
        },
      };
    }
  }

본인인증이 완료되어 certificated 가 true 가 되면 redirect 되는 구조이다.

문제는 url && !url.includes('_next') 의 조건에서 false 가 나와 redirectUrl 이 루트 경로로 설정된 것 같았다.

const { session, url } = context.req;
let certificated = false;
let redirectUrl = '/';

console.log('----------------------------------------------------');
console.log(url)
if (url && !url.includes('_next')) {
  redirectUrl = url;
}

로그를 찍어보니, 다음과 같이 뜬다. (참고로 서버사이드렌더링 코드에서 콘솔을 찍으면 브라우저 콘솔창이 아닌 코드 터미널에서 확인이 가능하다.) 원래라면 아래와 같이 사용자 경로만 찍혀야 하는데, 앞에 _next 가 붙은 json 형태의 파일이름으로 내려오고 있는 것이었다. 그래서 url && !url.includes('_next') 부분에서 조건 이행이 안돼 메인홈으로 리다이렉트 되었던 것이다..

해결

resolvedUrl

그래서 찾아보니 context.req.url 이 아닌 context.resolvedUrl 을 사용하라는 내용이 있었다..!

context.resolvedUrl은 Next.js의 getServerSideProps 함수에서 제공하는 객체 중 하나로, 클라이언트가 요청한 경로와 쿼리 문자열(query string)을 포함한 값을 제공한다.

getServerSideProps는 브라우저에서 요청할 때 뿐만 아니라 내부적으로 클라이언트와 서버 간 데이터 요청을 처리할 때도 실행되며 이때 Next.js는 데이터 요청에 ‘_next/data’ 경로를 사용한다고 하는데, 이것이 문제의 원인이었다…

더 쉽게 말하면, 다음과 같다.

• 브라우저가 페이지를 처음 로드하면 URL이 /panel/join과 같이 나타남
• 하지만 이후 클라이언트 측에서 페이지를 이동하거나 데이터 페칭이 필요하면 내부적으로 /_next/data 경로로 요청이 발생함

이전에 !url.includes('_next') 와 같은 조건을 둔 이유는 '_next' 부분이 문제가 되어 해당 부분을 제외한 url 을 추출하려 한건데, resolvedUrl 을 사용하면 이러한 과정도 모두 생략이 가능했다.

수정한 코드는 다음과 같다.

const { session } = context.req;
const { resolvedUrl } = context;

let certificated = false;
let redirectUrl = '/';

if (resolvedUrl) {
  redirectUrl = resolvedUrl;
}

결과:

resolvedUrl 을 적용한 결과, 본인인증이 안된 상태에서

인증 직후에 바로 패널회원가입 페이지로 리다이렉팅에 성공했다.

관리자 페이지의 다운로드 기능에서 페이지에 대한 값인 파라미터(pageName)을 추가하는 작업을 진행했다. 각 페이지마다 첨부파일을 다운로드 받으면 그 이력이 남아 다운로드 이력 페이지 목록에 등록되는 과정이었는데, 백엔드 개발자분이 다운로드가 발생한게 어느 페이지인지도 값을 받아야 작업이 수월할 것 같다고 요청을 주신 것이다.

그래서 현재 페이지가 어디인지 url 에서 추출하여 현재 페이지에 대한 string 값을 pageName 파람키로 전달해주었다.

// 다운로드 할 파일 리스트 컴포넌트

... 
// PageNameType: 페이지별로 추가될 파라미터키(pageName)의 value 값 모음
const pageNameTypeText = (path: string) => {
  switch (path) {
    case 'program-apply':
      return PageNameType.PROGRAM_APPLY;
    case 'program-apply-fee':
      return PageNameType.FEE;
    case 'review':
      return PageNameType.REVIEW;
    case 'review-result':
      return PageNameType.REVIEW_RESULT;
    case 'internal-review':
      return PageNameType.INTERNAL_EVALUATION_APPLY;
    case 'internal-review-result':
      return PageNameType.INTERNAL_EVALUATION;
    case 'file':
      return PageNameType.FILE;
    case 'legacy-file':
      return PageNameType.LEGACY_FILE;
    default:
      return '';
  }
};

const FileDownloadList: React.FC<FileDownloadListProps> = ({ fileList, isLegacyFile = false }) => {
  const { downloadFile, downloadLegacyFile } = useFileDownload();

  const location = useLocation();
   // 파라미터로 보내질, 정해진 페이지 string 값 리스트 불러오기 
  const enumsSelector = useMemo(() => selectEnums(['page-name']), []);
  const enums = useSelector(enumsSelector);

  const selectedPageName = useMemo(() => {
    const firstSegment = location.pathname.split('/')[1]; // 현재 페이지에 대한 이름 url 에서 추출
    const pageName = pageNameTypeText(firstSegment);

    const findKeyByValue = (targetKey: string): string | undefined => {
      const [pageNameEnum] = enums;
      const foundItem = pageNameEnum?.find((item) => item?.key === targetKey);
      return foundItem?.key;
    };

    return findKeyByValue(pageName);
  }, [location.pathname, enums]);

  const handleDownloadFile = async (id: number, filename: string, selectedPageName?: string) => {
    try {
      downloadFile(id, filename, selectedPageName);
    } catch (error) {}
  };

  if (!fileList) return null;

  const fileArray = Array.isArray(fileList) ? fileList : [fileList];

  return (
    <div>
      {fileArray?.map(({ filename, size, attachId, legacyAttachId }) => (
        <Box key={shortid.generate()}>
          <AttachFileIcon color="primary" sx={{ width: '20px', height: '20px' }} />
          <button
            type="button"
            onClick={() => handleDownloadFile(attachId, filename, selectedPageName)}
          >
            ...
        </Box>
      ))}
    </div>
  );
};

export default memo(FileDownloadList);

문제 발생:

로그인한 상태에서 분명 요청을 보냈는데 백엔드 측에서 쿠키값이 안내려왔다고 한다. 그래서 계속 권한 관련 에러코드가 내려오는 상황이었다…

원인:

다른 페이지에서api 요청을 할 때 아래의 공통으로 쓰이는 HTTP 클라이언트를 사용했지만, 다운로드 요청의 경우 추가 로직을 위해 api 요청하는 부분을 따로 하드코딩 했었다.

결정적으로 withCredentials: true 설정이 걸려있지 않아 쿠키가 보내지지 않은 것이 원인이었고, 어이없게도 해당 설정을 추가했더니 정상적으로 다운로드 요청이 갔다.

// 공통 http 클라이언트

import axios, { AxiosInstance } from 'axios';

const httpClient: AxiosInstance = axios.create({
  baseURL: import.meta.env.VITE_API_ENDPOINT,
  withCredentials: true,
});

export default httpClient;

// 따로 작성한 api 요청 코드

import axios from 'axios';

const useFileDownload = () => {
  const downloadFile = async (id: number, filename: string, pageName: string = '') => {
    try {
      const { data } = await axios({
        url: `${import.meta.env.VITE_API_ENDPOINT}admin/v1/attach/${id}/download?pageName=${pageName}`, // your url
        method: 'GET',
        responseType: 'blob',
        withCredentials: true, // 추가
      });

      if (data) { // 브라우저에서 다운받을 수 있도록 설정된 로직
        const url = window.URL.createObjectURL(new Blob([data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', filename);
        link.style.cssText = 'display:none';
        link.click();
        setTimeout(() => window.URL.revokeObjectURL(url), 0);
      }
    } catch (error: any) {
      console.error(error.response || error);
    }
  };

  return {
    downloadFile
  };
};

export default useFileDownload;

결과:

다운로드 실행시, 이력에도 데이터가 잘 들어간 것을 알 수 있다. (참여프로그램 신청 관리란 페이지에서 파일을 다운로드 했고, 그 결과가 'PROGRAM_APPLY' 라는 이름으로 요청 값에 담김)

권한 제약이 있는 요청에 있어 withCredentials 속성에 대해 넣어야 한다는 내용은 익히 들었지만, 실제로 요청 실패가 뜨는 것을 경험했으니 해당 속성에 대한 중요성을 더 알게된 계기라고 생각한다.

관리자 페이지에서 공통으로 쓰이는 키워드를 관리하는 페이지를 작업했다. 주제, 장르, 오디오로 나뉘고 해당 분류에 따라 쓰이는 키워드를 추가하거나 삭제할 수 있는 기능이며, 해당 키워드들은 전역적으로 다른 페이지에도 적용이 된다.

• 기존 데이터로 받은 키워드: currentCodeValueList
• 프론트에서 추가된 키워드: addedCodeValueList
  • 추가할 공통 코드 키워드 목록
  • codeValueList 라는 이름으로 수정 api 요청 body 에 들어감
  • 키워드가 삭제될 때, 기존 데이터의 키워드인지, 프론트에서 생성된 키워드인지 구분하기 뒤해 각자 state 로 생성
• 기존의 키워드에서 삭제할 키워드가 있는 경우: removedCodeIdList
  • 삭제할 공통 코드 일련번호 목록
  • isRemoveCodeIdList 라는 이름으로 수정 api 요청 body 에 들어감

...

const MediaForm = ({ data }: MediaFormProps) => {
  const { getMediaList } = useMedia();
  const { updateMedia } = useMediaMutation();
  const { mediaId, mediaType, keywordList, updateDt } = data;
  const [currentCodeValueList, setCurrentCodeValueList] = useState<Array<Code>>(
    [...keywordList].reverse(),
  );
  const [addedCodeValueList, setAddedCodeValueList] = useState<Array<string>>([]);
  const [removedCodeIdList, setRemovedCodeIdList] = useState<Array<number>>([]);
...
  const {
    register,
    handleSubmit,
    watch,
    reset,
    formState: { errors },
  } = useForm({
    mode: 'onChange',
    defaultValues: {
      keyword: '',
    },
  });
  const watchedKeyword: string = watch('keyword');

  const onSubmit = () => {
    addKeyword(watchedKeyword);
    reset();
  };

  const handleMediaUpload = async () => {
    try {
      const payload: UpdateMediaRequestType = {
        codeValueList: addedCodeValueList,
        isRemoveCodeIdList: removedCodeIdList,
      };

      await updateMedia(mediaId, payload);
      openAlert('confirmSuccess');
      await getMediaList();
    } catch (error) {
      console.log(error);
    }
  };

  const deleteKeyword = useCallback((id: number, keyword: string) => {
    if (id) {
      setRemovedCodeIdList((prev) => {
        if (prev.includes(id)) return prev;
        return [...prev, id];
      });
      setCurrentCodeValueList((prev) => prev.filter((item) => item.codeId !== id));
    } else {
      // 프론트단에서 추가한 커스텀 키워드일 경우
      setAddedCodeValueList((prev) => prev.filter((item) => item !== keyword));
      setCurrentCodeValueList((prev) => prev.filter((item) => item.codeValue !== keyword));
    }
  }, []);

  const addKeyword = useCallback(
    (keyword: string) => {
      if (currentCodeValueList.some((item) => item.codeValue === keyword)) {
        // 이미 존재하는 코드일 때
        openAlert('duplicateKeyword');
        return;
      } else {
        setAddedCodeValueList((prev) => {
          if (prev.includes(keyword)) return prev;
          return [...prev, keyword];
        });

        const keywordIdNull = {
          codeId: null,
          codeName: mediaType,
          codeValue: keyword,
          description: mediaTypeMap[mediaType],
        };
        setCurrentCodeValueList((prev) => [keywordIdNull, ...prev]);
      }
    },
    [currentCodeValueList, mediaType, mediaTypeMap, openAlert],
  );

  // 커스텀으로 추가된 요소의 경우
  // 추가: setCurrentCodeValueList 에 id 를 null로 가진 요소에 포함시켜 추가
  // 커스텀 요소 제거시 => id 가 null 이며, value 가 '단편영화' 일 경우 제거

  return (
    <>
      <Box className="flex justify-between w-full">
        ...
      </Box>
      <ContentTable mtNone>
        <colgroup>
          <col className="w-2/12" />
          <col className="w-2/12" />
        </colgroup>
        <TableBody>
          <TableRow>
            <ContentTableCell
              header
              required
              className="text-center"
              rowSpan={currentCodeValueList?.length + 1}
            >
              {mediaTypeMap[mediaType]} {mediaType === 'CATEGORY' ? '관리' : '장르'}
            </ContentTableCell>
            <ContentTableCell colSpan={2} className="border-t-1">
              <Box className="flex gap-8">
                <form noValidate onSubmit={handleSubmit(onSubmit)} className="w-[300px]">
                  <TextField
                    {...register('keyword')}
                    error={!!errors.keyword}
                    helperText={errors.keyword?.message as string}
                    fullWidth
                    placeholder="키워드를 입력 후, Enter를 눌러주세요."
                    className="max-w-400"
                  />
                </form>
                <Button
                  onClick={() => {
                    addKeyword(watchedKeyword);
                    reset();
                  }}
                  color="black"
                >
                  추가
                </Button>
              </Box>
            </ContentTableCell>
          </TableRow>
          {currentCodeValueList?.map((keyword, i) => (
            <TableRow key={i}>
              <ContentTableCell className="text-center" header secondary>
                {currentCodeValueList?.length - i}
              </ContentTableCell>
              <ContentTableCell className="flex" colSpan={3}>
                <Typography
                  className="self-center text-center flex-1"
                  variant="body1"
                  color="black"
                >
                  {keyword?.codeValue}
                </Typography>
                <Button
                  onClick={() => deleteKeyword(keyword?.codeId, keyword?.codeValue)}
                  variant="outlined"
                  color="error"
                  size="small"
                >
                  삭제
                </Button>
              </ContentTableCell>
            </TableRow>
          ))}
        </TableBody>
      </ContentTable>
      ...
    </>
  );
};

export default MediaForm;

이미 존재하는 키워드의 경우 현재 입력한 키워드와 codeValue 값을 비교해 경고창을 띄우고 리셋하도록 설정했다.

결과:

주제를 추가 후 로그를 찍었더니 아래와 같이 나타난다.

키워드 수정 후 저장을 눌러 handleMediaUpload 를 실행하면, 최종적으로 제거된 키워드의 id 값과 프론트에서 추가된 키워드 배열값을 백엔드 요청값으로 보내게 된다. 현재 추가된 키워드와 기존 데이터로 내려오는 키워드를 분간하여 state 로 분리하는게 조금 복잡했지만 꽤나 재미있는 작업이었다.

KCMF의 관리자 페이지에서 공지사항을 등록하는 페이지를 작업중이었다. 폼 작업 진행중 에디터도 구현해야했고, MUI 라이브러리에서는 따로 에디터 기능이 제공되지 않았다. 그래서 찾아보던 도중 ReactQuill 라는 툴을 알게되어 적용해보기로 했다.

설치 및 사용법

설치

yarn add react-quill

기본 적용 모습

import ReactQuill from "react-quill";
import 'react-quill/dist/quill.snow.css';

const ReactEditor = () => {
  return (
    <div>
        <ReactQuill theme="snow"/>
    </div>
  )
}

export default ReactEditor;

나는 현재 react-hook-form 을 사용하고 있어 Controller 안에 적용해주었다.

여기에 Controller 의 field 객체값으로 onChange 와 value 속성을 추가해주었다.

<Controller
  control={control}
  name="content"
  defaultValue=""
  render={({ field }) => (
    <ReactQuill
      theme="snow"
      value={field.value}
          onChange={field.onChange}
    />
  )}
/>

초반에는 위의 모습처럼 툴바에 기본적인 기능만 표시되는데, 그 외 이미지나 표, 글자 스타일 적용 등 고급 기능들을 적용하고 싶을땐 커스텀해서 추가해줄 수 있다. modules 에 여러 다른 옵션들을 설정해 ReactQuill 의 module 속성으로 적용해주자.

const modules: {} = useMemo(
    () => ({
      toolbar: {
        container: [
          [{ font: [] }],
          [{ header: [1, 2, 3, 4, 5, false] }],
          ['bold', 'italic', 'underline', 'strike'],
          [{ color: [] }, { background: [] }],
          [{ align: [] }],
          [{ list: 'ordered' }, { list: 'bullet' }],
          ['link', 'image', 'video'],
          ['insertTable'],
          ['clean'],
        ],
      },
    }),
    [],
  );

<ReactQuill
  theme="snow"
  value={field.value}
  onChange={field.onChange}
  modules={modules}
/>

출력

에디터의 value 값은 html 모습의 string 형태로 내려오는데, 이를 출력하려면 dangerouselySetInnerHTML를 사용해주어야 한다. 실시간으로 값을 확인하기 위해 react-hook-form 의 watch 를 사용하여 값을 확인했다.

<div dangerouslySetInnerHTML={{ __html: watch('content') }} />

여기서 주의해야할 점은, dangerouselySetInnerHTML 이 HTML 태그를 그대로 렌더링할 수 있게 해주는 대신 무분별하게 사용할 경우 보안에 취약하다는 점이다. script가 포함되어 있으면 XSS (Cross-Site Scripting) 공격에 취약한데, 외부 입력 데이터를 사용할 때는 반드시 검증 및 정제를 시켜주어야 한다.

그럼 어떻게 이를 해결할 수 있을까?

DOMPurify 를 통한 안전한 HTML 처리

이는 DOMPurify 라이브러리를 사용해 안전하게 HTML 을 처리해줄 수 있다.

설치

yarn add dompurify

적용

<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(watch('content')) }} />

DOMPurify는 기본적으로 HTML에서 위험한 태그와 속성을 제거하여 안전한 HTML을 생성해준다.

sanitize 메소드는 입력된 HTML을 정제하고 안전한 HTML 문자열을 반환해준다. 이를 통해 XSS 공격으로부터 보호할 수 있다.

여기서 추가적인 설정을 통해 더 많은 정제 옵션을 사용할 수 있는데, 특정 태그나 속성을 허용하는 등 별도의 설정할 수 있다고 한다.

스타일 커스텀

에디터의 기본 height 값이 너무 낮아 ReactQuill 태그에 직접적으로 style 객체를 통해 height 300px 값을 주었는데 적용되지 않았다.

검사기로 아래 요소들의 class 이름을 찾았고, 글이 작성되는 요소에 따로 height 를 주고자 styled-component 를 사용해 스타일을 적용시켰다.

import styled from 'styled-components';

const StyledQuill = styled(ReactQuill)`
  border-radius: 8px;
  overflow: hidden !important;
  border: 1px solid #ccc;
  .ql-container {
    border: none;
  }
  .ql-toolbar {
    border: none;
    border-bottom: 1px solid #ccc;
  }
  .ql-editor {
    height: 300px;
    overflow-y: auto;
  }
`;

<StyledQuill
  theme="snow"
  value={field.value}
  onChange={field.onChange}
  modules={modules}
  style={styles.editor}
/>

참고

https://rlawo32.tistory.com/entry/React-웹-에디터-React-Quill-사용하기-1 https://velog.io/@hskwon517/React-Quill-에디터-사용하기 https://velog.io/@rlaclgns321/웹-에디터-React-quill

인스타그램 클론 코딩을 하는 중, 알림 탭에서 오늘 날짜에 해당하는 컨텐츠를 필터링 해서 표시하는 작업을 하고 있었다.

컨텐츠 data 에 map 을 돌려 오늘 날짜에 해당되는 컨텐츠면 todayAlarm 이라는 state 배열에 담아지는 구조로 코드를 구현했는데, 오늘에 해당하는 컨텐츠는 하나임에도 똑같은 컨텐츠가 배열 두 번씩 담기는 것이었다.

function AlarmSidebar({ isOpen }) {
  const alarmData = [
    {
      User: {
        id: 'nawm_eeee',
        nickname: '김진명',
        image: '/user-01.jpg',
      },
      type: 'comment',
      content: '안녕하세요 피드가 예쁘네요!',
      createdAt: new Date(new Date().setDate(new Date().getDate() - 0)), //  오늘
    },
    {
      User: {
        id: 'veenoo',
        nickname: '조수빈',
        image: '/user.jpg',
      },
      type: 'mention',
      content: '이거 봄?ㅋㅋㅋㅋ',
      createdAt: new Date(new Date().setDate(new Date().getDate() - 0)), //  오늘
    },
    {
      User: {
        id: 'h._seung',
        nickname: '랍뷰희승',
        image: '/user.jpg',
      },
      type: 'mention',
      content: '그러자!!',
      createdAt: new Date(new Date().setDate(new Date().getDate() - 12)), // 12일 전
    },
    {
      User: {
        id: 'jin_woo',
        nickname: '김김진진우우',
        image: '/user.jpg',
      },
      type: 'comment',
      content: '잘나왔네',
      createdAt: new Date(new Date().setDate(new Date().getDate() - 7)), // 7일 전
    },
  ]

  const [todayAlarm, setTodayAlarm] = useState([])

  useEffect(() => {
    alarmData.map((data, index) => {
      const currentDay = new Date()

      const day = data?.createdAt
      // 오늘 날짜인지 체크
      if (
        currentDay.getFullYear() === day.getFullYear() &&
        currentDay.getMonth() === day.getMonth() &&
        currentDay.getDate() === day.getDate()
      ) {
        console.log('오늘입니다')
        setTodayAlarm((prev) => [...prev, data]);

      } else {
        console.log('오늘이 아님')
      }
    })
  }, [alarmData.length])

  console.log(todayAlarm)

  return (
    <div
      role="dialog"
      className={cx(style.sidebar, isOpen && style.opened, style.alarm)}
    >
      <div className={style.sidebarInner}>
        <h3 className={style.sidebarTitle}>알림</h3>
        <div className={style.sideBarContent}>
          <h4 className={style.sidebarSubTitle}>
            <span>오늘</span>
          </h4>
        </div>
      </div>
    </div>
  )
}

export default AlarmSidebar

map 이 두 번 돌아가는 것으로 보아 렌더링이 한 번 더 일어난 것으로 예상되었고, 구글링을 해본 결과 그 원인을 알아냈다.

StrictMode

리액트는 StrickMode 옵션이 기본으로 설정이 되어있는데, 해당 옵션이 켜져있을 땐 개발모드에서 렌더링이 두 번씩 실행된다고 한다. StrickMode 의 역할은 아래와 같이 어떠한 기능 사용에 대한 경고나, 부작용 검사 등이 있다고 한다. 공식문서

1. 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
2. 레거시 문자열 ref 사용에 대한 경고
3. 권장되지 않는 findDOMNode 사용에 대한 경고
4. 예상치 못한 부작용 검사
5. 레거시 context API 검사
6. Ensuring reusable state

이 모드를 해제하려면 next.config.js 에서 reactStrictMode 옵션을 false 로 지정해주면 된다.

하지만 개발 모드에서 진행되는 경고나 검사는 필요하기 때문에 StrictMode 를 해제하는 것은 지양하는 것이 좋다.

위의 방법을 쓰기보단, 오늘에 해당하는 컨텐츠 배열 안에 (두 번째 렌더링 때)똑같은 컨텐츠가 들어가지 않도록 방지하는 쪽으로 수정을 했다. tempTodayAlarm 이라는 임시 배열을 하나 만든 뒤 아래 내용으로 필터링된 값을 다시 setTodayAlarm 의 인수값으로 넣었다. !tempTodayAlarm.some(alarm => alarm.content === data.content)

useEffect(() => {
    // 오늘 알림을 임시 배열로 수집
    const tempTodayAlarm = [];

    alarmData.map((data, index) => {
      const currentDay = new Date()

      const day = data?.createdAt
      // 오늘 날짜인지 체크
      if (
        currentDay.getFullYear() === day.getFullYear() &&
        currentDay.getMonth() === day.getMonth() &&
        currentDay.getDate() === day.getDate()
      ) {
        console.log('오늘 입니다')
        if (!tempTodayAlarm.some(alarm => alarm.content === data.content)) {
          tempTodayAlarm.push(data);
        }
      } else {
        console.log('오늘이 아님')
      }
    })
    // 상태를 한 번만 업데이트
    setTodayAlarm(tempTodayAlarm);
  }, [alarmData.length])

결과: 오늘에 해당하는 컨텐츠가 정상적으로 한 번씩만 push 된 것을 알 수 있다.

참고: https://velog.io/@rssungjae/React-%EB%91%90%EB%B2%88%EC%94%A9-%EB%A0%8C%EB%8D%94%EB%A7%81%EB%90%98%EB%8A%94-%EA%B2%BD%EC%9A%B0

단순한 퍼블리싱 업무를 맡게 되어 작업중, 기획자분께서 자신의 자리에서 로컬화면을 보고싶다 하셨다. 이제까지 리액트나 뷰 환경에서 작업을 하다가, 일반 HTML/CSS/JavaScript 같이 정적파일로만 구성된 상태에서 로컬 화면을 공유드리는 것은 처음이었다.

개발 서버의 부재

ip 주소를 붙여 링크를 생성하면 되는 일이었지만, 역시나 일반 퍼블 프로젝트에서는 동작을 하지 않았다. 프레임워크 환경에서는 왜 자동으로 됐을까? 그 이유는 리액트나 뷰의 경우 기본적으로 개발서버(웹팩이나 vite 등)가 내장되어있어 추가적인 설정이 필요하지 않았기 때문이었다.

일반 퍼블리싱 환경의 경우, HTML/CSS/JavaScript 파일은 모두 정적 파일로서 별다른 처리가 되지 않는다. 그러므로 따로 웹서버가 필요한 상황인 것이다. 정적 파일은 우리의 컴퓨터에 저장된 파일과 폴더를 관리하는 시스템으로 접근이 가능하지만, 이를 같은 로컬 네트워크 상의 다른 디바이스에서는 접근이 불가능하다.

http-server

빠르게 정적파일을 띄우고 싶을땐, http-server와 같은 간단한 웹 서버를 사용하여 네트워크에서 다른 사람과 프로젝트를 공유할 수 있다.http-server 는 npm 에서 제공하는 패키지로, 테스트용으로 만들어지거나 작은 프로젝트를 만들 때 유용하게 쓰인다. 이는 초기설정도 적고 시간이 단축된다는 장점이 있다.

http-server 사용법

공식문서

전역설치

npm install --global http-server

실행

http-server

터미널에서 http-server를 설치해주고, 명령어도 다음과 같이 실행하면 터미널에 다음과 같이 로컬 포트를 가진 url 이 뜬다.

Available on:
  http://127.0.0.1:8080
  http://xxx.xxxx.xxx.xxx:8080

화면에 띄우면 아래와 같이 폴더 경로가 생기고, 접근하고 싶은 폴더 파일로 이동하면 된다. 해당 경로를 공유하고자 하는 컴퓨터에 띄우면 나의 로컬화면이 잘 보여지는 것을 확인할 수 있을 것이다.

참고

https://www.npmjs.com/package/http-server https://devjh.tistory.com/202

현재 리액트 환경에서 인스타그램 클론코딩 중이다. 인스타그램 메인 게시글의 “더보기” 버튼을 누르면 팝업이 나오는데, 거기서 “게시글로 이동” 을 누를 시 상세페이지로 이동하는데, 이 부분을 구현하려했다.

하지만 게시글 상세는 두 가지의 형태를 띈다. 클라이언트 환경에서는 상세 게시글이 모달로 뜨고, 서버사이드 렌더링이 되면 상세 게시글 페이지로 이동되는 방식이다.

클라이언트 렌더링 시 🔽

router.push()

import { useRouter } from 'next/navigation'

function PostOptionModal() {
  const router = useRouter()
  const onClick = () => {
    router.push(`/${post.User.id}/p/${post.postId}`)
  }
...

next 의 router 를 통해 페이지 이동을 하면 새로고침 되지 않고 애플리케이션 상태를 유지하면서 url 만 변경되기 때문에 클라이언트 상태인 모달 형식으로 뜨는데, 내가 원하는 것은 새로고침 된 페이지로 뜨는 것이었다.

window.location.replace()

그래서 router 대신 window.location.replace() 를 사용하였는데, 서버사이드 렌더링되어 페이지로 잘 이동되는 것을 확인할 수 있었다.

window.location.replace(`/${post.User.id}/p/${post.postId}`)

대신 문제가 있었는데, replace() 의 경우 브라우저의 현재 url 을 아예 새로운 url 로 교체하여 히스토리가 남지 않기 때문에 이전 페이지로 돌아갈 수 없게 된다. 실제로 뒤로가기를 눌렀을 때 루트경로로 이동이 되었다.

window.location.href

최종적으로 *window*.location.href 를 사용하였더니 서버사이드 렌더링이 되어 페이지로 잘 이동되고, 히스토리도 남아 이전 페이지로 잘 되돌아가는 것을 확인했다.

window.location.href = `/${post.User.id}/p/${post.postId}`;

정리

function PostOptionModal() {
  const router = useRouter()
  const onClick = () => {
    // router.push(`/${post.User.id}/p/${post.postId}`) // url 만 변경되어 모달 형식으로 뜸
    // window.location.replace(`/${post.User.id}/p/${post.postId}`) // 히스토리에 기록되지 않아 뒤로가기 시 무조건 루트 경로로 이동해버림

    window.location.href = `/${post.User.id}/p/${post.postId}`;
  }
  ...

⇒ 댓글 아이콘을 클릭하면 아래 댓글 폼이 포커싱 되도록

작업은 간단했는데, useForm 의 setFocus 를 사용하면 될 일이었다. 하지만 어째서인지 포커싱이 되지 않았고, useRef 까지 사용했는데도 포커싱이 되지 않았는데..

'use client'

import { useController } from 'react-hook-form'
import style from './input.module.scss'

function Input({
  control,
  name,
  rules,
  required = false,
  type = 'text',
  label = '',
  maxLength = 0,
  placeholder = '',
  onChange = () => {},
  onBlur = () => {},
  onFocus = () => {},
  disabled,
  ...rest
}) {
  const {
    field,
    fieldState: { error }
  } = useController({
    name,
    control,
    rules,
  })

  return (
    <div className={style.field}>
      <div
        className={`${type === 'checkbox' ? 'checkbox' : ''} ${style.inputForm}`}
      >
        {label && <label htmlFor={name}>{label}</label>}
        <input
          id={name}
          type={type}
          className="input"
          name={name}
          value={field.value}
          onChange={field.onChange}
          onBlur={() => {
            onBlur()
            field.onBlur()
          }}
          onFocus={onFocus}
          placeholder={placeholder}
          disabled={disabled}
          {...rest}
        />
        {error && (
          <span className={style.error}>
            <em>*</em>
            {error.message}
          </span>
        )}
      </div>
    </div>
  )
}

export default Input

공식문서의 setFocus 예시를 그대로 사용했을 때는 정상작동하였다.

'use client'
import React from 'react'
import {useForm} from "react-hook-form";

function MessagePage() {
  type FormValues = {
    firstName: string;
  };

  let renderCount = 0;

  const { register, handleSubmit, setFocus, watch } = useForm();
  const onSubmit = (data: FormValues) => console.log(data);
  renderCount++;

  React.useEffect(() => {
    setFocus("firstName");
    console.log(watch("firstName"))
  }, [setFocus]);

  return (
      <form onSubmit={handleSubmit(onSubmit)}>
        <input {...register("firstName")} placeholder="First Name" />
        <button type="submit" onClick={() => {setFocus("firstName")}}>wpcnf</button>
      </form>
  );
}

export default MessagePage

setFocus 자체의 기능엔 문제가 없는 것을 확인했고, 나는 Input 을 공통 컴포넌트로 사용하고자 useController 로 사용했는데 이 부분에서 문제가 생기지 않았을까 추측했다.

그리고 공식문서에서 그 이유를 찾았는데, useController 의 field.ref 를 사용하지 않아 포커싱이 되지 않았던것을 알 수 있었다…

에러뿐만이 아닌 임의로 그냥 포커싱을 줄때도 field.ref 를 넣어주어야 한다는 사실을 알게됐다는😭

공식문서

예시는 @material-ui/core 라는 UI 라이브러리를 사용해 TextField 의 inputRef 라는 속성에 들어있는데, 그냥 input 에는 ref 안에 field.ref 를 넣어주면 된다.

<input
  id={name}
  type={type}
  className="input"
  name={name}
  value={field.value}
  onChange={field.onChange}
  ref={field.ref}
  ...
/>

테스트용으로 회원가입 하는 폼에 초기 포커싱으로 적용시켜봤는데, 정상 작동되는 것을 확인했다!

  useEffect(() => {
    setFocus("user")
  }, [setFocus])

  ...

  <Input
      name="user"
      control={control}
      label="아이디"
      maxLength="30"
      type="text"
      placeholder="아이디(5자 이상)"
    />

[인스타그램 클론 코딩 프로젝트] 작업중, 더보기 버튼을 작업하는 중이었다. 버튼을 토글 클릭시 메뉴창이 뜨고 닫히도록 만들어놓은 상태이다.

'use client'

import { useState } from 'react'
import menuStyle from '@/app/(loggedIn)/_component/navMenu.module.scss'
import Link from 'next/link'
import style from './moreMenu.module.scss'

function MoreMenu() {
  const [isOpened, setIsOpened] = useState<boolean>(false)

  return (
    <div className={style.moreMenu}>
      <div className={menuStyle.menuItem}>
        <button
          className={menuStyle.menuButton}
          type="button"
          onClick={() => setIsOpened(!isOpened)}
        >
            {/* svg 아이콘 있음 */}
          <span style={{ fontWeight: `${isOpened ? 'bold' : ''}` }}>
            더보기
          </span>
        </button>

        {isOpened && (
          <ul role="dialog" className={style.moreMenuList}>
            <li>
              <Link href="#" className={style.moreMenuItem}>
                <svg>
                  ...
                </svg>
                <span>설정</span>
              </Link>
            </li>
            <li>
              <Link href="#" className={style.moreMenuItem}>
                {/* svg 아이콘 있음 */}
                <span>저장됨</span>
              </Link>
            </li>
            ...
          </ul>
        )}
      </div>
    </div>
  )
}

export default MoreMenu

여기서 나는 메뉴창 외의 영역에도 클릭할 시 메뉴창이 닫히도록 하고싶어했다. 찾던 내용중, 단순하게 전체영역을 태그로 감싼 후 해당 전역 태그의 onClick 이벤트로 isOpened 를 false 로 만드는 방법도 있었지만 메뉴창이 하나의 페이지가 아닌, 컴포넌트 영역에 있었기 때문에 해당 방법은 쓰지 못했다. 대신 useEffect 와 useRef 훅을 사용하여 해결하게 되었다.

메뉴창(ul) 요소를 참조할 수 있겠금 dialogRef 라는 이름으로 ref 속성을 넣어준다. 그리고 useEffect 를 통해 클릭이벤트를 감지하는 함수를 넣고, 그에 대한 콜백함수는 dialogRef 요소 외의 부분이 클릭됨에 따라 isOpened 의 값이 false 로 바뀌도록 해준다.

이때 e 매개변수의 타입은 MouseEvent 로 주고, contains 의 경우 Node 인터페이스를 사용하기 때문에 e.target 의 타입을 Node 로 선언해준다.

function MoreMenu() {

  const [isOpened, setIsOpened] = useState<boolean>(false)
  const dialogRef = useRef<HTMLUListElement | null>(null)

  useEffect(() => {
    // MouseEvent 타입 매개변수를 받고, 아무것도 반환하지 않는 함수
    const handleOutsideClose = (e: MouseEvent): void => {
      // useRef current에 담긴 엘리먼트 이외의 영역을 클릭 시 메뉴창 사라짐
      if (isOpened && !dialogRef.current.contains(e.target as Node))
        setIsOpened(false)
    }
    document.addEventListener('click', handleOutsideClose)

    return () => document.removeEventListener('click', handleOutsideClose)
  }, [isOpened])

  return (
    <div className={style.moreMenu}>
      <div className={menuStyle.menuItem}>
        ...
        {isOpened && (
          <ul role="dialog" ref={dialogRef} className={style.moreMenuList}>
            <li>
              <Link href="#" className={style.moreMenuItem}>
                ...
            </li>
            ...
          </ul>
        )}
      </div>
    </div>
  )
}

export default MoreMenu

또한 메모리 누수 방지를 위해 등록된 이벤트를 removeEventListener 를 통해 삭제해 주도록 유의해주어야 한다.

https://close-up.tistory.com/entry/React-컴포넌트-특정-영역-외-클릭-감지 https://babycoder05.tistory.com/entry/React-외부-영역-클릭-시-닫기

next 프로젝트를 시작하려 초기 세팅중, 다음과 같은 eslint 에러 문구가 떴다.

SyntaxError: Failed to load parser '@typescript-eslint/parser' declared in '.eslintrc.json » eslint-config-airbnb-typescript » /Users/johyejin/Desktop/2024-frontend-study/j-com/node_modules/eslint-config-airbnb-typescript/lib/shared.js': Unexpected token '||='

/Users/johyejin/Desktop/2024-frontend-study/j-com/node_modules/@typescript-eslint/scope-manager/dist/referencer/ClassVisitor.js:123
        withMethodDecorators ||=
                             ^^^

SyntaxError: Unexpected token '||='
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/johyejin/Desktop/2024-frontend-study/j-com/node_modules/@typescript-eslint/scope-manager/dist/referencer/Referencer.js:20:24)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
Process finished with exit code -1

첫번째 시도

초기 eslintrc.json 는 다음과 같이 자동으로 설정되어있던 상황이다.

{
  "extends": "next/core-web-vitals"
}

next.js 초기 세팅(eslint, prettier) 관련 글을 서치하였는데, 위의 부분만으론 완벽하게 ESLint가 적용된 것이 아니고 별도로 추가의 설정을 두어야 한다는 것을 알게 되었다. eslint 의 부족한 설정때문에 에러가 발생했다 추측하여, eslintrc.json 파일에 추가적인 설정과 더불어 다른 라이브러리들도 같이 설치를 진행했다.

npm i

eslint-config-airbnb

eslint-config-airbnb-typescript

@typescript-eslint/eslint-plugin@^6.0.0

@typescript-eslint/parser@^6.0.0 -d

{
  "extends": [
    "next/core-web-vitals",
    "airbnb",
    "airbnb-typescript",
    "prettier"
  ],
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}

하지만 에러는 여전히 있었고, 표시가 eslint 의 설정에 있는 라이브러리의 이름으로만 바뀌었을 뿐이었다.

두번째 시도

@typescript-eslint/parser 가 로드되지 않는다는 문구를 확인 후 @typescript-eslint/parser 라이브러리를 설치했지만 여전히 에러문구가 남아있었다.

하지만 이내 그 해결책을 고맙게도 스택오버플로우에서 찾았다.

질문자는 나와 똑같은 상황이었고, 심지어 이분 역시 @typescript-eslint/parser 까지 깔은 상황에 에러 해결이 안된다는 내용이었다.

답변은 다음과 같았는데, 결론적으로 단순히 Webstorm IDE 의 node 버전에 대한 이슈였다

• Ubuntu 22.04에 기본으로 설치된 Node.js를 제거하고, Node.js의 버전을 관리할 수 있는 nvm (Node Version Manager) 패키지를 설치
  • Node.js 제거: sudo apt purge nodejs npm
  • nvm 설치: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash (이미 있다면 해당 단계는 패스)
  • WebStorm에서 Node.js 버전 선택: WebStorm에서 설정 > Languages & Frameworks | Node.js 로 이동하여 원하는 버전을 선택
  • 프로젝트 루트에 .nvmrc 파일을 추가하여 사용하려는 Node.js 버전을 정의할 수 있음 (선택사항)
• WebStorm에서 적절한 Node.js 버전을 선택

하지만 난 이미 nvm 이 설치되어있었기 때문에 다음의 동작만으로 에러를 제거할 수 있었다.

Webstorm 설정에서 node 를 최신 버전으로 설정하니 에러가 깨끗하게 사라져있었다!

설정을 수정해도 에러창이 계속 떠있다면, 웹스톰 프로그램을 캐시 제거후 다시 시작하면 된다!

File > Invalidate Caches

옵션을 모두 체크 후 Invalidate and Restart 를 누르면 끝!

참고:

https://velog.io/@93minki/Next.js-ESLint-Airbnb-추가하기 https://stackoverflow.com/questions/76644474/syntaxerror-failed-to-load-parser-typescript-eslint-parser-declared-in-esl

스크롤 기능을 막아야하는 상황에서 대부분은 body 에 overflow-y: hidden 을 주는 방법이 제시되지만, 그렇지 않은 경우 자바스크립트로 이를 처리해야한다.

처음엔 아래와 같이 이벤트를 주었지만 작동하지 않았다 ㅠ

$body.addEventListener('scroll', function(e) {
    e.preventDefault();
  })

두번째 시도로 아래와 같이 다른 이벤트에도 적용해보았지만 작동은 하지 않고 에러까지 발생했다.

const $body = document.querySelector('body');
  function preventScroll(e) {
    e.preventDefault();
  }

  $body.addEventListener('scroll', preventScroll);
  $body.addEventListener('touchmove', preventScroll);
  $body.addEventListener('mousewheel', preventScroll);

구글링을 해보니 passive: false 옵션을 추가해주면 된다고 한다. 그런데 mousewheel 이벤트와 같이 스크롤과 관련된 이벤트는 기본적으로 passive로 처리되어 추가 옵션을 설정할 수 없었다.

대신, wheel 이벤트를 사용하여 스크롤을 감지하고 preventDefault를 호출하면서 성능 최적화와 문제 해결을 동시에 할 수 있었다.

const $body = document.querySelector('body');
  function preventScroll(e) {
    e.preventDefault();
  }
  // 'wheel' 이벤트를 사용하여 스크롤 감지 후 방지
  $body.addEventListener('wheel', preventScroll, { passive: false });
  $body.addEventListener('click', function() { // body 를 다시 클릭하면 스크롤 재개
    $body.removeEventListener('wheel', preventScroll, { passive: false });
  });

passive옵션을 추가하고 wheel 이벤트로 바꾸었더니 body 스크롤링이 잘 멈추었다.

wheel 이벤트와 scroll, mousewheel 의 차이, 그리고 성능최적화에 대한 내용이 더 궁금하여 챗지피티에 물어보니, 내용은 다음과 같았다.

wheel 이벤트는 마우스 휠 또는 트랙패드 등 더 다양한 입력 장치에서 발생하는 스크롤 이벤트로, mousewheel 이벤트와 비슷하지만wheel 이벤트가 표준에 더 가깝고 여러 입력 장치에서의 일관성을 제공한다고 한다.

또 wheel 이벤트가 passive로 처리되는 것은 브라우저가 성능 최적화를 위해 도입한 개념 중 하나이고, 브라우저는 기본적으로 wheel 이벤트에 대해 passive 플래그를 설정하기 때문에 이벤트 리스너 내에서 preventDefault를 호출하지 못하게 한다.

passive 플래그가 설정된 이벤트 리스너에서 preventDefault를 호출하는 것은 브라우저가 스크롤링 동작을 최적화하기 위해 이벤트 핸들러를 비동기적으로 실행하도록 허용하게 되는데, 이로 인해 호출 순서가 보장되지 않기 때문에 스크롤을 막아야 하는 경우에는 passive: false로 설정된 이벤트 리스너를 사용해야 한다..!

사용자 입력폼을 여러 단계로 작성할 수 있는 부분을 레이어 팝업식으로 띄어지는것이 아닌, 브라우저 상에서도 뒤로가기, 앞으로 가기가 가능한 랜딩페이지 형식으로 만들고 싶었다.

아래와 같은 사항때문이었다.

• 4개의 페이지로 분리하면 페이지 이동 시 이전에 입력한 사용자의 입력값이 날아감
  • 처음엔 sessionStorge (링크) 를 사용해서 페이지마다 데이터를 저장하려 시도했으나, 주민등록번호 등 예민한 정보도 포함되어있는 경우 고려
• spa 환경처럼 페이지전환이 부드럽지 않고 단계마다 페이지를 이동시 깜박거리는 현상 발생

별도로 페이지마다 데이터를 저장하는것이 아닌, form 양식 안에서 입력값들을 한꺼번에 제출할 수 있기 때문에 앞서 말한 방식으로 진행하고 싶었다.

하지만 생각보다 간단한 해결책이 있었으니, 바로 swiper 의 hashNavigation 옵션을 사용하는 것이었다. 해당 옵션을 사용하면 위의 고려사항들이 모두 충족될 수 있었다. (swiper 에 이런 기능이 있는지도 몰랐고, a 태그로 링크 이동을 하는 방법을 생각해보지못한 내가 아쉬웠다 😓)

• swiper 의 next, prev 버튼 뿐만 아닌 브라우저상 뒤로가기, 앞으로 가기 버튼을 눌러도 페이지 이동이 가능
• # 를 사용하기 때문에 새로고침 발생이 되지 않고 각 단계에서의 사용자 정보가 보존됨

<div class="participant swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" data-hash="step-1">Slide 1</div>
    <div class="swiper-slide" data-hash="step-2">Slide 2</div>
    <div class="swiper-slide" data-hash="step-3">Slide 3</div>
    <div class="swiper-slide" data-hash="step-4">Slide 4</div>
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

<script>
    const participantSwiper = new Swiper('.participant', {
      fadeEffect: {
        crossFade: true
      },
      hashNavigation: {
        watchState: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
</script>

🚨 문제 발생 & 해결

슬라이드처럼 보이지 않고 페이지가 전환되는 것처럼 보이도록 effect 효과를 빼고 싶었는데, 해당 방법은 보이지 않아 effect : 'fade' 효과를 준 후 다음의 css 를 추가했다.

.swiper-container .swiper-wrapper .swiper-slide {
    transition: opacity 0s !important;
}

그랬더니 슬라이드가 넘어갈 때 효과가 없이 휙휙 페이지처럼 전환되도록 하는것이 성공했다.

하지만 위의 css 를 적용하니 어째서인지 hashNavigation 가 작동하지 않는것이었다.😱

그래서 hashNavigation 옵션을 사용하는 대신 아래처럼 직접 해시를 스크립트를 작성해보았다.

• 슬라이드가 바뀌면 활성화된 슬라이드의 data-hash 가 url 의 해시(#)로 추가
• url 로 접근시 이전 단계를 건너뛰고 폼을 작성할 수 있기 때문에 초기 로딩 시에는 항상 슬라이드가 첫번째로 설정
• 브라우저 앞/뒤로가기 버튼을 통해 url 의 해시(#)가 바뀌면 해시의 값에 따라 슬라이드도 활성화

const participantSwiper = new Swiper('.participant', {
  effect : 'fade',
  fadeEffect: {
    crossFade: true
  },
  // hashNavigation: {
  //   watchState: true,
  // },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  on: {
    slideChange: function (e) { // 슬라이드의 변화에 따라 url 해시값 수정
      const activeSlide = participantSwiper.slides[participantSwiper.activeIndex];
      const dataHash = activeSlide.getAttribute('data-hash');

      // 현재 URL에 #와 함께 data-hash를 추가
      window.location.hash = dataHash;
    }
  }
});

function setActiveSlideByHash(action) {
    if (action === 'load') { // 초기 로딩 시 항상 첫번쩨 슬라이드여야함
    window.location.hash = 'step-1';
  } else {
        // 현재 URL의 해시 값을 가져와 해당 슬라이드로 이동
    const hash = window.location.hash.replace('#', ''); 
    const slideIndex = participantSwiper.slides.findIndex((slide) => slide.getAttribute('data-hash') === hash);

        // hash와 일치하는 data-hash를 가진 슬라이드가 발견되지 않은 경우
    if (slideIndex !== -1) {
      participantSwiper.slideTo(slideIndex);
    }
  }
}

    // 브라우저의 뒤로가기 및 앞으로가기 버튼을 처리
window.addEventListener('popstate', function () {
    setActiveSlideByHash('popstate');
});

    // 초기 로딩 시 URL의 해시값을 확인하고 해당 슬라이드로 이동
window.addEventListener('load', function () {
    setActiveSlideByHash('load');
});

예전엔 특정 요소의 index 를 찾을 때 find() 메서드를 사용 후 그 안에서 index 값을 또 구했는데, 그럴 필요 없는 findIndex() 라는 메서드가 있다는 것을 뒤늦게 기억했다..!

그리고 오히려 좋아진 점이, hashNavigation 를 썼을 땐 뒤로가기가 무조건 이전 슬라이드로 가는것이 아닌, prev, next 버튼을 통해 들렀던 슬라이드로 전환되기 때문에 뒤죽박죽 되었던 반면,

(예: 두번째 슬라이드에서 뒤로가기를 누르면 보통 첫번째 슬라이드로 가야하는데, swiper 의 prev 나 next 버튼을 사용했던 내역때문에 세번째 슬라이드로 이동하는 경우)

해당 함수를 사용하면 내가 이전에 어떤 슬라이드를 들렀건 무조건 현재 슬라이드에서 한칸 이전 슬라이드로 이동하기 때문에 더 편해졌다.

정상작동하는 것 까지 확인 완료 😘

+ 추가

• noSwiping 옵션을 주어 마우스로 드래그하여 슬라이드를 움직이는 것을 막아주었다.
• 전체 슬라이드 중 현재 활성화된 슬라이드의 번호도 표시해주었다. (2 / 4, 3 / 4 … 의 형태로)

<div class="participant swiper-container">
  <div class="swiper-wrapper"...>

    <div class="btn-wrap">
    <div class="slide-info">1 / 4</div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

</div>

const participantSwiper = new Swiper('.participant', {
    // ...이전 코드

    // 마우스 드래그 동작으로 인한 슬라이딩 방지
    noSwiping: true,
    noSwipingClass: 'swiper-slide',

    // 슬라이드 번호 표시
    on: {
      slideChange: function () {
        // ...이전 코드

        // 현재 활성화된 슬라이드 번호 표시
        const activeSlideIndex = participantSwiper.activeIndex + 1; // 현재 활성화된 슬라이드 번호
        const totalSlides = participantSwiper.slides.length; // 총 슬라이드 수
        const text = activeSlideIndex + ' / ' + totalSlides;
        document.querySelector('.slide-info').textContent = text;
      }
    }
}

let totalSlides = participantSwiper.slides.length; // 총 슬라이드 수
let slideInfo = document.querySelector('.slide-info');
slideInfo.textContent = `1 / ${totalSlides}`;

+ 슬라이드 effect 해결

swiper 에 슬라이드 속도를 조절해주는 speed 라는 옵션을 주면 앞서 주었던 css 수정, effect 옵션 추가 등 복잡한 추가 작업 없이 바로 효과가 없는 페이지 전환 슬라이드를 줄 수 있었다..!

하지만 hashNavigation 를 쓰면 초기 로딩 시 url 이 첫번째 해시로 지정되지 않는 버그가 있어 계속 안쓰고 그냥 slideChange 의 코드를 그대로 썼다.

• opacity transition 을 0 으로 줬던 css 삭제
• swiper 의 옵션 effect, fadeEffect 삭제
• swiper 의 옵션 speed 를 0으로 설정

const participantSwiper = new Swiper('.participant', {
  speed: 0, ...

최종 코드:

const participantSwiper = new Swiper('.participant', {
  speed: 0,
  // hashNavigation: {
  //   watchState: true,
  // },
  noSwiping: true,
  noSwipingClass: 'swiper-slide',
  spaceBetween: 30,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  on: {
    slideChange: function (e) { // 슬라이드의 변화에 따라 url 해시값 수정
      const activeSlide = participantSwiper.slides[participantSwiper.activeIndex];
      const dataHash = activeSlide.getAttribute('data-hash');
      // 현재 URL에 #와 함께 data-hash를 추가
      window.location.hash = dataHash;

      // 현재 활성화된 슬라이드 번호 표시
      const activeSlideIndex = participantSwiper.activeIndex + 1; // 현재 활성화된 슬라이드 번호
      const totalSlides = participantSwiper.slides.length; // 총 슬라이드 수
      const text = activeSlideIndex + ' / ' + totalSlides;
      document.querySelector('.slide-info').textContent = text;
    }
  }
});

// 초기 슬라이드 -> 현재 슬라이드 번호 / 총 슬라이드 수
let totalSlides = participantSwiper.slides.length; // 총 슬라이드 수
let slideInfo = document.querySelector('.slide-info');
slideInfo.textContent = `1 / ${totalSlides}`;

function setActiveSlideByHash(action) {
  if (action === 'load') {
    window.location.hash = 'step-1';
  } else {
    const hash = window.location.hash.replace('#', '');
    const slideIndex = participantSwiper.slides.findIndex((slide) => slide.getAttribute('data-hash') === hash);
    if (slideIndex !== -1) { // hash와 일치하는 data-hash를 가진 슬라이드가 발견되지 않은 경우
      participantSwiper.slideTo(slideIndex);
    }
  }
}

// 브라우저의 뒤로가기 및 앞으로가기 버튼을 처리
window.addEventListener('popstate', function () {
  setActiveSlideByHash('popstate');
});

// 초기 로딩 시 URL의 해시값을 확인하고 해당 슬라이드로 이동
window.addEventListener('load', function () {
  setActiveSlideByHash('load');
});