dev-hpk 님의 블로그

[맛길] Zustand + sessionStorage로 맛집 리스트 캐싱하기

dev-hpk — Fri, 7 Mar 2025 20:58:08 +0900

Zustand와 sessionStorage로 데이터를 캐싱하게 된 계기

맛길을 배포 후 지인들에게 피드백을 요청했습니다. 가장 많이 받은 피드백이 페이지를 이동할 때마다 이전 데이터가 사라져 불편하다는 내용이었습니다.

피드백을 바탕으로 생각해보니 아래와 같은 문제가 있을 수 있을 것 같습니다.

페이지 전환이나 새로고침 시 기존 데이터를 다시 불러오기 위해 불필요한 API 요청이 발생
API 응답이 길어질 경우, UX(사용자 경험) 저하
길 찾기 기능에서 prop drilling 발생

이 문제를 해결하기 위해 Zustand를 도입해 맛집 리스트와 위치 정보를 전역으로 관리하고, 맛집 리스트를 sessionStorage에 저장해 불필요한 API 호출을 줄이기로 했습니다.

Zustand를 선택한 이유 : 상태 관리 라이브러리 비교

전역 상태 관리 방법으로는 Context API를 이용하거나 외부 상태 관리 라이브러리를 이용하는 방법이 있습니다.

Context API

내장 기능으로 외부 라이브러리에 의존하지 않고 간단하게 사용 가능
상태가 변경될 때마다 해당 컨텍스트를 구독하고 있는 모든 컴포넌트가 리렌더링 되기 때문에 리렌더링 최적화 어려움

Redux

강력한 상태관리 기능과 미들웨어라는 기능을 제공하여 비동기 작업을 효율적으로 관리해 줌
보일러 플레이트 코드가 많음 → 단순한 기능인데도 여러 개의 파일을 만들고, action → reducer → store → component로 연결하는 과정이 필요해 코드량이 많아지고 유지보수가 어려움
Provider를 최상위에 두고, Redux의 상태가 변경되면 해당 상태를 구독하는 모든 컴포넌트가 리렌더링 되기 때문에 리렌더링 최적화 어려움

Recoil

Github 확인 결과 2025년 1월 2일부터 GitHub에서 읽기 전용 상태로 전환되어 배재했습니다.

React-Query

데이터 페칭과 캐싱을 위한 강력한 기능을 제공
주로 서버 상태 관리에 중점을 두고 있어, 클라이언트 측 상태 관리에는 적합하지 않을 수 있음

Zustand

보일러 플레이트 코드가 적고 사용법이 간단
별도의 Provider 없이 상태와 상태를 변경하는 액션을 훅으로 정의하고, 어느 컴포넌트에서나 import하여 사용 가능
필요한 상태만 구독하여 사용할 수 있어 리렌더링을 최소화

npm trends로 비교한 상태관리 라이브러리

Zustand를 선택한 이유는 다음과 같습니다.

작은 번들 사이즈
적은 보일러플레이트 코드와 간단한 사용법
Provider 없이 원하는 상태만 구독이 가능해 리렌더링을 최소화

sessionStorage를 선택한 이유 : 클라이언트 캐싱 방법 비교

localStorage

데이터를 쉽게 저장하고 불러올 수 있으며, 브라우저를 종료해도 데이터가 유지됨(영구 저장)

indexedDB

많은 양의 구조화된 데이터를 클라이언트에 저장 가능

sessionStorage

데이터를 쉽게 저장하고 불러올 수 있으며, 세션 동안 데이터를 유지하고 세션이 종료되면 데이터가 삭제됨(임시 저장)

맛집 리스트 데이터는 대량의 데이터가 아니기 때문에 indexedDB를 사용하는 것은 과한 것 같습니다.

처음 취지에 맞는 캐싱 방법은 localStorage와 sessionStorage인데, 세션 동안만 데이터를 유지하고 브라우저를 닫으면 데이터를 삭제하는 것이 자연스럽다고 생각해 sessionStorage를 선택했습니다.

Zustand + sessionStorage 적용

import { create } from 'zustand';
import { YoutubeData } from '@/app/types/youtube';

interface ListsStore {
  lists: Record<string, YoutubeData[]>;
  cursors: Record<string, number | null>;
  hasNexts: Record<string, boolean>;

  initializeState: () => void;
  setLists: (channel: string, newLists: YoutubeData[]) => void;
  setCursor: (channel: string, cursor: number | null) => void;
  setHasNext: (channel: string, hasNext: boolean) => void;
}

const useListsStore = create<ListsStore>((set) => ({
  lists: {},
  cursors: {},
  hasNexts: {},

  // sessionStorage에서 상태를 초기화
  initializeState: () => {
    const sessionStorageData = sessionStorage.getItem('youtubeData');
    if (sessionStorageData) {
      const { lists, cursors, hasNexts } = JSON.parse(sessionStorageData);
      set({ lists, cursors, hasNexts });
    }
  },
  // 채널의 목록을 설정하고 sessionStorage에 저장
  setLists: (channel, newLists) =>
    set((state) => {
      const updatedLists = { ...state.lists, [channel]: newLists };
      sessionStorage.setItem(
        'youtubeData',
        JSON.stringify({ ...state, lists: updatedLists }),
      );
      return { lists: updatedLists };
    }),
  // 채널의 커서를 설정하고 sessionStorage에 저장
  setCursor: (channel, cursor) =>
    set((state) => {
      const updatedCursors = { ...state.cursors, [channel]: cursor };
      sessionStorage.setItem(
        'youtubeData',
        JSON.stringify({ ...state, cursors: updatedCursors }),
      );
      return { cursors: updatedCursors };
    }),
  // 채널의 'hasNext' 값을 설정하고 sessionStorage에 저장
  setHasNext: (channel, hasNext) =>
    set((state) => {
      const updatedHasNexts = { ...state.hasNexts, [channel]: hasNext };
      sessionStorage.setItem(
        'youtubeData',
        JSON.stringify({ ...state, hasNexts: updatedHasNexts }),
      );
      return { hasNexts: updatedHasNexts };
    }),
}));

export default useListsStore;

import { useCallback, useEffect } from 'react';
import { ChannelResponse, YoutubeData } from '../types/youtube';
import axios from '@/app/lib/instance';
import useIntersectionObserver from '@/app/hooks/useIntersectionObserver';
import useListsStore from '@/app/stores/useListsStore';

const useFetchData = (
  channel: string,
  initialLists: YoutubeData[],
  initialHasNext: boolean,
  nextCursor: number | null,
) => {
  const {
    lists,
    cursors,
    hasNexts,
    setLists,
    setCursor,
    setHasNext,
    initializeState,
  } = useListsStore();

  // 컴포넌트 마운트될 때 store 상태 초기화
  useEffect(() => {
    initializeState();
  }, [initializeState]);
  // sessionStorage에 저장된 채널 데이터가 없는 경우 초기 데이터 설정
  useEffect(() => {
    const sessionStorageData = sessionStorage.getItem('youtubeData');
    const hasStoreData = sessionStorageData
      ? JSON.parse(sessionStorageData)
      : null;

    if (!hasStoreData || !hasStoreData.lists[channel]) {
      if (!lists[channel]) {
        setLists(channel, initialLists);
      }
      if (cursors[channel] === undefined) {
        setCursor(channel, nextCursor);
      }
      if (hasNexts[channel] === undefined) {
        setHasNext(channel, initialHasNext);
      }
    }
  }, [
    channel,
    initialLists,
    initialHasNext,
    nextCursor,
    lists,
    cursors,
    hasNexts,
    setLists,
    setCursor,
    setHasNext,
  ]);

  const fetchData = useCallback(async () => {
    if (!hasNexts[channel]) return;

    const { data } = await axios.get<ChannelResponse>(channel, {
      params: { limit: 12, cursor: cursors[channel] },
    });

    setLists(channel, [...(lists[channel] || []), ...data.lists]);
    setCursor(channel, data.nextCursor);
    setHasNext(channel, data.hasNext);
  }, [channel, lists, cursors, hasNexts, setLists, setCursor, setHasNext]);

  const endRef = useIntersectionObserver(fetchData, hasNexts[channel]);

  return {
    lists: lists[channel] || [],
    hasNext: hasNexts[channel] || false,
    endRef,
  };
};

export default useFetchData;

Zustand + sessionStorage 적용 결과

불필요한 API 요청 감소 : 페이지 이동이나 새로고침 시 sessionStorage의 데이터를 사용해 불필요한 API 요청을 최소화
UX(사용자 경험) 개선 : 페이지 이동이나 새로고침 시 이전에 불러온 데이터가 유지되어, 처음부터 다시 데이터를 불러오는 불편함을 없앰

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

[맛길] 이미지 최적화 (LCP 최적화)

dev-hpk — Thu, 6 Mar 2025 22:02:36 +0900

LCP는 가장 큰 콘텐츠가 화면에 렌더링 되는 시간을 측정한 지표입니다. lighthouse로 측정한 결과 LCP(이미지)가 느림으로 측정되었습니다.

LCP가 낮게 측정되었다는 것은 화면에 콘텐츠가 늦게 렌더링 된다는 얘기입니다. 이는 사용자 경험(UX)에 큰 영향을 줄 수 있고 이탈로까지 이어질 수 있습니다. Next.js에서 제공하는 Image 컴포넌트를 사용해 해당 이슈를 해결해 보겠습니다.

이슈를 해결하기 전에 html img 태그를 사용했을 때 결과를 먼저 측정해 보겠습니다.

img 태그 (제약 없음, Slow 4G, 3G)

img 태그 - No Throttling

img 태그 - Slow 4G

img 태그 - 3G

50kB의 작은 용량임에도 이미지를 내려받는데 4G 환경에서는 3.5초, 3G 환경에서는 12초가 소요됩니다. 이는 사용자에게 부정적인 경험을 줄 수 있습니다.

이제 Next.js의 Image 컴포넌트를 사용해 이미지를 최적화해보겠습니다.

Image 컴포넌트 적용 및 결과

<Image
  src={thumbnail}
  className="object-cover transition-transform duration-300 will-change-transform group-hover:scale-105"
  fill
  sizes={sizes}
  alt={alt}
  priority
  onLoad={() => setIsLoading(false)}
/>;

자동 크기 조정 : fill 속성을 사용하여 다양한 화면 크기에서 비율을 유지하며 최적의 크기로 이미지를 표시했습니다.
포맷 최적화: 최신 이미지 포맷(WebP)으로 자동 변환하여, 이미지 파일 크기를 줄이고 로딩 속도를 개선했습니다.
불필요한 이미지 로드 방지 : sizes 속성을 설정하여 디바이스 크기에 맞는 이미지만 로드하도록 하여 데이터 사용량을 줄였습니다.
우선 로딩: priority 속성을 사용하여 페이지의 주요 콘텐츠가 빠르게 표시되도록 했습니다.

Imae 컴포넌트 - No Throttling

Image 컴포넌트 - Slow 4G

Image 컴포넌트 - 3G

Image 컴포넌트를 적용한 후의 성능 측정 결과는 다음과 같았습니다.

용량 : 50kB에서 12kB로 75% 감소
이미지 로딩 속도 : No Throttling 기준 280ms에서 52ms로 약 80% 감소

img 태그 - lighthouse 측정 결과

Image 컴포넌트 - lighthouse 측정 결과

lighthouse의 성능 점수는 최적화 전 65점에서 최적화 후 81점으로 개선되었습니다.

참고 자료 - Next.js | Image Optimization

Optimizing: Images | Next.js

Optimize your images with the built-in `next/image` component.

nextjs.org

[맛길] 접근성, SEO 개선

dev-hpk — Fri, 28 Feb 2025 20:13:06 +0900

사이트 배포 후 lighthouse를 이용해 접근성, SEO를 체크했습니다.

접근성, 검색엔진 최적화 측정 지표

분명 접근성과 SEO를 고려하면서 작업했다고 생각했는데 결과가 92점이네요. 낮은 점수는 아니지만 완성도 높은 서비스를 만들기 위해 개선 작업을 해보겠습니다.

접근성 개선

접근성 테스트 탈락 요소

위 사진은 접근성 테스트에서 통과하지 못한 요소들입니다. 차례대로 하나씩 살펴보면서 수정해 보겠습니다.

1️⃣ 텍스트 & 배경색 명암비

텍스트 색과 배경 색의 대비는 저시력자나 고령자도 인식할 수 있도록 4.5:1 이상이어야 한다고 합니다.

기존 버튼의 경우 배경색이 #059669, 텍스트가 #FFFFFF로 3.7:1입니다. 명암비 접근성 테스트 사이트를 이용해 접근성을 준수하도록 수정했습니다.

명도비 접근성 테스트 사이트

2️⃣ 버튼 터치 영역 수정

버튼의 크기를 W3C에서 권장하는 터치 영역 크기인 44 x 44 px로 수정했습니다.

3️⃣ 제목 요소 내림차순으로 수정

페이지 구조가 h1 > h3 형태로 작업되어 있어, h3 태그를 h2 태그로 수정했습니다.

4️⃣ 시멘틱 마크업 적용 및 role 속성 삭제

헤더의 내비게이션 부분을 nav > div > a로 작업하고, 리스트라는 점을 명시하기 위해 div와 a 태그에 각각 'list', 'listitem' role을 적용했습니다. 시멘틱 태그(ul, li)를 이용해 구조를 개선하고 불필요한 role 속성을 삭제했습니다.

SEO 개선

검색엔진 최적화 탈락 요소

SEO(Search Engine Optimization)를 위해서는 사이트맵(sitemap)과 robots.txt 파일을 생성해야 한다고 합니다. 사이트맵과 robots.txt가 무슨 역할을 하는지 찾아봤습니다.

사이트맵: 검색엔진의 크롤링을 돕기 위해 사이트에 어떤 페이지가 있는지 알려주는 역할
robots.txt: 검색엔진이 크롤링할 수 있는 페이지를 제한하는 역할

즉, 검색엔진이 불필요한 페이지 크롤링하지 않도록 해 빠르고 효율적으로 사이트를 인덱싱할 수 있게 해주는 역할이네요. 프로젝트에 적용해 보겠습니다.

1️⃣ robots.txt 추가

Next.js 공식 문서의 설명에 따라 /app 디렉토리 하위에 robots.txt를 추가했습니다.

User-Agent: *
Allow: /

Sitemap: https://mat-gil.vercel.app/sitemap.xml

모든 크롤러를 허용했고, 프로젝트에 보호가 필요한 민감한 데이터가 존재하지 않아 Disallow는 따로 설정하지 않았습니다.

2️⃣ 사이트맵(sitemap) 추가

// /app/sitemap.ts

import axios, { AxiosResponse } from 'axios';
import type { MetadataRoute } from 'next';
import { ChannelResponse, YoutubeData } from '@/app/types/youtube';
import path from 'path';
import { promises as fs } from 'fs';

// 채널 JSON 파일의 데이터 수 반환하는 함수
async function getChannelMaxCount(channel: string): Promise<number> {
  const filePath = path.join(process.cwd(), 'data', `${channel}.json`);
  const fileContents = await fs.readFile(filePath, 'utf-8');
  const data: YoutubeData[] = JSON.parse(fileContents);

  return data.length;
}

// 동적으로 각 채널의 경로를 생성하는 함수
async function getDynamicPathsFromAPI() {
  const channels = [
    'pungja',
    'seongsigyeong',
    'hongseokcheon',
    'haennim',
    'baekjongwon',
  ];
  const allPaths: MetadataRoute.Sitemap = [];

  const fetchChannelPaths = channels.map(async (channel) => {
    const maxCount = await getChannelMaxCount(channel);
    let nextCursor: number | null = null;

    const response: AxiosResponse<ChannelResponse> = await axios.get(
      `https://mat-gil.vercel.app/api/${channel}`,
      {
        params: { cursor: nextCursor, limit: maxCount },
      },
    );
    const { lists, nextCursor: newNextCursor } = response.data;

    // 채널의 세부 페이지 URL 경로를 생성하여 allPaths 배열에 추가
    lists.forEach((item: YoutubeData) => {
      allPaths.push({
        url: `https://mat-gil.vercel.app/${channel}/${item.position}`,
        lastModified: new Date(),
        changeFrequency: 'daily',
        priority: 0.7,
      });
    });

    nextCursor = newNextCursor;
  });

  // 빌드 타임에서 60초 초과 에러 발생
  // 모든 채널에 대해 병렬로 경로를 가져오도록 수정
  await Promise.all(fetchChannelPaths);

  return allPaths;
}

// sitemap 함수: 최종 Sitemap을 반환하는 함수
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const dynamicPaths = await getDynamicPathsFromAPI();

  return [
    {
      url: 'https://mat-gil.vercel.app',
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 1,
    },
    {
      url: 'https://mat-gil.vercel.app/pungja',
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 0.7,
    },
    {
      url: 'https://mat-gil.vercel.app/seongsigyeong',
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 0.7,
    },
    {
      url: 'https://mat-gil.vercel.app/hongseokcheon',
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 0.7,
    },
    {
      url: 'https://mat-gil.vercel.app/haennim',
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 0.7,
    },
    {
      url: 'https://mat-gil.vercel.app/baekjongwon',
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 0.7,
    },
    ...dynamicPaths,
  ];
}

getChannelMaxCount: 각 채널에 포함된 데이터의 개수를 반환.
getDynamicPathsFromAPI: 각 채널에 대해 데이터를 가져와 동적 사이트맵 경로를 생성.
sitemap: 기본 URL과 동적 경로를 합쳐 최종 사이트맵을 반환.

/api/sitemap/route.ts

// /app/api/sitemap/route.ts

import { NextResponse } from 'next/server';
import sitemap from '@/app/sitemap';

const formatDate = (date: Date): string => {
  return date.toISOString().split('T')[0];
};

export async function GET() {
  const sitemapData = await sitemap();

  const xmlHeader = `<?xml version="1.0" encoding="UTF-8"?>\n`;
  const urlSetStart = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n`;
  const urlSetEnd = `</urlset>\n`;

  const urls = sitemapData
    .map((entry) => {
      return `<url>
      <loc>${entry.url}</loc>
      <lastmod>${formatDate(new Date())}</lastmod>
      <changefreq>${entry.changeFrequency}</changefreq>
      <priority>${entry.priority}</priority>
    </url>`;
    })
    .join('\n');

  const sitemapXML = xmlHeader + urlSetStart + urls + urlSetEnd;

  return NextResponse.json(sitemapXML, {
    headers: { 'Content-Type': 'application/xml' },
  });
}

sitemap.xml

위의 동적인 사이트 맵을 생성하는 코드를 작성하기까지 여러번의 시행착오를 겪었습니다. 에러 메시지는 it took more than 60 seconds로 빌드하는데 시간이 오래 걸려서 발생하는 문제였습니다.

동적 사이트맵 추가 후 빌드 에러

처음에는 빌드 시간이 길어지는 이유를 파악하는 데 어려움을 겪었고, 다양한 가능성을 검토해 봤습니다. 그 과정에서 API 요청, 데이터 처리 방식, 외부 리소스 불러오는 방식 등 여러 가지를 체크하며 최적화를 시도했습니다. 특히 API 호출에 대해 반복적으로 요청을 보내는 부분에서 속도가 느려지는 문제를 발견할 수 있었습니다.

결국, 이 문제를 해결하면서 빌드 과정에 대한 이해도가 높아졌고, 앞으로 유사한 문제가 발생했을 때 더 빠르게 대응할 수 있을 것 같습니다.

3️⃣ metaData 추가

검색 엔진이 페이지를 더 잘 인식하고 사용자에게 더 나은 검색 결과를 제공할 수 있도록, 페이지별로 고유한 제목(title)과 설명(description) 등의 정보를 동적으로 생성했습니다.

// /app/[channel]/page.tsx

export async function generateMetadata({
  params,
}: {
  params: Promise<{ channel: string }>;
}): Promise<Metadata> {
  const { channel } = await params;

  const title = `맛길 | 맛집 추천 & 길찾기 | ${channelMap[channel]}`;
  const description = `${channelMap[channel]}의 인기 맛집 리스트! 유튜브 영상으로 검증된 맛집 위치와 메뉴를 확인하고, 길찾기 기능으로 가까운 맛집에 방문해보세요!`;
  const imageUrl = 'https://mat-gil.vercel.app/images/logo.png';

  return {
    title,
    description,
    openGraph: {
      title,
      description,
      url: `https://mat-gil.vercel.app/${channel}`,
      images: {
        url: imageUrl,
        width: 1200,
        height: 630,
      },
      type: 'website',
      siteName: '맛길',
    },
    twitter: {
      card: 'summary_large_image',
      title,
      description,
      images: { url: imageUrl },
    },
  };
}

// /app/[channel]/[id]/page.tsx

export async function generateMetadata({
  params,
}: {
  params: Promise<{ channel: string; id: string }>;
}): Promise<Metadata> {
  const { channel, id } = await params;
  const {
    data: { list },
  } = await axios.get(`${channel}/${id}`);
  const { title: restaurant } = list;

  const title = `맛길 | 맛집 추천 & 길찾기 | ${channelMap[channel]}`;
  const description = `${restaurant}의 메뉴와 위치를 확인하고, 길찾기 기능을 통해 해당 매장까지 간편하게 찾아가세요!`;
  const imageUrl = 'https://mat-gil.vercel.app/images/logo.png';

  return {
    title,
    description,
    openGraph: {
      title,
      description,
      url: `https://mat-gil.vercel.app/${channel}/${id}`,
      images: [
        {
          url: imageUrl,
          width: 1200,
          height: 630,
        },
      ],
      type: 'website',
      siteName: '맛길',
    },
    twitter: {
      card: 'summary_large_image',
      title,
      description,
      images: { url: imageUrl },
    },
  };
}

mat-gil.vercel.app/pungja - 메타 데이터

mat-gil.vercel.app/seongsigyeong/0 - 메타 데이터

메타 데이터가 페이지에 따라서 동적으로 잘 생성 됩니다. 추가로 openGraph도 설정했으니, 공유 디버거와 실제 링크 공유를 통해 미리보기 화면도 확인해 보겠습니다.

kakao developers - 공유 디버거

meta developers - 공유 디버거

카카오톡 링크 공유 화면

접근성 & SEO 개선 결과

접근성, SEO 개선 후 측정 지표

구글 서치콘솔 - 평균 게재순위

검색 결과 - 리치 스니펫

이번 프로젝트는 접근성과 SEO 개선을 목표로 많은 노력을 기울였으며, 이 과정에서 많은 지식을 습득하고 문제 해결 능력을 키우는 값진 경험을 하였습니다. 문제를 해결하며 얻은 지식은 단순히 기술적인 부분에 그치지 않고, 사용자 중심의 사고방식을 배우는 기회가 되었습니다.

[맛길] 안드로이드(AOS) 위치 정보(Geolocation API) 지연 문제 해결

dev-hpk — Wed, 26 Feb 2025 17:12:57 +0900

사이트 배포 후 모바일 디바이스(AOS, IOS)에서 아래 브라우저들을 통해 길 찾기 기능을 테스트했습니다.

Chrome (IOS, AOS)
Naver 앱 (IOS, AOS)
카카오 인 앱 브라우저 (IOS, AOS)
Firefox (IOS, AOS)
Edge (IOS, AOS)
Opera (IOS, AOS)
safari (IOS)
삼성 인터넷(AOS)

IOS에서는 길 찾기가 정상적으로 동작하는 반면, AOS( Android OS)의 경우 경로를 받기까지 매우 오래 걸리는 문제가 발생했습니다. 테스트에 사용한 기종이 오래된 갤럭시 S10이라는 의심이 들어, 가장 최신 기종인 갤럭시 s25로도 테스트해봤지만 결과는 같았습니다.

혹시 서버에서 응답이 늦게 오는건 아닐까 하는 생각에 Vercel의 로그도 확인해 봤지만, 실행 시간(Excution Duration)이 모두 1초 미만의 짧은 시간입니다.

Vercel의 서버 로그

서버(getRoute API)에 이상이 없다면, 남은 문제는 AOS(Android OS)에서 Geolocation API의 응답이 지연되는 것입니다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

위 영상은 Chrome inspector를 이용해서 디버깅한 갤럭시 s10으로 길 찾기 기능을 실행한 결과입니다.

영상에서 확인할 수 있듯이, 처음으로 경로 데이터를 요청할 때는 정상적으로 작동합니다. 그러나 이후에 길 찾기 기능을 이용하면 경로 요청이 매우 오랜 시간이 지난 후에야 이루어집니다. 영상을 2배속으로 편집해 비교적 짧게 느껴질 수 있지만, Geolocation API를 통해 위치 정보를 받아오는 데 약 25초가 소요되었습니다.

여러 브라우저로 테스트를 반복하던 중 Firefox로 테스트를 진행했을 때만 지연 없이 정상적으로 동작했고, 앱의 위치 액세스 권한을 확인하고 나서 차이를 알게 되었습니다.

Firefox 위치 액세스 권한 설정

Firefox의 위치 액세스 설정에만 '정확한 위치 사용' 옵션이 없습니다. 이를 바탕으로 다른 브라우저에서도 '정확한 위치 사용' 옵션을 끄고 테스트해보니, 정확도는 떨어지지만 정상적으로 동작하는 것을 확인했습니다.

상황을 개선하기 위해, 사용자에게 '정확한 위치 사용' 옵션을 활성화한 경우 위치 조회가 오래 걸릴 수 있다는 알림을 띄우는 방법을 고려했지만, 아래와 같은 이슈가 발생했습니다.

정확한 위치 사용 옵션 on/off 비교

위 사진은 정확한 위치 사용 옵션의 on/off 상태일 때 길 찾기 결과와, 네이버 지도에서 검색한 두 시작 지점의 자동차를 이용한 거리입니다. '정확한 위치 사용' 옵션을 끄면 지연 없이 정상적으로 동작하지만, 사용자 입장에서는 내 위치가 아닌 다른 위치가 시작점으로 선택되기 때문에 신뢰성이 떨어져 서비스를 이용하지 않을 것 같습니다.

또한 아이폰에서는 '정확한 위치 사용' 옵션을 활성화해도 지연 없이 정상 동작하기 때문에, 이 방법은 갤럭시 유저들에게만 불편한 경험을 제공할 수 있으며, 완전한 해결 방법이 아닙니다. 따라서, 보다 효과적이고 포괄적인 해결책을 찾는 것이 필요해 보입니다.

Geolocation API의 enableHighAccuracy와 maximumAge을 설정한 후 확인해보겠습니다.

Geolocation getCurrentPosition 옵션 - 출처 MDN

const position = await new Promise<GeolocationPosition>(
  (resolve, reject) => {
    // performance.now : 밀리초 단위의 고해상도 타임스탬프를 반환
    // 정확한 측정을 위해 Date.now 대신 사용
    const startTime = performance.now(); 

    navigator.geolocation.getCurrentPosition(
      (position) => {
        const endTime = performance.now();

        console.log(
          `[디버깅] 위치 요청 성공 - 소요 시간: ${endTime - startTime}ms`,
        );
        console.log('[디버깅] 위치 정보', {
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
        });

        resolve(position);
      },
      (error) => {
        reject(error);
      },
      {
        enableHighAccuracy: true, // 위치정보를 가장 높은 정확도로 수신
        maximumAge: 0, // default가 0이지만 캐싱하지 않기 위해 명시
      },
    );
  },
);

Geolocation API가 반환하는 위치 정보뿐만 아니라, 실제 Geolocation의 소요 시간을 로그로 기록하여 지연 문제가 해결되었는지 확인해 보겠습니다.

최초 Geolocation API를 이용한 위치 정보 반환 로그

Geolocation API를 이용한 위치 정보 반환 로그

위 사진은 Chrome inspector를 이용해 디버깅해본 결과입니다. 초기 Geolocation API의 응답을 받는 데 걸리는 시간은 1.5초입니다. 이후 여러 번 위치 정보를 요청했을 때 대략 3.5초 정도의 시간이 걸렸습니다. 3.5초도 짧은 시간은 아니지만, 초기 25초에 비하면 약 7배 정도의 시간이 단축된 것입니다.

다른 브라우저들과 IOS에서 테스트해도 이상 없이 잘 동작합니다. 정확한 원인을 찾기 위해서 enableHighAccuracy와 maximumAge을 하나씩 제거하면서 테스트를 진행해 보겠습니다. 공식 문서에 따르면 maximumAge 옵션은 default가 0이기 때문에 먼저 제거하고 테스트를 진행하겠습니다.

maximumAge 옵션 제거 후 디버깅 결과

maximumAge 옵션을 제거해도 Geolocation API의 응답 지연 없이 잘 동작합니다. 결론적으로 문제의 원은 enableHighAccuracy 옵션이었던 것으로 보입니다. 해당 내용은 조사를 통해서 자세히 알아보도록 하겠습니다.

이번 안드로이드(AOS) 위치 정보(Geolocation API) 지연 문제를 해결하기 위해 며칠 동안 다양한 방법을 시도했는데, 결국 옵션 하나를 추가하는 것으로 해결되었다는 점이 조금 허탈하게 느껴지긴 하지만, 그 과정에서 많은 것을 배운 것 같습니다.

1️⃣ 플랫폼(OS, 브라우저) 별 특성을 고려하자

같은 코드라도 OS와 브라우저에 따라 다르게 동작할 수 있다는 점을 다시금 실감했습니다. iOS와 AOS에서 geolocation 동작 방식이 다르다는 걸 사전에 인지했더라면 문제를 더 빠르게 해결할 수 있었을 것 같습니다.

2️⃣ 디버깅을 통한 문제 확인을 습관화하자

처음에는 네트워크 문제, 브라우저 문제 등을 의심하며 여러 가지 시도를 했지만, 문제를 해결하지 못했습니다. 이후 디버깅을 통해 문제를 직접 확인하고 정확한 원인을 파악해 해결할 수 있었습니다. 이를 통해 디버깅 과정이 무엇보다 중요하다는 점을 다시 한번 깨달았습니다.

MDN의 Geolocation 공식 문서에 따르면 enableHighAccuracy 옵션을 true로 설정하면 응답 속도가 느려지며 전력 소모량이 증가한다는 점에서 완벽한 해결책은 아니라고 생각합니다. 이러한 경험을 통해 앞으로도 플랫폼별 차이를 고려하면서 문제를 해결하는 능력을 더욱 키워야겠다는 생각이 들었습니다.

[맛길] Naver Directions API를 이용한 길 찾기 기능 개발

dev-hpk — Fri, 21 Feb 2025 14:07:24 +0900

현재 Naver Map API를 이용해 맛집 가게의 지도를 불러오고 마커를 찍는 기능까지 구현했습니다.

맛길 서비스

지인들에게 테스트와 피드백을 부탁했습니다.

~~모바일 디바이스에서 터치로 화면을 움직일 때 지도가 움직여서 불편하다.~~
맛길 서비스 내에 지도에서 길 찾기 기능을 사용할 수 있으면 좋을 것 같다.

첫 번째 피드백을 토대로 테스트 해보니 모바일 디바이스에서 지도 영역의 인터랙션 때문에 화면을 스크롤하기가 불편했습니다. 이 부분은 사용자 입장에서 부정적인 경험이라고 생각해 인터랙션 옵션을 제거하는 방법으로 수정했습니다.

두 번째 피드백인 길찾기 기능입니다.

사용자 입장에서 생각해보니 맛길 서비스에서 맛집의 위치를 찾아도 별도의 길 찾기 서비스를 이용해야 한다는 점에서 번거로울 것 같습니다. 이런 불편함을 제거하고 사용자 경험을 개선하기 위해서는 맛길 서비스 자체에 길 찾기 기능을 추가하는 방법을 검토해봐야 할 것 같습니다.

Naver Directions API

NAVER CLOUD PLATFORM을 확인해보니 입력 정보를 기반으로 자동차 통행 정보(소요 시간, 거리)를 조회하는 Directions 5 API를 제공하고 있습니다.

Directions 5 API

api.ncloud-docs.com

프로젝트에 길찾기 기능을 도입하기에 앞서 API 응답이 잘 받아와 지는지 먼저 확인해 보겠습니다.

길 찾기 API 구현

Naver Map API 공통 헤더

const getRoute = async (start: string, goal: string) => {
  const response = await axios.get(
    `https://naveropenapi.apigw.ntruss.com/map-direction/v1/driving/`,
    {
      params: { start, goal },
      headers: {
        'x-ncp-apigw-api-key-id': process.env.NEXT_PUBLIC_NAVER_CLIENT_ID,
        'x-ncp-apigw-api-key': process.env.NEXT_PUBLIC_NAVER_CLIENT_SECRET,
      },
    },
  );

  return response.data;
};

export default getRoute;

에러 메시지

CORS 에러(No 'Access-Control-Allow-Origin' header)가 발생했습니다. 에러 메시지에도 나와있듯이 로컬 주소인 3000번 포트에서 naveropenapi로 리소스를 요청했으니 당연한 결과입니다!

CORS : 한 도메인이 도메인 간의 요청을 가진 다른 도메인의 리소스에 액세스 할 수 있게 해주는 보안 메커니즘
자세한 내용은 정리를 잘해주신 내용이 있어 첨부하니 블로그를 참고해 주세요.
CORS 발생 원인과 해결 방법 - 출처 sebinnnnn.log

CORS 에러 해결

Naver Cloud Platform - 답변 내용

네이버에서 Backend 서버에서 API를 호출하라고 방법을 제시하고 있습니다. 맛길 프로젝트는 Serverless Function을 사용하고 있으니 쉽게 해결할 수 있을 것 같습니다!

Directions API 프록시 생성 - Vercel Serverless Function (/api/directions/routs.ts)

import axios from 'axios';
import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const start = searchParams.get('start');
  const goal = searchParams.get('goal');

  // 출발지나 목적지가 없는 경우 400 에러 반환
  if (!start || !goal) {
    return NextResponse.json(
      { error: '출발지와 목적지를 확인해주세요.' },
      { status: 400 },
    );
  }

  try {
    // Naver Directions API 호출
    const res = await axios.get(
      `https://naveropenapi.apigw.ntruss.com/map-direction/v1/driving`,
      {
        params: { start, goal },
        headers: {
          'x-ncp-apigw-api-key-id': process.env.NEXT_PUBLIC_NAVER_CLIENT_ID,
          'x-ncp-apigw-api-key': process.env.NEXT_PUBLIC_NAVER_CLIENT_SECRET,
        },
      },
    );

    return NextResponse.json(res.data, {
      status: 200,
      // CORS 설정 (모든 도메인에 대해 API 요청 허용)
      headers: { 'Access-Control-Allow-Origin': '*' },
    });
  } catch (error) {
    const errorMessage = (error as Error).message;
    return NextResponse.json(
      { error: `길찾기에 실패했습니다: ${errorMessage}` },
      { status: 500 },
    );
  }
}

클라이언트에서 Naver Directions API 호출

import axios from '@/app/lib/instance';

const getRoute = async (start: string, goal: string) => {
  const res = await axios.get('directions', {
    params: { start, goal },
  });

  return res.data;
};

export default getRoute;

getRoute 함수의 start와 goal 파라미터에 출발지와 목적지의 [경도, 위도]를 입력하고 동작을 확인해 보겠습니다. 동작은 임시로 버튼을 하나 만들고 클릭 이벤트 핸들러에서 호출하도록 작업해 보겠습니다.

API 응답 헤더

API 요청이 성공했습니다! 응답으로 받은 데이터에서 길찾기에 사용할 정보를 확인해 보겠습니다.

API 응답 데이터

path가 경로를 구성하는 (경도,위도) 좌표 배열이네요. 경로는 Naver Map API의 polyline을 이용해 그리면 될 것 같습니다.

polyline 결과

polyline 사용법

distacne, duration, taxiFare 데이터도 사용자에게 맛집까지의 거리에 대한 정보를 안내하는데 큰 도움이 될 것 같습니다!

길찾기 서비스를 개발하면서 느낀 점

Directions API를 활용해 길 찾기 서비스를 구현하면서 단순히 API를 호출하는 것뿐만 아니라, API 설계부터 CORS 문제 해결까지 직접 경험하면서 백엔드와의 통신 구조를 깊이 고민하게 되었습니다.

처음에는 클라이언트에서 직접 네이버 API를 호출했는데 브라우저에서 CORS 에러가 발생해 요청이 차단되었습니다. 네이버 API가 Access-Control-Allow-Origin 헤더를 제공하지 않기 때문에 이를 해결하려면 프록시 서버를 활용하거나 서버리스 함수를 사용해야 했습니다.

Next.js의 API Routes를 이용해 /api/directions라는 서버 프록시를 만들고, 서버에서 네이버 API를 호출하도록 변경해 CORS 문제를 해결할 수 있었습니다. 이 과정에서 웹 보안과 네트워크 통신에 대한 이해의 중요성을 다시 한번 느끼게 되었습니다.

단순히 화면을 만드는 것이 아니라, 백엔드와의 협업을 고려해 API의 흐름을 설계하고 최적화하는 과정까지 고려하는 것이 진짜 프론트엔드 개발자의 역할이라는 걸 조금이나마 체감할 수 있는 좋은 경험이었던 것 같습니다.

[Coworkers] 접근 권한 관련 이슈 해결

dev-hpk — Sat, 15 Feb 2025 23:53:48 +0900

멤버 관련 테스트 작업을 진행하던 중 이슈를 발견했습니다.

문제 상황

팀의 멤버가 아닌 유저가 팀 페이지(/[teamid])와 할 일 목록(/[teamid]/[tasklist])에 접근 및 추가/수정/삭제를 할 수 있습니다.

팀의 멤버가 아닌 사용자가 해당 페이지에 접근할 수 있는 유일한 방법은 URL을 직접 입력하는 것입니다. 하지만 URL을 직접 입력하여 접근한 후 수정/삭제 등의 작업을 시도할 가능성도 존재합니다. 이를 방지하기 위해 추가적인 보안 조치가 필요해 보입니다.

접근 권한 이슈 - 팀 페이지

권한 이슈 - 멤버 아닌 유저 할 일 생성 가능

권한 이슈 - 멤버 아닌 유저 할 일 수정 가능

권한 이슈 - 멤버 아닌 유저 할 일 삭제 가능

요청/추가/수정/삭제 동작이 모두 가능한 것을 보니, 서버에서 API 요청 시 팀 멤버 여부를 확인하는 로직이 없는 것 같습니다. 프론트엔드에서 처리할 수 있는 방법을 생각해 본 결과 아래 두 가지 정도가 있을 것 같습니다.

1️⃣ 멤버가 아닌 유저에게는 추가/수정/삭제가 보이지 않도록 수정

2️⃣ 페이지 접근 시 유저가 팀의 멤버인지 확인하도록 수정 (멤버가 아닌 경우: 접근 차단 알림 후 메인 페이지로 이동)

팀원들에게 이슈를 논의한 결과 만장일치로 2️⃣번이 선택되었습니다.

팀의 멤버인지 확인하는 로직을 추가하기 전에 차단 프로세스를 미리 계획해보겠습니다.

해결 프로세스 - 멤버 아닌 경우 차단

1️⃣ 유저가 팀 페이지(/[teamid]), 할 일 목록 페이지(/[teamid]/[tasklist]) 페이지에 접근

2️⃣ 유저가 팀의 멤버인지 확인

3️⃣ 팀의 멤버가 아닐 경우 "접근 제한: 팀의 멤버가 아닙니다!" 등의 메시지 노출

4️⃣ 메인 페이지(/)로 리다이렉트

✨ 멤버 확인 및 차단 로직 추가

/app/[teamid]/page.tsx

const { user } = useSelector((state: RootState) => state.auth);
const router = useRouter();

const {
  data: groupData,
  isLoading,
  error,
} = useQuery({
  queryKey: ['group', groupId],
  queryFn: () =>
    groupId
      ? getGroup({ id: groupId })
      : Promise.reject(new Error('No ID provided')),
  enabled: !!groupId,
  staleTime: 0,
  refetchOnMount: 'always',
});

if (
  !isLoading &&
  groupData &&
  !groupData.members.some(({ userId }) => userId === Number(user?.id))
) {
  alert('접근제한: 팀의 멤버가 아닙니다!');
  router.replace('/');
}

useSelector((state: RootState) => state.auth) : Redux에서 전역으로 관리하는 유저 데이터
!isLoading : react-query의 loading 상태일 때 groupData가 undefined이기 때문에 로딩이 종료된 후 실행하기 위해 추가
!groupData.member.some : 팀 멤버 데이터 중 로그인 한 유저와 id가 같은 멤버가 없는 경우

로직을 간단하게 살펴보면 페이지에 접근했을 때 서버에서 받아온 팀의 멤버 배열에 로그인한 유저의 id(Redux 전역 데이터)가 없는 경우 차단하고 있습니다.

결과를 확인해 보겠습니다.

접근 제한 결과

접근 제한이 잘 동작하는데 에러가 발생하네요.. 확인해 보겠습니다.

에러

에러 메시지 Cannot updatea component (`Router`) while rendering a different component (`TeamPage`)에 대해 찾아보니 렌더링 중에 Route를 해서 그렇다고 합니다. useEffect를 이용해 컴포넌트가 렌더링 된 후 로직이 동작하도록 수정하겠습니다.

/app/[teamid]/page.tsx - 수정

useEffect(() => {
  if (
    !isLoading &&
    groupData &&
    !groupData.members.some(({ userId }) => userId === Number(user?.id))
  ) {
    alert('접근제한: 팀의 멤버가 아닙니다!');
    router.replace('/');
  }
}, [isLoading, groupData, user?.id, router]);

접근 제한 결과

팀의 멤버가 아닌 유저가 접근하면 해결 프로세스에서 정의한 것처럼 잘 동작하네요!

다른 페이지에서도 적용하기 위해 커스텀 훅으로 분리하는 작업을 해보겠습니다.

컴포넌트의 이름은 팀의 멤버가 아니면 리다이렉트 하는 로직에 맞게 useRedirectIfNotMember로 하겠습니다.

useRedirectIfNotMember.ts

import { useSelector } from 'react-redux';
import { RootState } from '@/app/stores/store';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';
import { GroupResponse } from '../types/grouptask';

const useRedirectIfNotMember = ({
  isLoading,
  groupData,
}: {
  isLoading: boolean;
  groupData?: GroupResponse;
}) => {
  const router = useRouter();
  const { user } = useSelector((state: RootState) => state.auth);

  useEffect(() => {
    if (
      !isLoading &&
      groupData &&
      !groupData.members.some(({ userId }) => userId === Number(user?.id))
    ) {
      alert('접근제한: 팀의 멤버가 아닙니다!');
      router.replace('/');
    }
  }, [isLoading, groupData, router, user?.id]);
};

export default useRedirectIfNotMember;

훅은 props로 데이터 요청 상태인 isLoading과 members를 담고 있는 groupData를 받았습니다.

페이지에 적용해 보겠습니다.

useRedirectIfNotMember({
  isLoading,
  groupData,
});

커스텀 훅으로 분리하면서 코드가 짧아져 가독성도 좋아지고, 다른 페이지에서도 사용할 수 있게 되었습니다.

여기서 끝내면 조금 아쉬우니 성능적으로도 조금이나마 최적화를 진행해 보겠습니다.

useRedirectIfNotMember.ts - 최적화

import { useSelector } from 'react-redux';
import { RootState } from '@/app/stores/store';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';
import { GroupResponse } from '../types/grouptask';

const useRedirectIfNotMember = ({
  isLoading,
  groupData,
}: {
  isLoading: boolean;
  groupData?: GroupResponse;
}) => {
  const router = useRouter();
  const userId = useSelector((state: RootState) => state.auth.user?.id);
  const [isRedirecting, setIsRedirecting] = useState(false);
  
  const redirect = useCallback(() => {
    setIsRedirecting(true);
    alert('접근제한: 팀의 멤버가 아닙니다!');
    router.replace('/');
  }, [router])

  useEffect(() => {
    if (
      !isLoading &&
      groupData &&
      !groupData.members.some(({ userId: id }) => id === Number(userId))
    ) {
      redirect();
    }
  }, [isLoading, groupData, userId, redirect]);
};

export default useRedirectIfNotMember;

const userId = useSelector((state: RootState) => state.auth.user?.id);
기존 구조분해 할당으로 선언한 코드({user})는 컴포넌트가 렌더링 될 때 Redux의 auth 전체의 변화를 감지했습니다. user.id만 조회함으로써 불필요한 리렌더링을 방지했습니다.
redirect 함수 생성
기존 코드는 컴포넌트가 렌더링 될 때마다 useEffect 내부의 로직을 새로 생성했습니다. 로직을 useCallback을 사용해 redirect 함수로 분리함으로써 렌더링 될 때마다 로직이 새로 생성되는 것을 방지했습니다.

멤버 접근 제한 이슈 수정하면서 느낀 점

이번 경험을 통해 리액트에서 성능 최적화의 중요성과 useCallback, useSelector와 같은 훅을 효율적으로 사용하는 방법을 배웠습니다. 작은 성능 최적화가 사용자 경험에 큰 영향을 미칠 수 있다는 점에서, 앞으로는 더욱 세심하게 코드 최적화를 고려해야겠다는 생각을 하게 되었습니다. 또한, 멤버 접근 제한 프로세스를 설계하면서 사용자 경험을 고려한 기능 구현의 중요성을 깨닫게 되었고, 단순히 기술적인 구현에 그치지 않고 사용자가 어떻게 느낄지에 대한 고민이 필요하다는 점을 깊이 인식하게 되었습니다

[맛길] Naver Map API를 이용한 맛집 지도 추가

dev-hpk — Thu, 13 Feb 2025 18:02:18 +0900

오늘은 맛집 상세 페이지에 지도를 추가해 보겠습니다. 지도는 Naver Map API를 이용해 볼 계획입니다.

0️⃣ Naver Map API 선택 이유

Naver Map API v3 특징

Naver Map API v3 - 특징

프레임워크에 의존하지 않고 독립적으로 동작하기 때문에 불필요한 의존성을 최소화할 수 있고, React & Next.js로 제작된 맛길 프로젝트에 적합할 것 같아 선택했습니다.
DOM 처리 및 웹 브라우저 호환 코드를 내장하고 있어 크로스 브라우징 이슈를 최소화하면서 손쉽게 지도 기능을 구현할 수 있을 거라 생각해 선택했습니다.
별도의 CSS를 필요로 하지 않도록 설계된 내용을 보고, 개발 부담을 줄일 수 있을 것 같아서 선택했습니다.
모바일 환경에서도 최적화된 성능을 제공하기 때문에 별도의 최적화 작업이 필요하지 않아 개발 부담을 줄일 수 있을 것 같아 선택했습니다.

1️⃣ NAVER CLOUD PLATFORM 인증키 발급

NCloud - Application 등록

Application 등록

Application 이름은 서비스와 동일하게 matgil로 설정하겠습니다.

맛길 서비스의 지도에서는 길 찾기 기능은 필요하지 않기 때문에 Directions 옵션은 선택하지 않았습니다.

Directions 제공 기능

Application 등록을 완료했고, 인증 정보 버튼을 클릭해 보니 Client ID가 생겼습니다.

Client ID는 프로젝트에서 Naver Map API를 이용할 때 사용되는 API Key이기 때문에 외부 노출을 방지하기 위해 .env 파일에 저장했습니다.

Application 인증 정보

2️⃣ Naver Map API 타입 패키지 설치

npm i -D @types/navermaps

3️⃣ Naver Map API 이용해 지도 컴포넌트 작업

Map.tsx - 지도 컴포넌트

'use client';

import { useEffect, useRef } from 'react';
import Script from 'next/script';

function Map() {
  const mapRef = useRef<naver.maps.Map | null>(null);

  const initMap = (x: number, y: number) => {
    const map = new naver.maps.Map('map', {
      center: new naver.maps.LatLng(x, y),
      zoom: 20,
    });

    new naver.maps.Marker({
      position: new naver.maps.LatLng(x, y),
      map: map,
    });

    mapRef.current = map;
  };

  useEffect(() => {
    naver.maps.Service.geocode(
      {
        query: '통영시 무전1길 64-11 되뫼골부대찌개',
      },
      function (status, response) {
        if (status === naver.maps.Service.Status.ERROR) {
          console.error('지도 정보를 불러오는 중 에러가 발생했습니다.');
        }

        const result = response.v2.addresses[0];
        const x = Number(result.x);
        const y = Number(result.y);

        initMap(x, y);
      },
    );

    return () => {
      if (mapRef.current) {
        mapRef.current.destroy();
      }
    };
  }, []);

  return (
    <>
      <Script
        type="text/javascript"
        src={`https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=${process.env.NEXT_PUBLIC_NAVER_CLIENT_ID}&submodules=geocoder`}
      />
      <div id="map" style={{ width: '100%', height: '400px' }} />
    </>
  );
}

export default Map;

query의 주소는 지도가 잘 동작하는지 확인하기 위해 임시로 하드 코딩했습니다. 지도 동작 확인 후 prop으로 받도록 수정할 예정입니다.

DetailPage.tsx - 맛집 상세 페이지

import Divider from '@/app/components/common/Divider';
import VideoPlayer from '@/app/components/detail/VideoPlayer';
import IconMarker from '@/app/components/icons/IconMarker';
import Map from '@/app/components/Map/Map';
import axios from '@/app/lib/instance';

async function DetailPage({
  params,
}: {
  params: { channel: string; id: string };
}) {
  const { channel, id } = await params;

  const {
    data: { list },
  } = await axios.get(`${channel}/${id}`);

  const { videoId, thumbnail, timeline, address } = list;

  return (
    <div className="max-w-[46.25rem] mx-auto px-3 py-5 text-white">
      <div className="relative w-full aspect-[1.75/1]">
        <VideoPlayer videoId={videoId} lazy={thumbnail} timeline={timeline} />
      </div>
      <div className="mt-3 font-semibold line-clamp-2">{list.title}</div>
      <Divider />
      <div className="flex items-center gap-1">
        <IconMarker className="w-3.5 h-3.5" />
        {address}
      </div>
      <Map />
    </div>
  );
}

export default DetailPage;

error - naver is not defined

결과를 확인해보니 ReferenceError: naver is not defined 에러가 발생해 네이버 지도를 호출하지 못하고 있습니다.

Script 컴포넌트 strategy 옵션

Next 공식 문서를 확인해 보니 Script 컴포넌트의 strategy 옵션은 스크립트 로딩 시점을 제어할 수 있는 4개의 옵션을 제공합니다. afterInteractive가 default로 설정되어 있고, 이 옵션은 hydration이 발생한 후 Script를 로드한다고 하네요.

strategy="afterInteractive"는 hydration이 완료된 후에 스크립트를 로드하기 때문에, naver 객체가 아직 정의되지 않아 naver is not defined 오류가 발생하는 것이었습니다.

Script 컴포넌트 - strategy props 수정

<Script
  strategy="beforeInteractive"
  type="text/javascript"
  src={`https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=${process.env.NEXT_PUBLIC_NAVER_CLIENT_ID}&submodules=geocoder`}
/>;

Naver Map API - 지도 생성 결과

지도를 로드하는것은 성공했지만, 정상적인 위치가 아니라 이상한 위치가 보이고 있습니다.

Naver Map API - geocode response

응답을 확인해봐도 API 요청이 성공해 주소를 response로 받고 있습니다.

주소를 위도/경도 좌표(geocode)로 변환하는 로직의 문제는 아니기 때문에 지도를 생성하는 initMap 함수를 확인해 보겠습니다.

const initMap = (x: number, y: number) => {
  const map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(x, y),
    zoom: 20,
  });

  new naver.maps.Marker({
    position: new naver.maps.LatLng(x, y),
    map: map,
  });

  mapRef.current = map;
};

여러 방법을 시도해보다가 도저히 해결될 기미가 보이지 않아 공식 문서를 확인해 보겠습니다.

naver.maps.LatLng 사용법 - 공식 문서

geocode - x,y 응답 값

geocode의 response로 받은 x, y는 (경도, 위도)인데 naver.maps.LatLng의 매개변수는 (위도, 경도)로 전달해야 하네요

API 사용 전 공식 문서를 꼼꼼히 읽는 습관이 아직도 부족하다는 것을 한 번 더 느끼게 됩니다.

매개변수 이름을 헷갈리지 않게 lat, lng으로 수정 후 동작을 확인해 보겠습니다.

const initMap = (lat: number, lng: number) => {
  const map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(lat, lng),
    zoom: 20,
  });

  new naver.maps.Marker({
    position: new naver.maps.LatLng(lat, lng),
    map: map,
  });

  mapRef.current = map;
};
  
useEffect(() => {
  naver.maps.Service.geocode(
    {
      query: '통영시 무전1길 64-11 되뫼골부대찌개',
    },
    function (status, response) {
      if (status === naver.maps.Service.Status.ERROR) {
        console.error('지도 정보를 불러오는 중 에러가 발생했습니다.');
      }

      const result = response.v2.addresses[0];
      const lng = Number(result.x);
      const lat = Number(result.y);

      initMap(lat, lng);
    },
  );

  return () => {
    if (mapRef.current) {
      mapRef.current.destroy();
    }
  };
}, []);

Naver Map API - 지도 생성 결과

이제 Naver Map API를 이용해 지도에 원하는 위치를 불러올 수 있게 되었습니다.

아직 마커와 지도뿐이지만 추후 여러 기능들을 테스트해 보며 필요한 기능들을 추가해 보겠습니다!

[Coworkers] IOS 이미지 업로드 이슈

dev-hpk — Wed, 12 Feb 2025 00:39:11 +0900

문제 상황

팀 수정하기 관련해서 IOS 기기에서 이미지가 업로드되지 않는 이슈가 생겼습니다.

프로필 이미지 이슈

배포 이슈

이미지 업로드 관련 코드

uploadImage.ts

import postImage from '@/app/lib/image/postImage';

const uploadImage = async (profile: FileList) => {
  if (!profile || !(profile[0] instanceof File)) return null;

  const formData = new FormData();
  formData.append('image', profile[0]);

  const { url } = await postImage(formData);
  return url;
};

export default uploadImage;

위 코드는 react-hook-form의 profile 이미지를 받아서 서버에 업로드하는 함수입니다.

pc, 노트북, 갤럭시 핸드폰으로 확인했을 때 모두 정상적으로 동작합니다. safari 브라우저 문제인가 싶어 chrome으로도 확인했지만, ios에서는 uploadImage 함수가 정상적으로 동작하지 않습니다.

ios 기기로 매개변수 profile을 확인하기 위해 디버깅용 alert 코드를 추가해 보겠습니다.

import postImage from '@/app/lib/image/postImage';

const uploadImage = async (profile: FileList) => {
  alert(profile);
  alert(profile[0]);
  if (!profile || !(profile[0] instanceof File)) return null;

  const formData = new FormData();
  formData.append('image', profile[0]);

  const { url } = await postImage(formData);
  return url;
};

export default uploadImage;

아래 같은 결과가 나옵니다.

[object FileList]
undefined

profile[0]이 undefined인 것을 보니 uploadImage 함수 문제가 아닌 것 같습니다. 프로필 이미지를 변경하는 input 컴포넌트를 확인해 보겠습니다.

ProfileUploader.tsx

'use client';

import Image from 'next/image';
import { useEffect, useState } from 'react';
import { FieldValues, UseFormRegister } from 'react-hook-form';
import IconProfileEdit from '@/app/components/icons/IconProfileEdit';
import IconProfile from '@/app/components/icons/IconProfile';

interface ProfileUploaderProps {
  initialImage?: string;
  register: UseFormRegister<FieldValues>;
}

function ProfileUploader({ initialImage, register }: ProfileUploaderProps) {
  const [profileImage, setProfileImage] = useState<string | null>(
    initialImage || '',
  );

  // 파일 처리하는 함수
  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      const url = URL.createObjectURL(file); // 미리보기 URL 생성
      setProfileImage(url); // 미리보기 이미지 업데이트
    }
  };

  useEffect(() => {
    setProfileImage(initialImage || '');
  }, [initialImage]);

  return (
    <div>
      <span className="mb-3 inline-block">팀 프로필</span>
      <label
        htmlFor="profile"
        className="relative block h-16 w-16 cursor-pointer"
      >
        <input
          id="profile"
          className="sr-only"
          type="file"
          accept="image/*"
          {...register('profile')}
          onChange={handleFileChange}
        />
        {profileImage ? (
          <>
            <Image
              src={profileImage}
              className="rounded-full border-2 border-border-primary"
              fill
              alt="프로필 이미지"
            />
            <IconProfileEdit className="absolute bottom-0 right-0" />
          </>
        ) : (
          <IconProfile />
        )}
      </label>
    </div>
  );
}

export default ProfileUploader;

현재 코드는 onChange 핸들러와 register를 모두 처리하고 있습니다.

react-hook-form 공식 문서의 register를 확인해 보니 {...register('name')}이 onChange, onBlur, name, ref를 모두 처리하고 있다고 합니다.

react-hook-form register 설명

이미지를 변경했을 때 미리보기 이미지도 변경해줘야 하니 register를 제거하는 방향으로 수정하겠습니다.

ProfileUploader.tsx - 수정 부분

'use client';

import Image from 'next/image';
import { useEffect, useState } from 'react';
import { FieldValues, UseFormSetValue } from 'react-hook-form';
import IconProfileEdit from '@/app/components/icons/IconProfileEdit';
import IconProfile from '@/app/components/icons/IconProfile';

interface ProfileUploaderProps {
  initialImage?: string;
  setValue: UseFormSetValue<FieldValues>;
}

function ProfileUploader({ initialImage, setValue }: ProfileUploaderProps) {
  const [profileImage, setProfileImage] = useState<string | null>(
    initialImage || '',
  );

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      const file = e.target.files[0];
      const url = URL.createObjectURL(file); // 미리보기 URL 생성
      setProfileImage(url);
      setValue('profile', file);
    }
  };

  useEffect(() => {
    setProfileImage(initialImage || '');
  }, [initialImage]);

  return (
    <div>
      <span className="mb-3 inline-block">팀 프로필</span>
      <label
        htmlFor="profile"
        className="relative block h-16 w-16 cursor-pointer"
      >
        <input
          id="profile"
          className="sr-only"
          type="file"
          accept="image/*"
          onChange={handleFileChange}
        />
        {profileImage ? (
          <>
            <Image
              src={profileImage}
              className="rounded-full border-2 border-border-primary"
              fill
              alt="프로필 이미지"
            />
            <IconProfileEdit className="absolute bottom-0 right-0" />
          </>
        ) : (
          <IconProfile />
        )}
      </label>
    </div>
  );
}

export default ProfileUploader;

setValue : 프로필 이미지 input 변경 시 react-hook-form의 fieldValue를 직접 수정하기 위해 props로 추가
setValue('profile', file) : onChange 이벤트 발생 시 파일을 fieldValue로 설정
input : register 옵션 삭제

결과를 확인해 보니 이제는 ios뿐 아니라 모든 기기에서 이미지 업로드가 동작하지 않습니다. 매개변수 profile이 잘 전달되고 있는지 확인하기 위해 디버깅용 alert 코드를 추가해 보겠습니다.

import postImage from '@/app/lib/image/postImage';

const uploadImage = async (profile: FileList) => {
  alert(profile);
  if (!profile || !(profile[0] instanceof File)) return null;

  const formData = new FormData();
  formData.append('image', profile[0]);

  const { url } = await postImage(formData);
  return url;
};

export default uploadImage;

[object File]

왜 File이 출력되는지 확인하기 위해 handleFileChange 함수를 확인해 보고 이유를 알았습니다.

const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  if (e.target.files && e.target.files.length > 0) {
    const file = e.target.files[0];
    const url = URL.createObjectURL(file); // 미리보기 URL 생성
    setProfileImage(url);
    setValue('profile', file);
  }
};

setValue('profile', file)로 profile fieldValue에 files[0]인 파일을 저장했습니다.

uploadImage.ts - 매개변수 타입 수정

import postImage from '@/app/lib/image/postImage';

const uploadImage = async (profile: File) => {
  if (!profile || !(profile instanceof File)) return null;

  const formData = new FormData();
  formData.append('image', profile);

  const { url } = await postImage(formData);
  return url;
};

export default uploadImage;

매개변수 profile의 타입을 File로 수정 후 결과를 확인하니 정상적으로 잘 동작합니다.

이미지 업로드 이슈 수정하면서 느낀 점

ProfileUploader 컴포넌트에서 이미지 업로드가 iOS에서 동작하지 않는 문제가 발생했습니다. 처음에는 로직 자체에 문제가 있다고 생각했지만, 디버깅을 통해 react-hook-form의 register 사용법을 정확히 숙지하지 않았던 것이 원인임을 알게 되었습니다.

이슈를 해결하면서 2가지 중요성을 깨달았습니다.

1️⃣ 공식 문서 분석의 중요성

공식 문서를 확인해 보니, register를 사용할 경우 이벤트 처리는 내부적으로 관리되므로 onChange를 따로 지정하면 예상치 못한 동작이 발생할 수 있다는 내용이 있었는데 놓쳤습니다. 앞으로는 공식 문서를 먼저 확인하고 정확한 사용법을 숙지한 후 적용해야겠습니다.

2️⃣ 디버깅의 중요성

alert(profile), alert(profile[0]) 등의 과정을 거치면서 디버깅을 통해 문제의 원인을 단계적으로 추적하는 것이 얼마나 중요한지 다시금 실감했습니다. 단순히 코드가 "안 된다"가 아니라 디버깅을 통해 어느 부분에서 왜 예상과 다르게 동작하는지를 분석하는 습관을 더욱 길러야겠습니다.

추가로 이번 경험을 통해 단순히 코드 문제를 해결하는 것뿐만 아니라 같은 실수를 반복하지 않도록 학습하고 기록하는 것이 얼마나 중요한지 깨달았습니다. 다음번에 또 같은 문제를 마주한다면 이번 기록을 통해 더 빠르고 효율적으로 해결할 수 있을 것 같습니다!

[Coworkers] 리팩토링

dev-hpk — Fri, 7 Feb 2025 19:12:27 +0900

오늘은 1차 배포 테스트가 얼마 남지 않아서 리팩토링을 진행해 보겠습니다.

계획 없이 리팩토링을 진행하면 결과물의 퀄리티가 떨어질 수 있을 것 같아, 작업을 시작하기 전에 어떤 방향으로 개선할 것인지 계획을 세워보겠습니다.

리팩토링 중점 사항

1️⃣ 가독성

변수와 함수를 이름만 보고도 어떤 역할을 하는지 알 수 있도록 의미 있게 수정하겠습니다.
불필요한 로직이나 변수를 제거해 코드를 간결하게 유지하겠습니다.
코드를 간결하게 유지하기 위해 컴포넌트를 기능별로 적절히 분리하겠습니다.

2️⃣ 재사용성

특정 UI가 반복적으로 사용되는 경우 컴포넌트화해 재사용하겠습니다.
자주 사용되는 로직이나 기능은 커스텀 훅, 유틸 함수로 분리해 재사용하겠습니다.

3️⃣ 유지보수성

컴포넌트와 함수가 하나의 책임만 갖도록 수정하겠습니다.
SOLID 원칙의 단일 책임원칙(Singe Responsibility Principle) 고려
다른 팀원들이 코드를 읽을 때를 고려해 복잡한 로직은 주석을 달아두겠습니다.
간단한 로직의 경우는 코드를 간결하게 유지하기 위해 함수의 이름을 의미 있게 작성하고 주석을 삭제하겠습니다.

4️⃣ 사용자 경험(UX) 개선

사용자 입장에서 서비스를 테스트해 보며 불편사항을 최대한 줄일 수 있도록 수정하겠습니다.

5️⃣ 성능 개선

React Query를 이용해 불필요한 리렌더링을 방지해 성능을 개선하겠습니다.

위에서 세운 계획을 최대한 지키면서 리팩토링을 시작해 보겠습니다.

유저 로그인 정보 확인 - 커스텀 훅 분리

Coworkers 서비스는 자유게시판을 제외하면 거의 모든 페이지가 로그인을 필요로 합니다.

const router = useRouter();
const { accessToken } = useSelector((state: RootState) => state.auth);

useEffect(() => {
  if (!accessToken) {
    alert('로그인 후 이용할 수 있습니다.');
    router.push('/login');
  }
}, [accessToken, router]);

기존 작업에서는 페이지마다 Redux에서 전역으로 관리하고 있는 accessToken을 확인했습니다.

토큰이 없다면 로그인이 필요하다는 문구를 alert하고 로그인(/login) 페이지로 이동하도록 동작합니다.

이 로직을 매번 작성하는 것은 계획했던 유지보수와 재사용성을 고려했을 때 좋지 않은 것 같아 커스텀 훅으로 분리하도록 하겠습니다. 우선 커스텀 훅을 만들기에 앞서 훅의 이름을 정해야 합니다.

의미 있는 이름을 정하기가 어려워 GPT에게 도움을 요청했는데 아래와 같은 이름을 작성해 줬습니다.

useRequireLoginRedirect
useRedirectToLoginIfNotAuthenticated
useLoginRedirect
useAuthRedirect

가장 직관적인 이름은 useRedirectToLoginIfNotAuthenticated이지만 너무 길어서 가독성이 떨어지는 것 같아, 간결하게 인증 후 리다이렉트 한다는 의미에서 useAuthRedirect를 사용하도록 하겠습니다.

useAuthRedirect.tsx

import { useSelector } from 'react-redux';
import { RootState } from '@/app/stores/store';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';

const useAuthRedirect = () => {
  const router = useRouter();
  const { accessToken } = useSelector((store: RootState) => store.auth);

  useEffect(() => {
    if (!accessToken) {
      /* alert : 알림 방법 정해지기 전 임시 사용 */
      alert('로그인 후 이용할 수 있습니다.');
      router.push('/login');
    }
  }, [accessToken, router]);
};

export default useAuthRedirect;

useSelector 변수명 수정 - 프로젝트 일관성 유지

  const { user } = useSelector((store: RootState) => store.auth);

useSelector에서 사용하고 있는 변수명을 팀원마다 다르게 사용하고 있어 state로 통일했습니다.

  const { user } = useSelector((state: RootState) => state.auth);

사실 코드를 보면 store나 state 어떤 이름으로 사용해도 실제 코드에서 사용되는 일이 없어서 큰 차이는 없을 것 같지만, 유지보수 측면에서 일관성을 유지하기 위해 state로 수정했습니다.

중복 변환 코드 제거

const { teamid } = useParams();

queryKey: ['group', Number(teamid)],
queryFn: () => getGroupById(Number(teamid)),
enabled: !!Number(teamid),

await patchGroup(Number(teamid), teamData);

queryClient.invalidateQueries({ queryKey: ['group', Number(teamid)] });
router.push(`/${Number(teamid)}`);

기존에 작업했던 코드에서는 타입을 변환하는 Number(teamid)가 반복되고 있습니다. 가독성과 유지보수 측면에서 좋지 않은 코드인 것 같습니다.

const { teamid } = useParams();
const groupId = Number(teamid);

queryKey: ['group', groupId],
queryFn: () => getGroupById(groupId),
enabled: !!groupId,

await patchGroup(groupId, teamData);

queryClient.invalidateQueries({ queryKey: ['group', groupId] });
router.push(`/${groupId}`);

코드의 가독성과 유지보수성을 개선하기 위해 groupId를 선언해 타입 변환의 중복을 제거했습니다.

이미지 업로드 로직 - 유틸 함수 분리

const mutation = useMutation({
    mutationFn: async ({ profile, name }: FieldValues) => {
      let imageUrl: string | null = null;

      if (profile && profile[0] instanceof File) {
        const formData = new FormData();
        formData.append('image', profile[0]);

        const { url } = await postImage(formData);
        imageUrl = url;
      }

      const teamData: GroupData = { name };
      if (imageUrl) teamData.image = imageUrl;

      await patchGroup(groupId, teamData);
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['group', groupId] });
      router.push(`/${groupId}`);
    },
    onError: () => {
      alert('팀 수정에 실패했습니다.');
    },
  });

기존 코드에서는 mutationFn에서 이미지 업로드 로직을 작성하고 사용하고 있습니다.

mutation 로직의 길이가 길어져 가독성도 떨어지고 코드를 읽어보기 전에는 어떤 동작을 하는지 알 수도 없습니다.

uploadImage.ts

import postImage from '@/app/lib/image/postImage';

const uploadImage = async (profile: FileList) => {
  if (!profile || !(profile[0] instanceof File)) return null;

  const formData = new FormData();
  formData.append('image', profile[0]);

  const { url } = await postImage(formData);
  return url;
};

export default uploadImage;

이미지를 업로드하는 기능만 담당하는 uploadImage 함수를 만들고 재사용을 위해 /utils에 분리했습니다.

const mutation = useMutation({
  mutationFn: async ({ profile, name }: FieldValues) => {
    const imageUrl = await uploadImage(profile);

    const teamData: GroupData = { name };
    if (imageUrl) teamData.image = imageUrl;

    await patchGroup(groupId, teamData);
  },
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['group', groupId] });
    router.push(`/${groupId}`);
  },
  onError: () => {
    alert('팀 수정에 실패했습니다.');
  },
});

기존 코드보다 간결해져 가독성도 좋아졌고, 유틸 함수로 분리해 유지보수성도 개선되었습니다.

React Query를 이용한 성능 개선

const onSubmit = async ({ profile, name }: FieldValues) => {
    let imageUrl: string | null = null;

    if (profile && profile[0] instanceof File) {
      try {
        const formData = new FormData();

        formData.append('image', profile[0]);

        const { url } = await postImage(formData);

        imageUrl = url;
      } catch (error) {
        alert('이미지 업로드에 실패했습니다.');
      }
    }

    try {
      const teamData: GroupData = {
        name,
      };

      if (imageUrl) {
        teamData.image = imageUrl;
      }

      const { id } = await postGroup(teamData);

      router.push(`/${id}`);
    } catch (error) {
      alert('팀 생성에 실패했습니다.');
    }
  };

기존 팀 생성 로직의 경우 onSubmit 핸들러로 처리했습니다. 함수 내부를 보니 이미지 업로드 로직을 함수 내에서 작성해서 사용했었네요.

const mutation = useMutation({
  mutationFn: async ({ profile, name }: FieldValues) => {
    const imageUrl = await uploadImage(profile);
    const teamData: GroupData = {
      name,
    };

    if (imageUrl) {
      teamData.image = imageUrl;
    }

    return postGroup(teamData);
  },
  onSuccess: ({ id }) => {
    router.push(`/${id}`);
  },
  onError: () => {
    alert('팀 생성에 실패했습니다.');
  },
});

onSubmit을 React Query의 mutation으로 리팩토링하면서 많은 장점을 얻었습니다.

onSuccess, onError 상태를 활용해 try/catch 보다 직관적으로 상태를 관리
onSuccess 발생 시 팀 데이터를 리패치(invalidateQueries)해 자동으로 팀 목록을 업데이트
React Query는 전역적인 상태 관리 및 데이터 캐싱을 지원하기 때문에 다른 곳에서도 쉽게 재사용 가능
mutation.isLoading을 활용해 간단하게 중복 데이터 요청을 방지
React Query를 사용 안 했을 때는 const [isLoading, setIsLoading] = useState(false);로 loading 상태를 별도로 관리해야 했음

사용자 경험(UX) 개선 - 로딩 상태 추가

위에서 작업했던 useAuthRedirect 커스텀 훅을 적용했을 때, 접근할 수 없는 화면이 렌더링 된 후 로그인(/login) 페이지로 이동하는 불편함이 있었습니다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

위 영상은 로그인을 하지 않은 사용자가 팀 생성(/addteam) 페이지로 접근하는 경우입니다. 팀 생성 페이지가 보인 후 로그인 페이지로 이동하도록 동작하는 것이 저에게는 불편하다고 느껴졌습니다.

저의 일방적인 의견일 수 있어, 주변 사람들에게 피드백을 요청했고 대부분이 화면이 깜빡거리는 것처럼 느껴진다고 답했습니다.

개선 방향에 대해서는 로그인(/login) 페이지로 바로 이동하는 것이 아니라, 로그인 정보를 확인하고 있다는 알림이나 로딩 화면이 있으면 좋겠다는 의견이 많아서 로딩 화면을 추가해 보겠습니다.

useAuthRedirect 훅 수정 - 로딩 state 추가

import { useSelector } from 'react-redux';
import { RootState } from '@/app/stores/store';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';

const useAuthRedirect = () => {
  const router = useRouter();
  const { accessToken } = useSelector((state: RootState) => state.auth);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    if (!accessToken) {
      setTimeout(() => {
        alert('로그인 후 이용할 수 있습니다.');
        router.push('/login');
      }, 300);
    } else {
      setIsLoading(false);
    }
  }, [accessToken, router]);

  return { isLoading };
};

export default useAuthRedirect;

로딩 화면을 추가하기 위해 기존 커스텀 훅에 isLoading state를 추가했습니다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

function Page() {
  const { isLoading } = useAuthRedirect();
  
  if (isLoading)
    return (
      <div className="flex h-screen items-center justify-center bg-black text-white opacity-50">
        로그인 정보 확인중...
      </div>
    );
}

로딩 상태를 보여주는 부분도 여러 페이지에서 사용하니 컴포넌트로 분리하겠습니다.

AuthCheckLoading.tsx - 로그인 정보 확인 로딩 화면

function AuthCheckLoading() {
  return (
    <div className="flex h-screen items-center justify-center bg-black text-white opacity-50">
      로그인 정보 확인중...
    </div>
  );
}

export default AuthCheckLoading;

function Page() {
  const { isLoading } = useAuthRedirect();
  
  if (isLoading) return <AuthCheckLoading />;
}

컴포넌트로 분리함으로써 추후 디자인 수정을 고려했을 때 유지보수성과 재사용성 모두 개선되었습니다.

사용자 경험(UX) 개선 - 뒤로 가기 이슈 수정

로그인 페이지로 리다이렉트 이후 뒤로 가기 버튼을 누르게 되면, 다시 로그인이 필요한 페이지로 이동하게 되어 로그인 페이지로 이동하도록 동작하고 있습니다.

간단하게 순서도로 정리해 보겠습니다. 내용은 로그인 안 한 사용자 기준입니다.

팀 생성(/addteam) 페이지 접근
로딩 페이지 렌더링 후 로그인(/login) 페이지로 리다이렉트
뒤로 가기 버튼 클릭
팀 생성(/addteam) 페이지로 이동
로딩 페이지 렌더링 후 로그인(/login) 페이지로 리다이렉트

검색을 해본 결과로 위 내용을 해결하기 위해서는 router.push와 router.replace의 차이를 알아야 할 것 같습니다.

router.push : 새로운 페이지로 이동하며 브라우저 히스토리에 기록됨 (이전 페이지로 돌아가기 가능)
router.replace : 현재 페이지를 새로운 페이지로 대체하며 브라우저 히스토리를 덮어씀 (이전 페이지로 돌아가기 불가능)

import { useSelector } from 'react-redux';
import { RootState } from '@/app/stores/store';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';

const useAuthRedirect = () => {
  const router = useRouter();
  const { accessToken } = useSelector((state: RootState) => state.auth);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    if (!accessToken) {
      setTimeout(() => {
        alert('로그인 후 이용할 수 있습니다.');
        router.replace('/login');
      }, 300);
    } else {
      setIsLoading(false);
    }
  }, [accessToken, router]);

  return { isLoading };
};

export default useAuthRedirect;

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

리팩토링을 진행하면서 유지보수하기 쉬운 코드가 좋은 코드라는 점을 다시 한번 느꼈습니다. 처음부터 작업을 진행할 때 계획이나 설계 없이 코드부터 짜다 보니, 리팩토링 할 때 변경해야 할 부분이 너무 많다는 것을 실감했습니다.

앞으로는 꾸준히 리팩토링 하며 더 읽기 쉽고, 유지보수하기 쉬운 코드를 작성하는 개발자로 성장하도록 노력해야겠습니다!

[맛길] 상세 페이지 - Youtube 영상 추가

dev-hpk — Thu, 6 Feb 2025 22:34:51 +0900

오늘은 상세 페이지를 작업할 건데요.

처음 기획 당시 페이지 상단에 맛집 소개 Youtube 영상을 띄우기로 했었네요.. 어떤 방법이 있는지 찾아볼게요

✨ 영상 추가 방법

1️⃣ 기본 <iframe /> 태그 이용

youtube 동영상 퍼가기 iframe 제공

유튜브 영상에 자체적으로 퍼가기 기능을 제공하고 있네요 iframe의 src를 보니 프로젝트에서 사용하는 데이터의 videoId를 embed/ 뒤에 추가하면 될 것 같아요.

2️⃣ react-youtube 라이브러리 및 Youtube API 사용

npm - react-youtue 사용법

사용법을 보니 videoId 부분에 Youtube API에서 요청을 통해 받아온 videoId를 넣어주면 되는 것 같아요. 원래라면 Youtube API를 연동해서 아래와 같은 과정을 거치겠죠

서버에서 Youtube로 API key를 포함한 데이터 요청
유튜브 서버에서 응답
서버에서 클라이언트로 응답 전달

저는 Yotube API를 통해 받은 데이터를 JSON 형태로 사용하고 있기 때문에 위 과정을 생략할 수 있어 로딩도 빠르고 API 제한에 걸릴 문제도 해결할 수 있겠네요

3️⃣ react-player 라이브러리 사용

ReactPlayer 소개

react-player 라이브러리는 다양한 플레이어를 지원 라이브러리이며 제가 원하는 Youtube 영상 또한 지원하네요.

npm trends 다운로드 지표

npm trends의 지난 1년간 다운로드 지표만 봐도 react-player가 react-youtube에 비해 압도적이네요. 뿐만 아니라 Next.js의 공식 문서에서도 react-player를 추천하는 third-party 플레이어 중 하나로 선정했어요.

Next.js 공식 문서 - Video

Next.js 공식 문서 - Video

Youtube 영상 추가

저는 라이브러리 의존성을 줄이고 빠른 작업을 위해 기본 <iframe /> 태그를 이용해 작업을 진행하기로 결정했어요. 우선 유튜브 영상을 보여주는 iframe을 컴포넌트로 분리해서 작업해 볼게요.

VideoPlayer.tsx - 유튜브 영상 플레이어

function VideoPlayer({ videoId }: { videoId: string; }) {
  return (
    <iframe
      width="100%"
      height="100%"
      src={`https://www.youtube.com/embed/${videoId}`}
      title="YouTube video player"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowFullScreen
    />
  );
}

export default VideoPlayer;

VideoPlayer 컴포넌트는 부모 컴포넌트로부터 videoId를 props로 받아서 src에 추가하는 형식으로 작업했어요.

iframe embed 코드 확인 경로

iframe 코드는 유튜브 영상에서 공유 → 퍼가기를 통해 제공하고 있어서 따로 작성할 필요 없이 가져다 사용했어요

결과를 확인해 봐야겠죠

유튜브 영상 적용 화면

영상은 잘 나오는데 한 가지 불편한 점이 있네요

영상 로딩 중 빈 화면

위 사진처럼 영상이 로드되기 전까지 빈 화면이 노출되다가 영상이 나타나서 화면이 깜빡이고 있어요.

어떻게 처리해야 할지 고민할 필요 없겠네요! 이전 프로젝트들에서 API 요청을 할 때 이미 수 차례 isLoading 상태를 관리해 봤잖아요

Loading 상태 추가 - thumbnail 데이터 이용

'use client';

import { useState } from 'react';
import Image from 'next/image';

function VideoPlayer({ videoId, lazy }: { videoId: string; lazy: string }) {
  const [isLoaded, setIsLoaded] = useState(false);

  const handleLoad = () => {
    setIsLoaded(true);
  };
  
  return (
    <>
      {!isLoaded && (
        <Image fill src={lazy} className="object-cover" alt="Video Thumbnail" />
      )}
      <iframe
        width="100%"
        height="100%"
        src={`https://www.youtube.com/embed/${videoId}`}
        title="YouTube video player"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowFullScreen
        onLoad={handleLoad}
        loading="lazy"
      />
    </>
  );
}

export default VideoPlayer;

iframe의 onLoad 이벤트 핸들러를 추가해 로드가 되기 전까지 thumbnail을 보여주도록 작업했어요. 결과를 확인해 볼게요

유튜브 영상 loading 처리

영상이 로딩 상태인 경우 영상의 Thumbnail로 대체하니 훨씬 자연스러워졌네요!

이렇게 마무리되는 줄 알았는데 문제가 생겼어요. 느린 4G, 3G 등 네트워크 throttling 환경에서 iframe에 등록한 onLoad 이벤트 핸들러가 동작하지 않는 경우가 종종 발생해서 무슨 문제인지 검색해 봐도 해결 방법이 나오지 않네요

onLoad 이슈 구글링

깃헙의 이슈에 따르면, iframe의 로드 이벤트는 React가 리스너를 추가하기 전에 발생하는 경우가 있다고 하네요. 이로 인해 iframe의 onLoad 이벤트가 호출되지 않는 문제가 발생하는 것 같습니다. 이러한 현상은 React의 hydration 과정과 관련이 있는 것으로 보입니다.

Hydration은 서버에서 전달받은 정적인 HTML에 이벤트 리스너를 연결하여 동적으로 만드는 과정입니다. 이 과정을 살펴보면 서버에서 렌더링 된 html에 onLoad 이벤트를 추가하여 클라이언트로 전달합니다. 이때 onLoad 이벤트가 이미 실행된 상태일 수 있습니다.

만약 느린 네트워크 환경에서 비동기로 로드되는 유튜브 콘텐츠가 지연된다면, onLoad 이벤트가 종료된 후 iframe이 마운트 되어 onLoad 이벤트가 호출되지 않는 것처럼 보이게 되는 것입니다.

문제 원인이 hydration 과정에 있는지 확인하기 위해, iframe 요소를 동적으로 추가하는 코드를 통해 검증해 보겠습니다.

iframe 동적으로 추가

'use client';

import { useEffect, useState, useRef } from 'react';

function Iframe() {
  const [isLoading, setIsLoading] = useState(true);
  const iframeRef = useRef(null);

  useEffect(() => {
    const iframe = document.createElement('iframe');
    iframe.src = 'https://www.youtube.com/embed/he0KEFFhvvA';
    iframe.width = '500';
    iframe.height = '300';
    iframe.onload = () => {
      console.log('iFrame Loaded');
      setIsLoading(false);
    };

    if (iframeRef.current) {
      iframeRef.current.appendChild(iframe);
    }

    return () => {
      if (iframeRef.current) {
        iframeRef.current.removeChild(iframe);
      }
    };
  }, []);

  return (
    <>
      {isLoading && (
        <div className="h-[300px] w-[500px] bg-white text-black">
          Loading...
        </div>
      )}
      <div ref={iframeRef} />
    </>
  );
}

export default Iframe;

iframe 동적 추가 - 느린 네트워크 환경 onLoad 호출 결과

Network Throttling을 통해 느린 네트워크 환경에서 테스트해 본 결과, onLoad 이벤트가 정상적으로 동작하는 것을 확인했습니다. 이는 hydration 과정이 끝난 후 클라이언트에서 iframe을 추가했기 때문입니다.

따라서 문제의 원인은 iframe의 콘텐츠가 비동기로 로드되기 때문에, 느린 네트워크 환경에서는 마운트 되는 시점이 미뤄져 onLoad 이벤트가 이미 실행이 끝난 후에 iframe이 마운트 되므로 onLoad가 호출되지 않는 것입니다.

위 방법을 채택하려고 했지만 몇 가지 문제가 있습니다.

페이지 로드 시점에 iframe을 동적으로 생성하는 추가적인 JavaScript 실행 필요 (초기 로드 성능 저하)
iframe을 동적으로 생성하기 때문에 검색 엔진이 콘텐츠를 인식하지 못함 (접근성, SEO 문제)

iframe을 동적으로 추가한 Lighthouse 결과

동적 iframe 성능 진단 결과

React-Player를 사용한 Lighthouse 결과

React-Player 성능 진단 결과

React Player 라이브러리를 사용한 결과 다음과 같은 성과를 얻었습니다.

성능(performance) 점수 : 76에서 85로 9점 향상
TBT(Total Blocking Time) : 600ms에서 340ms로 개선
접근성 점수 : 95에서 100으로 5점 향상

라이브러리 의존성을 줄이는 것도 좋지만, 효율적인 개발과 안정적인 서비스 제공을 위해 React-Player 라이브러리를 사용해 이슈를 해결하기로 판단했습니다.

⭐ React-Player 라이브러리 사용

react-player의 github 문서를 확인해 봤더니 onReady Prop을 제공하고 있네요!

react-player 문서

설명에 media가 로드되고 재생할 준비가 되면 호출된다고 하니 iframe 대신 react-player를 사용해 볼게요

'use client';

import { useEffect, useState } from 'react';
import Image from 'next/image';
import ReactPlayer from 'react-player/lazy';

function VideoPlayer({ videoId, lazy }: { videoId: string; lazy: string }) {
  const [isLoaded, setIsLoaded] = useState(false);

  return (
    <>
      {!isLoaded && (
        <Image fill src={lazy} className="object-cover" alt="Video Thumbnail" />
      )}
      <ReactPlayer
        url={`https://www.youtube.com/watch?v=${videoId}`}
        controls
        width="100%"
        height="100%"
        onReady={() => setIsLoaded(true)}
      />
    </>
  );
}

export default VideoPlayer;

react-player 결과

유튜브 영상은 잘 나오는데 한 가지 문제가 생겼어요

문제 상황 - Hydration Mismatch 에러

react-player hydration 에러

이 에러는 Next.js에서 서버 사이드 렌더링(SSR)된 HTML과 클라이언트에서 실행된 React 컴포넌트의 결과가 다를 때 발생해요! 에러를 해결하려면 Hydration에 대한 이해가 필요해 보이네요.

Hydration은 수분 보충이라는 뜻을 가지고 있어요. 간단하게 설명하면 정적인 HTML(SSR)을 Hydration(수분보충)을 통해 동적(CSR)으로 만드는 과정이에요.

더 간단하게 설명하자면 서버에서 받은 HTML에 이벤트 리스너를 등록하는 작업이라고 할 수 있겠네요

다시 프로젝트로 돌아와서 에러를 살펴볼게요.

React Player 라이브러리는 렌더링 시에 일부 DOM 엘리먼트를 동적으로 생성해요. 따라서 서버에서 미리 렌더링 된 HTML과 클라이언트에서 실행된 결과가 다를 수 있는 거죠. 이런 차이로 인해 Next.js의 Hydration 과정에서 오류가 발생하게 되는 거예요!

이를 방지하려면, React Player를 클라이언트에서만 렌더링하도록 설정해야겠죠

CSR 적용 - React Player 클라이언트에서만 렌더링

'use client';

import { useEffect, useState } from 'react';
import Image from 'next/image';
import ReactPlayer from 'react-player/lazy';

function VideoPlayer({ videoId, lazy }: { videoId: string; lazy: string }) {
  const [isLoaded, setIsLoaded] = useState(false);
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    if (typeof window !== 'undefined') {
      setIsClient(true);
    }
  }, []);

  return (
    <>
      {!isLoaded && (
        <Image fill src={lazy} className="object-cover" alt="Video Thumbnail" />
      )}
      {isClient && (
        <ReactPlayer
          url={`https://www.youtube.com/watch?v=${videoId}`}
          controls
          width="100%"
          height="100%"
          onReady={() => setIsLoaded(true)}
        />
      )}
    </>
  );
}

export default VideoPlayer;

hydration mismatch 에러 해결

느낀 점

YouTube 영상 추가 작업을 하면서 단순히 기능을 구현하는 걸 넘어, "왜 이렇게 동작하는 걸까?" 하는 고민을 깊이 하게 되었어요.

에러를 해결하는 과정에서 SSR, Hydration, Lazy Loading 같은 프론트엔드 성능 최적화 개념들을 자연스럽게 익히게 됐는데요. 단순히 개념만 찾아보는 게 아니라, 실제 코드에서 적용하고 문제를 해결하는 과정이 앞으로 더 나은 방향을 고민하는 데 큰 도움이 될 것 같아요.

예전에는 "일단 동작하는 코드"를 만드는 게 목표였다면, 이제는 "확장 가능하고 최적화된 코드"를 고민하는 저를 보면서 개발자로서 한층 성장하고 있다는 느낌이 들어요. 앞으로도 작은 문제 하나하나 깊이 탐구하면서, 더 탄탄한 개발자로 성장해 나가고 싶어요. 해결해야 할 것들은 여전히 많지만, 그 과정 자체가 점점 더 재미있게 느껴지네요!

[맛길] 동적 라우팅(Dynamic Routing) 적용

dev-hpk — Wed, 5 Feb 2025 18:16:46 +0900

문제 상황

프로젝트를 진행하면서 Youtube 채널을 추가하면서 점점 불편함을 느끼게 되었어요.

폴더 구조

위의 이미지처럼 채널이 추가될 때마다 /app 폴더 하위에 폴더가 점점 늘어나 구조가 너무 복잡해지게 되더라고요

왜 채널(라우트 페이지)마다 폴더를 만드는지 궁금하실 수 있겠네요

Next.js가 파일 시스템 기반의 라우터를 사용하여 폴더를 경로 정의에 사용하기 때문이에요.

next.js 폴더 구조에 따른 경로

위 예시를 보시면 /app 폴더 하위의 폴더 이름이 경로로 사용되고 있어요.

/{channel}/page.tsx

import axios from '@/app/lib/instance';
import ListContainer from '@/app/components/lists/ListContainer';

async function page() {
  const {
    data: { lists, hasNext },
  } = await axios.get('bjw');

  return <ListContainer channel="bjw" hasNext={hasNext} lists={lists} />;
}

export default page;

위 코드는 /bjw 페이지에 대한 page.tsx 파일인데요.

똑같은 코드를 각 채널(ssg, pungja, hsc...)의 page.tsx에 작업해줘야 하니 불쾌한 개발 경험인 거죠..

여기서 끝이면 그냥 채널마다 폴더를 생성할까도 고민했지만... 맛길은 Serverless Function을 이용한 프로젝트에요.

API Route도 채널마다 작업해줘야 하니 불쾌한 개발 경험이 2배에요

api 폴더 구조

import path from 'path';
import { promises as fs } from 'fs';
import { RawYoutubeData, YoutubeData } from '@/app/types/youtube';

export async function GET(request: Request): Promise<Response> {
  try {
    // JSON 파일 경로 설정
    const filePath = path.join(process.cwd(), 'data', 'baekjongwon.json');

    // 파일 읽기
    const fileContents = await fs.readFile(filePath, 'utf-8');

    // JSON 파싱
    const rawData: RawYoutubeData[] = JSON.parse(fileContents);

    // 필요한 데이터만 추출
    const data: YoutubeData[] = rawData.map((item) => ({
      id: item.id,
      position: item.snippet.position,
      title: item.snippet.title,
      thumbnailUrl: item.snippet.thumbnails.high.url,
    }));

    const url = new URL(request.url);
    const limitParam = url.searchParams.get('limit');
    const cursorParam = url.searchParams.get('cursor');

    const limit = limitParam ? parseInt(limitParam, 10) : 10;
    const cursor = cursorParam ? parseInt(cursorParam, 10) : null;

    // cursor가 있으면 해당 position 이후 데이터 필터링
    const filteredData =
      cursor !== null ? data.filter((item) => item.position > cursor) : data;

    // 제한된 개수만큼 데이터 가져오기
    const limitedData = filteredData.slice(0, limit);

    // hasNext 설정 (더 가져올 데이터가 있는지 확인)
    const hasNext = filteredData.length > limit;

    return new Response(
      JSON.stringify({ success: true, lists: limitedData, hasNext }),
      {
        status: 200,
        headers: { 'Content-Type': 'application/json' },
      },
    );
  } catch (error) {
    console.error('데이터를 받아오는 중 에러가 발생했습니다:', error);
    return new Response(
      JSON.stringify({ success: false, message: '데이터 요청 실패' }),
      {
        status: 500,
        headers: { 'Content-Type': 'application/json' },
      },
    );
  }
}

Next.js 공식 문서를 찾아보다가 해결할 수 있는 방법을 찾은 것 같아요❗

Dynamic routes

Dynamic routes 예시

Next.js에서 폴더 이름을 [ ]로 감싸서 Dynamic routes(동적 라우팅)를 할 수 있다고 하네요.

프로젝트에 적용해 볼게요

문제 해결

1️⃣ 채널(페이지) 폴더 구조 수정

Dynamic routes 적용한 폴더 구조

맛길 서비스는 아래 두 가지 페이지로 나뉠 예정이라 폴더 구조를 위 이미지처럼 수정했어요.

/{channel} : 해당 채널의 목록을 보여주는 페이지
/{channel}/{id} : 채널 목록의 id에 해당하는 상세 페이지

2️⃣ /app/[channel]/page.ts 파일 수정

공식 문서의 예시를 보면 params에 폴더 이름에 [ ]로 감싼 동적 세그먼트를 params prop으로 사용할 수 있네요.

동적 세그먼트(channel)를 params prop으로 받아서 서버 데이터를 요청하고 화면에 보여주도록 수정할게요❗

import axios from '@/app/lib/instance';
import ListContainer from '@/app/components/lists/ListContainer';

async function ChannelHome({ params }: { params: { channel: string } }) {
  const { channel } = params;

  const {
    data: { lists, hasNext },
  } = await axios.get(channel);

  return <ListContainer channel={channel} hasNext={hasNext} lists={lists} />;
}

export default ChannelHome;

결과를 확인해 볼까요

Dynamic routes 적용 결과

Dynamic routes 적용 후 SSR(Server Side Rendering) 결과

동적 라우팅이 잘 동작하네요

3️⃣ API Route 폴더 구조 수정

Dynamic routes 적용한 폴더 구조

채널(페이지)과 마찬가지로 리스트 페이지와 세부 페이지를 구분하기 위해 폴더 구조를 위 이미지처럼 수정했어요.

/{channel} : 해당 채널의 목록 데이터를 요청하는 엔드 포인트(end point)
/{channel}/{id} : 채널 목록의 id에 해당하는 데이터를 요청하는 엔드 포인트(end point)

4️⃣ /api/[channel]/route.ts 파일 수정

기존 api 호출 함수에서는 const filePath = path.join(process.cwd(), 'data', 'baekjongwon.json'); 형식으로 json 파일을 직접 입력해서 사용하는데요.

이 부분도 동적 세그먼트(channel)를 이용하도록 수정해 볼게요.

import path from 'path';
import { promises as fs } from 'fs';
import { RawYoutubeData, YoutubeData } from '@/app/types/youtube';

export async function GET(request: Request): Promise<Response> {
  try {
    // URL에서 파일 이름 추출 (예: /api/pungja -> pungja.json)
    const url = new URL(request.url);
    const pathname = url.pathname; // /api/{filename}
    const filename = pathname.split('/').pop(); // {filename}
    const jsonFileName = `${filename}.json`;

    // JSON 파일 경로 설정
    const filePath = path.join(process.cwd(), 'data', jsonFileName);

    // 파일 읽기
    const fileContents = await fs.readFile(filePath, 'utf-8');

    // JSON 파싱
    const rawData: RawYoutubeData[] = JSON.parse(fileContents);

    // 필요한 데이터만 추출
    const data: YoutubeData[] = rawData.map((item) => ({
      id: item.id,
      position: item.snippet.position,
      title: item.snippet.title,
      thumbnailUrl: item.snippet.thumbnails.high.url,
    }));

    const limitParam = url.searchParams.get('limit');
    const cursorParam = url.searchParams.get('cursor');

    const limit = limitParam ? parseInt(limitParam, 10) : 10;
    const cursor = cursorParam ? parseInt(cursorParam, 10) : null;

    // cursor가 있으면 해당 position 이후 데이터 필터링
    const filteredData =
      cursor !== null ? data.filter((item) => item.position > cursor) : data;

    // 제한된 개수만큼 데이터 가져오기
    const limitedData = filteredData.slice(0, limit);

    // hasNext 설정 (더 가져올 데이터가 있는지 확인)
    const hasNext = filteredData.length > limit;

    return new Response(
      JSON.stringify({ success: true, lists: limitedData, hasNext }),
      {
        status: 200,
        headers: { 'Content-Type': 'application/json' },
      },
    );
  } catch (error) {
    console.error('데이터를 받아오는 중 에러가 발생했습니다:', error);
    return new Response(
      JSON.stringify({ success: false, message: '데이터 요청 실패' }),
      {
        status: 500,
        headers: { 'Content-Type': 'application/json' },
      },
    );
  }
}

const filename = pathname.split('/').pop();
Dynamic route에서 url의 형태가 /서버주소/{channel}일 것이기 때문에 / 기준으로 나눈 배열의 마지막 요소를 filename으로 사용했어요.

결과를 확인해 볼까요

API Route에 Dynamic routes 적용한 결과

5️⃣ /api/[channel]/[id]/route.ts 파일 수정

import path from 'path';
import { promises as fs } from 'fs';
import { RawYoutubeData, YoutubeData } from '@/app/types/youtube';

export async function GET(request: Request): Promise<Response> {
  try {
    const url = new URL(request.url);

    const pathname = url.pathname.split('/');
    const channel = pathname[pathname.length - 2]; // channel 부분
    const id = pathname[pathname.length - 1]; // id 부분

    if (!channel || !id) {
      return new Response(
        JSON.stringify({
          success: false,
          message: 'Invalid request parameters.',
        }),
        { status: 400, headers: { 'Content-Type': 'application/json' } },
      );
    }

    // JSON 파일 경로 설정
    const filePath = path.join(process.cwd(), 'data', `${channel}.json`);

    // 파일 읽기
    const fileContents = await fs.readFile(filePath, 'utf-8');

    // JSON 파싱 및 데이터 매핑
    const rawData: RawYoutubeData[] = JSON.parse(fileContents);

    const data: YoutubeData[] = rawData.map((item) => ({
      id: item.id,
      position: item.snippet.position,
      title: item.snippet.title,
      thumbnailUrl: item.snippet.thumbnails.high.url,
    }));

    // id에 해당하는 데이터 찾기
    const target = data.find((item) => item.position === Number(id));

    if (!target) {
      return new Response(
        JSON.stringify({ success: false, message: 'Item not found.' }),
        { status: 404, headers: { 'Content-Type': 'application/json' } },
      );
    }

    return new Response(JSON.stringify({ success: true, list: target }), {
      status: 200,
      headers: { 'Content-Type': 'application/json' },
    });
  } catch (error) {
    console.error('데이터를 받아오는 중 에러가 발생했습니다:', error);
    return new Response(
      JSON.stringify({ success: false, message: '데이터 요청 실패' }),
      {
        status: 500,
        headers: { 'Content-Type': 'application/json' },
      },
    );
  }
}

const channel = pathname[pathname.length - 2];
Dynamic route에서 url의 형태가 /서버주소/{channel}/{id}일 것이기 때문에 / 기준으로 나눈 배열의 마지막에서 두 번째 요소를 channel로 사용했어요.
const id = pathname[pathname.length - 1];
/ 기준으로 나눈 배열의 마지막 요소를 id로 사용했어요.

결과를 확인해 볼까요

/{channel}/{id} 확인 결과

import axios from '@/app/lib/instance';

async function DetailPage({
  params,
}: {
  params: { channel: string; id: string };
}) {
  const { channel, id } = params;

  const {
    data: { list },
  } = await axios.get(`${channel}/${id}`);

  return (
    <div>
      <div className="text-white">{list.title}</div>
    </div>
  );
}

export default DetailPage;

확인을 위해 임시로 title만 추가해 둔 상태라 빈약하지만 잘 동작하네요

동적 라우팅(Dynamic Routing) 적용은 모두 끝났지만 한 가지 문제가 더 생겼어요

에러 메시지

메시지를 읽어보니 params의 properties를 사용하려면 await을 사용해야 한다는 내용 같아요.

자세한 내용을 알아보라고 공식 문서의 url을 줬으니 확인해 봐야겠죠

Next.js 공식 문서

에러 발생 이유

Next 15 버전으로 업데이트되면서 params와 searchParams를 비동기적으로 접근해야 한다고 하네요.

가장 아래쪽 설명을 살펴보니 여전히 동기적으로도 접근이 가능하지만 warning을 발생시킨다고 해요.

console warning 로그

프로젝트로 돌아와 다시 확인해 보니 Error가 아니라 Warning이을 발생시키고 있네요.

수정하지 않아도 정상적으로 동작하니 그냥 넘어갈까도 생각했지만 가장 마지막 문구가 조금 신경 쓰이네요

추후 업데이트 될 버전들에서 아래 코드 같은 동기적인 접근이 예상대로 동작하지 않을 수 있다고 해요.

const Page = ({ params }: { params: { channel: string } }) => {
  const {channel} = params;
}

해결 방법은 두 가지가 있네요

에러 해결 방법

저는 Server Component에서 발생한 에러이기 때문에 await을 선언해 해결했어요

✨ 동적 라우팅(Dynamic Routing)을 적용하면서 느낀 점

1️⃣ 확장성과 재사용성

동적 라우팅의 적용이 추후 channel을 추가하는 확장성과 재사용성 측면에서 큰 강점을 가져왔어요.

동적 라우팅을 적용하기 전이었다면 매번 추가적인 코드를 작성해야 했지만, 동적 라우팅을 적용함으로써 별도의 코드 변경 없이 기존 구조만으로 데이터를 channel을 추가할 수 있게 되었어요.

2️⃣ 유지보수 효율성 증가

하나의 공통된 라우팅 파일(route.ts)에서 동적으로 파일 경로를 결정하고 데이터를 처리함으로써 코드 중복을 크게 줄일 수 있게 되었어요. JSON 파일 이름이나 id 같은 가변적인 요소를 동적으로 처리함으로써, 기존에 각각 작성해야 했던 반복적인 로직을 통합할 수 있게 되어 유지보수 효율성을 증가시킬 수 있게 되었어요.

3️⃣ 지속적인 학습의 중요성

Next.js 뿐만 아니라 여러 라이브러리와 프레임워크들이 빠르게 발전하며 웹 개발의 새로운 표준을 제시하고 있어요.

업데이트 내용을 알지 못해 에러를 경험하고 나니 개발자로서 최신 기술 트렌드를 꾸준히 학습하고, 변화에 유연하게 대응하는 자세를 가져야겠다는 생각을 하게 되네요.

프론트엔드 개발자로서 성장해 나가기 위해 공식 문서와 참고 자료들을 바탕으로 꾸준히 학습해야겠습니다

[Coworkers] 할 일 리스트 페이지 작업 (협업)

dev-hpk — Tue, 4 Feb 2025 21:58:13 +0900

오전 스크럼 회의에서 할 일 리스트 페이지를 작업하시는 팀원분께서 어떻게 구현해야 할지 모르겠다고 도움을 요청하셨어요.

팀 회의 때 밤을 새고 작업을 하셔도 해결을 못하셨다고 하시는데 안 도와드릴 수 없죠 제 작업은 거의 마무리 단계라 잠시 뒤로 미뤄두고 도움을 드리기로 했어요.

협업 요청 DM

일단 문제 상황을 먼저 확인해 봐야겠죠

문제 상황

리스트 페이지 UI

Swagger의 API 문서가 너무 복잡해서 어떤 API를 사용해야 할지 모르겠다고 하시네요.

swagger api 문서

다시 보니 정말 헷갈릴만 하네요. 다른 API 문서들을 찾아보니 아래처럼 설명을 잘 작성해두기도 했네요

swagger 예시

아쉽지만 언제 어떤 환경에서 개발할지 알 수 없으니, 주어진 환경에 맞게 개발할 줄 알아야 개발자로 성장할 수 있겠죠!

문제 해결

1️⃣ 폴더 구조 수정

수정 전 폴더 구조

우선 폴더 구조가 잘 못 되어있네요. tasklist는 taskListId에 해당하는 taskLists를 서버에 요청하고 렌더링 하는 페이지입니다. 동적 라우팅으로 바꿔줘야겠죠..

수정 후 폴더 구조

이제 프로젝트 요구사항에 맞게 동작할 수 있겠네요.

팀 페이지(/{teamid}) → 할 일 목록 클릭
할 일 리스트 페이지(/{teamid}/{tasklist}) → 할 일 카드 클릭
할 일 상세 페이지/{teamid}/{tasklist}/{taskid}

2️⃣ team, tasklist, task 관련 id를 임시 상수에서 데이터로 수정

작업 내용을 확인해 보니 리스트 페이지 관련 id(teamId, taskListId, taskId)가 모두 1771, 2861 등 상수로 작업되어 있어요.

아마 어느 API에서 id를 받아와야 하는지 어려우셔서 이렇게 작업해 두신 것 같아요.

포기하시지 않고 상수 id를 이용해서라도 기능 구현하려고 노력하신 모습 너무 멋있네요! 저도 수정 작업 시작해 보겠습니다

/[teamid]/[tasklist]/[taskid]/page.tsx

page.tsx 코드 수정

폴더 구조를 /[teamid]/[taskid]/page.tsx에서 /[teamid]/[tasklist]/[taskid]/page.tsx로 수정해 useParams() 훅을 이용해 teamid, tasklist, taskid를 사용해 상수 id를 대체할게요.

const { teamid, tasklist, taskid } = useParams();

TaskCardList.tsx

상수 id 삭제, id props 추가

TaskCard.tsx

상수 id 삭제, id props 추가

TaskCardDropdown.tsx

상수 id 삭제, id props 추가

컴포넌트 이름 수정

TaskCardDropdown 컴포넌트는 파일 이름과 컴포넌트 이름을 다르게 작업하셨어요

아마 Icon 컴포넌트와 이름이 겹쳐서 그러신 거 같은데 컴포넌트와 파일 이름을 같게 수정했어요. 파일 이름과 컴포넌트 이름이 같아야 파일 이름만 보고도 import 할 수 있어 협업에 편할 것 같더라고요

TaskDetailDropdown.tsx

상수 id 삭제, id props 추가

props로 서버에서 받은 id 전달

수정한 부분이 더 있지만 너무 길어져 commit 기록으로 대신할게요!

동적 id 수정 commit

3️⃣ taskLists API 연동

Group - GET

GET Group response

swagger API 문서를 확인해 보니 Group 데이터를 GET 요청해야 taskLists를 response로 전달해 주네요. 이름만 보고 TaskList 확인하고 있었는데 여기 숨어있었다니

getGroupById - id에 해당하는 group 데이터 요청하는 함수

import axios from '@/app/lib/instance';

type GroupResponse = {
  image?: string | null;
  name: string;
  taskLists: any[];
};

const getGroupById = async (id: number): Promise<GroupResponse> => {
  const res = await axios.get<GroupResponse>(`/groups/${id}`, {
    headers: {
      Authorization: `Bearer ${process.env.NEXT_PUBLIC_ACCESS_TOKEN}`,
    },
  });

  return res.data;
};

export default getGroupById;

taskLists의 타입을 any[]로 설정해서 조금 불편하실 수 있을 것 같네요. 이 부분은 task 관련 작업하신 팀원분께서 타입을 설정해 두셨다고 하는데, 제가 작성한 코드가 아니다 보니 찾기가 어려워 팀원분께서 작업하겠다고 하셨어요

/[teamid]/[tasklist]/page.tsx

import { useQuery } from '@tanstack/react-query';
import getGroupById from '@/app/lib/group/getGroupById';
import Link from 'next/link';

function TaskListPage() {
  {/* ...기존 코드 생략... */}
  const { data, isLoading } = useQuery({
    queryKey: ['tasklists', tasklist],
    queryFn: () => getGroupById(Number(teamid)),
  });


  return (
    {/* ...기존 마크업 생략... */}
    <div>
      {data?.taskLists &&
        data?.taskLists.map((list) => (
          <Link key={list.id} href={`/${teamid}/${list.id}`}>
            {list.name}
          </Link>
        ))}
    </div>
  )
}

taskLists를 불러오는 작업까지 모두 끝났습니다. 이제 결과를 확인해 볼게요

taskList 호출 결과

console 로그

할 일 목록(taskList) 데이터가 잘 받아져 오네요. UI 스타일 작업은 직접 하신 다고 하셔서 여기까지 작업하고 넘겨드렸어요

협업을 하면서 느낀 점

1️⃣ 일관된 네이밍 컨벤션과 명확한 코드 구조의 중요성

작업을 하면서 익숙하지 않은 코드 구조를 이해하는 데 시간이 많이 걸렸고, 파일 이름과 컴포넌트 이름이 다른 부분이 있어 파악하느라 수정이 쉽지 않아 힘들기도 했지만 이런 과정에서 일관된 네이밍 컨벤션과 명확한 코드 구조의 중요성을 몸소 체감했어요.

저도 협업을 하면서 체감했으니 다른 팀원들도 제 코드를 보고 같은 생각을 했겠죠

앞으로는 처음 제 코드를 보는 사람도 빠르게 이해할 수 있도록 하기 위해 네이밍과 폴더 구조를 깔끔하게 정리해야겠네요.

"내 코드가 다른 사람에게 어떻게 읽힐지"를 한번 더 생각하면서 말이죠

2️⃣ 협업에서 소통의 중요성

팀원과의 의견 조율과 문제 해결 과정을 경험하면서 협업의 본질에 대해 다시 한번 생각해 보게 되었어요.

기존 할 일 카드 컴포넌트의 동작이 아래 두 가지로 나뉘어 있었어요.

Click 이벤트 : Drawer 컴포넌트 open
keyDown 이벤트(Enter, Space Bar) : /[teamid]/[tasklist]/[task.id]로 라우팅

Click과 keyDown 이벤트의 동작 방식이 다른 것이 조금 의아해서 질문을 드렸어요.

기능 구현 관련 논의

의도하신 부분이 아니라 에러가 발생해서 keyDown 이벤트를 추가하셨다고 하셔서 음성 채팅으로 수정 방법을 논의했어요.

소통 없이 제가 혼자 판단했다면 /[teamid]/[tasklist]/[task.id]로 라우팅 처리하도록 수정했을 것 같아요. 그런데 팀원분과 함께 고민하니 의견이 하나둘씩 늘어가고 피드백을 더 해가며 점점 발전해 최종적으로 사용자 경험까지 고려한 더 나은 방향을 찾을 수 있었어요

[Coworkers] Axios interceptor 적용 (token 적용, refresh token을 이용한 토큰 재발급)

dev-hpk — Mon, 3 Feb 2025 17:59:31 +0900

드디어 로그인 기능이 구현되었습니다. 그동안 로그인 기능이 구현되지 않아서 swagger에서 직접 로그인 후 response로 받은 토큰을 env 파일에 저장 후 사용했습니다.

const res = await instance.get<Task[]>(
    `/groups/${groupId}/task-lists/${taskListId}/tasks`,
    {
      params: { date },
      headers: {
        Authorization: `Bearer ${process.env.NEXT_PUBLIC_ACCESS_TOKEN}`,
      },
    },
  );

문제 상황

API 요청 함수를 만들 때마다 항상 header에 토큰을 적용해 주는 부분에서 중복 코드에 대한 불편함을 느꼈어요.
개발을 하면서 아래 사진과 같은 401 Unauthorized 서버 에러가 자주 발생해서 다시 로그인하느라 불편함을 느꼈어요.

401 Unauthorized 에러

401 Unauthorized
HTTP(하이퍼텍스트 전송 프로토콜) 401 Unauthorized 응답 상태 코드는 요청된 리소스에 대한 유효한 인증 자격 증명이 없기 때문에 클라이언트 요청이 완료되지 않았음을 나타냅니다.
출처 - MDN

MDN을 참고해 보니 401 에러는 인증 자격 증명이 없기 때문, 즉 Access Token이 만료되어 발생하는 에러네요

Access Token의 만료 시간을 직접 측정하는 것은 너무 비효율 적이겠죠..

JWT(JSON Web Token)을 디코딩해 주는 사이트를 통해 Access Token의 유효 시간을 확인해 보겠습니다.

JWT.IO

JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties.

jwt.io

JWT 토큰 디코딩 결과

3시 58분에 발급한 Access Token을 입력하니 exp(expiration time)가 4시 58분으로 나오네요. 서버에서 발급해 주는 토큰이 1시간 동안만 유효한 거네요

문제 해결 방법

두 가지 문제를 모두 해결할 수 있는 방법을 찾다가 axios에서 제공하는 인터셉터(interceptor) API를 사용하기로 했어요

axios의 interceptor API는 요청(request) 또는 응답(response)이 처리되기 전(then과 catch로 넘어가기 전)에 가로채어 추가적인 로직을 수행할 수 있도록 도와주는 기능이라고 해요.

사용법 - axios 공식 문서 참조

// 요청 인터셉터 추가하기
axios.interceptors.request.use(function (config) {
    // 요청이 전달되기 전에 작업 수행
    return config;
  }, function (error) {
    // 요청 오류가 있는 작업 수행
    return Promise.reject(error);
  });

// 응답 인터셉터 추가하기
axios.interceptors.response.use(function (response) {
    // 2xx 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 데이터가 있는 작업 수행
    return response;
  }, function (error) {
    // 2xx 외의 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 오류가 있는 작업 수행
    return Promise.reject(error);
  });

공식 문서의 설명만 보고는 무슨 일을 할 수 있을지 의문이 들어 찾아보니, 아래와 같은 기능에 주로 사용된다고 해요!

1️⃣ 요청이 서버로 전달되기 전에 request 헤더에 Authorization을 추가

2️⃣ 요청이 서버로 전달되기 전에 console에 로그를 기록

3️⃣ 응답 데이터 변환

4️⃣ 401(Unauthorized) 에러 발생 시 Refresh Token을 이용해 Access Token을 재발급하고 요청 재실행

1️⃣, 4️⃣번이 저희 프로젝트에 해당되겠네요. 프로젝트에 적용해 볼게요

Axios Interceptor 적용

axios instance 코드

const instance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_SERVER_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});

1️⃣ request(요청) interceptor 적용하기

// 요청 인터셉터: Access Token 추가
instance.interceptors.request.use((config) => {
  // Redux store에서 전역으로 관리하는 state의 token을 참조
  const state = store.getState();
  const token = state.auth.accessToken;

  // 토큰이 있는 경우 모든 API 요청이 서버로 전달 되기 전에 헤더에 Authorization 토큰 추가
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }

  return config;
});

request interceptor에 Authorization 헤더를 추가함으로써 API 요청 함수에 일일이 Authorization 헤더를 추가해줘야 하는 불편함을 해결할 수 있게 되었습니다!

2️⃣ response(응답) interceptor 적용하기

response interceptor는 로그인을 담당하시는 팀원분께서 이미 작업을 해두셨습니다. 코드를 확인해 볼게요.

ToeknInterceptor.ts - response interceptor

import instance from '@/app/lib/instance';
import handleTokenRefresh from '@/app/utils/handleTokenRefresh';

// 응답 인터셉터: 401 에러 발생 시, 액세스토큰 갱신
instance.interceptors.response.use(
  (response) => response,
  async (error) => {
    if (error.response?.status === 401) {
      return handleTokenRefresh(error.config);
    }
    return Promise.reject(error);
  },
);

export default instance;

handleTokenRefresh - Access Token 재발급 및 실패한 요청 재실행 함수

import axios, { AxiosRequestConfig } from 'axios';
import { store } from '@/app/stores/store';
import postRefreshApi from '@/app/lib/auth/postRefreshApi';
import { setAccessToken } from '@/app/stores/auth/authSlice';

let isRefreshing = false;
let refreshSubscribers: ((token: string) => void)[] = [];

const onAccessTokenFetched = (token: string) => {
  // 저장된 모든 요청 콜백을 실행
  console.log(
    '[디버깅] 새로운 액세스 토큰을 받아 대기 중인 요청을 처리합니다.',
  );
  refreshSubscribers.forEach((callback) => callback(token));
  refreshSubscribers = [];
};

const handleTokenRefresh = async (errorConfig: AxiosRequestConfig) => {
  const state = store.getState();
  const { refreshToken } = state.auth;

  if (!refreshToken) {
    console.log(
      '[ERROR] 리프레시 토큰이 없습니다. 액세스 토큰을 갱신할 수 없습니다.',
    );
    // 리프레쉬토큰이 없으면 토큰 갱신을 할 수 없으므로 에러를 반환
    return Promise.reject(errorConfig);
  }

  if (!isRefreshing) {
    console.log('[디버깅] 토큰 갱신 프로세스를 시작합니다.');
    // 만약 토큰 갱신이 진행 중이지 않으면
    isRefreshing = true;

    try {
      console.log('[디버깅] 액세스 토큰을 갱신하기 위한 요청을 보냅니다.');
      // 리프레쉬토큰을 사용해 새로운 액세스토큰을 요청
      const { accessToken } = await postRefreshApi({ refreshToken });

      console.log('[디버깅] 새 액세스 토큰을 받았습니다: ', accessToken);

      // Redux 상태에 새로운 액세스토큰 저장
      store.dispatch(setAccessToken(accessToken));

      // 대기 중인 모든 요청 콜백을 실행
      onAccessTokenFetched(accessToken);
    } catch (refreshError) {
      console.error('[ERROR] 토큰 갱신에 실패했습니다:', refreshError);
      // 리프레쉬 토큰으로 갱신이 실패하면 에러를 반환
      return await Promise.reject(refreshError);
    } finally {
      console.log('[디버깅] 토큰 갱신 프로세스가 완료되었습니다.');
      isRefreshing = false;
    }
  }

  // 이미 토큰 갱신 중이라면 대기 중인 요청을 저장하고, 갱신된 토큰을 가지고 요청을 재시도
  console.log(
    '[디버깅] 토큰 갱신이 진행 중이므로 요청을 대기 큐에 추가합니다.',
  );
  return new Promise((resolve) => {
    refreshSubscribers.push((token: string) => {
      console.log('[디버깅] 새로운 토큰으로 요청을 재시도합니다.');
      const newConfig = {
        ...errorConfig,
        headers: {
          ...errorConfig.headers,
          Authorization: `Bearer ${token}`,
        },
      };
      resolve(axios.request(newConfig));
    });
  });
};

export default handleTokenRefresh;

postRefreshApi - Refresh Token을 이용해 Access Token을 재발급하는 함수

import instance from '@/app/lib/instance';

interface RefreshTokenRequest {
  refreshToken: string;
}

interface RefreshTokenResponse {
  accessToken: string;
}

const postRefreshApi = async (
  refreshTokenRequest: RefreshTokenRequest,
): Promise<RefreshTokenResponse> => {
  const response = await instance.post<RefreshTokenResponse>(
    '/auth/refresh',
    refreshTokenRequest,
  );
  return response.data;
};

export default postRefreshApi;

코드가 너무 복잡해 프로세스 흐름을 이해하느라 시간을 많이 썼네요. 제 코드를 보면서 팀원분들도 똑같은 생각을 했겠죠?

직관적인 코드를 작성해야겠다는 반성을 하게 되네요

반성은 나중에 하기로 하고 다시 프로젝트에 집중해 볼게요.

저희가 아까 Access Token의 유효 기간이 1시간인 것을 확인했죠? 401 에러를 확인하기 위해 1시간을 기다리는 것은 너무 비효율적입니다. 저는 이미 만료된 Access Token을 갖고 있으니 이것을 활용해 볼게요.

local storage에 저장 된 Access Token

로컬 스토리지에 저장된 Access Token을 이미 만료된 Access Token으로 교체할게요.

결과를 확인해 볼까요

401 에러 발생

401 에러가 발생했네요. 그런데 한 가지 문제가 있습니다!

분명 팀원분께서 response interceptor에 401 에러가 발생하면 Refresh Token을 이용해 Access Token을 재발급하는 로직을 작성했는데 Refresh Token API 요청을 보내지 않네요

console 로그

console이 깔끔한 것을 보니 respone interceptor가 적용 안된 것 같아요. 우선 response interceptor부터 적용되도록 수정해 보겠습니다.

response interceptor 적용 문제 해결

곰곰이 생각해 보니 프로젝트에서 API를 요청할 때 instance.ts를 import해서 사용하고 있는데, ToeknInterceptor.ts에서 response interceptor를 적용하고 export 하셨네요.

response interceptor를 적용만 해두고 사용을 안 하고 있었던 거죠

instance.ts에 병합해서 수정해 볼게요.

import axios from 'axios';
import handleTokenRefresh from '@/app/utils/handleTokenRefresh';
import { store } from '@/app/stores/store';

const instance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_SERVER_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});

// 요청 인터셉터: Access Token 추가
instance.interceptors.request.use((config) => {
  const state = store.getState();
  const token = state.auth.accessToken;

  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }

  return config;
});

instance.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      return handleTokenRefresh(error.config);
    }
    return Promise.reject(error);
  },
);

export default instance;

결과를 확인해 볼까요

interceptor 병합 후 결과

Access Token을 재발급 요청하는 부분까지는 잘 동작하는데, 실패했던 1845번 데이터를 다시 요청하지 않고 있어요.

console을 확인해 보며 프로세스가 어떻게 잘못되었는지 확인해 봐야겠네요

병합 후 console 로그

401 Response 처리 로직 return 코드

console에 '[디버깅] 새로운 토큰으로 요청을 재시도합니다.' 메시지가 없는 것을 보니 return 하고 있는 Promise의 문제인 것 같네요. Promise.resolve에 대해 검색을 통해 문제를 찾았어요!

우선 아래 코드의 실행 과정을 확인해 볼게요

resolve(axios.request(newConfig));

1️⃣ axios.request(newConfig) 실행 - 비동기 작업

2️⃣ resolve() 실행 - Promise를 완료 처리

3️⃣ axios.request(newConfig)는 비동기라 아직 완료되지 않았는데, Promise가 완료되어 request 요청 실행 X

결과적으로 비동기 처리가 올바르게 되지 않아서 실패한 요청을 재시도하지 않았어요.

실패한 요청 재시도 문제 해결 (비동기 처리 수정)

const retryRequest = new Promise((resolve, reject) => {
    refreshSubscribers.push((token: string) => {
      console.log('[디버깅] 새로운 토큰으로 요청을 재시도합니다.');
      const newConfig = {
        ...errorConfig,
        headers: {
          ...errorConfig.headers,
          Authorization: `Bearer ${token}`,
        },
      };
      // 토큰 갱신 후 재시도할 요청을 실행
      axios.request(newConfig).then(resolve).catch(reject);
    });
  });

return retryRequest;

결과를 확인해 볼까요

비동기 로직 수정 후 결과

비동기 로직 수정 후 console 로그

이번 문제를 해결하면서 비동기 함수의 흐름을 명확하게 이해하는 것의 중요성을 다시 한번 깨달았어요.

특히, resolve(axios.request(newConfig))가 왜 요청을 재시도하지 못하는지를 깊이 파고들면서 resolve()가 Promise의 상태를 결정한다는 점을 다시 확인할 수 있었어요.

추가적으로 다른 팀원이 작성한 코드를 이해하는데 많은 시간이 들었지만, 좋은 점을 하나 배워가게 되었어요.

console.log()를 적절한 위치에 배치해 프로세스의 흐름을 빠르게 파악할 수 있도록 돕는 방법이에요.

이번에 interceptor를 작업하면서 console.log()를 작성해 주신 부분 덕분에 프로세스의 흐름을 빠르게 파악할 수 있었어요!

[Coworkers] 클립보드 복사 (Trouble Shooting)

dev-hpk — Mon, 27 Jan 2025 17:07:33 +0900

오늘 작업에는 클립보드를 이용하는 부분이 있습니다❗

멤버 초대 모달 UI

유저 정보 모달 UI

멤버 초대 모달의 '링크 복사하기' 버튼을 클릭하면 URL을 클립보드에 복사하고, 유저 정보 모달의 '이메일 복사하기' 버튼을 클릭하면 유저의 이메일을 복사해요✨

클립보드를 어떻게 구현해야 할까요 라이브러리를 찾아보기 전에 저의 해답지인 MDN을 찾아볼게요!

Clipboard API 설명 - 출처 MDN

Clipboard API의 writeText() 메서드를 사용하면 특정 text를 클립보드에 저장하고 Promise를 반환한다고 하네요

Clipboard API - writeText 사용법

async function writeClipboardText(text) {
  try {
    await navigator.clipboard.writeText(text);
  } catch (error) {
    console.error(error.message);
  }
}

링크 복사 - writeText 적용

const handleClick = async () => {
  await navigator.clipboard.writeText(`${SERVER_URL}?token=${token}`);
  closeModal();
};

<Button className="w-full text-text-inverse" onClick={handleClick}>
  링크 복사하기
</Button>;

이메일 복사 - writeText 적용

const handleClick = async () => {
  await navigator.clipboard.writeText(member.userEmail);
  closeModal();
};

<Button className="w-full text-text-inverse" onClick={handleClick}>
  이메일 복사하기
</Button>;

결과 - 클립보드 복사

클립보드 적용 결과

PC에서 링크와 이메일 모두 잘 복사되네요! 하지만 여기서 끝내면 안 되겠죠.

PC에서 잘 동작하던 기능들이 OS와 브라우저에 따라서 제대로 동작하지 않은 경우를 경험했잖아요

아니나 다를까 노트북과 아이폰 Safari 브라우저로 확인했더니 에러가 발생하네요

문제 상황

Clipboard API 에러

MDN의 cilpboard API를 확인해 보니 localhost나 HTTPS 환경에서만 사용할 수 있다고 하네요

clipboard API - MDN

코드를 통해 직접 확인해 봐야겠죠

const handleClick = async () => {
    if (!navigator.clipboard) {
      alert('현재 브라우저에서 클립보드 복사를 지원하지 않습니다.');
      return;
    }
    await navigator.clipboard.writeText(member.userEmail);
    closeModal();
  };

에러 확인 결과

문제 해결 방법

1️⃣ ~~Document.execCommand()~~ : 지원 중단

2️⃣ react-copy-to-clipboard

2️⃣ react-copy-to-clipboard 라이브러리를 사용하면 라이브러리에서 제공하는 간단한 컴포넌트를 이용해 복사 기능을 구현할 수 있지만, 저희 프로젝트는 React 19 버전이라 사용이 불가능했어요

react-copy-to-clipboard 라이브러리 pr

execCommand() 지원중단

안타깝게도 위 메서드는 지원 중단되어 권장되지 않는다고 하네요 하지만 저에게는 방법이 없습니다. 찾아보니 execCommand() 메서드가 아직 많은 브라우저에서 동작하네요.

execCommand 브라우저 호환성 표

문제 해결

execCommand를 이용한 텍스트 복사 함수

const copyWithExecCommand = (text: string) => {
  const textArea = document.createElement('textarea');
  textArea.value = text;
  document.body.appendChild(textArea);
  textArea.select();
  document.execCommand('copy');
  document.body.removeChild(textArea);
};

링크 복사 - writeText 적용

const handleClick = async () => {
  if (navigator.clipboard && navigator.clipboard.writeText) {
    await navigator.clipboard.writeText(`${SERVER_URL}?token=${token}`);
  } else {
    copyWithExecCommand(`${SERVER_URL}?token=${token}`);
  }
  closeModal();
};

이메일 복사 - writeText 적용

const handleClick = async () => {
  if (navigator.clipboard && navigator.clipboard.writeText) {
    await navigator.clipboard.writeText(member.userEmail);
  } else {
    copyWithExecCommand(member.userEmail);
  }

  closeModal();
};

결과 - 클립보드 복사

문제 해결 후 클립보드 복사

navigator.clipboard를 호환하는 https에서는 기존과 동일하게 동작합니다.
navigator.clipboard를 호환하지 않는 http에서는 아래 과정을 거치게 됩니다.

값을 저장하기 위한 textarea라는 요소를 만들고 value 속성에 복사할 값을 할당
textarea 요소를 html body에 추가하고 선택
execCommand 메서드를 사용해 클립보드에 텍스트를 복사
textarea 요소를 html body에서 삭제

Document.execCommand()가 지원 중단되었다고는 하지만, 덕분에 navigator.clipbaord를 호환하지 않는 http 환경에서도 안전하게 클립보드 복사 기능을 구현할 수 있게 되었어요

[맛길] API Routes를 이용한 API 구축

dev-hpk — Fri, 24 Jan 2025 22:52:20 +0900

지난번에 Youtube Data API를 사용해 열심히 JSON 데이터를 만들었습니다. 처음 사용해 보는 API다 보니 공식문서를 여러 번 읽는 것도 힘들었지만, 이제 빛을 볼 시간입니다.

프로젝트에 JSON 데이터를 추가하고 사용해 볼게요.

youtube 영상 데이터 추가

맛길 프로젝트의 기획 포스팅을 보지 않으셨다면, 왜 프로젝트에 JSON 데이터를 일일이 추가하는지 의문이 드실 수 있겠네요

이번 프로젝트는 CRUD나 로그인 기능을 제외했기 때문에 firebase나 supabase 같은 실시간 DB 서버를 사용하는 것은 조금 과한 것 같아요. 그래서 저는 Next.js에서 지원하는 API Routes를 사용해 볼 겁니다.

API Routes는 Next.js에서 Serverless API Endpoint를 만들 수 있게 해주는 기능이라고 하는데요. 글로만 보면 무슨 말인지 잘 모르겠으니 직접 확인해 보겠습니다!

API Routes를 활용한 공용 API 구축

api routes 폴더 구조

폴더 구조는 위에 보시는 사진처럼 작업했어요. Serverless API Endpoint를 만들 수 있게 해주는 기능이라고 하는데 코드를 통해 알아봐야겠죠

import path from 'path';
import { promises as fs } from 'fs';
import { RawYoutubeData, YoutubeData } from '@/app/types/youtube';

export async function GET(request: Request): Promise<Response> {
  try {
    // JSON 파일 경로 설정
    // 'data/seongsigyeong.json' 파일의 경로를 생성
    const filePath = path.join(process.cwd(), 'data', 'seongsigyeong.json');

    // 파일 읽기
    const fileContents = await fs.readFile(filePath, 'utf-8');

    // JSON 파싱
    // JSON 데이터를 RawYoutubeData[] 타입의 JavaScript 객체로 변환
    const rawData: RawYoutubeData[] = JSON.parse(fileContents);

    // rawData를 순회하며 필요한 속성만 추출하여 새로운 배열 반환
    const data: YoutubeData[] = rawData.map((item) => ({
      id: item.id,
      position: item.snippet.position,
      title: item.snippet.title,
      thumbnailUrl: item.snippet.thumbnails.high.url,
    }));

    // 클라이언트에서 'limit' 파라미터를 전달받아 데이터 개수 제한 설정
    const url = new URL(request.url);
    const limitParam = url.searchParams.get('limit');
    const limit = limitParam ? parseInt(limitParam, 10) : data.length;

    const limitedData = data.slice(0, limit);
	
    // 성공 응답 반환
    // 제한된 데이터를 JSON 형태로 응답하며, HTTP 상태 코드는 200으로 설정합니다.
    return new Response(JSON.stringify({ success: true, lists: limitedData }), {
      status: 200,
      headers: { 'Content-Type': 'application/json' },
    });
  } catch (error) {
    // 에러 처리
    // 에러 메시지 출력하며, HTTP 상태 코드를 500 (서버 오류)로 설정
    console.error('데이터를 받아오는 중 에러가 발생했습니다:', error);
    return new Response(
      JSON.stringify({ success: false, message: '데이터 요청 실패' }),
      {
        status: 500,
        headers: { 'Content-Type': 'application/json' },
      },
    );
  }
}

Next.js 공식 문서나 다른 글들을 찾아보니 함수 이름을 handler를 많이 사용하는데, 저는 역할을 명확하게 나타내기 위해 HTTP Method를 이름으로 사용했어요

limit 파라미터는 서버 사이드에서 화면에 보여줄 데이터의 개수를 제한하기 위해서 설정했어요. API 설계를 처음해보다 보니 일단 개수를 제한하는 파라미터만 추가했지만 추후 작업을 통해 더 많은 기능을 추가해 보겠습니다

✨ 데이터 요청

API도 완성했으니 위에서 정의한 Endpoint에 데이터를 요청해 봐야겠죠

import axios from '@/app/lib/instance';
import ListContainer from '@/app/components/lists/ListContainer';

async function page() {
  const {
    data: { lists },
  } = await axios.get('ssg');

  return <ListContainer lists={lists} />;
}

export default page;

데이터 요청 화면

SSR (Server Side Rendering)

데이터 요청에 성공했어요! SSR(Server Side Rendering)도 잘 동작하네요

프로젝트를 시작하려고 기획할 때마다 db가 없어서 고민이었는데 이제 API Routes를 이용해 간단한 서버 정도는 직접 만들어서 사용하면 되겠네요.

API Routes가 serverless function이라 실시간 통신 같은 live connection에는 적절하지 않다는 점은 조금 아쉬워요

[맛길] 데이터 채우기 - Youtube Data API

기획 단계에서 Serverless Function을 이용해 유튜브 영상과 상세 내용을 관리하기로 했습니다❗ 흠.. 영상 정보를 어떻게 저장할까요 직접 JSON 파일에 작성하기에는 양이 너무 많아 비효율적일 것

dev-hpk.tistory.com

[맛길] 프로젝트 주제 및 기술 스택 선정

사이드 프로젝트 시작 계기팀 프로젝트를 진행하면서 소통과 협업의 기술을 배울 수 있어 프론트앤드 개발자로서 한 걸음 더 가까워진 것 같아요.그런데 프로젝트 후반으로 갈 수록 저를 포

dev-hpk.tistory.com

[Coworkers] 팀 생성 페이지 작업 (feat. 빌드 타임 에러 수정)

dev-hpk — Thu, 23 Jan 2025 21:44:09 +0900

이미지 업로드 작업에서 너무 많은 시간을 써버렸네요.. 이미지 업로드 문제를 해결하기 위해 React Hook Form을 정독했으니 팀 생성은 이제 아무것도 아닙니다! 우선 팀 생성 API를 먼저 작업해 볼게요.

팀 생성 API

import axios from '@/app/lib/instance';

export interface PostGroupData {
  profile?: string; // 프로필 이미지는 선택 사항
  name: string;
}

const postGroup = async (data: PostGroupData) => {
  const res = await axios.post('groups', data, {
    headers: {
      Authorization: `Bearer ${process.env.NEXT_PUBLIC_ACCESS_TOKEN}`,
    },
  });

  return res;
};

export default postGroup;

Authorization : 로그인이 아직 미완성이라 임의로 .env에 토큰을 저장해서 사용

Form onSubmit 핸들러

const onSubmit = async ({ profile, name }: FieldValues) => {
    let imageUrl: string | null = null;

    // 이미지 업로드 - 프로필 이미지 선택 안한 경우 생략
    if (profile && profile[0] instanceof File) {
      try {
        const formData = new FormData();

        formData.append('image', profile[0]);

        const {
          data: { url },
        } = await postImage(formData);

        imageUrl = url;
      } catch (error) {
        alert('이미지 업로드에 실패했습니다.');
      }
    }

    // 팀 생성
    try {
      const teamData: PostGroupData = {
        name,
      };

      if (imageUrl) {
        teamData.profile = imageUrl;
      }

      await postGroup(teamData);
      alert('팀이 성공적으로 생성되었습니다!');
    } catch (error) {
      alert('팀 생성에 실패했습니다.');
    }
  };

profile && profile[0] instanceof File : profile(폼 이미지)이 존재하고 File 객체인지 확인
if (imageUrl) {teamData.profile = imageUrl;} : 이미지를 선택한 경우만 teamData에 profile을 추가

결과를 확인해 봐야겠죠

팀 생성 요청

팀 생성 요청 결과

이미지와 팀 이름 모두 정상적으로 적용되어 팀을 생성했네요!

page의 코드가 150줄이네요. 그다지 긴 것 같진 않지만 그래도 가독성과 재사용성을 고려해 분리해 볼게요✨

page.tsx

function Page() {
  const router = useRouter();

  const onSubmit = async ({ profile, name }: FieldValues) => {
    /* 생략 */
  };

  return (
    <div>
      <div className="mx-auto mt-[3.75rem] max-w-[23.4375rem] px-4 pt-[4.5rem] tablet:w-[28.75rem] tablet:px-0 tablet:pt-[6.25rem]">
        <h2 className="mb-6 text-center text-2xl font-medium text-text-primary tablet:mb-20">
          팀 생성하기
        </h2>
        <TeamForm onSubmit={onSubmit}>생성하기</TeamForm>
        <div className="mt-6 text-center text-md text-text-primary tablet:text-lg">
          팀 이름은 회사명이나 모임 이름 등으로 설정하면 좋아요.
        </div>
      </div>
    </div>
  );
}

export default Page;

TeamForm.tsx

interface TeamFormProps {
  onSubmit: (data: FieldValues) => Promise<void>;
}

function TeamForm({ children, onSubmit }: PropsWithChildren<TeamFormProps>) {
  const method = useForm();
  const { register, handleSubmit } = method;

  return (
    <FormProvider {...method}>
      <form className="flex flex-col gap-6" onSubmit={handleSubmit(onSubmit)}>
        <ProfileUploader register={register} />
        <Input
          name="name"
          title="팀 이름"
          type="text"
          placeholder="팀 이름을 입력해주세요."
          validationRules={{
            required: '이름을 입력해주세요.',
            minLength: {
              value: 1,
              message: '이름은 최소 1글자 이상입니다.',
            },
            maxLength: {
              value: 30,
              message: '이름은 최대 30글자까지 입력 가능합니다.',
            },
            validate: (value) =>
              value.trim() !== '' || '팀 이름에 공백만 입력할 수 없습니다.',
          }}
          autoComplete="off"
        />
      </form>
      <Button
        variant="primary"
        className="mt-10 w-full text-white"
        onClick={handleSubmit(onSubmit)}
      >
        {children}
      </Button>
    </FormProvider>
  );
}

ProfileUploader

function ProfileUploader({ register }: ProfileUploaderProps) {
  const [profileImage, setProfileImage] = useState('');

  // 파일 처리하는 함수
  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      const url = URL.createObjectURL(file); // 미리보기 URL 생성
      setProfileImage(url); // 미리보기 이미지 업데이트
    }
  };

  return (
    <div>
      <span className="mb-3 inline-block">팀 프로필</span>
      <label
        htmlFor="profile"
        className="relative block h-16 w-16 cursor-pointer"
      >
        <input
          id="profile"
          className="sr-only"
          type="file"
          accept="image/*"
          {...register('profile')}
          onChange={handleFileChange}
        />
        {profileImage ? (
          <>
            <Image
              src={profileImage}
              className="rounded-full border-2 border-border-primary"
              fill
              alt="프로필 이미지"
            />
            <IconProfileEdit className="absolute bottom-0 right-0" />
          </>
        ) : (
          <IconProfile />
        )}
      </label>
    </div>
  );
}

이대로 마무리되면 좋겠지만 배포 단계에서 에러가 발생했습니다

배포 에러

에러 메시지를 보니 postIamge의 response 타입이 제대로 정의되지 않은 것 같아요. 함수의 return 타입을 정의해줄게요

type PostImageResponse = {
  url: string;
};
const postImage = async (img: FormData): Promise<PostImageResponse> => {
  const res = await axios.post('images/upload', img, {
    headers: {
      'Content-Type': 'multipart/form-data',
      Authorization: `Bearer ${process.env.NEXT_PUBLIC_ACCESS_TOKEN}`,
    },
  });

  return res.data;
}

type PostGroupResponse = {
  id: string;
};

const postGroup = async (data: PostGroupData): Promise<PostGroupResponse> => {
  const res = await axios.post('groups', data, {
    headers: {
      Authorization: `Bearer ${process.env.NEXT_PUBLIC_ACCESS_TOKEN}`,
    },
  });

  return res.data;
}

아직도 에러가 발생하네요

배포 에러

이번에는 에러 메시지가 바뀐 것 같아요. axios 요청의 응답이 unknown 타입이라 PostGroupResponse 타입에 할당할 수 없다고 하네요.

함수의 반환 타입으로 Promise<PostGroupResponse>라는 비동기 타입을 반환하는 것으로 해결이 안 되는 것 같네요. 그럼 적용해 볼 수 있는 방법은 axios 요청의 response 타입을 직접 정의해 주는 것뿐이네요

type PostGroupResponse = {
  id: string;
};

const postGroup = async (data: PostGroupData): Promise<PostGroupResponse> => {
  const res = await axios.post<PostGroupResponse>('groups', data, {
    headers: {
      Authorization: `Bearer ${process.env.NEXT_PUBLIC_ACCESS_TOKEN}`,
    },
  });

  return res.data;
};

const postImage = async (img: FormData): Promise<PostImageResponse> => {
  const res = await axios.post<PostImageResponse>('images/upload', img, {
    headers: {
      'Content-Type': 'multipart/form-data',
      Authorization: `Bearer ${process.env.NEXT_PUBLIC_ACCESS_TOKEN}`,
    },
  });

  return res.data;
};

배포 에러 해결

이전 프로젝트에서는 axios 요청의 response 타입을 <T> 형태로 명시하지 않아도 에러가 발생하지 않아서 잘 몰랐네요.

함수의 반환 타입에 Promise<T> 형태만 지정해 주면 알아서 타입을 추론한다고 생각했는데, 지금까지 any 타입으로 추론해서 에러가 발생 안 했던 거라니

이전에는 런타임에서만 오류를 신경 썼기 때문에 빌드 타임에서 발생하는 오류에 대해서는 잘 몰랐어요.

그런데 이번에 타입을 명시하지 않아 빌드 타임에서 오류가 발생하고, 해결을 위해 많은 시간을 투자하고 보니 타입을 명확하게 지정하는 것이 얼마나 중요한지 확실히 느꼈습니다.

추가로 배포 주기를 짧게 잡는 것도 좋은 방법이라는 생각이 들었어요. 배포 주기를 짧게 잡으면 문제를 빠르게 발견하고 수정하는 것이 가능하니, 문제가 커지기 전에 발견하고 대응할 수 있어 안정적이고 효율적인 개발이 가능할 것 같아요!

[Coworkers] 팀 생성 페이지 작업 (API 연동)

dev-hpk — Wed, 22 Jan 2025 14:20:00 +0900

공통 컴포넌트 작업을 마무리하고, 오늘부터는 페이지 작업 시작입니다. 팀 생성 페이지를 먼저 작업해 보겠습니다!

작업 목표

팀 생성 페이지 작업 목표

작업에 앞서 피그마 디자인을 먼저 확인해 볼게요

팀 생성 페이지

팀 이름 Input이 팀원분이 공통으로 작업해 주신 Input 컴포넌트와 유사하게 생겼으니 공통 Input을 사용하면 되겠네요

공통 Input 예시

공통 Input 코드

import { MouseEvent, ReactNode, useState } from 'react';
import { useFormContext, RegisterOptions } from 'react-hook-form';
import IconVisibility from '@/app/components/icons/IconVisibility';
import IconInVisibility from '@/app/components/icons/IconInVisibility';

type AuthInputProps = {
  name: string; // 필드 이름 (폼 데이터의 키)
  title: string; // 라벨 제목
  type: string; // input 타입 (예: text, password 등)
  placeholder: string; // 플레이스홀더
  autoComplete: string; // 자동 완성 옵션
  validationRules?: RegisterOptions; // react-hook-form 유효성 검증 규칙
  backgroundColor?: string; // 입력 필드 배경색
  customButton?: ReactNode; // 추가 버튼 컴포넌트
};

function AuthInput({
  name,
  title,
  type = 'text',
  placeholder,
  autoComplete,
  validationRules,
  backgroundColor = 'bg-background-secondary',
  customButton,
}: AuthInputProps) {
  const [isVisibleToggle, setIsVisibleToggle] = useState(false);
  const {
    register,
    formState: { errors },
  } = useFormContext();

  const isPassword = type === 'password';
  const inputType = isPassword ? (isVisibleToggle ? 'text' : 'password') : type;

  const handleToggleClick = (e: MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    setIsVisibleToggle(!isVisibleToggle);
  };

  const inputBorderClass = errors[name]
    ? 'border-status-danger' // 에러시 border 색상
    : 'border-[#F8FAFC1A]'; // 기본 border 색상

  return (
    <div className="flex flex-col gap-3">
      <label className="text-text-primary text-base font-medium" htmlFor={name}>
        {title}
      </label>

      <div className="relative">
        <input
          className={`focus:border-interaction-focus placeholder:text-text-danger text-text-primary h-full w-full rounded-xl border px-4 py-[0.85rem] placeholder:text-lg focus:outline-none ${backgroundColor} ${inputBorderClass}`}
          {...register(name, validationRules)}
          type={inputType}
          id={name}
          placeholder={placeholder}
          autoComplete={autoComplete}
        />
        {isPassword && customButton && (
          <div className="absolute right-4 top-3 z-20">{customButton}</div>
        )}
        {isPassword && !customButton && (
          <button
            className="absolute right-4 top-3 z-10"
            type="button"
            onClick={handleToggleClick}
          >
            {isVisibleToggle ? <IconVisibility /> : <IconInVisibility />}
          </button>
        )}
      </div>

      {errors[name] && (
        <span className="text-status-danger text-sm">
          {errors[name]?.message as string}
        </span>
      )}
    </div>
  );
}

export default AuthInput;

컴포넌트 이름을 보니 로그인, 회원가입에 관련된 Input만 고려하신 것 같네요

공통 컴포넌트를 사용하지 말아야 하나 고민했지만, React Hook Form을 사용해 작업해 주셔서 공통 Input을 사용하는 게 효율적일 것 같아 사용해야겠습니다.

저번 코드 리뷰 때 배운 점을 바탕으로 팀 회의 때 명확하고 부드러운 소통으로 컴포넌트와 변수의 이름을 바꾸는 내용을 건의해 보겠습니다✨

axios를 추가하고 instance를 세팅해 보겠습니다.

Axios Instance 생성

import axios from 'axios';

const instance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_SERVER_URL,
  headers: {
    'Content-Type': 'application/json',
    // 로그인 기능이 구현되면 TOKEN 추가하겠습니다.
    // Authorization: `Bearer ${}`
  },
});

export default instance;

이제 axios도 설정했으니, api 작업을 시작해 볼게요.

팀 생성 API는 body에 image와 name을 필요로 하는데요, image는 필수는 아니지만 http:// 또는 https://로 시작하는 문자열을 받네요

팀 생성 API

팀 생성 스키마

이미지를 첨부했을 때 정해진 패턴으로 변경해 줄 수 있게 Image 업로드 API를 먼저 작업해 볼게요.

팀 생성 페이지 구조 및 Image 업로드 API

<FormProvider {...method}>
  <form className="flex flex-col gap-6" onSubmit={handleSubmit(onSubmit)}>
    <div>
      <span className="mb-3 inline-block">팀 프로필</span>
      <label
        htmlFor="profile"
        className="relative block h-16 w-16 cursor-pointer"
      >
        <input
          id="profile"
          {/* 화면에 표시되지 않지만 파일 선택을 위해 sr-only 추가 */}
          className="sr-only"
          type="file"
          accept="image/*"
          {...register('profile')}
          onChange={handleFileChange}
        />
        {profileImage ? (
          <Image src={profileImage} fill alt="profile image" />
        ) : (
          <IconProfile />
        )}
      </label>
    </div>
    <AuthInput
      name="name"
      title="팀 이름"
      type="text"
      placeholder="팀 이름을 입력해주세요."
      autoComplete="off"
    />
  </form>
</FormProvider>

공통 Input을 useFormContext로 작업해 주셔서 form 상태를 관리하기 위해 FormProvider를 사용했어요❗

import axios from '@/app/lib/instance';

const uploadImage = (imageData: FormData) => {
  const res = axios.post('images/upload', imageData, {
    headers: {
      'Content-Type': 'multipart/form-data',
      Authorization: `Bearer ${process.env.NEXT_PUBLIC_ACCESS_TOKEN}`,
    },
  });

  return res;
};

export { uploadImage };

Content-Type : React Hook Form의 Form 데이터를 사용하기 위해 multipart/form-data로 설정
Authorization : 로그인 기능이 아직 구현 전이라 .env에 인증 토큰을 임의로 저장하고 사용

// 파일 처리하는 함수
  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      const url = URL.createObjectURL(file); // 미리보기 URL 생성
      setProfileImage(url); // 미리보기 이미지 업데이트

      setValue('profile', file); // form data 설정
    }
  };

  const onSubmit = async (data: PostGroupData) => {
    try {
      const formData = new FormData();
     
     formData.append('image', data.profile);

      const img = await uploadImage(formData);
    } catch (error) {
      alert(`팀 생성에 실패했습니다`);
    }
    return null;
  };

API를 완성했으니 결과를 확인해 봐야겠죠

이미지 업로드 요청 결과

무슨 에러인지 응답과 페이로드로 서버에 전달한 데이터를 확인해 볼게요.

에러 응답

페이로드

image에 File이 아니라 FileList가 보내지고 있네요

확인해 보니 아래 두 경우에 data.profile의 값이 FileList입니다.

1️⃣ 이미지를 선택하지 않은 경우

2️⃣ 이미지를 선택한 여러 번 선택한 경우(이미 선택한 상태에서 변경하는 경우)

1️⃣번 문제는 간단한 조건문을 통해 해결할 수 있을 것 같아요.

if (data.profile && data.profile instanceof File) {
  const formData = new FormData();

  formData.append('image', data.profile);

  const img = await uploadImage(formData);
}

data.profile : formData의 profile 데이터가 있는지 확인
data.profile instanceof File : formData의 profile 데이터가 File 객체인지 확인

이미지 없는 경우

이미지를 선택하지 않은 경우 API 요청을 안 하도록 잘 적용되었네요

2️⃣번 문제를 해결하려고 이미지를 추가하던 중 디버깅을 해보니 해결된 게 아니었네요.

formData - 프로필 이미지

profile가 FileList여서 이미지 업로드 API가 동작을 안 하고 있었어요

코드를 살펴보다가 의문이 드는 부분이 생겼습니다.

// handleFileChange
setValue('profile', file);

// 파일 업로드 input
<input
  id="profile"
  className="sr-only"
  type="file"
  accept="image/*"
  {...register('profile')}
  onChange={handleFileChange}
/>;

이미 파일 업로드 input에 register로 Form State를 연결했는데, 파일 change 핸들러에 setValue로 register filed의 profile 값을 다시 변경해주고 있네요...

아마 register를 등록하기 전에 setValue로 관리하던 로직을 삭제하지 않은 것 같아요.

삭제하고 다시 테스트해 보겠습니다.

이미지 업로드 성공

로직을 꼼꼼하게 확인하지 못해 발생한 문제로 너무 많은 시간을 투자한 것 같아 아쉬운 마음이 드네요

이번 경험을 통해 React Hook Form의 공식 문서를 깊이 이해하는 계기가 되었고, 앞으로는 더 꼼꼼하게 코드를 점검할 자신감이 생긴 것 같습니다

[Coworkers] Trouble Shooting - 코드 리뷰

dev-hpk — Tue, 21 Jan 2025 15:03:42 +0900

Trouble Shooting

상황

팀원의 PR(pull request)에서 발견된 버그와 개선 사항 및 수정 방법에 대해 리뷰를 작성했습니다.

반응형 화면과 이벤트 관련 테스트도 진행하면서 코멘트를 열심히 남겼는데요..

코드 리뷰 코멘트

리뷰에 대한 피드백 반영이나 확인 없이 PR이 머지되었습니다...

pr 머지

무엇이 문제였을까요?

문제 상황이 왜 발생했는지 고민해 봤을 때 아래 3가지 정도가 있는 것 같습니다.

1️⃣ 리뷰 프로세스의 불명확함

2️⃣ 의사소통 부족

3️⃣ 팀의 리뷰 문화 미정립

다른 리뷰 코멘트는 확인하시고 응답하신 것을 보면 2️⃣번은 아닌 것 같습니다

피드백에 대한 응답

배운 점

1️⃣ 의사소통과 피드백 방법의 개선 필요성

다시 확인해보니 제가 남긴 리뷰가 모호하거나 딱딱한 어조로 작성되어 요청보다는 단순한 의견으로 받아들여졌을 수 있을 것 같습니다. 앞으로는 코드 리뷰를 남기기 전에 아래 내용을 상기시켜야겠습니다.

피드백은 단순히 문제를 지적하는 것이 아니라, 수정 방향과 기대 결과를 명확히 제시해야 한다.
긍정적인 어조와 이모지 등을 활용해 팀원의 기여를 격려하는 것도 중요하다.

2️⃣ 리뷰 프로세스 강화 필요성

PR 승인 기준, 피드백 확인을 필수화 한다.
리뷰를 단순히 참고용이 아닌 필수 반영 사항으로 만들기 위해 팀 차원의 리뷰 정책을 논의한다.

이번 경험을 통해 리뷰의 어조와 전달 방식이 팀원 간 협업에 미치는 영향을 깊이 깨닫게 되었어요.
리뷰는 단순히 문제를 지적하기보다 서로 배우고 함께 성장할 수 있는 과정임을 다시 한번 깨달았어요.

리뷰 프로세스를 강화는 것도 팀 회의에서 소통을 통해 해결해야 할 문제네요.

명확하고 유연한 소통 방식으로 의견을 제시한다면 팀원분들도 긍정적으로 받아주실 거라고 생각합니다

앞으로는 더 명확하고 부드러운 소통으로 팀원들과 협업하며 프로젝트 잘 마무리하고 좋은 결과물 만들어 갔으면 좋겠네요!

[Coworkers] 공통 컴포넌트 Modal

dev-hpk — Mon, 20 Jan 2025 16:10:42 +0900

고급 프로젝트 Coworkers의 시작입니다. 저는 Modal 공통 컴포넌트를 맡게 되었습니다.

작업을 시작하기 전에 지난 프로젝트에서 팀원분께서 만들어주신 Modal 컴포넌트를 사용할 때 좋았던 점들과 불편했던 점들을 생각해 봤어요

좋은 점

Modal의 Container만 만들어두고 Content는 children으로 받아 사용할 수 있어 편했음
Modal의 dim 영역을 클릭했을 때 닫히는 기능이 있어 편했음

불편한 점

Modal 컴포넌트를 사용하는 페이지에서 모달의 open 관련 State를 선언하고 관리해야 해서 불편했음
DOM 계층의 Depth가 깊어지면 z-index 관련해서 신경 쓸 부분이 많아 불편했음
Modal의 dim과 컨텐츠가 각각 Dim, Modal 컴포넌트로 분리되어 있어 불편했음

위 내용을 고려하면서 작업 목표를 아래처럼 작성했습니다.

modal 작업 목표

useModal 커스텀 훅

import { useState } from 'react';

interface ModalHookProps {
  initialState?: boolean;
}

function useModal({ initialState = false }: ModalHookProps = {}) {
  const [isOpen, setIsOpen] = useState(initialState);

  const openModal = () => setIsOpen(true);
  const closeModal = () => setIsOpen(false);

  return { isOpen, openModal, closeModal };
}

export default useModal;

initialState : 모달의 초기 상태가 꼭 닫혀있는 것은 아닌 것 같아서 추가했습니다. 웹이나 앱을 이용하다 보면 광고나 공지 같은 모달이 열려있는 상태로 진입하는 경우를 많이 볼 수 있잖아요

Modal 컴포넌트

'use client';

import { PropsWithChildren, useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import IconClose from '@/app/components/icons/IconClose';

interface ModalProps {
  hasCloseBtn?: boolean;
  portalRoot?: HTMLElement;
  closeModal: () => void;
}

function Modal({
  hasCloseBtn = false,
  portalRoot,
  closeModal,
  children,
}: PropsWithChildren<ModalProps>) {
  const [isMounted, setIsMounted] = useState(false);
  const modalRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    setIsMounted(true);

    // 모달 외부 클릭 시 닫히도록 이벤트 처리
    const handleClickOutside = (event: MouseEvent) => {
      if (modalRef.current && modalRef.current.contains(event.target as Node)) {
        closeModal();
      }
    };

    // 마운트 시 이벤트 리스너 추가
    document.addEventListener('mousedown', handleClickOutside);

    // clean-up : 언마운트 시 이벤트 리스너 제거
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [closeModal]);

  if (!isMounted) return null;

  return createPortal(
    <div className="fixed inset-0 z-50 flex flex-col items-center justify-center tablet:justify-end">
      {/* 모달 dim 영역 - 클릭 시 모달 닫힘 */}
      <div ref={modalRef} className="absolute inset-0 bg-black opacity-50" />
      <div className="relative flex w-96 flex-col items-center rounded-xl bg-background-secondary pb-8 pt-12 tablet:w-full tablet:rounded-b-none">
        {hasCloseBtn && (
          <button
            type="button"
            className="absolute right-4 top-4 h-6 w-6"
            title="모달 닫기"
            onClick={closeModal}
          >
            <IconClose />
          </button>
        )}
        {children}
      </div>
    </div>,
    portalRoot || document.body,
  );
}

export default Modal;

Props

hasCloseBtn : 닫기 버튼(X) 유무 설정
portalRoot : Modal을 렌더링 할 상위 DOM 노드, body 하위가 아닌 다른 곳에 렌더링 할 경우를 고려해 prop으로 추가했습니다.
closeModal : Modal 닫기 함수
children : Modal 내부에 렌더링 될 컨텐츠

CreatePortal()

portalRoot || document.body : portalRoot prop을 지정하지 않으면 기본적으로 body 하위에 모달을 렌더링 하도록 설정했습니다.

ModalRef

기존에는 dim 영역 <div>의 onClick 이벤트 핸들러에 closeModal()을 사용했습니다.
dropdown 작업을 하신 팀원분이 useRef를 이용해 닫기 이벤트를 처리하셔서, 공통으로 뺄 수 있을 것 같아 논의 후 수정했습니다.

if (!isMounted) return null;

SSR 환경에서 internal server error(500)이 발생하는 문제를 해결하기 위해, modal이 마운트 되기 전에 null을 리턴하도록 했습니다.

작업 완료 & 테스트

모달 동작 테스트

Modal이 body 하위에 잘 렌더링 되고 dim 영역 클릭 시 닫히는 기능도 잘 동작합니다.

이렇게 마무리하나 싶었는데, 스크럼 회의 때 애니메이션을 추가했으면 좋겠다는 의견이 나왔어요

의견을 듣고 Modal을 동작시켜 보니 좀 심심해 보이긴 하네요

수정 전

export function Home() {
    const {isOpen, openModal, closeModal} = useModal();
    
    const handleClose = () => {
    	/* TODO */
    	closeModal();
    }
    
    return (
      <div>
        {isOpen && (<Modal closeModal={handleClose}>모달 컨텐츠</Modal>)}
      </div>
    )
}

기존 Modal은 아래 코드처럼 조건부로 렌더링을 관리했어요.

그런데 이 방법으로는 애니메이션을 추가해도 적용이 안되네요.. 다른 방법을 찾아야 할 것 같습니다

여러 프레임워크의 Modal 컴포넌트를 찾아보다가 Bootstrap의 Modal이 가장 적합한 것 같아 참고하기로 했습니다!

수정 후

export function Home() {
    const {isOpen, openModal, closeModal} = useModal();
        
    const handleClose = () => {
    	/* TODO */
    	closeModal();
    }
    
    return (
      <div>
        <Modal isOpen={isOpen} closeModal={handleClose}>모달 컨텐츠</Modal>
      </div>
    )
}

'use client';

import { PropsWithChildren, useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import IconClose from '@/app/components/icons/IconClose';

interface ModalProps {
  hasCloseBtn?: boolean;
  portalRoot?: HTMLElement;
  isOpen: boolean;
  closeModal: () => void;
}

function Modal({
  hasCloseBtn = false,
  portalRoot, // Modal 렌더링할 상위 DOM 노드
  closeModal,
  isOpen,
  children,
}: PropsWithChildren<ModalProps>) {
  const [renderModal, setRenderModal] = useState(isOpen);
  const modalRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (isOpen) {
      setRenderModal(true); // isOpen이 true면 렌더링 활성화
    }
  }, [isOpen]);

  const handleAnimationEnd = () => {
    if (!isOpen) {
      setRenderModal(false); // 애니메이션 종료 후 렌더링 중단
    }
  };

  useEffect(() => {
    // 모달 외부 클릭 시 닫히도록 이벤트 처리
    const handleClickOutside = (event: MouseEvent) => {
      if (modalRef.current && modalRef.current.contains(event.target as Node)) {
        closeModal();
      }
    };

    // 마운트 시 이벤트 리스너 추가
    document.addEventListener('mousedown', handleClickOutside);

    // clean-up : 언마운트 시 이벤트 리스너 제거
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [closeModal]);

  if (!renderModal) return null;

  return createPortal(
    <div
      className={`tablet:justify-center fixed inset-0 z-50 flex flex-col items-center justify-end transition-opacity ${
        isOpen ? 'opacity-100' : 'pointer-events-none hidden opacity-0'
      }`}
      style={{ display: renderModal ? 'flex' : 'none' }}
    >
      <div ref={modalRef} className="absolute inset-0 bg-black opacity-50" />
      <div
        className={`tablet:w-96 tablet:rounded-b-xl relative flex max-h-[80%] w-full transform flex-col items-center overflow-y-hidden rounded-t-xl bg-background-secondary pb-8 pt-12 transition-transform ${isOpen ? 'translate-y-0' : 'translate-y-4'}`}
        onTransitionEnd={handleAnimationEnd}
      >
        {hasCloseBtn && (
          <button
            type="button"
            className="absolute right-4 top-4 h-6 w-6"
            title="모달 닫기"
            onClick={closeModal}
          >
            <IconClose />
          </button>
        )}
        {children}
      </div>
    </div>,
    portalRoot || document.body,
  );
}

export default Modal;

Props

isOpen : Modal 렌더링과 애니메이션 관리를 위해 prop으로 추가

renderModal

Modal의 렌더링 여부를 결정하기 위한 State로 isOpen prop의 값에 따라 토글 됩니다.

onTransitionEnd={handleAnimationEnd}

애니메이션이 종료된 후 렌더링을 중단하기 위해 추가

const handleAnimationEnd = () => {
    if (!isOpen) {
      setRenderModal(false); // 애니메이션 종료 후 렌더링 중단
    }
  };

애니메이션 동작 화면

모달 애니메이션 적용

tailwind CSS를 처음 접하다 보니 작업 속도가 많이 느리고, 애니메이션이나 UX 적인 부분을 작업 초반에 고려하지 못해 많은 수정을 했네요

그래도 여러 번 수정 끝에 좋은 결과물을 만들어 내고, 팀원들에게 긍정적인 코드 리뷰를 받아서 기분이 좋네요

코드 리뷰

저도 많이 부족한데 하나 배워 가신다니 머쓱하지만 더 열심히 해야겠다는 의지가 불타오르네요

[맛길] 데이터 채우기 - Youtube Data API

dev-hpk — Sat, 18 Jan 2025 20:34:28 +0900

기획 단계에서 Serverless Function을 이용해 유튜브 영상과 상세 내용을 관리하기로 했습니다!

흠.. 영상 정보를 어떻게 저장할까요? 직접 JSON 파일에 작성하기에는 양이 너무 많아 비효율적일 것 같습니다.

구글링을 통해 크롤링과 Youtube Data API를 알게 되었습니다. 크롤링이 더 간단한 것 같지만, 프론트엔드 개발자라면 API를 사용하는 게 당연하겠죠!

사실 크롤링이 유튜브 정책 위반이라는 내용도 있고, 크롤링 관련 재판 사례들이 있는 것 같아서 선택한 것도 없진 않습니다

Youtube Data API

Youtube Data API 탐색기를 통해서 query에 "먹을텐데"를 검색하니 아래와 같은 결과가 나왔네요.

"먹을텐데" GET 요청 response

재생목록의 영상을 가져오려면 아래 2단계를 거쳐야해요.

1️⃣ 재생목록 API에 GET 메서드를 통해 playlistId를 알아낸다.

2️⃣ PlaylistItems API에 GET 메서드의 query Param으로 playlistId를 추가해, 영상 정보를 알아낸다.

데이터 요청 - 브라우저 화면

데이터를 JSON으로 저장하는 용도이기 때문에 UI는 간단하게 input과 button으로만 구성했습니다.

const input_search = document.getElementById("search_input");
const btn_search = document.getElementById("search_btn");

// 채널 이름으로 채널 ID를 찾고 재생목록을 가져오는 함수
async function getChannelId(name) {
  try {
    const { data, status } = await axios.get(
      "https://www.googleapis.com/youtube/v3/search",
      {
        params: {
          part: "snippet",
          key: API_KEY,
          maxResults: 50,
          type: "channel",
          q: name,
        },
      }
    );
    
    // 채널 ID 추출 및 재생목록 검색 함수 호출
    if (status === 200 && data.items.length > 0) {
      const channelId = data.items[0].snippet.channelId;
      getPlaylistId(channelId, name);
    }
  } catch (error) {
    console.log(error);
  }
}

// 채널 ID로 해당 채널의 재생목록을 가져오는 함수
async function getPlaylistId(channelId, search) {
  try {
    const {
      data: { items },
    } = await axios.get("https://www.googleapis.com/youtube/v3/playlists", {
      params: {
        part: "snippet",
        key: API_KEY,
        channelId,
        maxResults: 50,
      },
    });

    // 재생목록을 검색어를 찾으면 해당 재생목록 ID 추출
    for (let i = 0; i < items.length; i++) {
      if (items[i].snippet.title.includes(search)) {
        const playlistId = items[i].id;
        getPlaylistVideos(playlistId); // 재생목록 영상 가져오기 함수 호출
        break;
      }
    }
  } catch (error) {
    console.log(error);
  }
}

// 재생목록 ID로 해당 재생목록의 영상들을 가져오는 함수
async function getPlaylistVideos(playlistId, pageToken) {
  try {
    const { data } = await axios.get(
      "https://www.googleapis.com/youtube/v3/playlistItems",
      {
        params: {
          part: "snippet",
          key: API_KEY,
          playlistId,
          maxResults: 50,
          pageToken,
        },
      }
    );
    const json = JSON.stringify(data.items, null, 2);

    // JSON 파일 다운로드 생성
    const blob = new Blob([json], { type: "application/json" });
    const url = URL.createObjectURL(blob);

    // 링크 생성 후 자동 클릭
    const a = document.createElement("a");
    a.href = url;
    a.download = "youtube_data.json"; // 파일 이름 지정
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  } catch (error) {
    console.log(error);
  }
}

btn_search.addEventListener("click", () => {
  const channelName = input_search.value;
  getChannelId(channelName);
});

잘 실행되는지 확인해 보겠습니다.

API 요청 성공

response로 JSON 데이터 저장 성공

JSON 데이터

JSON으로 데이터가 잘 저장되었습니다!

Youtube Data API의 공식 문서를 참고하며, 실제 HTTP 요청을 통해 원하는 데이터를 찾다 보니 시간을 너무 많이 쓴 것 같아요. 조금 지친 것 같지만 API 문서를 파악하는 능력을 길렀으니 만족합니다

이제 검색 키워드로 JSON 데이터를 채워 프로젝트를 진행할 일만 남았으니까 프로젝트 마무리까지 열심히 달려보겠습니다

[맛길] 프로젝트 주제 및 기술 스택 선정

dev-hpk.tistory.com

[맛길] 프로젝트 주제 및 기술 스택 선정

dev-hpk — Fri, 17 Jan 2025 16:58:21 +0900

사이드 프로젝트 시작 계기

팀 프로젝트를 진행하면서 소통과 협업의 기술을 배울 수 있어 프론트앤드 개발자로서 한 걸음 더 가까워진 것 같아요.

그런데 프로젝트 후반으로 갈 수록 저를 포함한 팀원들의 체력과 의욕이 떨어져 기능을 하나씩 빼게 되었습니다. 추가 기능을 구현하고 싶은 제 입장에서는 프로젝트에 대해 만족을 못하고 있는 느낌이 들었어요

제가 원하는대로 만들 수 있는 사이드 프로젝트를 한 번 해보면 팀원과의 협업의 소중함도 느끼고 문제 상황도 혼자 해결해 보면서 성장할 것 같아요. 그래서 개인 사이드 프로젝트를 시작하기로 결심했습니다!

사이드 프로젝트 주제 선정

막상 프로젝트를 시작하려고 하니 주제 선정부터 쉽지 않았어요..

일상생활을 하면서 많은 사람들이 느꼈던 불편 또는 이런 것이 있으면 좋을 것 같다고 생각한 필요에 의해 주제를 선정하면 좋다고 하네요. 그런데 다른 사람들 관점에서 주제를 선정하면 프로젝트 중간에 제가 흥미가 사라져 의욕이 떨어질 것 같아요.

그래서 저를 포함한 많은 사람들이 같이 겪고 있는 불편 혹은 필요가 무엇인지 생각해 보다가 맛집 찾기가 떠올랐습니다

그런데 네이버, 카카오 지도를 이용해 맛집을 보여주기만 하는건 의미가 없을 것 같습니다.

실제로 저는 네이버 지도를 많이 이용하는데, 가보고 싶은 맛집을 ⭐로 등록해도 다음번에 보면 메뉴가 눈에 잘 안 들어오고 리뷰를 읽기가 귀찮더라고요

네이버 지도 맛집 리스트

주제도 정했으니 기능은 나중에 추가되거나 삭제될 수 있지만 일단 적어보겠습니다❗

✨ 프로젝트 기능 선정

CRUD, 로그인 기능도 구현하면 좋겠지만, 제가 검증이 안된 다른 사람의 서비스에 계정을 생성한다고 생각해 보니 뭔가 찜찜하네요

제 서비스를 누가 볼지는 모르겠지만, 저도 사용자 입장을 고려해 CRUD, 로그인 기능은 빼도록 할게요.

(아쉽지만 CRUD, 간편 로그인, 간편 회원가입 기능은 이번에 진행하는 고급 팀 프로젝트에서 해볼게요 )

1️⃣ 맛집 소개 리스트 페이지

저는 맛집을 검색할 때 별점(⭐)도 중요하게 생각하지만, 실제 방문자들이 남긴 가게와 메뉴 사진이 포함된 리뷰를 주로 참고해요. 그런데 매번 리뷰를 읽는 건 귀찮은 일이잖아요

그래서 저는 사람들이 가장 쉽게 접할 수 있고 자주 이용하는 매체를 고민하다가 유튜브를 떠올렸어요.

유튜브에 맛집을 방문해서 소개하는 먹방 컨텐츠(또간집, 먹을텐데, 스트리트 푸드파이터, 줄 서는 식당 등)가 많잖아요!

영상 썸네일, 가게 이름, 음식 카테고리, 지역 정보가 포함된 카드 형식의 리스트를 보여주겠습니다✨

리스트 페이지 예시 화면

디자인 능력이 없어 온라인 툴로 간단하게 예시를 만들었더니 퀄리티가 너무 떨어지네요

대충 어떤식으로 구현할 건지 느낌만 봐주세요❗

2️⃣ 맛집 소개 상세 페이지

썸네일에 이끌려 맛집을 클릭했다면, 자세한 정보도 보여줘야겠죠❗

상세 페이지에는 유튜브 영상을 추가할게요. 추가로 영상을 재생하기 귀찮거나 어려운 사용자도 있을 수 있으니 텍스트로도 잘 요약해야겠죠

맛집 상세 페이지 예시 화면

이렇게 보니까 화면의 정보가 너무 빈약한 것 같네요.. 추가할 정보들은 고민해 보도록 할게요

3️⃣ 맛집 지도 페이지

서비스의 핵심인 지도 페이지입니다.

위에서 소개한 리스트와 상세 페이지만 있다면, 서비스를 이용하지 않고 유튜브로 직접 검색하겠죠❗

2️⃣번 상세 페이지의 "지도로 볼래요" 버튼을 누르면 해당 가게를 지도로 표시해 주겠습니다.

지도 기능 예시 화면

기술 스택 선정

Next.js

Next.js는 React 기반의 프레임워크라 React의 장점을 활용하면서, 서버 사이드 렌더링(SSR)을 지원합니다.

서버 사이드 렌더링(SSR)으로 초기 렌더링 속도를 향상해 사용자 경험을 개선하고, SEO 최적화를 통해 검색 엔진 친화적인 서비스를 개발할 수 있어 선택했습니다.

Tailwind CSS

Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크입니다. HTML 코드 안에 스타일 코드가 포함되어 있기 때문에 HTML과 CSS 파일을 별도로 관리할 필요가 없습니다.

Tailwind는 미리 정의된 className을 제공하기 때문에 일관된 스타일을 유지할 수 있고, className을 고민하는 시간을 줄여주기 때문에 선택했습니다.

추가로 Tailwind CSS는 CSS in JS 방식과 다르게 빌드 타임에 처리되기 때문에 성능 최적화와 작은 CSS 번들 크기 유지에 좋다고 하네요

TypeScript & Prettier & ESLint

혼자 하는 프로젝트여도 TypeScript, Prettier, ESlint를 사용하면 더 나은 코딩 습관을 익힐 수 있고, 시간이 지나 프로젝트에 새로운 기능을 추가하거나 리팩터링 할 때 완성도 높은 코드가 더 유지보수 하기 쉽다고 생각해 선택했습니다.

Next.js Serverless Function

이번 프로젝트에서는 단순 데이터 제공만 하기 때문에 비용, 관리, 성능 면에서 Next.js Serverless Function이 가장 적합하다고 생각해 선택했습니다.

Firebase를 사용할까도 많이 고민했지만, 실시간 데이터베이스와 인증 기능이 이번 프로젝트에서는 과도한 기능일 것 같습니다.

Serverless Function 장점

별도의 백엔드 환경을 구축하거나 관리할 필요 없이 데이터 관련 API를 /api 디렉토리에서 바로 작성하고 사용할 수 있어 유지보수가 쉽습니다.
Serverless Function은 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)과 자연스럽게 통합되어, 동적 데이터를 렌더링 하면서도 빠른 페이지 로딩 속도를 유지할 수 있습니다.
Vercel에서 Next.js 프로젝트를 배포하면, 서버리스 함수가 자동으로 설정 및 배포됩니다. 별도의 서버 관리 없이 즉시 사용할 수 있어 배포가 매우 간단합니다.

[Git] Pull Request에 Template 자동 적용하기 (feat. 이슈 close)

dev-hpk — Thu, 16 Jan 2025 13:22:27 +0900

이전에 Create Issue Branch(Github Action)을 활용해 이슈 생성 시 feature bracnh 생성은 자동화했습니다.

이슈를 생성하고 작업을 할 때는 매우 편리하지만 PR(pull request)을 생성하고 Merge 할 때 2가지 불편함을 느꼈습니다.

1️⃣ PR(pull request)를 생성할 때마다 정해둔 형식에 맞게 PR 본문을 작성해야 함

2️⃣ PR(pull request)이 Merge 되어도 Issue가 Open 상태로 남아있어 직접 Close 해줘야 함

PR(pull request) 본문 형식

Merge 된 PR(pull request)

PR(pull request)이 Merge 되어도 Open 상태인 Issue

위 두 내용을 자동화할 수 있는 방법을 구글링 해보던 중 Github PR Template를 찾게 되었습니다.

PR Template은 왜 필요할까

PR Template을 만들어 Repository에 추가하면 PR을 할 때 PR body에 template의 내용이 자동으로 추가됨
PR Template을 사용하면 PR의 내용을 표준화해서 일관성 있는 좋은 품질의 Pull Request를 유지할 수 있게 됨

위 두 내용만 봐도 PR Template를 사용하면 자동화를 통해 매번 PR 본문 형식을 작성하는 번거로움을 줄일 수 있겠네요.

저는 조금 더 욕심을 내서 PR이 Merge 되었을 때 해당 이슈도 Close 해주는 작업을 추가해보고 싶었습니다. 검색을 통해 확인해 보니 Create Issue Branch에서 했던 것처럼 workflow를 추가하는 방법이 있지만 정확한 적용 방법이 없네요..

여기서 포기할 수 없습니다! 자동화가 너무 편리하니까요

수 차례 검색을 통해 Pull Request에서 작성하는 메시지에서 issue에 연결이 지원되는 키워드를 찾았습니다.

Linking a pull request to an issue - GitHub Docs

You can link an issue to a pull request manually or using a supported keyword in the pull request description, that is, the summary text added by the author when they created the pull request. When you link a pull request to the issue the pull request addr

docs-internal.github.com

이제 PR Template에 적용 후 테스트 해보겠습니다✨

PR Template 적용

1️⃣ .github/ 디렉토리에 pull_request_template.md 파일 추가

2️⃣ pull_request_template.md 파일에 아래 내용 추가

## #️⃣연관된 이슈

> ex) #이슈번호, #이슈번호

close #'이슈번호'

##  작업 내용

> 이번 PR에서 작업한 내용을 간략히 설명해주세요(이미지 첨부 가능)

### 스크린샷 (선택)

##  리뷰 요구사항(선택)

> 리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요
>
> ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

PR 생성 후 template 적용 확인

PR Template 적용 화면

PR을 생성하니 pull_request_template.md에 작성해 둔 형식이 잘 적용되었네요

close #'이슈번호'에 이슈 번호를 지정하고 이슈가 Close 되는지 테스트해 보겠습니다!

이슈 Close 테스트

이슈 Close 테스트 결과

PR을 Merge 해도 이슈가 Open 상태로 남아있네요

검색을 통해 아래와 같은 방법들을 시도해 봤지만 모두 이슈를 Close하는데 실패했습니다.

close 키워드를 PR Template 최상단에서 사용
close 키워드 대신 closes, closed 키워드 사용

검색으로는 도저히 해결할 방법을 찾을 수 없어 Git Docs를 확인하던 중 아래 내용을 찾게 되었고 마지막으로 시도해 보기로 했습니다.

Changing the default branch - GitHub Enterprise Server 3.10 Docs

If you have more than one branch in your repository, you can configure any branch as the default branch.

docs-internal.github.com

Issue를 관리하는 키워드가 PR(pull request)이 repository의 Default branch를 대상으로 할 때만 해석된다고 하네요.

Default branch를 그럼 feature로 변경 후 테스트 해보겠습니다.

Default branch를 feature로 변경

13번 이슈 Close 테스트

PR Merge 결과 이슈 Close 성공

"Successfully merging a pull request may close this issue"라는 메시지와 함께 이슈가 Close 된 것을 확인했습니다

PR Template 적용과 이슈 자동 종료 설정을 진행하면서 많은 시행착오를 겪었습니다

PR을 Merge 할 때 예상한 대로 이슈가 자동으로 닫히지 않아 많은 시간과 노력이 들어갔고, 자동화를 포기하고 수동으로 이슈를 닫는 것이 낫지 않나 하는 생각도 했습니다.

하지만 이번 경험을 통해 GitHub의 PR Template와 이슈 관련 키워드 설정에 대해 더 깊이 이해할 수 있었습니다.

앞으로 진행할 프로젝트에서는 더 빠르고 수월하게 설정을 적용할 수 있으니, 매번 정해둔 형식에 맞게 PR 본문을 작성하고 이슈를 Close하는 번거로움이 사라지겠네요✨

[Next] Event handlers cannot be passed to client component props 오류 해결

dev-hpk — Wed, 15 Jan 2025 21:21:20 +0900

Next.js에서 button 요소에 onClick 이벤트 핸들러를 전달하려고 하는데 아래와 같은 에러가 발생했습니다.

const handleClick = async () => {
    const query = await getDoc(doc(db, "사용자", "zSen5y9LJazULo2C3atN"));
    console.log(query.data());
  };

  return (
    <div>
      <button
        className='bg-black text-white p-2 rounded-md'
        onClick={handleClick}
      >
        데이터 가져오기
      </button>
    </div>
  );

onClick 이벤트 핸들러 등록 에러

기존에 진행하던 프로젝트에서는 마주한 적 없던 에러인데 뭐가 문제일까요

곰곰이 생각해 보니 다른 점은 라우팅 방식뿐이네요. 기존에는 Page Router 방식을 사용했지만 이번 프로젝트는 App Router 방식을 사용했습니다.

App Router 방식이 등장하면서 getStaticProps, getServerSideProps 같은 메서드가 사라지고, fetch로 통합이 되었다고 합니다

Page Router 방식

App Router 방식

App Router 방식에서는 CSR(Client Side Rendering)을 어떻게 해야 할까요

Next.js 공식 페이지의 ai에게 물어본 결과 아래처럼 응답해 줬습니다.

Next.js 공식 페이지 ai의 답변

간략하게 요약해 볼게요❗

use client란?

use client 디렉티브는 Next.js 애플리케이션에서 어떤 컴포넌트가 클라이언트 사이드에서 렌더링 되어야 하는지 명시적으로 정의하는 데 사용됩니다. use client를 파일에 추가하면, 해당 파일에서 import하는 모든 컴포넌트가 클라이언트 번들에 포함됩니다. 따라서 모든 컴포넌트에 use client를 추가할 필요는 없습니다.

언제 use client를 사용해야 하나요?

다음과 같은 경우에 use client를 사용해야 합니다:

인터랙티브 컴포넌트
- useState, useEffect와 같은 React 훅을 사용해야 할 때
- 클라이언트 사이드에서 상호작용이 필요한 컴포넌트
브라우저 전용 API
- localStorage, window 객체, geolocation 등 브라우저에서만 사용할 수 있는 API를 접근해야 할 때
- 이벤트 리스너 등을 사용할 때
서드파티 라이브러리
- 브라우저 API나 DOM 조작에 의존하는 라이브러리를 사용할 때
- 예를 들어, react-dom과 같은 라이브러리를 사용하는 컴포넌트

언제 use client를 사용하지 말아야 하나요?

정적 콘텐츠
- 오직 정적 콘텐츠만 렌더링하는 컴포넌트
- 서버에서 완전히 렌더링 할 수 있는 컴포넌트
데이터 페칭
- 서버 컴포넌트에서 서버 사이드 데이터를 페칭 하는 것을 선호
- 서버 작업은 서버 액션 또는 API 라우트를 통해 수행

결론적으로 저는 클라이언트 사이드에서 버튼을 눌렀을 때 데이터를 비동기적으로 요청해야 하니까 CSR을 위해 use client를 추가해 보겠습니다.

"use client";

import db from "@/firebase/firestore";
import { doc, getDoc } from "firebase/firestore";

export default function Home() {
  const handleClick = async () => {
    const query = await getDoc(doc(db, "사용자", "zSen5y9LJazULo2C3atN"));
    console.log(query);
  };

  return (
    <div>
      <button
        className='bg-black text-white p-2 rounded-md'
        onClick={handleClick}
      >
        데이터 가져오기
      </button>
    </div>
  );
}

use client 추가 후 에러 해결

use client를 추가해 주니 에러 없이 잘 동작하네요

이번 에러를 통해 Next의 공식 문서도 정독해 보고 Next에 대한 많은 내용을 검색해 보게 되었습니다.

App Router가 도입되면서부터는 서버 컴포넌트에서 클라이언트 이벤트 핸들러를 사용할 수 없다는 것을 알게 되었습니다.

Next.js는 지속적으로 발전하고 있기 때문에, 이런 기능이나 제약이 바뀔 가능성도 충분히 있을 것 같습니다

그래서 앞으로는 Next.js의 업데이트를 계속 따라가며, 최신 변화와 새로운 기능들을 놓치지 않기 위해 공식 문서를 주기적으로 확인할 계획입니다!

[Git] Github Action을 활용한 Issue 및 feature branch 생성 자동화

dev-hpk — Wed, 15 Jan 2025 15:23:24 +0900

프로젝트를 진행하면서 Git Flow 전략을 토대로 개발을 하기 위해 각 Issue 별로 develop 브랜치에서 feature 브랜치를 따서 사용했습니다.

매번 Issue 생성 → 브랜치 생성의 과정을 반복하다 보니 번거롭다는 생각이 들어 자동화해 보자는 생각에 구글링 하던 중 Jira와 Github Action을 찾게 되었습니다.

Jira와 Github을 연동하면 Jira Issue에서 바로 Github branch를 생성하고 Issue와 관련된 코드 변경 사항을 추적할 수 있다고 합니다.

출처 - https://lesstif.atlassian.net/wiki/spaces/JIRA/pages/1019052090/Jira+Issue+Code

그런데 최대 10명의 사용자와 2GB 저장소 제공이라는 제한 사항이 있네요

저의 경우 주로 소규모 프로젝트를 진행해하기 때문에, 복잡한 프로젝트 관리보다는 간단한 이슈 관리 목적으로 Create Issue Branch(Github Action)을 사용하게 되었습니다.

Create Issue Branch

Create Issue Branch는 Issue 생성 시, BranchName으로 정해진 문법에 따라 자동으로 신규 Branch를 생성해 주는 Github Action입니다.
Create Issue Branch를 이용하면, PR(Pull Request) 후 merge 진행 시 자동 Issue close 역시 가능합니다.

설치 방법은 아래 링크를 참조했습니다.

Create Issue Branch - GitHub Marketplace

GitHub action that creates a new branch after assigning an issue

github.com

설치 방법은 아래 두 가지 있다고 하네요

1️⃣ repository에 Create Issue Branch app 설치하기

2️⃣ Github Action을 통해 사용하기 (YAML config에 워크플로우를 제어할 코드를 작성)

저는 2번을 적용해 보겠습니다.

issue-branch.yml 파일 추가 및 적용

name: Create Feature Branch on Issue Creation

on:
  issues:
    types: [opened]

jobs:
  create-branch:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v2
        with:
          token: ${{ secrets.TOKEN }}
          ref: feature

      - name: Create feature branch
        env:
          ISSUE_NUMBER: ${{ github.event.issue.number }}
          ISSUE_TITLE: ${{ github.event.issue.title }}
        run: |
          # 브랜치 이름 생성 (특수문자 및 공백 처리)
          ISSUE_TITLE_CLEAN="${ISSUE_TITLE// /-}"  # 공백을 '-'로 대체
          ISSUE_TITLE_CLEAN="${ISSUE_TITLE_CLEAN//[^a-zA-Z0-9가-힣_-]/}" # 영문, 한글, 숫자, '_'만 남김

          BRANCH_NAME="#${ISSUE_NUMBER}_${ISSUE_TITLE_CLEAN}"

          # 'feature' 브랜치를 기준으로 새 브랜치 생성 및 푸시
          git checkout feature
          git pull origin feature  # 최신 상태로 업데이트
          git checkout -b "$BRANCH_NAME"
          git push origin "$BRANCH_NAME"

name : Create Feature Branch on Issue Creation을 워크플로우 이름으로 설정
on.issues.types : 새로운 이슈(opened)가 생성될 때 워크플로우를 실행하도록 트리거 설정
ISSUE_NUMBER : 생성된 이슈 번호를 저장
ISSUE_TITLE : 생성된 이슈 제목을 저장
BRANCH_NAME : [이슈 번호]_[필터링 된 이슈 제목] 형태로 브랜치 이름을 생성
(ex. 이슈 테스트 → #1_이슈-테스트)
git checkout feature & git pull origin featrue : feature 브랜치로 이동 후 최신 상태로 업데이트
git checkout -b "$BRANCH_NAME" : 생성한 브랜치 이름으로 브랜치 생성
git push origin "$BRANCH_NAME" : 원격 저장소에 생성한 브랜치를 푸시(push)

이제 적용도 끝났으니 직접 이슈를 생성해 보면서 테스트해 보겠습니다!

테스트 이슈 생성

이슈 생성 결과

이슈를 생성했지만, 브랜치는 생성되지 않았습니다..

수 차례 시도에도 이슈만 생성되고 브랜치는 생성되지 않는데 뭐가 문제일까요

포기하는 마음으로 Actions 탭을 확인해 보니, 이슈 생성에 대한 에러를 확인할 수 있었습니다.

Create Issue Branch 에러

with:
  token: ${{ secrets.TOKEN }}

token으로 secrets.TOKEN을 사용했는데, 정작 TOKEN을 설정해주지 않았네요.

Token은 GitHub Personal Access Token 설정 페이지에서 생성할 수 있습니다.

TOKEN이라는 이름으로 토큰을 생성하고 repository에 추가해 보겠습니다.

github personal access token 생성

토큰 생성 결과

TOKEN 적용도 끝났으니 다시 이슈 생성 테스트를 해보겠습니다

Create Issue Branch Retry

이슈 생성 결과

이슈를 생성하니 [이슈 번호]_[이슈 타이틀] 형태로 브랜치가 잘 생성되었습니다.

앞으로 진행할 팀 프로젝트에 적용하면 매번 이슈에 해당하는 브랜치를 직접 생성하는 번거로움이 사라지겠네요✨

[CS] SQL Injection(SQL 삽입)이란?

dev-hpk — Mon, 13 Jan 2025 17:16:24 +0900

SQL Injection 커버 이미지

SQL Injection(SQL 삽입)

SQL Injection은 공격자가 애플리케이션의 데이터베이스를 악용하기 위해 SQL 쿼리를 조작하는 보안 취약점입니다.

공격자가 입력 필드나 URL 매개변수를 통해 악의적인 SQL 코드를 삽입하여 데이터베이스의 민감한 정보를 탈취하거나, 데이터를 삭제 및 수정하며, 심지어 시스템을 제어하는 행위로 이어질 수 있습니다.

SQL

SQL(Structured Query Language)은 관계형 데이터베이스 시스템에서 자료를 관리 및 처리하기 위해 설계된 언어입니다. SQL은 데이터베이스의 데이터를 조회, 삽입, 수정, 삭제하는 데 사용되며, 관계형 데이터베이스 관리 시스템(RDBMS)에서 핵심적인 역할을 합니다.

SQL Injection 유형 및 동작 원리

SQL Injection은 다양한 형태로 발생할 수 있으며, 각각 고유한 동작 방식과 피해를 발생시킵니다.

1. Error based SQL Injection

가장 일반적인 형태로 사용자 입력을 통해 악의적인 쿼리를 삽입하는 방식입니다. 이 유형의 동작 원리는 사용자가 입력한 값이 그대로 SQL 쿼리에 삽입될 때 발생합니다.

SELECT * FROM users WHERE username = 'admin' AND password = 'password';

위 쿼리가 아래와 같은 Spring 코드로 작성되었다고 생각해 봅시다

String username = request.getParameter("username");
String password = request.getParameter("password");
String query = "SELECT * FROM users WHERE username = '" + username + "' AND password = '" + password + "';";

공격자는 아래와 같은 방법으로 공격할 수 있습니다.

1️⃣ username 필드에 ' OR 1=1 -- 를 입력합니다.

2️⃣ 실제 실행되는 쿼리가 다음과 같이 변경됩니다.

3️⃣ SELECT * FROM users WHERE username = ' ' OR 1=1 --AND password = ' ';

WHERE절에 있는 싱글 쿼터('')를 닫아주게 되고, OR 1=1로 WHERE절을 참을 만듭니다.
--를 이용해 뒤의 모든 쿼리문을 주석 처리합니다.

4️⃣ 결과적으로 SELECT * FROM users를 통해 users 테이블에 있는 모든 user 정보에 대해 접근할 수 있습니다.

2. Blind SQL Injection

공격자가 데이터베이스에서 반환된 결과를 직접 확인할 수 없을 때 발생합니다.

데이터 베이스로부터 특정한 값이나 데이터를 전달받지 않고, 단순히 참/거짓을 판단하는 쿼리를 이용하여 서버의 데이터를 추론하는 공격 기법입니다.

공격자는 테이블에 특정 컬럼이 존재하는지 확인합니다. 이를 위해 다음과 같은 참/거짓 쿼리를 사용합니다.

1️⃣ 컬럼 존재 여부 확인

SELECT * FROM users WHERE id = 1 AND EXISTS (SELECT column_name FROM information_schema.columns WHERE table_name = 'users' AND column_name = 'username');

결과가 참이면 username 컬럼이 존재함을 의미합니다.
결과가 거짓이면 username 컬럼이 없음을 나타냅니다.

2️⃣ 결과가 거짓이라면 컬럼 이름을 추론하는 과정을 아래와 같이 반복합니다.

SELECT * FROM users WHERE id = 1 AND EXISTS (SELECT column_name FROM information_schema.columns WHERE table_name = 'users' AND column_name LIKE 'a%');

LIKE 'a%'는 컬럼 이름이 a로 시작하는지 확인합니다.
공격자는 알파벳을 한 글자씩 변경하며 컬럼 이름 전체를 추론합니다.

3️⃣ 컬럼 이름을 식별했다면, 다음과 같은 쿼리를 사용해 해당 컬럼의 데이터를 추출할 수 있습니다.

SELECT username FROM users WHERE id = 1;

3. Union-Based SQL Injection

UNION SQL 연산자를 사용하여 여러 쿼리의 결과를 결합하여 데이터를 추출하는 방식입니다.

UNION 하려는 두 테이블의 컬럼 수와 데이터 형식은 같아야 합니다.

SELECT username, password FROM users WHERE id = 1 UNION SELECT version(), database();

공격자는 users 테이블에서 uswername과 password 컬럼 데이터를 조회하는 SELECT 구문에 추가 정보를 요청하는 쿼리문을 겹합해 보냅니다. 이 방법을 통해 공격자는 데이터베이스의 추가 정보를 포함한 결과를 획득할 수 있습니다.

SQL Injection 방어 방법

1. 입력값 검증

모든 사용자 입력값을 철저히 검증하여 허용된 값만 처리되도록 합니다.

/, –, ‘, “, ?, #, (, ), ;, @, =, + 와 같은 특수 기호 필터링
DB Query에 동적으로 영향을 주는 union, select 같은 명령어 필터링

2. 최소 권한 액세스 시행

사용자에게 역할에 필요한 만큼의 최소한의 권한만 부여해 SQL Injection 피해를 최소화합니다.

3. Prepared Statement 및 매개변수화된 쿼리 사용

Prepared Statement는 SQL 쿼리의 구조와 값을 분리하여 쿼리를 실행하는 방식입니다. 이를 통해 사용자 입력값이 SQL 코드로 해석되지 않도록 방지합니다.

Prepared Statement 코드

동작 방식

SQL 쿼리와 값의 분리: 쿼리 작성 시 ?와 같은 플레이스홀더를 사용하여 입력값이 삽입될 위치를 지정합니다.
입력값 바인딩: 플레이스홀더에 입력값을 매개변수로 바인딩합니다. 이 과정에서 입력값은 SQL 코드가 아닌 데이터로 처리됩니다.
쿼리 실행: 바인딩된 값이 포함된 쿼리를 안전하게 실행합니다.

[CS] CSRF(Cross-Site Request Forgery)란?

dev-hpk — Sat, 11 Jan 2025 12:33:27 +0900

CSRF(Cross-Site Request Forgrey) 이미지

CSRF (Cross-Site Request Forgrey)

CSRF(Cross-Site Request Forgery)는 공격자가 사용자의 권한을 도용하여 웹 애플리케이션에 비정상적인 요청을 보내는 공격 기법입니다. 사용자(희생자)는 자신의 의지와는 무관하게 공격자가 의도한 행위(수정, 삭제, 등록 등)를 특정 웹 사이트에 요청하게 됩니다.

송금이나, 비밀번호 변경, 권한이 필요한 작업 등의 요청을 악의적으로 보내겠죠!

XSS(Cross-Site-Scripting)와 어떻게 다른가

CSRF와 XSS는 웹 애플리케이션의 보안 취약점을 이용하는 공격 기법입니다.

그럼 둘은 어떤 차이가 있을까요?

공격 목적

XSS : 사용자 PC에서 스크립트를 실행해 사용자의 정보를 탈취
CSRF : 요청을 위조해 사용자(희생자) 몰래 송금, 비밀번호 변경, 권한이 필요한 작업 등 특정 행위를 수행

공격 방법

XSS : 입력 폼에 악성 스크립트를 삽입해 사용자의 브라우저에서 스크립트를 실행시키는 방법으로 공격
CSRF : 사용자의 인증 정보(세션 ID)를 악용해 특정 웹 사이트에 공격자가 의도한 행위를 요청해 서버에서 스크립트를 실행시키는 방법으로 공격

의존성

xss : 로그인 여부(인증된 세션 여부)와 무관하게 공격이 가능
CSRF : 사용자가 특정 도메인(웹 사이트)에 로그인한 상태(인증된 세션이 있는 상태)여야 공격이 가능

지금까지 살펴본 내용으로는 이해가 어려운 부분이 많네요

CSRF 공격 시나리오를 살펴보면서 자세히 알아보겠습니다.

CSRF 공격 시나리오

1. 사용자(희생자)가 특정 웹 사이트에 로그인합니다. 이때 서버는 세션 ID를 생성하고 쿠키를 통해 클라이언트에게 전송하고 인증 쿠키는 사용자의 브라우저에 저장됩니다.

2. 공격자가 CSRF 공격을 위한 악성 스크립트가 삽입 된 웹 사이트나 이메일을 만듭니다.

3. 사용자(희생자)가 악성 웹 사이트나 이메일에 접속합니다.

4. 피싱 사이트는 특정 웹 사이트에 공격자가 지정한 악의적인 요청을 보냅니다. 이때 브라우저는 요청에 세션 쿠키(인증 정보)를 포함해 전송합니다.

5. 서버는 요청이 정상적인 사용자로부터 온 요청으로 간주하고 처리합니다.

CSRF는 다수 중 특정 도메인에 로그인한 사람이 있다면 그들 모두가 공격 대상이 되는 공격 방식입니다.

간단한 예제를 통해 확인해 보겠습니다.

CSRF 시연 예제

서버는 Node.js와 Express를 이용해 간단하게 만들었습니다.

악성 사용자가 사용자(희생자)의 쿠키(인증 정보)를 악용할 수 있는 시나리오를 구현하기 위해 Cookie에 임의로 testCookie라는 값을 저장해 두었습니다.

시연을 위한 테스트 쿠키

게시판에 악성 사용자가 무료 React 강의를 등록했다고 가정해 보겠습니다. 다른 강의들은 모두 유료인데 하나만 무료라니 사용자 입장에서 안 누를 수 없겠죠

악성 사용자가 등록한 악성 게시글

게시글을 클릭해 보겠습니다.

악성 게시글 클릭

링크를 클릭해 사이트로 이동하면 쿠키에 등록된 testCookie가 나타나고 있네요

지금은 간단한 시연 예시를 위해 테스트로 저장해둔 쿠키를 화면에 나타냈지만, 실제 CSRF 공격이었다면 생각만 해도 아찔하죠..

CSRF 공격 방지를 위해 사용자가 할 수 있는 노력

사용자가 CSRF 공격을 직접 막을 수는 없지만 피해를 예방하기 위해 아래와 같은 노력을 해 볼 수 있습니다.

의심스러운 링크 클릭하지 않기 : 출처가 불분명한 웹 사이트의 링크는 클릭하지 않도록 합니다.
로그아웃 습관화 : 웹 사이트 사용을 종료하면 로그아웃을 통해 세션을 종료합니다.
동시에 여러 웹 사이트 사용하지 않기 : 여러 웹사이트를 동시에 사용하는 경우 현재 화면에 표시되지 않는 웹사이트에서 크로스 사이트 요청 위조 공격이 발생하고 있다는 사실을 알아차리지 못할 수 있습니다.

XSS 공격 방지 방법

1. Referer 검증

요청의 Referer 헤더를 확인해 신뢰할 수 있는 출처에서 온 요청인지 검증합니다.

Referer 요청 헤더는 현재 요청을 보낸 페이지의 절대 혹은 부분 주소를 포함합니다. 만약 링크를 타고 들어왔다면 해당 링크를 포함하고 있는 페이지의 주소가, 다른 도메인에 리소스 요청을 보내는 경우라면 해당 리소스를 사용하는 페이지의 주소가 이 헤더에 포함됩니다.
출처: MDN

2. SameSite 쿠키 설정

SameSite 속성을 Lax 또는 Strict로 설정하여, 크로스사이트 요청에 쿠키가 포함되지 않도록 설정합니다.

SameSite 속성은 사이트 간 요청과 함께 쿠키가 전송될지를 제어하여 사이트 간 요청 위조 공격(CSRF)에 대한 일부 보호를 제공합니다.
Strict : 쿠키를 설정한 동일한 사이트에서 발생하는 요청에만 쿠키를 전송합니다.
Lax : 이미지 또는 프레임을 불러오는 요청과 같은 사이트 간 요청은 쿠키가 전송되지 않는 것을 의미합니다. 하지만 사용자가 링크를 따라갈 때처럼 외부 사이트에서 원래 사이트로 이동할 때는 쿠키를 전송합니다.
출처 : MDN

3. CSRF 토큰 사용

모든 민감한 요청에 대해 CSRF 토큰을 포함하고, 서버에서 이를 검증합니다.

CSRF 토큰은 서버에 들어온 요청이 실제 서버에서 허용한 요청이 맞는지 확인하기 위한 토큰입니다.
CSRF 토큰은 무작위로 생성된 고유한 값입니다. 이 토큰은 사용자의 브라우저에 저장되며, 사용자가 웹 사이트에 요청을 보낼 때마다 서버에 전송됩니다.

요청하는 페이지에 hidden 타입 input 태그를 이용해 토큰 값을 함께 전달하면 서버에서 세션에 저장된 CSRF 토큰 값과 요청 파라미터에 담긴 토큰 값을 비교한다고 합니다.

// 세션에 설정
session.setAttribute("CSRF_TOKEN", UUID.randomUUID().toString());
// 페이지 내 hidden 값으로 설정
model.addAttribute("CSRF_TOKEN", session.getAttribute("CSRF_TOKEN"));

<form action="http://server-host:port/path" method="POST">
    <input type="hidden" name="_csrf" value="${CSRF_TOKEN}"/>
    <!-- ... -->
</form>

[CS] 반사형 XSS (Reflected Cross-Site-Scripting)

반사형 XSS (Reflected Cross-Site-Scripting) 악성 사용자가 악성 스크립트가 담긴 URL을 만들어 일반 사용자에게 전달하는 패턴입니다. 악성 사용자는 URL 주소 뒤에 붙은 쿼리에 악성 스크립트를 작성

dev-hpk.tistory.com

[CS] 저장형 XSS (Stored Cross-Site-Scripting)

저장형 XSS (Stored Cross-Site-Scripting) 저장형 XSS는 공격자가 악성 스크립트를 포함한 데이터를 서버에 보내 저장하고, 이후 사용자가 해당 데이터를 요청하면 서버에 저장된 악성 스크립트가 사

dev-hpk.tistory.com

[CS] 반사형 XSS (Reflected Cross-Site-Scripting)

dev-hpk — Fri, 10 Jan 2025 14:23:37 +0900

반사형 XSS 이미지

반사형 XSS (Reflected Cross-Site-Scripting)

악성 사용자가 악성 스크립트가 담긴 URL을 만들어 일반 사용자에게 전달하는 패턴입니다.

악성 사용자는 URL 주소 뒤에 붙은 쿼리에 악성 스크립트를 작성하여 전달합니다.

반사형 XSS는 URL 주소에 포함된 코드를 응답 HTML에 그대로 출력하기 때문에 반사형 XSS라고 합니다.

URL 주소에 악성 스크립트가 포함된 경우에만 발생하기 때문에 지속성이 없어 비지속성 XSS라고도 합니다.

반사형 XSS 공격 시나리오

반사형 xss 공격 시나리오

악성 사용자가 보안이 취약한 사이트에서 사용자 정보를 빼돌릴 수 있는 스크립트가 담긴 URL을 만들어 일반 사용자에게 메일로 전달합니다.
사용자는 메일을 통해 전달받은 URL 링크를 클릭합니다.
사용자 브라우저에서 보안이 취약한 사이트로 요청을 전달합니다.
사용자의 브라우저에서 응답 메시지를 실행하면서 악성 스크립트가 실행됩니다.
악성 스크립트를 통해 사용자 정보가 악의적인 사용자에게 전달됩니다.

이 공격은 사용자가 URL을 누른 것 만으로 실행될 수 있어 위험하지만, 그 피해가 URL을 클릭한 사용자에게만 제한되며 URL을 클릭하지 않으면 지속성이 없습니다.

간단한 예제를 통해 확인해 보겠습니다.

저장형 XSS 시연 예제

서버는 Node.js와 Express를 이용해 간단하게 만들었습니다.

악성 사용자가 유저의 정보를 탈취하는 시나리오를 구현하기 위해 localStorage에 임의로 userToken이라는 값을 저장해 두었습니다.

localStorage에 저장된 유저 토큰

악성 유저가 보안이 취약한 사이트에 로컬 스토리지의 userToken을 alert 하는 코드를 전송합니다.

XSS 시연

<img src="" onerror="alert(localStorage.getItem('userToken'))" />

src가 없는 이미지 태그를 서버에 전송해 임의로 onerror 이벤트가 발생하게 되어 로컬 스토리지의 userToken이 alert 하도록 하는 코드네요

로컬 스토리지의 토큰을 alert하는 URL

사용자의 로컬 스토리지에 저장된 토큰을 alert하는 스크립트를 포함한 URL을 만들었습니다.

해당 URL은 query에 script가 노출되어 있으니 사용자가 알아보지 못하게 간단한 주소로 바꿔 볼게요❗

URL 단축 전

단축 후 URL

Reflect XSS 시연

링크를 클릭해 사이트로 이동하면 userToken이 alert으로 나타나고 있네요

지금은 간단한 시연 예시를 위해 로컬 스토리지에 저장된 토큰을 alert으로 나타냈지만, 쿠키나 사용자의 입력을 탈취해 악성 유저에게 전송하는 코드가 있었다면 생각만 해도 아찔하죠..

XSS 공격 방지 기법

1. 문자열 필터링

XSS 공격은 스크립트를 삽입하는 방식으로 발생합니다. 따라서 스크립트 태그에 자주 사용되는 < , >과 같은 문자를 필터링해 주는 방법으로 방어할 수 있습니다.

예시

function filterInput(input) {
    return input.replace(/[<>&"']/g, function(match) {
        return {
            '<': '&lt;',
            '>': '&gt;',
            '&': '&amp;',
            '"': '&quot;',
            "'": '&#x27;'
        }[match];
    });
}

2. 콘텐츠 보안 정책 (CSP) 적용

CSP (Content Security Policy)를 설정하여 외부 스크립트나 인라인 스크립트의 실행을 제한합니다. 이를 통해 악성 스크립트가 실행되지 않도록 방어할 수 있습니다.

HTTP 헤더를 사용한 CSP 지정

/* 사이트 자체의 출처(하위 도메인 제외) 콘텐츠만 허용 */
Content-Security-Policy: default-src 'self'
/* 신뢰할 수 있는 도메인 및 모든 하위 도메인의 콘텐츠를 허용 */
Content-Security-Policy: default-src 'self' example.com *.example.com

meta 태그를 사용한 CSP 지정

<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; img-src https://*; child-src 'none';" />

3. 데이터베이스 필터링

데이터베이스에 저장하기 전에 입력값을 정규화하거나 필터링하여 악성 코드가 저장되지 않도록 방지합니다.

4. HttpOnly 쿠키 사용

세션 쿠키에 HttpOnly 속성을 설정하여 JavaScript를 통한 쿠키 접근을 차단합니다.

[CS] XSS(Cross Site Scripting)란?

XSS(Cross Site Scripting)는 웹 해킹 공격 중 하나입니다. 웹 서버 사용자에 대한 입력값 검증이 미흡할 때 발생하는 취약점으로, 주로 여러 사용자가 보는 게시판이나 메일 등을 통해 악성 스크립트(Ja

dev-hpk.tistory.com

[CS] 저장형 XSS (Stored Cross-Site-Scripting)

dev-hpk.tistory.com

[CS] 저장형 XSS (Stored Cross-Site-Scripting)

dev-hpk — Thu, 9 Jan 2025 17:14:36 +0900

xss(cross-site-scripting) 이미지

저장형 XSS (Stored Cross-Site-Scripting)

저장형 XSS는 공격자가 악성 스크립트를 포함한 데이터를 서버에 보내 저장하고, 이후 사용자가 해당 데이터를 요청하면 서버에 저장된 악성 스크립트가 사용자 측에서 동작하는 패턴입니다.

악성 스크립트를 포함하는 데이터가 서버에 저장되므로 저장형 XSS라고 합니다. 저장형 XSS는 반사형 XSS와 달리 한 번의 공격으로 끝나는 것이 아니라 정상적인 요청을 하는 사용자에게도 피해를 줄 수 있어 지속형 XSS라고도 합니다.

서버에서 악성 스크립트를 제거하지 않으면 지속적인 공격이 발생하기 때문에 3가지 XSS 공격 패턴 중 가장 위험한 패턴이라고 볼 수 있습니다.

저장형 XSS 공격 시나리오

저장형 xss 공격 시나리오

악성 사용자가 보안이 취약한 사이트에 악성 스크립트를 포함한 데이터를 전송합니다.
보안이 취약한 사이트는 악성 스크립트가 포함된 데이터를 DB에 저장합니다.
사용자는 악성 사용자가 전송한 데이터, 즉 악성 스크립트가 포함된 데이터를 서버에 요청합니다.
서버는 악성 스크립트가 포함된 응답 메시지를 브라우저에 전달합니다.
사용자의 브라우저에서 응답 메시지를 실행하면서 악성 스크립트가 실행됩니다.
악성 스크립트를 통해 사용자 정보가 악의적인 사용자에게 전달됩니다.

이 공격은 사용자가 별다른 행동을 하지 않아도 페이지 방문만으로 실행될 수 있어, 다른 유형의 XSS보다 더 위험합니다.

간단한 예제를 통해 확인해 보겠습니다.

저장형 XSS 시연 예제

서버는 Node.js와 Express를 이용해 간단하게 만들었습니다.

서버에서 가져온 데이터를 이용해 페이지를 동적으로 만들기 위해 EJS(Embedded JavaScript templates)를 사용했습니다.

악성 사용자가 유저의 정보를 탈취하는 시나리오를 구현하기 위해 localStorage에 임의로 userToken이라는 값을 저장해 두었습니다.

localStorage에 저장된 유저 토큰

저장형 XSS 공격 시연

악성 사용자가 input에 입력한 내용은 아래와 같습니다.

<img src="" onerror="alert(localStorage.getItem('userToken'))" />

src가 없는 이미지 태그를 서버에 전송해 임의로 onerror 이벤트가 발생하게 되어 /article을 조회할 때마다 로컬 스토리지의 userToken이 alert으로 나타나고 있네요

저장형 XSS 공격 방지 기법

1. 문자열 필터링

예시

function filterInput(input) {
    return input.replace(/[<>&"']/g, function(match) {
        return {
            '<': '&lt;',
            '>': '&gt;',
            '&': '&amp;',
            '"': '&quot;',
            "'": '&#x27;'
        }[match];
    });
}

2. 콘텐츠 보안 정책 (CSP) 적용

HTTP 헤더를 사용한 CSP 지정

/* 사이트 자체의 출처(하위 도메인 제외) 콘텐츠만 허용 */
Content-Security-Policy: default-src 'self'
/* 신뢰할 수 있는 도메인 및 모든 하위 도메인의 콘텐츠를 허용 */
Content-Security-Policy: default-src 'self' example.com *.example.com

meta 태그를 사용한 CSP 지정

<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; img-src https://*; child-src 'none';" />

3. 데이터베이스 필터링

데이터베이스에 저장하기 전에 입력값을 정규화하거나 필터링하여 악성 코드가 저장되지 않도록 방지합니다.

4. HttpOnly 쿠키 사용

세션 쿠키에 HttpOnly 속성을 설정하여 JavaScript를 통한 쿠키 접근을 차단합니다.

Stored XSS는 데이터 저장소와 연계되어 있어, 공격자의 악성 스크립트가 여러 사용자에게 영향을 미칠 수 있는 치명적인 취약점이기 때문에 더욱 각별한 방어 전략이 필요해 보입니다!

[CS] XSS(Cross Site Scripting)란?

dev-hpk.tistory.com

[CS] XSS(Cross Site Scripting)란?

dev-hpk — Thu, 9 Jan 2025 15:33:41 +0900

xss(Cross Site Script) 이미지

XSS(Cross Site Scripting)는 웹 해킹 공격 중 하나입니다.

웹 서버 사용자에 대한 입력값 검증이 미흡할 때 발생하는 취약점으로, 주로 여러 사용자가 보는 게시판이나 메일 등을 통해 악성 스크립트(JavaScript 같은 스크립트 코드)를 삽입하는 공격 기법입니다.

XSS는 대부분 웹 해킹 공격과 다르게 사용자(클라이언트)를 대상으로 하는 공격 기법입니다.

일반적으로 사용자 쿠키/세션 값 탈취, 키보드 입력값 탈취 등이 가능하며, 피싱 사이트와 같은 악성 사이트로의 접근 유도가 가능해 사용자에게 직접적인 피해를 줄 수 있습니다.

XSS의 공격 유형

XSS는 공격 방법에 따라 유형이 크게 3가지로 나뉩니다.

Reflected XSS (반사형 크로스사이트스크립트)

웹 응용 프로그램의 지정된 변수를 이용할 때 발생하는 취약점을 이용하는 공격으로, 악성 스크립트가 데이터베이스와 같은 저장소에 별도로 저장되지 않고 사용자의 화면에 즉시 출력됩니다. 주로 이메일, 메신저 등에 포함된 URL을 통해 공격이 이루어지고 있습니다.

Stored XSS (저장형 크로스사이트스크립트)

취약점이 있는 웹 서버에 악성 스크립트를 저장하는 공격 방법입니다. 공격자는 악성 스크립트가 포함된 게시글을 작성하여 게시판 등 사용자가 접근할 수 있는 페이지에 업로드합니다. 이후 사용자가 해당 게시글을 요청하면 서버에 저장된 악성 스크립트가 사용자 측에서 동작하게 됩니다.

DOM Based XSS (DOM 기반 크로스사이트스크립트)

DOM 구조를 이용하여 요소들을 수정하거나 추가하는 등 동적 행위를 할 때 접근하는 JavaScript에 악성 스크립트를 삽입하여 클라이언트 측 브라우저에서 악성 스크립트가 실행되도록 하는 공격 방법입니다.

DOM(Document Object Model): 브라우저가 웹 페이지를 렌더링 하는 데 사용하는 모델로 HTML 및 XML 문서에 접근하기 위한 인터페이스

DOM Based XSS는 Reflected XSS와 같이 동적 페이지를 구성하는 과정 상에서 발생되는 XSS 공격이지만, 두 공격 사이에 차이점은 악성 스크립트가 심어지는 시점에서 찾을 수 있습니다.

Reflected XSS는 서버 측에서 동적 페이지를 구성하는 환경에서 발생되는 XSS인 반면에 DOM Based XSS는 클라이언트 측에서 사용자 입력 값을 통해 동적 페이지를 구성하는 환경에서 발생되는 XSS입니다.

즉, 요청이 서버로 전송되지 않고 클라이언트 브라우저에서 공격이 이루어지는 특징을 가지고 있습니다.

XSS 공격의 위험성

세션 하이재킹 : XSS를 통해 세션 쿠키를 훔친 후, 해당 세션을 사용하여 피해자의 계정에 로그인할 수 있습니다.
쿠키 탈취 : 공격자는 document.cookie를 통해 피해자의 쿠키를 가져와 악성 서버로 전송할 수 있습니다.
피싱 공격 : XSS를 사용하여 피해자의 브라우저에 가짜 로그인 페이지를 삽입하거나, 악성 사이트로 리디렉션 할 수 있습니다.
악성 코드 실행 : 공격자는 악성 JavaScript 코드를 입력란이나 URL을 통해 삽입합니다. 이 코드가 실행되면 쿠키 정보나 세션 정보를 훔칠 수 있습니다.

✨사용자가 XSS 공격을 방어할 수 있는 방법

링크 확인 : 사용자는 다른 사용자로 부터 받은 링크를 클릭하기 전에 .com, .net, .org 등의 뒤에 있는 링크 전체를 살펴봐야 합니다. XSS 공격을 트리거하는 링크에는 합법적인 URL이 포함되어 있기 때문에 합법적인 것처럼 보이는 경우가 많지만, 페이지 주소 뒤의 예상치 못한 텍스트는 악성 코드일 수 있습니다.
의심스러운 메일 주의 : 보낸 사람의 이메일 주소를 확인하고, 신뢰할 수 없는 발신자의 이메일은 열지 않도록 주의해야 합니다. 특히 예상하지 못한 첨부파일이나 링크가 포함된 이메일은 더 주의해야 합니다. 추가로 일부 이메일 클라이언트에서 제공하는 미리 보기 창에서 악성 스크립트가 실행될 수 있기 때문에 미리 보기 기능을 비활성화해 주시는 것도 좋은 방법입니다.

✨개발자가 XSS 공격을 방어할 수 있는 방법

입력 유효성 검사 : 개발자는 <script> 태그처럼 XSS 공격에서 흔히 사용되는 태그나 문자를 명시적으로 거부하는 유효성 검사 규칙을 설정할 수 있습니다. 추가로 사용자가 댓글, 게시물, 양식 입력에 HTML을 사용하지 못하도록 막을 수도 있습니다. HTML 콘텐츠는 악성 스크립트를 게시하거나 악성 코드가 포함된 URL의 링크를 숨기는 수단이 될 수 있기 때문입니다.
HttpOnly 쿠키 : 쿠키에 HttpOnly 속성을 설정하면 JavaScript에서 쿠키를 접근할 수 없으므로, 세션 쿠키를 안전하게 보호할 수 있습니다.
동적 스크립트 로딩 차단 : 외부 스크립트가 동적으로 로드되지 않도록 방지합니다.
입력 값 필터링 : 악성 스크립트가 삽입되어도 동작하지 않도록 스크립트에 사용되는 <, >, ‘, “ 등의 특수문자는 &It;, > 등의 HTML Entity로 치환하여 입력합니다.

[React] React Portal을 이용한 모달(Modal) 구현

dev-hpk — Wed, 8 Jan 2025 18:15:21 +0900

최근 프로젝트에서 모달 컴포넌트를 사용하는데 많은 불편함을 느껴 React Portal을 사용하게 되었습니다.

제가 프로젝트를 진행하면서 겪은 불편함을 간단하게 정리했으니 필요하신 분들은 아래 예시를 확인해 주세요

어떤 불편함이 있었냐고요

아래 사진은 chrome의 개발자 도구를 통해 확인한 모달입니다.

modal의 depth가 깊어지는 문제

단순히 detph가 깊어지는데 무슨 불편함이 있는지 궁금하실 수 있겠네요❗

modal의 depth에 의한 z-index 문제

위 예시를 보시면 DOM의 계층 구조에 의해 모달의 z-index에 문제가 생긴 경우입니다.

import styled from "styled-components";

function PortalExample() {
  const Title = styled.h1`
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;

    background-color: #fff;
  `;

  return <Title>Portal 예시입니다!</Title>;
}

function App() {
  const Container = styled.div`
    position: relative;

    width: 100vw;
    height: 100vh;
  `;

  const Background = styled.div`
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    width: 100%;
    height: 100%;

    background-color: #000;
  `;

  return (
    <Container>
      React Portal Example
      <Background />
      <PortalExample />
    </Container>
  );
}

export default App;

계층 구조에 의한 z-index의 불편함

h1과 div의 z-index가 1로 같은데, 계층 구조에 의해 h1이 안 보이네요.

h1을 상위 계층으로 끌어올리면 어떻게 될까요

상위 계층으로 h1을 올려 z-index를 해결

상위 계층으로 끌어올리니 z-index 문제가 해결되었네요❗

상위 계층으로 요소를 끌어올린다고 z-index가 더 작아도 되는 것은 아닙니다.

하지만 z-index 문제를 우회하거나 이벤트 버블링을 제어하는 등 어느 정도 유리한 점은 있겠죠

React Portal을 선택한 이유

React로 프로젝트를 진행하다 보면 부모 DOM 계층구조를 무시하고 다른 DOM 노드에 컴포넌트를 렌더링해야 할 때가 있습니다. 제 경우에는 모달을 body 하위에 렌더링 하기 위해 React Portal을 선택했습니다.

React Portal이란?

React Portal은 React 컴포넌트를 DOM 트리의 다른 위치에 렌더링 할 수 있도록 해주는 기능입니다. 일반적인 React 컴포넌트는 부모 컴포넌트의 DOM 트리에 렌더링 되지만, Portal을 사용하면 부모 DOM 트리 외부에 컴포넌트를 렌더링 할 수 있습니다.

React Portal 사용법

createPortal(children, domNode)

: createPortal을 호출하여 일부 JSX와 렌더링할 DOM 노드를 전달합니다.

import { createPortal } from 'react-dom';

{createPortal(
    <p>This child is placed in the document body.</p>,
    document.body
)}

children : 렌더링할 React 노드 (React 엘리먼트, 문자열, 숫자 등).
domNode : 렌더링 할 DOM 노드

이제 Modal을 만들고 React Portal을 사용해 보겠습니다!

Modal 컴포넌트 생성

import { createPortal } from "react-dom";
import styled from "styled-components";

function Modal({ children }) {
  const Modal = styled.div`
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 100;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
  `;

  const ModalOverlay = styled.div`
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.5);
  `;

  const ModalContent = styled.div`
    overflow: hidden;
    position: relative;
    z-index: 1;

    max-width: 1000px;
    width: 80%;
    max-height: 80%;
    height: fit-content;

    padding: 20px;

    border-radius: 2rem;
    background-color: #fff;
  `;

  return createPortal(
    <Modal>
      <ModalOverlay />
      <ModalContent>{children}</ModalContent>
    </Modal>,
    document.body
  );
}
export default Modal;

Modal 컴포넌트를 App 컴포넌트에서 import 해 사용해 보겠습니다.

어떤 결과가 나올까요

function App() {
  const Container = styled.div`
    position: relative;

    width: 100vw;
    height: 100vh;
  `;

  return (
    <Container>
      React Portal Example
      <Modal>모달 컴포넌트</Modal>
    </Container>
  );
}

모달 컴포넌트

Modal 컴포넌트가 body 하위에 잘 렌더링 되었네요.

모달이 렌더링 되는 것을 확인했으니, 열고 닫는 기능도 추가해 보겠습니다.

모달은 자주 사용하는 컴포넌트이다 보니 커스텀 훅으로 만들어 볼게요!

useModal 커스텀 훅 생성

import { useState } from "react";

function useModal() {
  const [isOpen, setIsOpen] = useState(false); // 모달의 열고 닫힘을 관리하기 위한 state

  const openModal = () => setIsOpen(true); // 모달 열기
  const closeModal = () => setIsOpen(false); // 모달 닫기

  return {
    isOpen,
    openModal,
    closeModal,
  };
}

export default useModal;

useModal 커스텀 훅을 만들었으니, Modal에 적용해야겠죠

import { createPortal } from "react-dom";
import styled from "styled-components";

function Modal({ children, isOpen, closeModal }) {
  {/* 스타일은 생략 하겠습니다. */}

  if (!isOpen) return null; // isOpen이 false인 경우 null을 리턴, 모달 렌더링 X

  return createPortal(
    <Modal>
      <ModalOverlay onClick={closeModal} /> // Dim 처리 된 영역을 클리하면 모달이 닫히도록 클릭 이벤트 추가
      <ModalContent>{children}</ModalContent>
    </Modal>,
    document.body
  );
}
export default Modal;

function App() {
  const { isOpen, openModal, closeModal } = useModal();

  {/* 스타일 생략 */}

  return (
    <Container>
      <button type='button' onClick={openModal}>
        모달 열기
      </button>
      <Modal isOpen={isOpen} closeModal={closeModal}>
        모달 컴포넌트
      </Modal>
    </Container>
  );
}

export default App;

useModal 커스텀 훅 적용 화면

모달을 열고 닫는 기능이 잘 동작하네요!

앞으로 진행하는 프로젝트에서 유용하게 사용할 수 있을 것 같습니다!

React Portal을 사용해 보고 느낀 점

유연한 DOM 구조 : DOM 계층을 벗어나 렌더링이 가능해 UI 구현이 매우 편리하다.
CSS 스타일 충돌 최소화 : 부모 컴포넌트의 스타일 영향을 받지 않아 독립적인 디자인이 가능해 편리하다.
학습 곡선이 낮음 : React에서 기본으로 제공하는 기능이고, API가 간단해서 처음 사용해도 쉽게 적응할 수 있었다.

[React] Emotion - React 컴포넌트 스타일링

Emotion Emotion은 리액트에서 스타일을 관리하기 위한 CSS-in-JS 라이브러리로, 자바스크립트 코드 내에서 직접 CSS를 작성하고 적용할 수 있게 해 줍니다. Emotion 외에도 Styled-Components가 주로 사용됩

dev-hpk.tistory.com

[JS] finally 이해하기

자바스크립트에서 try - catch - finally 구문은 예외 처리를 위한 강력한 도구입니다. 이 구문에서 finally 블록은 예외 발생 여부와 관계없이 항상 실행되는 코드 블록으로, 주로 리소스 정리나 마무

dev-hpk.tistory.com

[React] Emotion - React 컴포넌트 스타일링

dev-hpk — Mon, 6 Jan 2025 23:25:18 +0900

Emotion

Emotion은 리액트에서 스타일을 관리하기 위한 CSS-in-JS 라이브러리로, 자바스크립트 코드 내에서 직접 CSS를 작성하고 적용할 수 있게 해 줍니다. Emotion 외에도 Styled-Components가 주로 사용됩니다.

2024 css-in-js 사용 추세

2024 css-in-js 사용 추세

지난 2년간 npm 다운로드 기록

지난 2년간 npm 라이브러리 다운로드 기록

Styled-Components 대신 Emotion을 선택한 이유

Emotion을 선택한 첫 번째 이유는 styled-components는 이전 미션과 프로젝트를 통해 많이 경험해 봤기 때문에 새로운 라이브러리를 경험해 보고 싶어서입니다. 트렌드를 따라가는 것도 좋지만 여러 라이브러리를 사용해 보면 왜 특정 라이브러리가 많이 사용되는지 비교해 볼 수 있을 것 같습니다

두 번째 이유는 자주 참조하는 toss에서 Emotion을 주 기술로 사용하고 있다는 점입니다. Emotion을 활용해봄으로써 실제 기업에서 사용되는 기술을 배우고, 그 효율성이나 장점들을 직접 경험할 수 있는 좋은 기회라고 생각했습니다.

위 내용은 개인적인 이유이니, Emotion을 사용했을 때 장점도 알아봐야겠죠?

Emotion의 장점

동적 스타일링 지원 : 컴포넌트의 props나 state에 따라 스타일을 동적으로 변경할 수 있어, 다양한 상태에 따른 스타일링이 가능합니다.
서버 사이드 렌더링(SSR) 지원 : Emotion은 Next.js와 같은 서버 사이드 렌더링 환경에서 별도의 설정 없이 동작해 SSR을 구현할 때 편리합니다.
작은 번들 크기 : Emotion은 Styled-Components에 비해 번들 크기가 작아, 애플리케이션의 로딩 속도를 향상할 수 있습니다.

styled-components 번들 크기

emotion 번들 크기

이제 프로젝트에 emotion을 적용해 보겠습니다❗

✨Emotion 설치 및 import

npm install @emotion/react @emotion/styled

설치가 완료되면 아래와 같이 import 해서 사용할 수 있습니다.

import { css } from '@emotion/react';
import styled from '@emotion/styled';

import 까지 끝났으니 이제 emotion/react와 emotion/styled를 사용하는 방법을 각각 예시로 확인해 보겠습니다

@emotion/react 사용 예제

@emotion/react를 사용하여 스타일을 정의하고 css prop을 사용하여 리액트 컴포넌트에 적용하는 방식입니다.

toss github을 확인해보니 이 방법을 채택했네요!

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

function App() {
  return (
    <div
      css={css`
        background-color: #000000;
        padding: 20px;
        border-radius: 8px;
      `}
    >
      <h1 
      	css={css`
      	  color: #ffffff;
          font-size: 30px;
          font-weight: bold;
      	`}>
      	Emotion React!
      </h1>
    </div>
  );
}

export default App;

/** @jsxImportSource @emotion/react */ 는 jsx 파일이 css prop을 읽을 수 있게 하기 위해 선언합니다.
css prop을 사용하여 인라인으로 스타일을 정의하고 HTML 요소에 바로 적용합니다.
각 요소마다 css prop을 사용해 스타일을 개별적으로 지정할 수 있습니다.

@emotion/styled 사용 예제

@emotion/styled는 styled-components와 비슷한 방식으로 리액트 컴포넌트를 스타일링할 수 있게 해주는 API입니다. styled 함수는 스타일링 된 컴포넌트를 반환하고, 이 컴포넌트를 JSX에서 사용할 수 있습니다. 이는 리액트의 컴포넌트와 스타일을 결합하는 선언적인 방식입니다.

import styled from '@emotion/styled';

const Wrapper = styled.div`
  background-color: lightblue;
  padding: 20px;
  border-radius: 8px;
`;

const Title = styled.h1`
  color: #ffffff;
  font-size: 30px;
  font-weight: bold;
`;

function App() {
  return (
    <Wrapper>
      <Title>Emotion Styled!</Title>
    </Wrapper>
  );
}

export default App;

styled.div와 styled.h1을 사용하여 스타일링 된 Wrapper와 Title 컴포넌트를 생성합니다.
styled를 사용하면 해당 컴포넌트를 재사용 가능하고 선언적으로 스타일링할 수 있습니다.

두 방법 모두 동적 스타일링이 가능하고, 애플리케이션의 요구사항에 맞는 스타일링 방식을 선택하시면 될 것 같네요

저는 Styled-Components와 유사한 점과 스타일링된 컴포넌트를 생성하고 여러 곳에서 재사용할 수 있다는 점에서 @emotion/styled 방식을 선택했습니다!

프로젝트에 적용해 보니 컴포넌트를 재사용할 수 있고 동적으로 스타일링할 수 있다는 점에서 너무 만족스러웠어요.

@emotion/styled 예시: 동적 스타일링

import styled from '@emotion/styled';
import { useState } from 'react';

// styled-components로 테마에 따라 스타일 변경
const Container = styled.div<{ darkMode: boolean }>`
  background-color: ${(props) => (props.darkMode ? '#000' : '#fff')};
  color: ${(props) => (props.darkMode ? '#fff' : '#000')};
  padding: 20px;
  border-radius: 8px;
  transition: background-color 0.3s, color 0.3s;
`;

const Button = styled.button`
  background-color: blue;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 4px;

  &:hover {
    background-color: green;
  }
`;

function App() {
  const [darkMode, setDarkMode] = useState(false);

  return (
    <Container darkMode={darkMode}>
      <h1>{darkMode ? 'Dark Mode' : 'Light Mode'}</h1>
      <Button onClick={() => setDarkMode(!darkMode)}>Toggle Theme</Button>
    </Container>
  );
}

export default App;

Container는 darkMode prop을 사용하여 스타일을 동적으로 변경합니다. darkMode가 true일 때 검정 배경색을, false일 때 하얀 배경색을 적용합니다.
Button 컴포넌트는 클릭 시 darkMode 상태를 토글하여, 전체 UI의 테마를 변경합니다.

@emotion/styled 예시: 재사용 가능한 컴포넌트

import styled from '@emotion/styled';

// 스타일링된 Button 컴포넌트 생성
const Button = styled.button<{ primary?: boolean }>`
  background-color: ${(props) => (props.primary ? 'blue' : 'gray')};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;

  &:hover {
    background-color: ${(props) => (props.primary ? 'darkblue' : 'darkgray')};
  }
`;

function App() {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
}

export default App;

Button 컴포넌트는 styled.button을 사용하여 버튼 스타일을 정의합니다.
primary prop을 통해 버튼의 배경색을 동적으로 변경할 수 있습니다.
primary prop이 true이면 파란색 배경, false이면 회색 배경이 적용됩니다.
@emotion/styled를 사용하여 컴포넌트를 정의하고, 이 컴포넌트를 여러 곳에서 재사용할 수 있습니다.

Emotion을 사용해보고 느낀 점

Emotion을 사용해 보면서 단점을 딱히 느끼지 못했습니다. 오히려 좋은 점이 훨씬 많았는데요, 간단하게 정리해 보겠습니다.

props와 state를 이용한 동적 스타일링이 가능해 편리하다.
scss 문법을 사용할 수 있어 편리하다.
scss 문법에 js 함수, 조건문을 활용할 수 있어 편리하다.
전역 스타일링과 테마 관리 기능을 제공해 다크 모드나 사용자 정의 스타일을 구현하는데 편리하다.

Emotion을 어떻게 사용했는지 궁금하신 분들을 위해 아래 제 github의 Design-System 레포지토리를 남겨두겠습니다.

부족하지만 참고해 보시고, 피드백도 남겨주신다면 감사하겠습니다

design-system/src/components at develop · hpk5802/design-system

Contribute to hpk5802/design-system development by creating an account on GitHub.

github.com

[React] 리액트 라이프사이클(Lifecycle)과 useEffect

React는 컴포넌트 기반의 라이브러리로, 모든 컴포넌트는 생명주기(Lifecycle)를 가집니다. 생명주기는 컴포넌트가 생성, 업데이트, 제거되는 과정을 의미하며 이를 활용해 컴포넌트의 특정 시점에

dev-hpk.tistory.com

[React] React Hook Form 라이브러리로 Form 간편하게 관리하기

React 애플리케이션에서 폼 관리는 매우 빈번한 작업입니다. React State를 이용해 폼 상태를 관리하고, 유효성을 검증하며, 성능을 최적화하는 것은 번거로울 수 있습니다. React Hook Form은 이러한 작

dev-hpk.tistory.com

[JS] finally 이해하기

dev-hpk — Fri, 3 Jan 2025 18:30:31 +0900

자바스크립트에서 try - catch - finally 구문은 예외 처리를 위한 강력한 도구입니다. 이 구문에서 finally 블록은 예외 발생 여부와 관계없이 항상 실행되는 코드 블록으로, 주로 리소스 정리나 마무리 작업에 사용됩니다.

finally?

finally는 일반적으로 try나 catch 뒤에 붙으면서, try나 catch 문의 동작이 모두 완료되었을 때 무조건 실행되는 코드를 작성하기 위해 사용합니다. finally 블록은 선택 사항이기 때문에 생략하는 경우가 많습니다.

finally가 어떻게 동작하는지 간단하게 짚고 넘어가겠습니다.

지금부터 주목해야 할 점은 무조건 실행되는 코드입니다. 예시로 확인해보겠습니다.

예시 (1)

try {
  console.log('Try');
} catch(error) {
  console.log('Catch');
} finally {
  console.log('Finally');
}

Try
Finally

try 블록에서 에러가 발생하지 않았기 때문에, catch 블록은 실행하지 않고 finally 블록을 바로 실행하는 모습을 보여줍니다.

예시 (2)

try {
  console.log('Try');
  throw new Error();
} catch(error) {
  console.log('Catch');
} finally {
  console.log('Finally');
}

Try
Catch
Finally

try 블록에서 에러가 발생했기 때문에, catch 블럭을 실행하고 finally 블럭을 실행하는 모습을 보여줍니다.

finally 구문이 무조건 실행되긴 하지만, 여기까지 봐서는 아직 무조건 실행되는 코드에 대한 의문이 풀리지 않았죠?

궁금증을 해결하기 위해 try-catch-finally 구문을 함수에 넣어 실행해 보겠습니다.

함수에 try - catch - finally 구문 넣기

function test() {
  try {
    console.log('try');
  } catch(error) {
    console.log('catch');
  } finally {
    console.log('finally');
  }
}

test();

위 코드를 실행하면 어떤 결과가 나올까요❓

Try
Finally

위에서 봤던 예시 코드를 test라는 함수에 넣은 것이니 간단하죠

이제부터 finally의 무조건 실행되는 코드에 대한 내용을 직접 확인해 보겠습니다!

확인에 앞서 함수의 return 명령문에 대해서 간략하게 설명하겠습니다.

return 명령문
함수 실행을 종료하고, 주어진 값을 함수 호출 지점으로 반환합니다.
(출처: MDN return)

함수 실행을 종료하는 return 명령문이 있어도 finally 구문이 실행되는지 확인해 보겠습니다.

function test() {
  try {
    return 'try';
  } catch(error) {
    return 'error';
  } finally {
    return 'finally';
  }
}

console.log(test());

return 명령문이 함수 실행을 종료시킨다고 했으니 try가 반환될까요?

finally가 무조건 실행되는 코드라고 했으니 finally가 반환될까요?

어떤 결과가 출력될지 예상이 되시나요

아래 결과를 확인해 보시죠.

finally

try 블록에서 return 명령문에 의해 함수 실행을 종료하고 try를 반환해야 하는데, finally가 반환되었습니다.

여기서 의문이 생기죠. 왜 return 명령문이 있는데 함수 실행이 종료되지 않고 finally 구문이 실행되었을까요

아래 내용은 ECMAScript에 정의된 return 명령문 내용입니다.

A return statement causes a function to cease execution and, in most cases, returns a value to the caller. If
Expression is omitted, the return value is undefined. Otherwise, the return value is the value of Expression. A
return statement may not actually return a value to the caller depending on surrounding context. For example, in a try block, a return statement's Completion Record may be replaced with another Completion Record during evaluation of the finally block.

간단하게 요약하면 아래 내용과 같습니다.

return명령문은 주변 컨텍스트에 따라 호출자에게 실제로 값을 반환하지 않을 수 있습니다. 예를 들어, try 블록의 return 명령문의 Completion Record가 finally 블록의 return 명령문의 Completion Record으로 대체될 수 있습니다.

시작부터 강조했던 finally는 무조건 실행되는 코드가 검증되었네요!

여기서 한 가지 궁금증이 더 생겼습니다. finally 구문이 throw 문을 만나도 실행될까요

try - catch - finally 구문에 throw로 예외 발생시키기

확인에 앞서 throw에 대해서 간략하게 설명하겠습니다.

throw 문은 사용자 정의 예외를 발생(throw)할 수 있습니다. 예외가 발생하면 현재 함수의 실행이 중지되고 (throw 이후의 명령문은 실행되지 않습니다.), 제어 흐름은 콜스택의 첫 번째 catch 블록으로 전달됩니다. 호출자 함수 사이에 catch 블록이 없으면 프로그램이 종료됩니다.
(출처: MDN throw)

예외 처리 후 함수 실행을 종료하는 throw 명령문이 있어도 finally 구문이 실행되는지 확인해 보겠습니다.

function test() {
  try {
    throw new Error();
  } catch (e) {
    throw new Error();
  } finally {
    return 'finally';
  }
}

console.log(test());

throw 문이 함수 실행을 종료시킨다고 했으니 에러를 발생시키고 종료될까요?

finally가 무조건 실행되는 코드라고 했으니 finally가 반환될까요?

finally

catch 블록에서 throw 문이 실행되었지만 다음 catch 블록이 없어 프로그램이 종료되어야 하지만, finally가 반환되었습니다.

이로써 finally는 무조건 실행되는 코드라는 사실이 확인되었습니다!

그럼 finally를 어떻게 사용하면 좋을까요

finally 활용 예시

메모리 누수 방지 : 비동기 작업 후 생성된 임시 변수나 데이터 구조를 정리하거나, 동적으로 추가한 이벤트 리스너를 작업이 끝난 후 제거하여 메모리 누수를 방지할 수 있습니다.
네트워크 연결 종료 : 네트워크 요청을 수행한 후, 예외 발생 여부와 관계없이 연결을 종료하여 리소스를 정리하는 데 finally 블록을 활용할 수 있습니다.
외부 API 호출 후 상태 복원 : 외부 API를 호출하여 상태를 변경한 후, 예외 발생 여부와 관계없이 원래 상태로 복원해야 하는 경우에 finally 블록을 사용하여 상태 복원을 보장할 수 있습니다.

[Taskify] Trouble Shooting - 동적 페이지 라우팅

dev-hpk — Sat, 28 Dec 2024 14:56:15 +0900

문제 상황 : 동적 라우팅 ([id].tsx) 페이지에서 새로고침 하면 404 page로 이동한다.

새로고침 시 404 페이지 이동 이슈

문제 원인을 찾지 못해서 vercel 배포 환경 설정이 잘 못 되었는지 확인하기 위해 로컬에서도 빌드를 진행했습니다.

빌드 결과 폴더 구조

빌드 후 next/static 폴더의 리소스를 비교했지만 로컬과 vercel 모두 [id]로 동적 파일을 생성했습니다.

어디서부터 잘못된 걸까요.

해결 방법

팀 회의와 검색을 통해 문제 원인과 해결 방법 여러 개 찾아보았는데, 프로젝트에 바로 적용하기에는 어려운 부분들도 있어서 멘토님께 해당 이슈를 공유했습니다. 멘토님의 조언을 통해 해결 방법을 간추려 봤습니다.

getServerSideProps 선언해 SSR(Server Side Rendering)로 동작하도록 수정
- 실제로 SSR로 수정하진 않고, getServerSideProps를 사용함으로써 SSR로 동작하도록만 하는 편법이라고 하네요..
getServerSideProps 실제로 사용해서 SSR로 수정하기
- 서버에서 페이지를 렌더링하고 HTMl을 브라우저에 전달하는 정석적인 방법❗
getStaticPaths 선언
- getStaticPaths를 선언하면 [id].tsx 형태의 동적 라우팅 페이지를 빌드 시에 static하게 생성한다고 합니다.
```
export async function getStaticPaths() {
    return {
        paths:[
            {
                params:{postId: '1'},
            },
            {
                params:{postId: '2'},
            },
            {
                params:{postId: '3'},
            },
        ],
        fallback: false,
    }
}
```
  빌드 결과
- 프로젝트 특성상 dashboard의 수가 매우 많습니다. 따라서 빌드 시에 html과 json 파일이 dashboard의 수만큼 많이 생기기 때문에 비효율적이라고 하네요..
동적 페이지 라우팅(/dashboard/[id].tsx)을 사용하지 않고 router.query()를 이용해 dashboardId를 받아 데이터를 요청한다. (참고)
- Next.js에서 제공하는 동적 페이지 라우팅을 일부로 사용하지 않는 방법은 Next.js를 선택한 이유를 퇴색시키는 방법인 것 같아 최후의 방법으로 미루기로 했습니다.

✨ 최종 해결 과정

해당 이슈를 해결하기 위해 pr을 올려 배포 테스트를 하는 방법보다 로컬에서 적용 후 빌드해 확인하는 방법이 효율적일 것 같아 각자 로컬에서 확인하는 방법을 선택했습니다.

일단 최신 상태를 반영하기 위해 dev 브랜치로 이동후 pull을 실행 후 빌드를 진행했습니다.

그런데 이게 뭐죠..

빌드 에러

이전에 빌드된 서버를 실행할 때는 보이지 않던 에러가 보입니다.

output: export❓❓

next.config.ts에서 output: 'export'는 Next.js 애플리케이션을 정적 HTML 파일로 빌드하도록 설정합니다. 이 설정을 적용하면 모든 페이지를 정적으로 렌더링 하여 파일 시스템에 HTML, CSS, JS 형태로 저장합니다. 정적 배포가 가능한 CDN이나 정적 사이트 호스팅 서비스(Netlify, Vercel 등)에서 사용할 수 있도록 만들어주는 설정입니다.

확인해 보니 팀장님께서 Netlify와 Vercel에 배포를 하기 위해 추가한 설정이라고 하네요.

정적 HTML 파일로 빌드할 경우, 동적 라우팅 페이지는 정적 파일로 생성되지 않으므로 서버 측에서 해당 경로를 처리할 수 없어 새로고침 시 404 에러가 발생했던 것이었습니다.

next.config.ts 파일에서 output: export 옵션을 삭제 후 확인해 보겠습니다!

에러 해결

프로젝트 발표가 얼마 남지 않았습니다!

이번 프로젝트는 팀원들과의 소통도 원활했고, 개발도 잘 진행되어서 정말 뿌듯합니다.
발표도 성공적으로 마무리해서 좋은 결과로 이어졌으면 좋겠네요

[Taskify] 1차 배포 테스트(2) - 사용자 편의성 개선

오늘은 저번 이슈 해결에 이어서 사용자 편의성 개선 작업을 해보려고 합니다. 개선 사항 : select 메뉴 버튼이나 옵션 바깥 부분을 클릭했을 때 select 메뉴가 닫히면 좋을 것 같다.멘토님께 피

dev-hpk.tistory.com

[Taskify] 1차 배포 테스트 - Trouble shooting

멘토님과 1차 배포 테스트를 진행했습니다.버그를 하나씩 찾아내시는데 제가 작업한 페이지도 버그가 많네요 테스트하면서 나온 이슈들을 정리해 보면 아래와 같습니다.버그를 하나씩 살펴

dev-hpk.tistory.com

[React] 리액트 라이프사이클(Lifecycle)과 useEffect

dev-hpk — Thu, 26 Dec 2024 18:43:02 +0900

React는 컴포넌트 기반의 라이브러리로, 모든 컴포넌트는 생명주기(Lifecycle)를 가집니다. 생명주기는 컴포넌트가 생성, 업데이트, 제거되는 과정을 의미하며 이를 활용해 컴포넌트의 특정 시점에 원하는 동작을 정의할 수 있습니다.

목차
1. 리액트의 라이프사이클 단계

2. 함수형 컴포넌트와 useEffect

3. useEffect 사용 시 주의할 점

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

1. 리액트의 라이프사이클 단계

React 라이프사이클

위 사진은 Class 방식의 라이프 사이클입니다.

함수형 방식에서는 컴포넌트의 라이프사이클은 크게 세 가지로 나눌 수 있습니다.

컴포넌트 라이프사이클

1. 마운트 (Mount)

정의: 컴포넌트가 생성되고 DOM에 추가되는 단계
주요 메서드: componentDidMount (클래스 컴포넌트 기준)
주요 작업: API 호출, 이벤트 리스너 등록 등 초기화 작업.

2. 업데이트 (Update)

정의: 컴포넌트의 상태(state)나 속성(props)이 변경되어 다시 렌더링 되는 단계
주요 메서드: componentDidUpdate (클래스 컴포넌트 기준)
- componentDidUpdate 메서드는 첫 번째 렌더링에서는 호출되지 않습니다.
주요 작업: 상태 변화에 따른 DOM 조작 또는 부수 효과 실행

3. 언마운트 (UnMount)

정의: 컴포넌트가 DOM에서 제거되는 단계
주요 메서드: componentWillUnmount (클래스 컴포넌트 기준)
주요 작업: 이벤트 리스너 제거, 타이머 정리 등 클린업 작업

2. 함수형 컴포넌트와 useEffect

React 16.8부터 도입된 Hooks는 함수형 컴포넌트에서도 상태 관리와 라이프사이클 관리가 가능하게 합니다.

useEffect는 클래스 컴포넌트의 라이프사이클 메서드(componentDidMount, componentDidUpdate, componentWillUnmount)를 통합한 역할을 합니다.

리액트에서 사이드 이팩트(side effect) 는 외부에서 데이터나 상태를 변경하는 것인데, 이를 수행하는 것이 바로 useEffect 훅입니다. 즉, 리액트에서 useEffect는 사이트 이팩트(side effect)를 실행하고 싶을 때 사용하는 함수라고 할 수 있습니다.

useEffect 기본 구조

useEffect(() => {
  // 사이드 이펙트
  return () => {
    // 클린업 코드
  };
}, [dependency]);

첫 번째 인자: 사이드 이팩트(side effect)를 실행할 함수(callback) [필수]
두 번째 인자: 의존성 배열(dependency array) [필수]
- 배열 안의 값이 변경될 때만 효과(callback)가 실행됩니다.
클린업 코드: useEffect에서 반환(return)하는 함수입니다. [옵션]
- 컴포넌트가 언마운트 될 때 실행됩니다.
- 장점: 메모리 누수 방지, 성능 향상, 안정성 향상

의존성 배열에 따른 동작

빈 배열 ([])

컴포넌트가 처음 마운트될 때만 실행됩니다.
주로 API 호출, 초기화 작업에 사용합니다.

useEffect(() => {
  console.log("컴포넌트 마운트");
}, []);

dependencies에 값이 있는 배열 ([value])

dependencies 배열에 포함된 값이 변경될 때 실행됩니다.
특정 상태나 속성 변화에 따른 작업을 처리합니다.

useEffect(() => {
  console.log(`${value} 상태가 변경되어 실행`);
}, [value]);

배열 생략

컴포넌트가 렌더링 될 때마다 실행됩니다.
일반적으로 의도하지 않은 성능 문제를 유발할 수 있어 주의가 필요합니다.

useEffect(() => {
  console.log("렌더링");
});

3. useEffect 사용 시 주의할 점

무한 루프 방지: 의존성 배열을 정확히 설정하지 않으면 무한 렌더링이 발생할 수 있습니다. 특히 HTTP Method와 같은 요청이 반복되면 서버에 과부하를 일으킬 수 있어 조심해야 합니다.
클린업 누락 방지: 컴포넌트가 언마운트 되거나 의존성이 변경될 때 클린업 함수를 실행하지 않으면 메모리 누수가 발생할 수 있습니다.

비동기 작업 처리: 비동기 작업은 async/await를 직접 useEffect 콜백에 사용할 수 없으므로 내부 함수로 분리해야 합니다.

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch("https://api.example.com/");
    const data = await response.json();
    console.log(data);
  };

  fetchData();
}, []);

[Taskify] 1차 배포 테스트(2) - 사용자 편의성 개선

dev-hpk — Thu, 26 Dec 2024 17:49:18 +0900

오늘은 저번 이슈 해결에 이어서 사용자 편의성 개선 작업을 해보려고 합니다.

개선 사항 : select 메뉴 버튼이나 옵션 바깥 부분을 클릭했을 때 select 메뉴가 닫히면 좋을 것 같다.

멘토님께 피드백을 받고 구글, 네이버 같은 사이트들을 확인해 봤는데 모두 select 메뉴 바깥 부분을 클릭하면 닫히도록 동작하네요

수정 코드 및 결과

/* import, type 등 생략... */

function Dropdown({
  children,
  menus,
  onMenuClick,
}: PropsWithChildren<DropdownProps>) {
  const { isOpen, toggleDropdown, closeDropdown } = useDropdown();
  const ref = useRef<HTMLDivElement | null>();

  const handleMenuClick = (value: string) => {
    onMenuClick(value);
    closeDropdown();
  };

  useEffect(() => {
    const handleClickOutside = (e: Event) => {
      const target = e.target as HTMLDivElement;
       // ref(dropdown 컴포넌트) 외부 클릭 시 closeDropdown 호출해 닫기
      if (ref.current && !ref.current.contains(target)) closeDropdown();
    };

    document.addEventListener('click', handleClickOutside); // 클릭 이벤트 리스너 등록

    // 컴포넌트 언마운트 시 이벤트 리스너 제거하도록 cleanup 함수 등록
    return () => {
      document.removeEventListener('click', handleClickOutside); 
    };
  }, [ref]);

  return (
    <div
      ref={ref} // 드롭다운 컴포넌트를 ref로 참조
      className={styles.dropdown}
      onClick={(e) => e.stopPropagation()} // 드롭다운 내부 클릭 시 이벤트 전파 방지
    >
      <button
        type="button"
        className={styles['btn-dropdown']}
        onClick={toggleDropdown}
      >
        {children}
      </button>
      {isOpen && (
        <ul className={styles['dropdown-menus']}>
          {menus.map(({ label, value }) => (
            <li key={`btn_${value}`}>
              <button
                type="button"
                className={styles['dropdown-menu']}
                onClick={() => handleMenuClick(value)}
              >
                {label}
              </button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default Dropdown;

드롭다운 외부 클릭 시 닫힘

개선 사항 : 새로고침하거나 화면에 진입할 때 깜빡거리는 이슈

검색해 보니 useEffect는 컴포넌트들이 render와 paint 된 후 실행되고 비동기적(asynchronous)으로 실행된다고 합니다. 즉 paint 된 후 실행되기 때문에 useEffect 내부에 dom에 영향을 주는 코드가 있을 경우 사용자 입장에서는 화면의 깜빡임을 보게 된다고 하네요.

렌더링 시 화면 깜빡이는 이슈

❓ 해결 방법

1. useEffect 대신 useLayoutEffect 사용

useEffect와 useLayoutEffect는 effect가 호출되는 타이밍이 다르고 하네요.

useEffect
1. 렌더링 유발(상태 변경 또는 상위 렌더링)
2. React가 컴포넌트 렌더링
3. 화면이 시각적으로 업데이트(paint)
4. useEffect 실행
useLayoutEffect
1. 렌더링 유발(상태 변경 또는 상위 렌더링)
2. React가 컴포넌트 렌더링
3. useLayoutEffect 실행, React는 완료될 때까지 기다림
4. 화면이 시각적으로 업데이트(paint)

2. Skeleton UI 적용

서버에서 데이터를 가져오는 동안 빈 화면이 노출되면 사용자는 콘텐츠를 기다리다가 쉽게 지치고 지루함을 느껴 사이트를 떠나게 되겠죠

Skeleton UI는 실제 콘텐츠가 들어가게 될 자리를 잠시 대신할 빈 껍데기입니다. 일반적인 패턴은 흰색 배경과 반짝이는 CSS 애니메이션을 적용한다고 하네요.

Skeleton UI

저희 팀은 회의 끝에 airbnb를 참고해 Skeleton UI를 적용하기로 했습니다.

코드 및 결과

UI 구조와 css는 기존 컬럼과 카드의 코드를 사용했기 때문에 생략했습니다.

const [columns, setColumns] = useState<ColumnType[] | null>(null);

const fetchColumns = useCallback(async () => {
    const dashboardId = Number(query.id);

    if (!dashboardId) return;

    try {
      const { data, result } = await getColumns({
        teamId: '11-6',
        dashboardId,
      });

      if (result === 'SUCCESS') {
        setColumns(data);
      } else {
        setColumns([]);
      }
    } catch (error) {
      console.error('컬럼 조회 실패 : ', error);
      setColumns([]);
    }
  }, [query.id]);

{
  columns === null
  ? Array.from({ length: 4 }).map((_, index) => (
      <SkeletonColumn key={`skeleton_${index}`} />
  ))
  : columns.map(({ id, title }) => (
      <Column
        key={`column_${id}`}
        columnId={id}
        columnTitle={title}
        setColumns={setColumns}
      />
    ))
}

const fetchCards = useCallback(
    async ({
      cursor,
      size = 4,
      reset = false,
    }: {
      cursor?: number;
      size?: number;
      reset?: boolean;
    } = {}) => {
      if (isLoading) return;
      setIsLoading(true);
      try {
        const response = await getCards({
          teamId: '11-6',
          size,
          columnId: targetId,
          cursorId: cursor,
        });

        const { cards, totalCount, cursorId } = response;

        setColumnData((prev) => ({
          cards: reset ? cards : [...prev.cards, ...cards],
          totalCount,
          cursorId,
        }));
      } catch (error) {
        console.error('컬럼 조회 실패 : ', error);
      } finally {
        setIsLoading(false);
      }
    },
    [targetId],
  );

{
  isLoading
  ? Array.from({ length: 4 }).map((_, index) => (
      <SkeletonCard key={`skeleton_${index}`} />
    ))
  : columnData.cards.map(({
      imageUrl,
      id,
      title,
      tags,
      dueDate,
      assignee: { nickname, profileImageUrl },
    }) => (
      <Card
        key={`card_${id}`}
        imageUrl={imageUrl}
        id={id}
        title={title}
        tags={tags}
        dueDate={dueDate}
        nickname={nickname}
        profileImage={profileImageUrl}
        columnTitle={columnTitle}
        columnId={columnId}
        setColumnData={setColumnData}
        onUpdate={handleUpdate}
      />
    ),
 )}

Skeleton UI 관련 CSS

// SkeletonColumn.module.css
.title-text,
.column-size,
.btn-edit-column,
.btn-add {
  background-color: var(--gray-medium);
  animation: loading 2s infinite linear;
}

@keyframes loading {
  0% {
    opacity: 0.99;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.99;
  }
}

// SkeletonCard.module.css
.card-image,
.card-title,
.card-tags,
.icon-calendar,
.date,
.badge {
  background-color: var(--gray-medium);
  animation: loading 2s infinite linear;
}

@keyframes loading {
  0% {
    opacity: 0.99;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.99;
  }
}

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

돌이켜보면 저도 사이트에 접속했을 때 데이터가 늦게 로드되어 빈 화면이 보이면 바로 닫아버린 경험이 많았습니다.

이번 작업을 통해 사용자 입장에서 "어떻게 하면 더 자연스럽고 편리하게 느껴질까?"를 깊이 고민하게 되었고, 이를 통해 사용자 경험(UX)이 개발에서 얼마나 중요한지 다시금 깨달을 수 있었습니다

[Taskify] 1차 배포 테스트 - Trouble shooting

dev-hpk.tistory.com

[Taskify] Tag 이슈 수정

카드의 태그 관련 이슈가 발생했습니다.카드 생성 POST API에 태그 색상과 관련된 속성이 없어서 생긴 문제인데 확인해 보겠습니다. 문제 상황화면이 리렌더링 될 때마다 태그의 색상이 랜덤

dev-hpk.tistory.com

[Taskify] 1차 배포 테스트 - Trouble shooting

dev-hpk — Tue, 24 Dec 2024 20:06:27 +0900

멘토님과 1차 배포 테스트를 진행했습니다. 버그를 하나씩 찾아내시는데 제가 작업한 페이지도 버그가 많네요

테스트하면서 나온 이슈들을 정리해 보면 아래와 같습니다.

이슈

버그를 하나씩 살펴보면서 수정해 보겠습니다!

문제 상황 : Todo 상세 모달의 타이틀이 길어지면 메뉴를 버튼 영역을 침범하고 UI가 깨짐

UI 깨짐 이슈

타이틀이 길어지는 경우 버튼 영역을 침범할 뿐 아니라, UI 적으로도 모달 헤더가 너무 길어 보여서 어색해 보입니다.

모달 타이틀이 저렇게 긴 경우가 있을까 싶지만... 모든 상황을 고려해야겠죠

Figma, 기획서에 타이틀이 길어지는 경우에 관련된 정의가 없어 고민해 본 결과 타이틀을 1줄만 노출하고 길어지면 말 줄임(...) 처리하는 게 가장 자연스러운 것 같습니다.

팀원분들도 모두 말 줄임 처리가 좋다고 하셔서 바로 수정해 보겠습니다!

수정 코드 및 결과

.title {
  /*기존 스타일 생략*/
  margin-right: 84px; // 버튼 영역(84px)만큼 margin 적용

  /* 텍스트가 타이틀 너비를 넘어가면 말 줄임(...) 처리 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

UI 깨짐 이슈 수정

문제 상황 : 칼럼 타이틀이 길어지면 영역 밖으로 벗어남

UI 깨짐 이슈

해당 이슈도 모달 타이틀과 같은 맥락이라 말 줄임(...) 처리하기로 했습니다.

수정하려고 확대해서 자세히 보는데 타이틀 앞에 점(dot)도 위치가 가운데가 아니네요...

수정 코드 및 결과

.column-title {
  /*기존 스타일 생략*/
  /* 30px = 컬럼 수정 버튼(24px) + 여백(6px) */
  width: calc(100% - 30px);
}

.column-title .title-text {
  /*기존 스타일 생략*/
  /* 텍스트가 타이틀 너비를 넘어가면 말 줄임(...) 처리 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

UI 깨짐 이슈 수정

문제 상황 : Chip 공통 컴포넌트 사용하는 영역(할 일 카드, 할 일 수정 모달) UI 깨짐 수정

UI 깨짐 이슈

처음 공통 컴포넌트를 설계할 때 저렇게 컴포넌트의 사이즈는 페이지에서 커스텀하도록 만들었습니다.

컴포넌트를 만들고 사용 방법을 문서화하기보다는 주석을 남기고, 예시 버튼들이 있는 테스트 페이지를 만들었습니다.

이 방법이 더 효율적일 거라고 생각했는데, 주석을 읽지 않고 복붙 하는 상황이 생겨서 이슈가 발생했네요.. 수정해 보겠습니다

수정 코드 및 결과

/* 할 일 카드 모달 Chip 수정 */
.status .status-text {
  /*기존 스타일 생략*/
  max-width: 80px;

  /* 텍스트가 타이틀 너비를 넘어가면 말 줄임(...) 처리 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 할 일 수정 모달 Chip 수정 */
.status {
  overflow: hidden;
}

.status-content {
  /* 30px = 옵션 체크 아이콘(22px) + 여백(8px) */
  width: calc(100% - 30px);
}

.status-select-text { 
  /* 텍스트가 타이틀 너비를 넘어가면 말 줄임(...) 처리 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

UI 깨짐 이슈 수정

느낀 점

테스트 후 발견된 버그와 이슈를 수정하면서 개발 단계에서 더욱 꼼꼼하고 세심하게 작업해야 한다는 점을 다시 한번 느꼈습니다.

이슈 대부분이 스타일 관련 내용인 걸 보니, 마크업과 CSS를 특히 더 신경 써서 작업해야 할 것 같습니다..

[Taskify] Tag 이슈 수정

dev-hpk.tistory.com

[Taskify] 이미지 확장자 제한 추가

오전 스크럼 회의 때 카드 이미지에 대한 이슈가 있었습니다. 담당 팀원분이 바쁜 관계로 제가 수정하기로 했습니다. 제가 작성한 로직은 아니지만, 서로서로 돕는 게 팀이죠 문제 상

dev-hpk.tistory.com

주소창에 www.google.com을 검색하면 일어나는 일

dev-hpk — Mon, 23 Dec 2024 16:27:51 +0900

도메인 입력 시 브라우저에 보여지는 과정

1. 입력한 URL 주소 중, 도메인 이름에 해당하는 google.com을 DNS 서버에서 검색합니다.

웹 브라우저는 DNS 서버에 검색하기 전에 캐싱된 DNS 기록을 통해 해당 도메인 주소와 대응하는 IP 주소를 확인합니다.
해당 도메인 이름에 맞는 IP 주소가 존재하면, DNS 서버에 도메인 이름에 해당하는 IP 주소를 요청하지 않고 캐싱된 IP 주소를 바로 반환합니다.
일치하는 주소가 없다면 DNS 서버에 도메인 이름에 해당하는 IP 주소를 요청합니다.

DNS 검색

2. DNS가 웹브라우저에게 찾는 사이트의 IP주소와 사용자가 입력한 URL 정보를 함께 전달합니다.

DNS query는 현재 DNS서버에 원하는 IP주소가 존재하지 않으면 다른 DNS 서버를 방문하는 과정을 반복해 IP주소를 찾습니다.
해당 도메인 이름에 맞는 IP주소로 변환하는 과정은 점(.)을 기준으로 계층적으로 구분하여 구성됩니다.
탐색 순서는 뒤에서부터 해당 도메인 이름에 맞는 지역 DNS를 탐색하며, root DNS 서버가 나올 때까지 거꾸로 탐색합니다.

DNS 탐색

3. 전달받은 IP주소를 이용해 웹 서버에게 해당 웹 사이트에 맞는 html문서를 요청합니다.

브라우저는 HTTP 프로토콜을 사용하여 요청 메시지를 생성하고 HTTP 요청 메시지는 TCP/IP 프로토콜을 사용하여 서버로 전송됩니다.

4. 서버는 response 메시지를 생성하여 다시 브라우저에게 데이터를 전송합니다.

5. 브라우저는 response를 받아 파싱하여 화면에 렌더링 합니다.

도메인 입력 시 브라우저 렌더링 과정

용어 정리

URL : URL(Uniform Resource Locator)은 통합 자원 지시자로 인터넷에서 특정 리소스(웹 페이지, 파일 등)를 찾기 위한 주소 체계입니다. URL을 통해 인터넷상의 모든 리소스를 요청할 수 있으며, HTTP, FTP 등의 자원 요청도 가능합니다. URL은 아래와 같은 요소로 구성됩니다.
- 프로토콜: 리소스를 어떻게 접근할지 정의 (예: http, https)
- 도메인 이름: 사람에게 읽기 쉬운 주소 (예: www.google.com)
- 경로(Path): 서버 내 특정 리소스 위치 (예: /search)
- 쿼리(Query): 추가 요청 데이터 (예: ?q=example)
- 포트 번호 (선택 사항): 통신할 서버의 포트 (예: :80)
DNS : 도메인 이름 시스템(DNS)은 사람이 읽을 수 있는 도메인 이름(https://www.google.com)을 IP 주소(142.250.185.14)로 변환하는 시스템입니다.
IP 주소 : IP 주소는 인터넷에 연결된 각 장치를 식별하는 고유 번호로 장치 간 통신을 위해 출발지와 목적지를 식별하기 위해 사용됩니다.
TCP : TCP (전송 제어 프로토콜)는 두 개의 호스트를 연결하고 데이터 스트림을 교환하게 해주는 중요한 네트워크 프로토콜로 데이터가 손실되거나 순서가 뒤바뀌지 않도록 보장합니다.
프로토콜 : 네트워크에서 데이터가 어떻게 전송되고 처리될지 규정하는 약속이나 규칙입니다. 종류로는 HTTP, HTTPS 등이 있습니다.
response : 서버가 브라우저(또는 클라이언트)의 요청(Request)을 처리한 후 반환하는 데이터입니다.
파싱 : 데이터를 읽고 분석하여 구조화된 형태로 변환하는 과정입니다. 브라우저가 서버에서 받은 데이터를 이해하고, 렌더링 하거나 추가 작업을 수행할 수 있도록 합니다.
- HTML 파싱 : HTML 문서를 읽고 DOM(Document Object Model)을 생성합니다.
- CSS 파싱 : CSS를 읽고 CSSOM(CSS Object Model)을 생성합니다.

[Taskify] Tag 이슈 수정

dev-hpk — Mon, 23 Dec 2024 14:59:21 +0900

카드의 태그 관련 이슈가 발생했습니다.

카드 생성 POST API에 태그 색상과 관련된 속성이 없어서 생긴 문제인데 확인해 보겠습니다.

문제 상황

화면이 리렌더링 될 때마다 태그의 색상이 랜덤 하게 변경됩니다.

문제 상황

카드를 생성하는 POST API에 태그 색상에 대한 옵션이 없어서 발생한 문제입니다.

처음 작업할 때 태그 컴포넌트가 렌더링 될 때 정해진 5개 색상 중 랜덤하게 설정되도록 만들었거든요...

const getTagColor = (styles: Record<string, string>): string => {
  if (!bgTag || bgTag.length === 0) return '';
  const idx = Math.floor(Math.random() * bgTag.length);
  return styles[bgTag[idx]];
};

function Chip({ children, chipType }: PropsWithChildren<ChipProps>) {
  const className = clsx(
    styles[chipType],
    chipType === 'tag' && getTagColor(styles),
  );

  return (
    <span className={className}>
      {children}
    </span>
  );
}

스크럼 회의 때 많은 논의를 했고 결론이 나진 않았지만, 다음과 같은 의견들이 나왔습니다.

태그의 배경 색상을 제거하자.
카드 정보를 Redux로 전역 관리하자.
CSS의 nth-child() 선택자로 태그의 순서에 따라 색상을 결정하자.

의견이 좁혀지지 않았고, 그 이유는 다음과 같았습니다.

태그의 배경 색상을 제거하면 기획 요건을 충족하지 못하니 기획서대로 구현하자.
카드 정보를 Redux로 전역 관리하는 것은 불필요한 리소스를 증가시키는 것 같다.
CSS의 nth-child() 선택자를 사용하면, 태그를 삭제하면 색상이 변경되어 일관성이 없는 것 같다.

해결 방법

현재 태그(Chip 컴포넌트)가 렌더링 될 때 랜덤으로 색상을 생성하는 유틸 함수를 이용하면 될 것 같다는 아이디어가 생각나서 팀원분들께 적용해 보겠다고 말씀드렸습니다

서버에 카드 생성(POST) 요청을 보낼 때 태그만 보내는 것이 아니라 태그에 색상을 추가해서 보내는 것입니다.

간단히 말하자면 태그를 생성하면 태그 문자열 뒤에 랜덤 한 색상을 추가하는 거죠!

Chip 컴포넌트

const getTagColor = (): string => {
  if (!bgTag || bgTag.length === 0) return '';
  const idx = Math.floor(Math.random() * bgTag.length);
  return bgTag[idx];
};

function Chip({ children, chipType, color }: PropsWithChildren<ChipProps>) {
  const className = clsx(styles[chipType], chipType === 'tag' && styles[color]);

  return (
    <span className={className}>
      {children}
    </span>
  );
}

기존 Chip 컴포넌트와 다르게 color를 props로 받아오게 수정했습니다.

태그(Chip 컴포넌트)를 렌더링 하는 페이지들도 수정해 보겠습니다.

Chip 컴포넌트 렌더링 페이지

const handleTagInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newTag = e.target.value.trim();
    const color = getTagColor();
    const coloredTag = `${newTag} ${color}`;

    if (!newTag || tags.includes(newTag)) return; // 빈 문자열 또는 중복 태그 방지
    onAddTag(coloredTag);
    e.target.value = '';
};

const coloredTag = `${newTag} ${color}` : 태그를 템플릿 리터럴(``)을 사용해 태그 색상 형식으로 tag 배열에 저장했습니다. tag 배열은 카드 생성(POST) 요청에 request body에 포함되어 전송됩니다.

{tags.map((tag) => {
    const [tagText, tagColor] = tag.split(' ');
	return (
    	<Chip key={`${cardId}_tag_${tag}`} chipType="tag" color={tagColor}>
            {tagText}
        </Chip>
    );
})}

const [tagText, tagColor] = tag.split(' ') : 서버에서 받은 tag 데이터를 공백을 기준으로 text와 color로 구조 분해 할당 했습니다.

해결한 줄 알았지만, 이 방법도 문제가 있네요. 사용자가 태그를 입력할 때 공백을 추가해서 보내는 경우를 고려 못했습니다.

테스트

공백을 추가해서 입력하면 아래와 같이 나옵니다.

테스트 결과

테스트 결과 console

✨ 최종 해결 방법

사용자가 태그에 사용하지 않을 것 같은 특수 문자를 구분자로 사용하겠습니다.

태그 입력 시 구분자로 사용한 특수 문자를 포함 못하게 하는 것도 필수겠죠?

const handleTagInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newTag = e.target.value.trim();
    const color = getTagColor();
    const coloredTag = `${newTag}^${color}`;

    if (!newTag || tags.includes(newTag) || newTag.includes('^')) return; // 빈 문자열 또는 중복 태그 방지
    onAddTag(coloredTag);
    e.target.value = '';
  };

{tags.map((tag) => {
    const [tagText, tagColor] = tag.split('^');
	return (
    	<Chip key={`${cardId}_tag_${tag}`} chipType="tag" color={tagColor}>
            {tagText}
        </Chip>
    );
})}

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

[Taskify] 이미지 확장자 제한 추가

dev-hpk.tistory.com

[Taskify] 할 일 카드 모달 컴포넌트 (feat. optimistic update)

오늘은 대시보드 상세에서 카드의 상세 모달을 작업해 봤습니다! 우선 전반적인 코드를 먼저 보여드리고 작업하면서 있었던 문제들과 해결한 방법에 대해서 설명해 볼게요!(컴포넌트 구조보다

dev-hpk.tistory.com

[Taskify] 이미지 확장자 제한 추가

dev-hpk — Sat, 21 Dec 2024 16:06:56 +0900

오전 스크럼 회의 때 카드 이미지에 대한 이슈가 있었습니다.

담당 팀원분이 바쁜 관계로 제가 수정하기로 했습니다. 제가 작성한 로직은 아니지만, 서로서로 돕는 게 팀이죠

문제 상황

이미지를 등록한 상태로 카드를 생성했지만, 화면에 보이는 카드는 이미지가 없이 렌더링 됩니다.

할 일 카드 생성 모달

할 일 카드

해결 방법

<input type='file' />에 accept 속성을 사용해 이미지 확장자를 제한해 보겠습니다❗

테스트해 보니 svg 형식을 업로드하면 이미지가 안 보이는 것 같습니다.
gif, jpg, png 확장자의 경우 잘 렌더링 되는 것을 확인했습니다.

<input
    type="file"
    id="profile-image"
    onChange={onImageChange}
    className={styles[`img-input`]}
    accept=".gif, .jpg, .png"
/>

결과를 확인해 보겠습니다.

이미지 파일 선택 화면

깔끔하게 해결이면 좋겠지만, 파일 선택창 하단에 사용자 지정 파일을 선택할 수 있게 되어있네요..

한 번 눌러봐야겠죠?

확장자 변경

슬픈 예감은 항상 틀린 적이 없네요. 사용자가 파일 형식을 모든 파일로 변경하면 accept 속성이 무용지물입니다.

✨ 최종 해결 방법

로그인 기능을 구현할 때 Input의 value들을 검증하는 로직을 작성했던 기억이 떠올랐습니다

<input type='file' /> 도 같은 input이니 onChange 이벤트가 발생했을 때 파일 확장자를 검사하면 되겠죠?

파일 Input 핸들러 - value 검증 추가 전 코드

const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    
    if (file) {
      setImage(file);
      const imgURL = URL.createObjectURL(file);
      setPreview(imgURL);
    }
  };

음... 어떤 식으로 처리해야 할지 고민이네요

일단 파일이 어떤 형식인지 console로 확인해 보겠습니다.

파일 확장자 console 디버깅

name에 파일 이름과 확장자가 있네요.

알고리즘 풀이에서 수도 없이 연습했던 문자열 처리 실력을 보여줄 때가 된 것 같습니다

파일 Input 핸들러 - value 검증 추가 코드

const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];

    if (file) {
      const allowedExtensions = ['png', 'gif', 'jpg'];

      // 이미지 확장자
      const imgFileExtension = file.name.split('.').pop()?.toLowerCase();

      // 확장자 검증
      if (!imgFileExtension || !allowedExtensions.includes(imgFileExtension)) {
        alert('허용되지 않는 파일 형식입니다 (png, gif, jpg만 등록 가능)');
        return;
      }

      setImage(file);
      const imgURL = URL.createObjectURL(file);
      setPreview(imgURL);
    }
  };

결과

확장자 제한 결과

사용자가 모든 파일 형식을 선택하고 gif, jpg, png 외 다른 파일을 추가하려고 하면 정상적으로 alert을 출력합니다!

느낀 점

input 처리 시에는 항상 검증(validation)이 필요한지 고려하는 습관을 들여야겠다고 느꼈습니다.
기획서에 명시된 기능만 테스트하는 데 그치지 않고 에러가 발생할 수 있는 예외 상황도 꼼꼼히 테스트해야겠다고 생각했습니다.

[Taskify] 무한스크롤 - 해결

무한 스크롤 관련된 문제로 라이브러리를 사용해야 하나 고민이 많았습니다. 우선 문제 상황과 지금까지 시도한 방법들을 간단하게 소개해보겠습니다.문제 상황PC로 확인했을 때는 잘 동작하던

dev-hpk.tistory.com

[Taskify] 대시보드 상세 - 무한 스크롤

라이브러리 없이 무한 스크롤 구현하기!!!어떤 방식으로 구현할까 고민하다가 Intersection Observer API라는 좋은 기능을 찾았습니다. Intersection Observer API는 상위 요소 또는 최상위 문서의 viewport와 대

dev-hpk.tistory.com

[JS] Reflow와 Repaint

dev-hpk — Sat, 21 Dec 2024 15:13:48 +0900

웹 성능 최적화에서 중요한 개념 중 하나가 바로 Reflow(리플로우)와 Repaint(리페인트)입니다. 이 두 가지는 브라우저가 화면에 콘텐츠를 렌더링 하는 과정에서 발생하며, 잘못된 코딩 습관은 Reflow와 Repaint를 빈번하게 발생시켜 성능 저하로 이어질 수 있습니다.

브라우저 렌더링 과정

목차
1. 브라우저 렌더링 과정

2. Reflow란?

3. Repaint란?

4. Reflow와 Repaint의 상호작용

5. Reflow와 Repaint 최소화 - 성능 최적화

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

1. 브라우저 렌더링 과정

Reflow와 Repaint를 알기 위해서는 우선 브라우저 렌더링 과정을 알아야 합니다.

브라우저 렌더링 과정

HTML 파일을 파싱해 DOM 트리를 생성합니다.
CSS 파일을 파싱해 CSSOM 트리를 생성합니다.
생성된 DOM과 CSSOM으로 Render 트리를 생성합니다.
Layout : 레이아웃은 렌더 트리를 이용해 브라우저의 화면에 요소들을 배치하는 과정입니다. 이때 각 요소의 크기, 위치, 간격 등을 계산합니다.
Paint : 브라우저는 렌더링 된 요소들을 화면에 그립니다. 이 과정에서 브라우저는 CSS 스타일, 배경, 그림자, 그림 등을 고려하며, 여러 계층으로 구성된 렌더링 요소들을 하나의 이미지로 합치는 과정도 포함됩니다.

브라우저 렌더링 과정은 컴퓨터 사양, 브라우저 종류 등에 따라 속도가 다르게 나타날 수 있습니다.

같은 웹 페이지라도 누군가는 매우 느리게 그려지겠죠

2. Reflow란?

Reflow는 브라우저가 DOM(Document Object Model)과 CSSOM(CSS Object Model)을 기반으로 웹 페이지의 레이아웃을 계산하고 요소들의 위치와 크기를 다시 배치하는 과정입니다.

Reflow는 주로 웹 페이지 내에서 요소의 위치, 크기의 변화가 있을 때 발생합니다.

Reflow가 발생하는 상황

DOM 요소가 추가되거나 제거될 때
브라우저 창의 크기가 조정될 때 (반응형 디자인)
스타일 속성이 변경될 때
- 크기 관련 속성 : width, height, margin, padding 등
- 위치 관련 속성 : position, top, left 등
- 레이아웃 관련 속성 : display, flex 등
- 폰트 관련 속성 : font-size, font-weight 등

예시 코드

// DOM 요소 추가로 인한 Reflow 발생
const newDiv = document.createElement('div');
document.body.appendChild(newDiv);

// 스타일 변경으로 인한 Reflow
newDiv.style.width = '100px';
newDiv.style.height = '100px';

Reflow는 매우 비용이 큰 작업입니다. DOM 구조가 복잡할수록 Reflow에 소요되는 시간도 길어집니다.

Reflow는 웹 성능 저하의 주요 원인 중 하나로 꼽힙니다. Reflow가 적게 발생하도록 웹을 개발해야겠죠

3. Repaint란?

Repaint는 브라우저가 DOM 요소의 시각적 스타일을 다시 그리는 과정입니다. Repaint는 레이아웃을 변경하지 않지만 요소의 색상, 배경, 그림자 등의 스타일 속성이 변경될 때 발생합니다.

Repaint가 발생하는 상황

색상 관련 속성 변경 : color, background-color 등
테두리 관련 속성 변경 : border-color, border-radius 등

예시 코드

// 색상 변경으로 인한 Repaint
const element = document.getElementById('example');
element.style.backgroundColor = 'blue';

Repaint는 Reflow에 비해 비교적 덜 비용이 드는 작업이지만, 빈번하게 발생하면 역시 성능 저하를 유발할 수 있습니다.

4. Reflow와 Repaint의 상호작용

Reflow와 Repaint는 둘 다 Render Tree가 변경되어 발생한다는 점은 같습니다. 그러나 둘은 차이가 있습니다.

Reflow가 발생하는 경우

Repaint가 발생하는 경우

위 그림에서 볼 수 있듯이 Reflow는 항상 Repaint를 유발하지만, Repaint는 Reflow를 유발하지 않습니다. Reflow가 레이아웃 계산을 포함하기 때문에 시각적 요소의 변경(=Repaint)을 동반하지만, Repaint는 단순히 시각적 변경만 처리하기 때문입니다.

예시 코드

// Reflow와 Repaint가 모두 발생
const element = document.getElementById('example');
element.style.width = '200px'; // Reflow 발생 -> Repaint 발생

// Repaint만 발생
element.style.backgroundColor = 'red'; // Reflow 없이 Repaint만 발생

요약하자면, 화면의 구조가 변경될 때는 Reflow와 Repaint가 모두 발생하지만 그 외의 변경은 Repaint만 발생한다고 보시면 됩니다.

5. Reflow와 Repaint 최소화 - 성능 최적화

Reflow 최소화

1. CSS 레이아웃 최적화

고정된 레이아웃 설계를 통해 레이아웃 변경을 최소화합니다.

2. DOM 조작 최소화

여러 번 DOM을 수정하지 말고, 한 번에 변경 사항을 적용합니다.

3. 불필요한 노드는 display: none으로 지정하기

visibility: hidden은 Layout 공간을 차지하기 때문에 Reflow의 대상이 됩니다.
하지만 display: none은 Layout 공간을 차지하지 않아 Render Tree에서 아예 제외됩니다.

4. 인라인 스타일 지양하기

인라인 스타일은 HTML이 파싱 될 때 레이아웃에 영향을 주어 추가적인 Reflow를 발생시킵니다.

5. 프레임 줄이기

요소가 이동하는 순간마다 Reflow, Repaint가 발생하게 됩니다.
따라서 트랜지션(transition), 애니메이션 주기나 효과를 간소화하면 성능을 개선할 수 있습니다.

6. 애니메이션 최적화

transform과 opacity 속성을 사용해 레이아웃 계산을 방지합니다.
이 두 속성은 GPU 가속을 사용할 수 있어, reflow를 일으키지 않고 repaint만 발생시키므로 CPU 자원을 적게 사용할 수 있습니다.

Repaint 최소화

1. CSS 스타일 변경 최소화

배경색, 테두리, 그림자 등 시각적 스타일 변경을 최소화합니다.

2. visibility와 display 구분해 사용

요소를 숨길 때 display: none 대신 visibility: hidden을 사용하면 Repaint만 발생합니다.

3. will-change 속성 사용

CSS 속성 will-change를 사용해 필요한 경우 별도의 레이어를 생성하여 Repaint 성능을 개선합니다.

4. 대량 스타일 변경 관리

여러 스타일 변경을 한 번에 처리하거나 CSS 클래스 추가로 대체합니다.

Reflow와 Repaint는 브라우저가 화면을 렌더링 하는 데 필수적인 과정입니다.

Reflow와 Repaint를 적절히 관리하지 못하면 웹 성능에 악영향을 끼칠 수 있습니다. Reflow 최적화와 Repaint 최적화는 각각 다른 접근이 필요하며, 이를 잘 이해하고 적용하면 성능이 크게 개선될 수 있습니다.

[Taskify] 할 일 카드 모달 컴포넌트 (feat. optimistic update)

dev-hpk — Fri, 20 Dec 2024 14:25:57 +0900

할 일 카드 모달

오늘은 대시보드 상세에서 카드의 상세 모달을 작업해 봤습니다!

우선 전반적인 코드를 먼저 보여드리고 작업하면서 있었던 문제들과 해결한 방법에 대해서 설명해 볼게요!

(컴포넌트 구조보다 기능적인 부분을 보고 싶으시다면 아래 링크를 눌러주세요↓)

기능 코드

DetailCardModal.tsx (할 일 카드 모달)

기능이 많아 컴포넌트는 아직 분리하지 못했습니다... import 부분은 생략했으니 이해해 주세요

빠른 시일 내로 리팩토링 할 예정이니 코드 블록이 불편하시다면 아래 Github PR을 확인해 주세요!!

#92 모달 할 일 카드 by hpk5802 · Pull Request #98 · codeit-sprint-part3-6team/project

이슈 번호 close #92 변경 사항 요약 공통 dropdown 추가 댓글 무한 스크롤 추가 카드 삭제 기능 추가 댓글 관련 기능 추가 (댓글 추가, 삭제, 수정) 카드, 댓글 관리 작성자 확인 추가 테스트 결과 카드

github.com

interface DetailCardModalProps {
  title: string;
  cardId: number;
  columnTitle: string;
  closeModal: () => void;
  setColumnData: React.Dispatch<React.SetStateAction<GetCardsResponse>>;
}

function DetailCardModal({
  title,
  cardId,
  columnTitle,
  closeModal,
  setColumnData,
}: DetailCardModalProps) {
  const {
    user: { id },
  } = useSelector((state: RootState) => state.userInfo); // 카드의 작성자 확인을 위해 Redux에서 유저 id를 가져옴
  const [card, setCard] = useState<Card | null>(null);
  const {
    commentsResponse,
    addComment,
    loadMoreComments,
    removeComment,
    updateComment,
    isSubmitting,
  } = useComments(cardId, null); // 
  const [newComment, setNewComment] = useState('');

  // 카드 삭제 함수
  const handleCardDelete = async () => {
    try {
      await deleteCard(cardId);
      alert('카드가 삭제되었습니다.');
      setColumnData((prev) => ({
        ...prev,
        cards: prev.cards.filter((columnCard) => columnCard.id !== cardId), // 삭제된 카드 제외
      }));
    } catch (error) {
      console.error('카드 삭제 오류:', error);
    }
  };

  const handleMenuClick = async (value: string) => {
    closeModal();
    // 수정하기 모달은 완성 전이라 임시로 alert 처리했습니다.
    if (value === 'edit') alert('수정하기 모달 오픈');
    else if (value === 'delete') {
      await handleCardDelete();
    }
  };

  const fetchData = async () => {
    try {
      const cardDetail = await getCardDetail({ cardId });
      setCard(cardDetail);
      loadMoreComments();
    } catch (error) {
      console.error('데이터 요청 실패:', error);
    }
  };

  const handleObserver = useCallback(
    async ([entry]) => {
      if (entry.isIntersecting && commentsResponse?.cursorId) {
        loadMoreComments(commentsResponse.cursorId);
      }
    },
    [commentsResponse?.cursorId, loadMoreComments],
  );

  const endPoint = useIntersectionObserver(handleObserver);

  useEffect(() => {
    fetchData();
  }, [cardId]);

  if (!card || !commentsResponse) return null;

  return (
    <div className={styles.container}>
      <h2 className={styles.title}>{title}</h2>
      <div className={styles['btn-section']}>
        {id === card.assignee.id && (
          <Dropdown
            menus={[
              { label: '수정하기', value: 'edit' },
              { label: '삭제하기', value: 'delete' },
            ]}
            onMenuClick={handleMenuClick}
          >
            <KebabIcon className={styles['icon-kebab']} />
          </Dropdown>
        )}
        <button
          type="button"
          className={styles['btn-close']}
          onClick={closeModal}
        >
          <CloseIcon className={styles['icon-close']} />
        </button>
      </div>
      <div className={styles['author-section']}>
        <div>
          <div className={styles['author-title']}>담당자</div>
          <UserProfile
            type="todo-detail"
            profileImageUrl={card.assignee.profileImageUrl}
            nickname={card.assignee.nickname}
          />
        </div>
        <div>
          <div className={styles['author-title']}>마감일</div>
          <span className={styles['author-content']}>
            {formatDate(card.dueDate, true)}
          </span>
        </div>
      </div>
      <div className={styles['content-section']}>
        <div className={styles['chip-section']}>
          <div className={styles.status}>
            <Chip chipType="status">{columnTitle}</Chip>
          </div>
          <span className={styles.bar} />
          <div className={styles.tags}>
            {card.tags.map((tag) => (
              <Chip key={`${cardId}_tag_${tag}`} chipType="tag">
                {tag}
              </Chip>
            ))}
          </div>
        </div>
        <p className={styles.description}>{card.description}</p>
        <CardImage
          image={card.imageUrl}
          name={`${card.title} 이미지`}
          className={styles['card-image']}
        />
        <div className={styles['comment-input-section']}>
          <label htmlFor="comment" className={styles['comment-label']}>
            댓글
          </label>
          <textarea
            className={styles['comment-input']}
            name="comment"
            id="comment"
            value={newComment}
            onChange={(e) => setNewComment(e.target.value)}
            placeholder="댓글 작성하기"
          />
          <button
            type="button"
            className={styles['btn-add-comment']}
            onClick={() => {
              addComment(newComment, card.columnId, card.dashboardId);
              setNewComment('');
            }}
            disabled={isSubmitting || !newComment.trim()}
          >
            입력
          </button>
        </div>
        <div className="comment-section">
          {commentsResponse.comments.map(
            ({
              id: commentId,
              author: { id: authorId, nickname, profileImageUrl },
              createdAt,
              content,
            }) => (
              <Comment
                key={`comment_${commentId}`}
                commentId={commentId}
                profileImageUrl={profileImageUrl}
                authorId={authorId}
                nickname={nickname}
                createdAt={createdAt}
                content={content}
                removeComment={removeComment}
                updateComment={updateComment}
              />
            ),
          )}
        </div>
        {commentsResponse.cursorId && (
          <div ref={endPoint} className={styles['end-point']} />
        )}
      </div>
    </div>
  );
}

export default DetailCardModal;

Comment.tsx (댓글)

import UserProfile from '@/components/common/userprofile/UserProfile';
import styles from '@/components/dashboard/comment/Comment.module.css';
import { RootState } from '@/redux/store';
import formatDate from '@/utils/formatDate';
import { useCallback, useState } from 'react';
import { useSelector } from 'react-redux';

interface CommentProps {
  commentId: number;
  authorId: number;
  nickname: string;
  profileImageUrl: string | null;
  createdAt: string;
  content: string;
  removeComment: (commentId: number) => void;
  updateComment: (commentId: number, newContent: string) => void;
}

function Comment({
  commentId,
  authorId,
  nickname,
  profileImageUrl,
  createdAt,
  content,
  removeComment,
  updateComment,
}: CommentProps) {
  const {
    user: { id }, // 댓글의 작성자 확인을 위해 Redux에서 유저 id를 가져옴
  } = useSelector((state: RootState) => state.userInfo);
  const [isEditing, setIsEditing] = useState(false);
  const [editedContent, setEditedContent] = useState(content);

  const handleSave = () => {
    if (editedContent.trim() !== content) {
      updateComment(commentId, editedContent);
    }
    setIsEditing(false);
  };

  const handleCancel = () => {
    setEditedContent(content); // 수정 취소 시 원래 내용으로 되돌리기
    setIsEditing(false);
  };

  const handleDelete = useCallback(() => {
    removeComment(commentId);
  }, [removeComment, commentId]);

  return (
    <div className={styles.comment}>
      <UserProfile
        type="todo-detail"
        profileImageUrl={profileImageUrl}
        onlyImg
        nickname={nickname}
      />
      <div className={styles.wrap}>
        <div className={styles['title-section']}>
          <span className={styles.nickname}>{nickname}</span>
          <span className={styles.date}>{formatDate(createdAt, true)}</span>
        </div>
        {isEditing ? (
          <div className={styles['content-edit']}>
            <textarea
              className={styles['content-textarea']}
              value={editedContent}
              onChange={(e) => setEditedContent(e.target.value)}
            />
            <button
              type="button"
              className={styles['btn-cancel']}
              onClick={handleCancel}
            >
              취소
            </button>
            <button
              type="button"
              className={styles['btn-save']}
              onClick={handleSave}
            >
              저장
            </button>
          </div>
        ) : (
          <div className={styles.content}>{content}</div>
        )}
        {!isEditing && id === authorId && (
          <div>
            <button
              type="button"
              className={styles.edit}
              onClick={() => setIsEditing(true)}
            >
              수정
            </button>
            <button
              type="button"
              className={styles.delete}
              onClick={handleDelete}
            >
              삭제
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

export default Comment;

useComment.ts (댓글 관련 커스텀 훅 - 추가, 삭제, 수정)

import { useState } from 'react';
import { Comment as CommentType, GetCommentsResponse } from '@/type/comment';
import postComment from '@/lib/dashboard/postComment';
import getComments from '@/lib/dashboard/getComments';
import deleteComment from '@/lib/dashboard/deleteComment';
import putComment from '@/lib/dashboard/putComment';

const useComments = (
  cardId: number, // 댓글 관련 카드 ID
  initialComments: GetCommentsResponse | null, // 초기 댓글 데이터
) => {
  const [commentsResponse, setCommentsResponse] =
    useState<GetCommentsResponse | null>(initialComments);
  // 댓글 작업(추가, 수정, 삭제) 중 상태를 확인하기 위한 플래그
  const [isSubmitting, setIsSubmitting] = useState(false);

  // 댓글 추가
  const addComment = async (
    content: string,
    columnId: number,
    dashboardId: number,
  ) => {
    if (!content.trim()) return; // 공백이면 종료

    setIsSubmitting(true); // 작업 상태 true로 변경
    try {
      // 댓글 추가 API 호출
      const addedComment: CommentType = await postComment({
        content,
        cardId,
        columnId,
        dashboardId,
      });
      // 새로운 댓글 state 가장 앞에 추가
      setCommentsResponse((prev) => ({
        ...prev,
        comments: [addedComment, ...(prev?.comments || [])],
      }));
    } catch (error) {
      console.error('댓글 추가 실패:', error);
    } finally {
      setIsSubmitting(false);
    }
  };

  // 댓글 불러오기(무한 스크롤에서 사용)
  const loadMoreComments = async (cursorId?: number) => {
    try {
      // 댓글 요청 API 호출
      const newCommentsResponse = await getComments({ cardId, cursorId });
      // 댓글 state 가장 앞에 서버에서 불러온 댓글 추가
      setCommentsResponse((prev) => ({
        ...newCommentsResponse,
        comments: [...(prev?.comments || []), ...newCommentsResponse.comments],
      }));
    } catch (error) {
      console.error('댓글을 불러오는데 실패했습니다:', error);
    }
  };

  // 댓글 삭제
  const removeComment = async (commentId: number) => {
    try {
      // 댓글 삭제 API 호출
      await deleteComment(commentId);
      // Array.filter 메서드를 통해 해당 댓글 삭제
      setCommentsResponse((prev) => ({
        ...prev,
        comments:
          prev?.comments.filter((comment) => comment.id !== commentId) || [],
      }));
    } catch (error) {
      console.error('댓글 삭제 실패:', error);
    }
  };

  // 댓글 수정
  const updateComment = async (commentId: number, newContent: string) => {
    try {
      // 댓글 수정 API 호출
      const updatedComment = await putComment({
        commentId,
        content: newContent,
      });
      // 댓글의 content를 수정한 댓글로 갱신
      setCommentsResponse((prev) =>
        prev
          ? {
              ...prev,
              comments: prev.comments.map((comment) =>
                comment.id === commentId
                  ? { ...comment, content: updatedComment.content }
                  : comment,
              ),
            }
          : null,
      );
    } catch (error) {
      console.error('댓글 수정 실패:', error);
    }
  };

  return {
    commentsResponse,
    addComment,
    loadMoreComments,
    removeComment,
    updateComment,
    isSubmitting,
  };
};

export default useComments;

댓글 기능에 전반적으로 기존 state를 유지하면서 추가하거나 삭제한 데이터를 처리하는 로직이 있습니다.

setCommentsResponse((prev) => ({
    ...prev,
    comments: [addedComment, ...(prev?.comments || [])],
}));

위 로직을 왜 추가했는지 궁금하실 수 있을 것 같아서 적어보겠습니다!!

문제 상황

초기 작업 시 위 로직 없이 API만 호출하고 종료함.
네트워크 탭을 확인해 보니 request가 정상적으로 완료됨.
새로고침을 하기 전까지 화면에 데이터가 업데이트되지 않음

생각해 본 해결 방안

댓글 추가 및 삭제 후 request가 정상적으로 완료되면 댓글 불러오기 API를 호출해 화면의 데이터를 갱신한다.
댓글 추가 및 삭제 후 프론트에서 데이터를 직접 수정해 화면의 데이터를 갱신한다.

많은 고민 끝에 저는 2번을 선택했습니다!

무한 스크롤로 데이터를 요청하다 보니 데이터를 처음부터 다시 불러오는 방법이 사용자에게 불쾌한 경험일 수 있다고 생각했기 때문입니다

검색해 보니 이런 방법을 낙관적 업데이트(Optimistic Update)라고 하네요.

낙관적 업데이트: 서버에서 응답을 받을 때까지 기다리지 않고 사용자에게 빠른 피드백을 제공해, 사용자 경험을 개선

적용 화면

댓글 추가

댓글 추가

댓글 삭제

댓글 삭제

댓글 수정 (취소)

댓글 수정 (취소)

댓글 수정 (저장)

댓글 수정 (저장)

카드 삭제

카드 삭제

작업 후 멘토님께 코드 리뷰를 받았습니다. 내용을 정리해 보자면 아래와 같습니다.

무한 스크롤과 사용자 경험을 고려해 낙관적 업데이트를 적용한 점에서
낙관적 업데이트도 좋지만 API 요청 후 request가 완료되면 서버에서 데이터를 다시 호출하는 게 좋다.
- 서버에 데이터를 다시 호출하는 동작은 크게 무리가 되지 않는다.
- 데이터 추가, 삭제, 업데이트 같은 기능을 수행하는 동안 다른 사람에 의해 서버의 데이터가 바뀔 수 있다.
  프론트에서 낙관적 업데이트를 통해 데이터를 변경하면 서버와 싱크가 맞지 않아 순수하지 못한 데이터일 수 있다.
무한 스크롤을 고려하면 낙관적 업데이트로 처리하는 것도 좋은 것 같다.

오늘도 프로젝트를 진행하면서 낙관적 업데이트라는 새로운 지식을 얻어가네요

멘토님께서 해주신 피드백을 바탕으로 데이터를 다시 호출하는 방법도 고려해 봐야겠네요!

[Taskify] 무한스크롤 - 해결

dev-hpk.tistory.com

[Taskify] 대시보드 상세 - 무한 스크롤

dev-hpk.tistory.com

[JS] 이벤트 루프(Event Loop)란?

dev-hpk — Fri, 20 Dec 2024 12:17:57 +0900

자바스크립트는 단일 스레드 기반 언어로 한 번에 하나의 작업만 처리할 수 있습니다. 하지만 비동기 작업을 지원하며 동시에 여러 작업이 진행되는 것처럼 보이게 합니다. 이러한 비동기 처리를 가능하게 하는 핵심 메커니즘이 바로 이벤트 루프(Event Loop)입니다.

이벤트 루프

목차
1. 싱글 스레드란?

2. 블로킹 & 논블로킹

3. 이벤트 루프의 필요성

4. 마이크로 태스크와 매크로 태스크

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

1. 싱글 스레드란?

스레드는 프로세스의 실행 단위입니다. 싱글 스레드라는 것은 말 그대로 스레드가 하나만 존재해 한번에 하나의 프로세스만 실행할 수 있다는 의미입니다.

자바스크립트는 싱글 스레드 언어로 하나의 호출 스택(Call Stack)을 사용해 코드를 실행합니다.

호출 스택
: 함수의 호출을 관리하는 구조로, LIFO(Last In First Out) 방식으로 동작합니다.

호출 스택(Call Stack) 예시

function foo() {
  console.log('foo');
}

function bar() {
  foo();
  console.log('bar');
}

bar();

bar() 함수가 호출되어 호출 스택에 추가됩니다.
bar() 내부에서 foo()가 호출되어 foo()가 호출 스택에 추가됩니다.
foo()의 실행이 종료되면 스택에서 제거되고 bar()의 나머지 코드인 console.log('bar')가 실행됩니다.
bar()의 실행이 종료되면 스택에서 제거되고 호출 스택이 비워집니다.

2. 블로킹(Blocking) & 논블로킹(Non-Blocking)

자바스크립트는 싱글 스레드 언어로 호출 스택의 작업을 하나씩 순차적으로 진행한다고 했습니다.

만약 호출 스택에 매우 오래 걸리는 작업이 들어가면 어떻게 될까요

호출 스택에 있는 모든 작업들이 멈춰있다가 해당 작업이 끝난 후에 동작할 것입니다. 이런 경우를 블로킹이라고 합니다.

하지만 우리는 웹에서 작업의 완료 여부와 상관없이 여러 작업을 동시에 실행할 수 있습니다. 이런 경우를 논블로킹이라고 합니다.

블로킹 & 논블로킹 (출처: PoiemaWeb)

동기와 비동기

자바스크립트는 싱글 스레드 언어로 한 번에 하나의 작업만 실행할 수 있지만, 비동기 처리를 통해 기다림 없이 여러 작업을 블로킹 없이 처리할 수 있습니다.

3. 이벤트 루프의 필요성

싱글 스레드 환경에서 비동기 작업(타이머, 네트워크 요청)은 어떻게 처리될까요

여기서 이벤트 루프가 등장합니다. 비동기 작업은 브라우저 또는 Node.js 환경의 백그라운드(Background)에서 처리되고, 완료된 작업은 태스크 큐(Task Queue)에 전달됩니다. 이벤트 루프는 호출 스택이 비어 있는지 확인하고, 비어 있다면 태스크 큐의 작업을 호출 스택으로 이동시킵니다.

콜 스택 : 현재 실행 중인 작업들이 쌓이는 곳
태스크 큐 : 비동기 작업이 완료되면 그 결과를 대기시키는 곳

이벤트 루프 동작 원리

이벤트 루프의 동작 원리

호출 스택(Call Stack) : 현재 실행 중인 함수의 실행 컨텍스트를 관리합니다.
백그라운드 : 비동기 작업(타이머, 네트워크 요청)을 처리합니다.
태스크 큐(Task Queue) : 백그라운드에서 완료된 작업의 콜백 함수가 대기하는 공간입니다.
이벤트 루프(Event Loop) : 호출 스택이 비어 있는지 확인하고, 태스크 큐에서 작업을 호출 스택으로 옮깁니다.

예시

console.log('Start');

setTimeout(() => {
  console.log('Timeout');
}, 1000);

console.log('End');

// 출력 결과
Start
End
Timeout

console.log('Start')가 호출 스택에서 실행됩니다.
setTimeout은 비동기 작업으로 백그라운드에 전달됩니다.
console.log('End')가 호출 스택에서 실행됩니다.
1초 후, 타이머의 콜백이 태스크 큐로 이동합니다.
호출 스택이 비어 있으면 이벤트 루프가 태스크 큐의 콜백을 호출 스택으로 이동시켜 실행합니다.

4. 마이크로 태스크와 매크로 태스크

태스크(Task)는 실행 우선순위에 따라 두 가지로 나뉩니다.

매크로 태스크(Macro Task): setTimeout, setInterval, setImmediate, I/O 작업 등이 포함됩니다.
마이크로 태스크(Micro Task): Promise의 then, catch, finally, async/await 등이 포함됩니다.

그럼 둘 중에 어떤 게 더 우선순위가 높나요❓

마이크로태스크 큐가 매크로태스크 큐보다 우선순위가 높습니다.
이벤트 루프는 콜 스택이 비어있는 시점에 마이크로태스크 큐에 있는 모든 작업들을 먼저 처리하고 매크로태스크의 작업을 실행합니다.

실행 순서 예시

console.log('Start');

setTimeout(() => {
  console.log('Timeout');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise');
});

console.log('End');

// 출력 결과
Start
End
Promise // Promise가 SetTimeout보다 먼저 실행
Timeout

호출 스택에 console.log('Start')가 추가되어 바로 실행됩니다.
실행이 끝난 후, 호출 스택에서 제거됩니다.
setTimeout 함수가 호출 스택에 추가됩니다.
이 함수는 브라우저나 Node.js의 백그라운드 환경으로 전달되어 타이머가 설정됩니다.
setTimeout 자체는 실행을 마친 뒤 호출 스택에서 제거됩니다.
타이머가 만료되면, 해당 콜백이 매크로 태스크 큐(Macro Task Queue)에 저장됩니다.
Promise.resolve().then이 호출 스택에 추가됩니다.
then에 전달된 콜백 함수는 마이크로 태스크 큐(Micro Task Queue)에 저장됩니다.
Promise 처리 자체는 완료된 뒤 호출 스택에서 제거됩니다.
호출 스택에 console.log('End')가 추가되어 바로 실행됩니다.
실행이 끝난 후, 호출 스택에서 제거됩니다.
호출 스택이 비어 있는지 이벤트 루프가 확인합니다
먼저 마이크로 태스크 큐를 확인하고 대기 중인 Promise의 콜백을 호출 스택으로 이동시켜 실행합니다.
Promise 콜백이 실행되어 "Promise"가 출력되고 호출 스택에서 제거됩니다.
이벤트 루프는 마이크로 태스크 큐의 작업을 모두 완료해 매크로 태스크 큐를 확인합니다.
setTimeout의 콜백이 호출 스택으로 이동 후 실행되어 "Timeout"이 출력되고 호출 스택에서 제거됩니다.

요약

자바스크립트는 단일 스레드 기반으로 동작하며, 비동기 작업 처리를 위해 이벤트 루프를 사용합니다.
이벤트 루프는 호출 스택과 태스크 큐를 관리하여 비동기 작업을 실행합니다.
태스크는 매크로 태스크와 마이크로 태스크로 구분되며, 마이크로 태스크가 우선 실행됩니다.

[Taskify] 무한스크롤 - 해결

dev-hpk — Thu, 19 Dec 2024 14:59:47 +0900

이슈 내용

무한 스크롤 관련된 문제로 라이브러리를 사용해야 하나 고민이 많았습니다.

우선 문제 상황과 지금까지 시도한 방법들을 간단하게 소개해보겠습니다.

문제 상황

PC로 확인했을 때는 잘 동작하던 Intersection Observer API가 13인치 노트북으로 확인했더니 작동하지 않는다.
브라우저의 크기를 변경한 상태(확대 및 축소)에서 Intersection Observer API가 작동하지 않는다.
(브라우저의 확대 및 축소 기능을 사용하는 경우까지는 고려하지 않아도 된다고 피드백 받음!!)
특정 사이즈에서 Intersection Observer API가 의도한 대로 동작하지 않아 무한 스크롤을 마음대로 동작시킨다.

시도한 방법

resize 이벤트를 추가해서 브라우저 사이즈가 변경될 때마다 IntersectionObserver를 갱신한다.
root 요소의 사이즈가 변경될 때 옵저버를 갱신한다.
DOM이 업데이트가 완료되면 Intersection Observer가 실행될 수 있도록 수정한다.
(isLoading 플래그를 추가해 비동기 데이터 처리가 끝나면 Intersection Observer가 동작하도록)

mdn의 Intersection Observer API를 다시 정독하다가 해결 방법이 번뜩 떠올라버렸습니다!!!

그것은 바로... threshold 값을 수정하는 것입니다!! 너무 간단한데 이걸로 해결이 가능할까요?

MDN - Intersection Observer API의 threshold 설명
관찰자의 콜백이 무조건 실행되어야 하는 대상의 가시성 백분율을 나타내는 숫자 또는 숫자 배열입니다. 만약 가시성이 50% 지점을 넘는 경우만 감지하고 싶다면, 0.5를 지정하여 사용할 수 있습니다. 만약 가시성이 25%만큼 넘어갈 때마다 콜백을 실행하고 싶다면, [0, 0.25, 0.5, 0.75, 1]을 지정하여 사용할 수 있습니다. 기본 값은 0입니다. (1 픽셀이라도 보이면, 콜백이 실행됩니다.) 1.0의 값은 모든 픽셀이 가시 상태가 될 때까지 임계값이 통과되지 않는다는 것을 의미합니다.

바로 적용해 보겠습니다.

import { useEffect, useRef } from 'react';

function useIntersectionObserver(callback: IntersectionObserverCallback) {
  const observerRef = useRef<IntersectionObserver | null>(null);
  const elementRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (!elementRef.current) return;

    observerRef.current = new IntersectionObserver(callback, {
      root: elementRef.current.parentNode as Element,
      // 0일 때는 교차점이 한 번만 발생해도 실행
      // 요소의 경계가 보이기 시작하거나 사라지는 시점에서 콜백을 호출
      threshold: 0, 
    });

    observerRef.current.observe(elementRef.current);

    return () => observerRef.current?.disconnect();
  }, [callback]);

  return elementRef;
}

export default useIntersectionObserver;

무한 스크롤 결과

이전 작업 때처럼 에러가 발생하는 상황을 방지하기 위해 PC 2대, 노트북, 모바일(아이폰 & 갤럭시)에서 무한 스크롤 동작을 확인했습니다. 모두 정상 동작하네요!!

수정할 부분도 많고 아직 완벽하진 않지만 라이브러리 없이 무한 스크롤을 구현해 봤다는 사실에 아주 큰 성취감을 느꼈습니다.

앞으로도 다른 기능을 구현할 때 라이브러리를 사용하기보다는 직접 구현해 볼 수 있는 용기가 생긴 것 같아 아주 뿌듯하네요

추가로.. 새로운 기능들 적용해 보기 전에 공식 문서나 참고 자료들 꼼꼼히 읽는 습관을 들여야 할 것 같습니다..

남은 프로젝트 잘 마무리하고 개발자로 한층 더 성장해 나가겠습니다!

[Taskify] 대시보드 상세 - 무한 스크롤

dev-hpk.tistory.com

[Taskify] 대시보드 상세 페이지

오늘은 대시보드 페이지를 개발해 봤습니다.우선 전반적인 코드를 먼저 보여드리고 작업하면서 있었던 문제들과 해결한 방법에 대해서 설명해 볼게요! GET Columnsimport axios from '@/lib/instance';import

dev-hpk.tistory.com

[Taskify] 대시보드 상세 - 무한 스크롤

dev-hpk — Thu, 19 Dec 2024 01:09:42 +0900

라이브러리 없이 무한 스크롤 구현하기!!!

어떤 방식으로 구현할까 고민하다가 Intersection Observer API라는 좋은 기능을 찾았습니다.

Intersection Observer API는 상위 요소 또는 최상위 문서의 viewport와 대상 요소 사이의 변화를 비동기적으로 관찰할 수 있는 수단을 제공합니다.

기본 사용법

let options = {
  root: document.querySelector("#scrollArea"),
  rootMargin: "0px",
  threshold: 1.0,
};

let observer = new IntersectionObserver(callback, options);

컬럼과 댓글을 불러오는데 모두 사용하기 위해 커스텀 훅으로 관리하도록 만들어 보겠습니다.

import { useEffect, useRef } from 'react';

function useIntersectionObserver(callback: IntersectionObserverCallback) {
  // IntersectionObserver 인스턴스를 저장하는 ref
  const observerRef = useRef<IntersectionObserver | null>(null);
  // 관찰할 DOM 요소를 저장하는 ref
  const elementRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (!elementRef.current) return;

    observerRef.current = new IntersectionObserver(callback, {
      // 관찰 기준을 현재 요소의 부모로 설정
      root: elementRef.current.parentNode as Element,
      threshold: 0.95,
    });

    observerRef.current.observe(elementRef.current);

    // 컴포넌트 언마운트 시 Observer 연결 해제
    return () => observerRef.current?.disconnect();
  }, [callback]);

  return elementRef;
}

export default useIntersectionObserver;

이제 준비는 끝났습니다. 컴포넌트에 적용해 봅시다!!

무한 스크롤 결과

PC 2개로 확인해 본 결과 반응형까지 모두 완벽하게 동작합니다!!!

이렇게 끝났으면 좋았을 텐데... 팀원 중 한 분이 테스트하다가 문제가 생겼다고 연락을 주셨습니다.

이슈 공유

이상이 없길 바라는 마음으로 혹시 몰라 노트북으로 확인해 보니 일부 사이즈 화면에서 Intersection Observer API가 동작하지 않았습니다.

일단 문제가 될 수 있는 상황부터 차근차근 찾아보았습니다. 고려해 볼 상황은 아래와 같습니다.

Viewport나 Root의 변경 감지 실패
- 문제 상황 : 브라우저나 디바이스 사이즈가 변경되었을 때, IntersectionObserver는 자동으로 다시 계산되지 않을 수 있습니다.
- 해결 방법 : resize 이벤트를 추가해서 브라우저 사이즈가 변경될 때마다 IntersectionObserver를 다시 생성하거나 갱신합니다.
- 적용 결과 : 실패...
root 또는 target이 올바르게 설정되지 않음
- 문제 상황 : root 요소를 명시적으로 설정했다면, 디바이스 사이즈가 변경될 때 root 요소의 사이즈가 달라질 수 있습니다. 이로 인해 IntersectionObserver가 예상과 다르게 동작할 수 있습니다.
- 해결 방법 : root 요소의 사이즈가 변경될 때 옵저버를 갱신합니다.
```
const endRef = useIntersectionObserver(handleObserver, rootRef);
```
- 적용 결과 : 실패...
비동기적 렌더링으로 타이밍 문제가 발생
- 문제 상황 : API 요청으로 데이터를 받아와 DOM에 업데이트가 완료되기 전에 IntersectionObserver가 실행될 수 있습니다.
- 해결 방법 : DOM이 업데이트가 완료되면 Intersection Observer가 실행될 수 있도록 수정합니다.
```
const handleObserver = useCallback(
    ([entry]) => {
      if (entry.isIntersecting && columnData.cursorId && !isLoading)
        fetchCards(columnData.cursorId);
    },
    [fetchCards, columnData.cursorId, isLoading],
  );
```
- 적용 결과 : 실패...

알아본 결과 내에서는 모두 해결하지 못했습니다...

멘토님께 피드백을 받은 결과 현업에서는 성능과 효율 측면에서 라이브러리를 사용하신다고 답변을 해주셨습니다.

react-intersection-observer

Monitor if a component is inside the viewport, using IntersectionObserver API. Latest version: 9.14.0, last published: 4 days ago. Start using react-intersection-observer in your project by running `npm i react-intersection-observer`. There are 1175 other

www.npmjs.com

라이브러리 없이 무한 스크롤을 구현해 봤다는 점에서 큰 성취감을 얻었습니다.

노트북을 제외한 대부분의 PC에서는 작동을 한다는 점에서는 만족하지만 모든 디바이스와 브라우저를 만족시키지 못한 점에서 아쉬움이 너무 커서 이 문제는 라이브러리가 어떤 방식으로 동작하는지 확인 후 수정하겠습니다

[Taskify] 대시보드 상세 페이지

dev-hpk.tistory.com

[Taskify] Chip(공통 컴포넌트) 추가

오늘은 공통 컴포넌트 Chip을 개발해 보겠습니다.// Chip.tsimport { ReactNode } from 'react';type ChipType = 'tag' | 'status' | 'status-option';export interface ChipProps { children: ReactNode; chipType: ChipType;}export const bgTag = ['oran

dev-hpk.tistory.com

[Taskify] 대시보드 상세 페이지

dev-hpk — Tue, 17 Dec 2024 19:37:56 +0900

대시보드 상세 페이지 UI

오늘은 대시보드 페이지를 개발해 봤습니다.

우선 전반적인 코드를 먼저 보여드리고 작업하면서 있었던 문제들과 해결한 방법에 대해서 설명해 볼게요!

GET Columns

import axios from '@/lib/instance';
import { GetColumnParams, GetColumnsResponse } from '@/type/column';

const getColumns = async ({
  teamId,
  dashboardId,
}: GetColumnParams): Promise<GetColumnsResponse> => {
  try {
    const response = await axios.get(`/${teamId}/columns/`, {
      params: {
        dashboardId,
      },
    });

    if (response.status === 200) return response.data;
    throw new Error('컬럼을 불러오는 데 실패했습니다.');
  } catch (error) {
    console.error('컬럼 조회 실패 : ', error);
    throw error;
  }
};

export default getColumns;

GET Cards

import axios from '@/lib/instance';
import { GetCardParams, GetCardsResponse } from '@/type/card';

const getCards = async ({
  teamId,
  size = 4,
  cursorId = null,
  columnId,
}: GetCardParams): Promise<GetCardsResponse> => {
  try {
    const response = await axios.get(`/${teamId}/cards/`, {
      params: {
        size,
        cursorId,
        columnId,
      },
    });

    if (response.status === 200) return response.data;
    throw new Error('카드 목록을 불러오는 데 실패했습니다.');
  } catch (error) {
    console.error('카드 목록 조회 실패 : ', error);
    throw error;
  }
};

export default getCards;

/dashboards/[id].tsx

import Sidebar from '@/components/common/sidebar/Sidebar';
import CDSButton from '@/components/common/button/CDSButton';
import getColumns from '@/lib/dashboard/getColumns';
import { useEffect, useState, useCallback } from 'react';
import styles from '@/pages/dashboards/Dashboard.module.css';
import Column from '@/components/dashboard/column/Column';
import { Column as ColumnType } from '@/type/column';
import { useRouter } from 'next/router';

function DashBoard() {
  const { query } = useRouter();
  const [columns, setColumns] = useState<ColumnType[]>([]);

  const fetchColumns = useCallback(async () => {
    const dashboardId = Number(query.id);
    if (!dashboardId) return;
    try {
      const { data, result } = await getColumns({
        teamId: '11-6',
        dashboardId,
      });

      if (result === 'SUCCESS') {
        setColumns(data);
      }
    } catch (error) {
      console.error('컬럼 조회 실패 : ', error);
    }
  }, [query.id]);

  useEffect(() => {
    fetchColumns();
  }, [fetchColumns]);

  return (
    <div>
      <Sidebar />
      <div className={styles.container}>
        {columns.map(({ id, title }) => (
          <Column key={`column_${id}`} targetId={id} columnTitle={title} />
        ))}
        <div className={styles['add-column']}>
          <CDSButton btnType="column">새로운 컬럼 추가하기</CDSButton>
        </div>
      </div>
    </div>
  );
}

export default DashBoard;

Column.tsx

import styles from '@/components/dashboard/column/Column.module.css';
import CDSButton from '@/components/common/button/CDSButton';
import Card from '@/components/dashboard/card/Card';
import { useCallback, useEffect, useRef } from 'react';
import SettingIcon from 'public/ic/ic_setting.svg';
import Link from 'next/link';
import useIntersectionObserver from '@/hooks/useIntersectionObserver';
import useColumnData from '@/hooks/useColumnData';

interface ColumnProp {
  targetId: number;
  columnTitle: string;
}

function Column({ targetId, columnTitle }: ColumnProp) {
  const { columnData, fetchCards } = useColumnData(targetId);

  const handleObserver = useCallback(
    ([entry]) => {
      if (entry.isIntersecting && columnData.cursorId)
        fetchCards(columnData.cursorId);
    },
    [fetchCards, columnData.cursorId],
  );

  const endPoint = useIntersectionObserver(handleObserver);

  useEffect(() => {
    fetchCards();
  }, [fetchCards]);

  return (
    <div className={styles.column}>
      <div className={styles['column-title-section']}>
        <div className={styles['column-title']}>
          {columnTitle}
          <span className={styles['column-size']}>{columnData.totalCount}</span>
        </div>
        <Link
          href={`/dashboard/${targetId}/edit`}
          className={styles['btn-edit-column']}
        >
          <SettingIcon className={styles['icon-setting']} />
        </Link>
      </div>
      <CDSButton btnType="todo" />
      <div className={styles['card-section']}>
        {columnData.cards.map(
          ({ imageUrl, id, title, tags, dueDate, assignee: { nickname } }) => (
            <Card
              key={`card_${id}`}
              imageUrl={imageUrl}
              id={id}
              title={title}
              tags={tags}
              dueDate={dueDate}
              nickname={nickname}
            />
          ),
        )}
        {columnData.cursorId && (
          <div ref={endPoint} className={styles['end-point']} />
        )}
      </div>
    </div>
  );
}

export default Column;

Card.tsx

import styles from '@/components/dashboard/card/Card.module.css';
import Chip from '@/components/common/chip/Chip';
import CardImage from '@/components/dashboard/card/CardImage';
import CalendarIcon from 'public/ic/ic_calendar.svg';
import formatDate from '@/utils/formatDate';

interface CardProps {
  imageUrl: string;
  id: number;
  title: string;
  tags: string[];
  dueDate: string;
  nickname: string;
}

function Card({ imageUrl, id, title, tags, dueDate, nickname }: CardProps) {
  const fomattedDueDate = formatDate(dueDate);
  const nameInitial = nickname[0].toUpperCase();

  return (
    <button type="button" className={styles.card}>
      <CardImage image={imageUrl} name={title} />
      <div className={styles['content-section']}>
        <div className={styles['card-title']}>{title}</div>
        <div className={styles['description-section']}>
          <div className={styles['card-tags']}>
            {tags.map((tag) => (
              <Chip key={`${id}_tag_${tag}`} chipType="tag">
                {tag}
              </Chip>
            ))}
          </div>
          <div className={styles['card-date']}>
            <CalendarIcon className={styles['icon-calendar']} />
            <span className={styles.date}>{fomattedDueDate}</span>
          </div>
          <div className={styles.badge}>{nameInitial}</div>
        </div>
      </div>
    </button>
  );
}

export default Card;

실행 결과

실행 결과

실행 결과를 보시면 데이터가 잘 호출되고 화면도 잘 나오는 것 같습니다.

하지만 네트워크 탭을 자세히 보면 같은 네트워크 요청이 2번씩 반복되는 것을 볼 수 있습니다,

네트워크 요청

분명 데이터를 한 번만 요청했는데, 왜 두 번이나 요청을 보낸 거지...?

Card 데이터를 요청하는 코드로 돌아가 간단한 테스트를 해봤습니다.

// Column.tsx
useEffect(() => {
    console.log('render');
    fetchCards();
}, [fetchCards]);

console 디버깅 결과

console.log도 2번 실행되네요. 이제 문제는 useEffect에 있다는 것이 확실해졌습니다.

문제 발생 원인

Next.js에서 useEffect의 콜백이 두 번 실행되는 이유는 React Strict Mode 때문이었습니다.

React의 Strict Mode는 개발 모드에서 useEffect나 componentDidMount와 같은 라이프사이클 훅이 두 번 실행되도록 만들어 상태 업데이트나 렌더링 시 발생할 수 있는 사이드 이펙트를 미리 검출한다고 합니다.

문제 해결 방법

next.config.ts 파일의 reactStrictMode를 fasle로 변경합니다.

const nextConfig: NextConfig = {
  /* config options here */
  reactStrictMode: false,
};

이제 서버를 다시 시작하면 ✨해결 완료✨

문제 해결

그런데 Strict Mode의 역할을 찾아보고 나서 뭔가 계속 찝찝합니다.

개발 모드에서만 더블 렌더링이 발생하고 배포 후에는 더블 렌더링이 발생하지 않는다고 하니 reactStrictMode를 true로 설정한 상태로 작업을 해보겠습니다.

Flag를 사용해 더블 렌더링 체크하기

const isFirstRender = useRef(true); // StrictMode 때문에 api 2번 요청해서 임시로 추가

useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
      return;
    }

    fetchCards();
}, [fetchCards]);

라이프사이클 훅이 2번 실행되기 때문에 첫 번째 렌더링 때는 아무 동작도 하지 않도록 하기 위해 isFirstRender이라는 Ref 객체를 선언했습니다. useEffect를 보시면 isFirstRender.current라는 조건문으로 첫 번째 렌더링인 경우 아무 동작도 하지 않고 return 해버리도록 만들었습니다.

결과는...

더블 렌더링 체크 결과

Strict Mode를 false로 설정했을 때와 동일하게 1번만 요청합니다!!

최종 배포를 할 때 코드를 삭제해줘야 하는 번거로움이 있지만, 그래도 Strict Mode의 여러 장점을 활용할 수 있으니 이 방법이 좋을 것 같습니다.

[Taskify] Chip(공통 컴포넌트) 추가

dev-hpk.tistory.com

[Taskify] 버튼(공통 컴포넌트) 추가

프로젝트에서 공통으로 사용하는 버튼 컴포넌트 개발을 맡게 되었습니다.아래 보이는 버튼들을 모두 하나의 버튼 컴포넌트로 관리해야 한다니... 일단 도전!// Button.tsximport styles from "./Button.module

dev-hpk.tistory.com

[Taskify] Chip(공통 컴포넌트) 추가

dev-hpk — Mon, 16 Dec 2024 21:48:54 +0900

공통 Chip 컴포넌트 UI

오늘은 공통 컴포넌트 Chip을 개발해 보겠습니다.

// Chip.ts
import { ReactNode } from 'react';

type ChipType = 'tag' | 'status' | 'status-option';

export interface ChipProps {
  children: ReactNode;
  chipType: ChipType;
}

export const bgTag = ['orange', 'green', 'pink', 'blue'];

// Chip.tsx
import clsx from 'clsx';
import { ChipProps } from '@/type/chip';
import { PropsWithChildren } from 'react';
import styles from './Chip.module.css';
import getTagColor from './helper';

/**
 * Chip 컴포넌트
 * - 다양한 유형의 Chip을 렌더링하는 공통 컴포넌트.
 * - chipType(['tag', 'status', 'status-option'])에 따라 스타일과 Dot 렌더링 여부를 결정합니다.
 *
 * @param {string} props.chipType - Chip의 타입을 지정
 * @param {React.ReactNode} props.children - Chip 내부에 렌더링할 내용
 * @returns {JSX.Element} Chip 컴포넌트의
 */
function Chip({ children, chipType }: PropsWithChildren<ChipProps>) {
  /**
   * renderDot: status인 타입인 경우 점을 렌더링
   * - 조건: chipType.startsWith('status') -> status | status-option
   * @returns {JSX.Element} - 점 span 태그
   */
  const renderDot = () =>
    chipType.startsWith('status') && <span className={styles.dot} />;

  const className = clsx(
    styles[chipType],
    chipType === 'tag' && getTagColor(styles),
  );

  return (
    <span className={className}>
      {renderDot()}
      {children}
    </span>
  );
}

export default Chip;

이번엔 아주 간단한 컴포넌트라 따로 파일을 분리할 필요가 없습니다.

그런데 한 가지만 문제가 생겼습니다. chipType이 'tag'인 경우 색상을 지정해줘야 한다는 것입니다.

할 일 생성 모달

할 일 생성 모달에서 태그 칸에 텍스트를 입력 후 엔터를 누르면 텍스트가 태그 형식으로 바뀌는 구조입니다.

그런데 태그가 특정 몇 개로 정의된 것도 아니고 태그마다 배경색을 지정해 줄 수 있는 방법이 없습니다.

오전 스크럼 때 팀원들에게 이슈를 공유하고 피그마에 정의된 4가지 색상 중 생성 시 랜덤하게 적용하는 방향으로 마무리되었습니다.

랜덤으로 색상 추가하는 로직

import { bgTag } from '@/type/chip';

/**
 * 랜덤한 tag 클래스를 반환하는 함수
 * - bgTag 배열에서 랜덤하게 선택
 *
 * @param {Record<string, string>} styles - 스타일 객체
 * @returns {string} 랜덤 배경색 클래스 이름
 */
const getTagColor = (styles: Record<string, string>): string => {
  if (!bgTag || bgTag.length === 0) return '';
  const idx = Math.floor(Math.random() * bgTag.length);
  return styles[bgTag[idx]];
};

export default getTagColor;

결과물

랜덤 색상 로직 결과물

Chip 컴포넌트를 제작하고 멘토님께 한 가지 코드 리뷰를 받았습니다.

타입스크립트에서 JSDoc으로 주석을 작성하는 것이 불필요한 중복 작업일 수 있다는 것입니다.

그 외에도 다른 문제점들이 있을 것 같아서 추가로 검색해 보니 다음과 같은 문제점들이 있었습니다.

중복성 : 타입스크립트는 이미 자체적으로 타입을 정의할 수 있는 기능을 제공하는데, JSDoc을 사용하면 타입을 다시 주석 형식으로 작성해야 하므로 중복된 작업이 발생합니다. TypeScript에서 타입을 명시적으로 정의하는 것이 더 효율적일 수 있습니다.
오류 가능성 : JSDoc에서 잘못된 타입 주석을 작성하면, 타입 검사가 제대로 이루어지지 않아서 런타임 오류가 발생할 수 있습니다. TypeScript의 정적 타입 검사 시스템을 사용하는 것보다 오류를 추적하기 어려운 경우가 많습니다.
디버깅 어려움 : JSDoc에서 작성된 타입 정보는 TypeScript 컴파일러에 의해 실제 타입으로 변환되지 않기 때문에, 디버깅 시 타입 관련 문제를 추적하는 데 어려움이 있을 수 있습니다.
자동 완성 및 인텔리센스 제한 : TypeScript는 타입 정보를 활용하여 자동 완성 기능이나 코드 인텔리센스를 제공하지만, JSDoc으로 제공된 타입 정보는 TypeScript 타입 시스템만큼 완벽하게 인식되지 않아 자동 완성이 제한될 수 있습니다.

팀원들에게 제 코드를 쉽게 알아볼 수 있도록 작성한 주석이 오히려 타입스크립트의 고유 시스템을 완전히 활용하는데 방해가 된다니..

지금부터는 JSDoc을 사용하지 않고 코드 자체가 직관적이고 이해하기 쉽도록 작성해야겠습니다.

함수와 변수 이름을 명확하게 작성하기
- 의미가 명확한 이름을 사용하여 코드의 목적과 동작을 직관적으로 전달.
- 약어 사용을 지양하고, 가능하면 완전한 단어를 사용.
불필요한 복잡성 피하기
- 로직을 간결하게 작성해 이해하기 쉬운 코드를 작성.
- 중복 코드 제거 및 코드 간결화.
코드의 목적 명확하게 전달
- 함수나 변수의 역할을 분명히 하여 코드를 읽는 사람이 쉽게 이해할 수 있도록 작성.
- 함수 하나가 하나의 명확한 작업만 하도록 작성(단일 책임).
주석 최소화
- 코드 자체로 의도가 명확하게 전달되도록 작성해 주석을 최소화.
- 주석이 필요한 경우 중요한 부분에만 간결하게 작성.
가독성 유지
- 코드 블록 간 적절한 개행을 통해 일관된 스타일로 가독성을 높임.
- 코드 길이를 적절히 유지하여 한눈에 파악할 수 있도록 작성.

[Taskify] 버튼(공통 컴포넌트) 추가

dev-hpk.tistory.com

[프로젝트] Taskify (태스키파이) 소개

드디어 중급 프로젝트 시작이다!! 지난 초급 프로젝트는 팀원들 모두 첫 프로젝트를 진행하는 상황이라 소통과 일정 관리, 그리고 업무 분담 면에서 많은 어려움이 있었습니다. 작업이 겹치거

dev-hpk.tistory.com

[Taskify] 버튼(공통 컴포넌트) 추가

dev-hpk — Fri, 13 Dec 2024 15:11:39 +0900

프로젝트에서 공통으로 사용하는 버튼 컴포넌트 개발을 맡게 되었습니다.

아래 보이는 버튼들을 모두 하나의 버튼 컴포넌트로 관리해야 한다니... 일단 도전!

버튼 UI

// Button.tsx
import styles from "./Button.module.css";
import { PropsWithChildren, ReactNode } from "react";
import clsx from "clsx";

interface ButtonProps {
  children: ReactNode;
  classes?: string | string[];
  disabled?: boolean;
  handler: () => void;
}

function Button({
  children,
  classes,
  disabled,
  handler,
}: PropsWithChildren<ButtonProps>) {
  const btnClass = classes
    ? Array.isArray(classes)
      ? classes.map((className) => styles[className] || className)
      : [styles[classes] || classes]
    : [];

  return (
    <button
      className={clsx(styles.button, ...btnClass)}
      onClick={handler}
      disabled={disabled}
    >
      {children}
    </button>
  );
}

export default Button;

Button을 사용하는 페이지에서 props로 스타일, disabled, handler를 전달하도록 만들어 봤습니다.

classes: 클래스 이름 or 클래스 이름 배열로 styles 객체와 매핑해 Module Css에 선언한 스타일을 적용하기 위한 prop
disalbed: 버튼의 disabled 상태를 버튼을 사용하는 페이지에서 관리할 수 있게 하기 위한 prop
handler: 버튼을 클릭했을 때 동작을 처리할 클릭 이벤트 핸들러

작업을 마치고 Button 컴포넌트를 사용하다가 문제를 발견했습니다.

버튼의 스타일을 커스텀하기 위해서 클래스를 직접 추가해줘야 한다는 것입니다..

예시 코드)

<Button classes={['colored', 'border', 'font-3xl-bold', 'round', ....]} />

멘토님께 질문도 해보고 디자인 라이브러리들을 참고해 본 결과 Button을 감싸는 상위 컴포넌트를 추가하기로 했습니다.

추가로 class를 직접 넣는 방법 대신 정해진 디자인을 사용하는 방법을 선택했습니다.

수정한 코드

import { ButtonHTMLAttributes, PropsWithChildren, ReactNode } from 'react';
import clsx from 'clsx';
import generateClassNames from '@/utils/generateClassNames';
import styles from './Button.module.css';

const types = {
  normal: {
    classes: ['normal', 'border'],
  },
  normal_colored: {
    classes: ['normal', 'colored'],
  },
  delete: {
    classes: ['delete', 'border'],
  },
  cancel: {
    classes: ['cancle', 'border'],
  },
  edit: {
    classes: ['edit', 'border'],
  },
  modal: {
    classes: ['modal', 'border'],
  },
  modal_colored: {
    classes: ['modal', 'colored'],
  },
  modal_single: {
    classes: ['modal', 'single', 'colored'],
  },
  auth: {
    classes: ['auth', 'colored'],
  },
  column: {
    classes: ['column', 'border'],
  },
  todo: {
    classes: ['todo', 'border'],
  },
  dashboard_add: {
    classes: ['dashboard', 'add', 'border'],
  },
  dashboard_delete: {
    classes: ['dashboard', 'delete', 'border'],
  },
  dashboard_card: {
    classes: ['dashboard', 'card', 'border'],
  },
};

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  children: ReactNode;
  classes: string[];
}

function Button({
  children,
  classes,
  ...props
}: PropsWithChildren<ButtonProps>) {
  const classNames = generateClassNames(classes, styles);
  return (
    <button
      type="button"
      className={clsx(styles.button, classNames)}
      {...props}
    >
      {children}
    </button>
  );
}

type BadgeColor = 'green' | 'purple' | 'orange' | 'blue' | 'pink';

interface CDSButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  btnType: keyof typeof types;
  badge?: BadgeColor;
  owner?: boolean;
}

function CDSButton({
  children,
  btnType,
  badge,
  owner,
  ...props
}: CDSButtonProps) {
  return (
    <Button classes={types[btnType].classes} {...props}>
      <span className={styles.button_content}>
        {btnType === 'dashboard_card' && badge && (
          <span className={clsx(styles.badge, styles[badge])} />
        )}
        {children}
        {['column', 'todo', 'dashboard_add'].includes(btnType) && (
          <img className={styles.icon_plus} src="ic/ic_chip.svg" alt="icon" />
        )}
        {btnType === 'dashboard_card' && owner && (
          <img
            className={styles.icon_crown}
            src="ic/ic_crown.svg"
            alt="ic_crown"
          />
        )}
      </span>
    </Button>
  );
}

CDSButton.defaultProps = {
  badge: null,
  owner: false,
};

export default CDSButton;

코드 설명을 먼저 하려고 했는데 너무 길어서... 파일별로 분리한 후 설명하겠습니다!

코드 분리

/type/button.ts

import { ButtonHTMLAttributes, ReactNode } from 'react';

// BadgeColor: 배지 색상 타입.
// 허용되는 색상: 'green', 'purple', 'orange', 'blue', 'pink'
export type BadgeColor = 'green' | 'purple' | 'orange' | 'blue' | 'pink';

// 버튼의 타입과 관련된 클래스 리스트.
export const types = {
  normal: {
    classes: ['normal', 'border'],
  },
  normal_colored: {
    classes: ['normal', 'colored'],
  },
  delete: {
    classes: ['delete', 'border'],
  },
  cancel: {
    classes: ['cancle', 'border'],
  },
  edit: {
    classes: ['edit', 'border'],
  },
  modal: {
    classes: ['modal', 'border'],
  },
  modal_colored: {
    classes: ['modal', 'colored'],
  },
  modal_single: {
    classes: ['modal', 'single', 'colored'],
  },
  auth: {
    classes: ['auth', 'colored'],
  },
  column: {
    classes: ['column', 'border'],
  },
  todo: {
    classes: ['todo', 'border'],
  },
  dashboard_add: {
    classes: ['dashboard', 'add', 'border'],
  },
  dashboard_delete: {
    classes: ['dashboard', 'delete', 'border'],
  },
  dashboard_card: {
    classes: ['dashboard', 'card', 'border'],
  },
};

export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  children: ReactNode;
  classes: string[];
}

export interface CDSButtonProps
  extends ButtonHTMLAttributes<HTMLButtonElement> {
  btnType: keyof typeof types;
  badge?: BadgeColor;
  owner?: boolean;
}

ButtonHTMLAttributes: Button Html 요소가 가질 수 있는 모든 속성 타입을 제공합니다. 기존에 disabled나, handler 같은 prop을 사용하지 않아도 되기 때문에 상속받아서 사용했습니다.
React.ComponentProps <'button'>을 사용하면 ButtonHTMLAttributes와 동일한 동작을 더 간결하게 할 수 있다고 해서 추후 더 공부해 보기로 하겠습니다.
types: Button 컴포넌트를 사용할 때 클래스를 직접 넣어주지 않아도 type만 설정하면 사용할 수 있도록 타입을 선언했습니다. 버튼 타입이 추가되거나 스타일이 바뀌어도 유지보수 측면에서도 유리하겠죠?

/utils/generateClassNames.ts

/**
 * 각 클래스 이름에 해당하는 스타일을 매핑하는 유틸 함수
 *
 * @param {string | string[]} classes - 클래스 이름 문자열 또는 문자열 배열
 * @param {Record<string, string>} styles - 클래스 이름에 대한 스타일을 매핑한 객체
 * @returns {string[]} 스타일을 매핑한 클래스 이름 배열
 *
 * - `classes`가 문자열일 경우 해당 클래스에 해당하는 스타일을 반환하고,
 * - `classes`가 배열일 경우 배열 내 각 클래스에 대해 스타일을 적용한 결과를 반환합니다.
 * - module.css에 해당 클래스가 없으면 원래의 클래스 이름을 그대로 반환합니다.
 */
const generateClassNames = (
  classes: string | string[],
  styles: Record<string, string>,
): string[] => {
  if (!classes) return [];
  return Array.isArray(classes)
    ? classes.map((className) => styles[className] || className)
    : [styles[classes] || classes];
};

export default generateClassNames;

CDSButton.tsx

import clsx from 'clsx';
import { CDSButtonProps, types } from '@/type/button';
import styles from './Button.module.css';
import Button from './Button';

/**
 * CDSButton: 다양한 버튼 유형을 처리하는 공통 버튼 컴포넌트.
 *
 * @param {CDSButtonProps} props - 커스텀 버튼 속성
 * @returns {JSX.Element} - 버튼 컴포넌트
 */
function CDSButton({
  children,
  btnType,
  badge,
  owner,
  ...props
}: CDSButtonProps) {
  /**
   * renderPlusIcon: 특정 버튼 유형에서 + 아이콘 렌더링
   * - 대상: 'column', 'todo', 'dashboard_add' 타입
   * @returns {JSX.Element} - + 아이콘
   */
  const renderPlusIcon = () =>
    ['column', 'todo', 'dashboard_add'].includes(btnType) && (
      <img className={styles.icon_plus} src="ic/ic_chip.svg" alt="icon" />
    );

  /**
   * renderOwnerIcon: 대시보드 카드 유형에서 소유인 경우 왕관 아이콘 렌더링
   * - 조건: btnType === 'dashboard_card' && owner === true
   * @returns {JSX.Element} - 왕관 아이콘
   */
  const renderOwnerIcon = () =>
    btnType === 'dashboard_card' &&
    owner && (
      <img className={styles.icon_crown} src="ic/ic_crown.svg" alt="ic_crown" />
    );

  /**
   * renderBadge: 대시보드 카드 유형에서 색상 배지 렌더링
   * - 조건: btnType === 'dashboard_card' && badge !== null
   * @returns {JSX.Element} - 배지 span 태그
   */
  const renderBadge = () =>
    btnType === 'dashboard_card' &&
    badge && <span className={clsx(styles.badge, styles[badge])} />;

  return (
    <Button classes={types[btnType].classes} {...props}>
      <span className={styles.button_content}>
        {renderBadge()}
        {children}
        {renderPlusIcon()}
        {renderOwnerIcon()}
      </span>
    </Button>
  );
}

CDSButton.defaultProps = {
  badge: null,
  owner: false,
};

export default CDSButton;

CDSButton 컴포넌트는 처음에 아래 코드처럼 조건부 렌더링으로 처리했었습니다.

작업을 마치고 보니 가독성 측면에서 너무 떨어지고, 조건이 추가되면 유지보수하기 어려울 것 같아서 개별 함수로 분리했습니다.

svg 아이콘은 아직 SVG 컴포넌트 방식과 SVGR 중 결정 전이라 임의로 img 태그 사용했습니다...!

...
return (
    <Button classes={types[btnType].classes} {...props}>
      <span className={styles.button_content}>
        {btnType === 'dashboard_card' && badge && (
          <span className={clsx(styles.badge, styles[badge])} />
        )}
        {children}
        {['column', 'todo', 'dashboard_add'].includes(btnType) && (
          <img className={styles.icon_plus} src="ic/ic_chip.svg" alt="icon" />
        )}
        {btnType === 'dashboard_card' && owner && (
          <img
            className={styles.icon_crown}
            src="ic/ic_crown.svg"
            alt="ic_crown"
          />
        )}
      </span>
    </Button>
  );
  ...

Button.tsx

import { PropsWithChildren } from 'react';
import clsx from 'clsx';
import generateClassNames from '@/utils/generateClassNames';
import { ButtonProps } from '@/type/button';
import styles from './Button.module.css';

/**
 * Button: 공통 버튼 컴포넌트
 * @param {ReactNode} children - 버튼 내부의 콘텐츠
 * @returns {JSX.Element} - 버튼 컴포넌트
 */
function Button({
  children,
  classes,
  ...props
}: PropsWithChildren<ButtonProps>) {
  const classNames = generateClassNames(classes, styles);
  return (
    <button
      type="button"
      className={clsx(styles.button, classNames)}
      {...props}
    >
      {children}
    </button>
  );
}

export default Button;

완성하고 보니, 컴포넌트를 만드는 시간보다 리팩토링에 쓴 시간이 더 많은 것 같네요...

리팩토링도 끝났겠다 이제 결과물을 공개하겠습니다..! 다른 페이지에서 바로 가져다 쓸 수 있게 테스트 페이지에 작업했습니다.

공통 버튼 화면

느낀 점

초기 설계의 중요성 : 초기 잘못된 코드 구조 때문에 리팩토링을 반복하면서 초기 설계가 얼마나 중요한지 알게 되었습니다.
코드 품질 향상에 대한 새로운 관점 : 리팩토링 과정에서 코드 품질 향상에 집중하다 보니 가독성과 유지보수성을 고려하게 되었고, 이 과정에서 단순히 동작하는 코드와 유지보수 가능한 코드의 차이를 깨닫게 되었습니다.
협업의 중요성 : 멘토님과 팀원들과의 코드 리뷰를 통해 개선 방향을 명확히 하고 더 나은 코드를 작성할 수 있었습니다.
코드 설명을 문서화하자 : 팀원들이 제가 만든 컴포넌트를 쉽게 이해하게 하기 위해 jsdoc을 꼼꼼히 작성했습니다. 이를 통해 팀원들과의 협업 능력을 향상시키는 계기가 되었을 뿐 아니라 제 코드의 구조와 의도를 다시 한 번 검토하며 스스로 학습할 수 있는 좋은 기회가 되었습니다.

[프로젝트] Taskify (태스키파이) 소개

dev-hpk.tistory.com

[SVGR] Next.js에서 SVGR 사용하기

dev-hpk — Fri, 13 Dec 2024 13:42:03 +0900

Next.js에서 SVGR을 사용하면 SVG 파일을 React 컴포넌트처럼 사용할 수 있습니다.

SVGR - Transforms SVG into React Components. - SVGR

Transforms SVG into React Components.

react-svgr.com

목차
1. SVGR이란?

2. Next.js에 SVGR 설정하기

3. SVGR 사용 예시

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

1. SVGR이란?

SVG는 벡터 기반의 이미지 파일로, 용량이 작고 크기를 바꿔도 이미지가 깨지지 않기 때문에 웹에서 자주 사용되는 이미지 포맷입니다. Next.js 기반 프로젝트에서 SVG를 사용하는 방법은 크게 2가지입니다.

svg 파일의 경로를 img 파일의 src 속성에 넣어 img 태그와 함께 사용
```
<img src='~.svg' />
```

svg 파일을 JSX 형태인 리액트 컴포넌트로 만들어 사용

const PlusIcon = ({ props }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="48"
    height="48"
    viewBox="0 -960 960 960"
    {...props}
  >
    ...
  </svg>
);

export default PlusIcon;

두 방법 모두 장·단점이 있지만, svg를 리액트 컴포넌트 형태로 불러와 사용하면 props를 통해 크기, 색상 등을 커스텀할 수 있어 svg를 보다 다룰 수 있습니다.

아이콘이 많아질수록 일일이 컴포넌트를 만들어주는 작업을 하는 것은 굉장히 힘들고 비효율적인 일입니다.

svg 내부에 미리 지정되어 있는 속성들이 있다면 props를 통해 svg를 커스텀하기 위해 여러 가지 후처리가 필요합니다.

SVGR은 이런 작업을 자동으로 처리해 주는 라이브러리입니다. SVGR은 여러 가지 환경에서 단독으로도 사용할 수 있지만,

프로젝트에서 사용할 때는 주로 @svgr/webpack이라는 웹팩 로더를 사용하여 작업합니다.

2. Next.js에 SVGR 설정하기

설치

npm install --save-dev @svgr/webpack
# or use yarn
yarn add --dev @svgr/webpack

next.config.js에 webpack 설정 추가

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  reactStrictMode: true,
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/, // SVG 파일을 찾습니다.
      use: [
        {
          loader: "@svgr/webpack", // SVGR 로더 사용
          options: {
            icon: true, // 기본적으로 SVG를 아이콘 크기로 조정
          },
        },
      ],
    });

    return config;
  },
};

export default nextConfig;

타입스크립트를 사용하신다면 아래와 같은 에러가 발생할 수 있습니다.

타입 에러

이는 TypeScript 상에서 .svg로 불러오는 컴포넌트에 대한 타입이 지정되어있지 않기 때문에 발생하는 문제입니다.

global.d.ts에 .svg 파일에 대한 타입을 선언해 주세요.

//global.d.ts
declare module "*.svg" {
  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
  export default content;
}

// tsconfig.json
{
  ....
  "include": [
    "global.d.ts",
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
  ],
  "exclude": ["node_modules"]
}

3. SVGR 사용 예시

React의 컴포넌트와 동일하게 import 하셔서 사용하시면 됩니다.

import Chip from "@/public/ic_chip.svg";

export default function Home() {
	return <Chip width={30} height={30}/>
}

[프로젝트] Taskify (태스키파이) 소개

dev-hpk — Thu, 12 Dec 2024 21:59:58 +0900

드디어 중급 프로젝트 시작이다!!

지난 초급 프로젝트는 팀원들 모두 첫 프로젝트를 진행하는 상황이라 소통과 일정 관리, 그리고 업무 분담 면에서 많은 어려움이 있었습니다. 작업이 겹치거나 누락되는 경우도 있었고, 서로의 의견을 조율하다가 오전을 모두 사용한 적도 있었습니다. 이런 경험은 당시에는 힘들었지만 팀 프로젝트에서 무엇이 중요한지를 배우는 값진 기회였습니다.

중급 프로젝트를 시작하며 설레는 마음도 크지만 긴장감도 함께 느껴집니다.

이전 경험을 바탕으로 소통을 더욱 원활히 하고 일정 관리와 업무 분담을 철저히 계획해 프로젝트를 성공적으로 마무리하며 팀원들과 함께 좋은 결과를 만들어내고 싶습니다. 이번에는 더 나은 협업을 통해 성장과 성취를 모두 이루는 뜻깊은 시간을 기대해 봅니다✨✨

기술 스택

Next.js: 리액트는 SPA(Single Page Application)이고, CSR(Client Side Rendering) 기반으로 앱의 첫 로딩시간이 길고, SEO 가 좋지 않다는 단점이 있다. 이를 해결하기 위해 SSR(서버 사이드 렌더링), SSG(정적 사이트 생성), 파일 기반 라우팅, 성능 최적화 등 다양한 기능을 기본적으로 제공하는 Next.js를 선택했습니다.
TypeSciprt: ts는 컴파일 과정에서 오류를 잡아내기 때문에 오류를 잡아내기 쉽고, 협업 시 팀원들이 작성한 코드에 타입이 명시되어 흐름을 쉽게 파악할 수 있기 때문에 선택했습니다.
Module Css: 컴포넌트 단위로 파일을 분리하고 스타일을 적용할 수 있어 클래스 이름 충돌을 방지해 주기 때문에 선택했습니다.
Redux: Redux는 많은 대규모 프로젝트에서 사용되고 있는 상태 관리 도구이기 때문에 학습을 통해 최신 트렌드와 함께 실제 프로젝트에서의 활용 방법을 익히기 위해 선택했습니다.
Vercel: Next.js 프로젝트와의 뛰어난 호환성을 제공하며 간편하게 배포와 호스팅이 가능하기 때문에 선택했습니다. (빠른 배포 속도 & 무료)
Notion: 팀원들과 함께 Notion 페이지를 관리하며 프로젝트에 맡겨진 업무, 진행 현황 등을 실시간으로 공유하고 피드백을 받을 수 있어 선택했습니다.

네이밍 컨벤션

디렉터리 & 파일명
케밥 케이스(kebab-case) ex) item-category

컴포넌트
파스칼 케이스(PascalCase) ex) ItemComponent

변수명
카멜 케이스(camelCase) ex) itemData

커스텀훅
use + 파스칼 케이스(PascalCase) ex) useItemData.tsx

이미지 & 아이콘
img, ic + 스네이크 케이스(snake_case) ex) img_item.svg ic_item.svg

className
케밥 케이스(kebab-case) ex) button button-primary

id
파스칼 케이스(PascalCase) ex) Button ButtonPrimary

효율적으로 PR 관리하기

1. GitHub에서 이슈 생성하기

Labels, Assignees, 및 Projects 추가

Labels: 이슈의 성격 예) bug, enhancement, documentation.
Assignees: 해당 이슈를 담당할 사람
Projects: ‘프로젝트 현황’

이슈 생성

Submit new issue

"Submit new issue" 버튼을 클릭하여 이슈를 생성합니다.

2. 이슈 생성 시 #00_제목으로 브랜치 자동 생성

이슈 생성 시 자동생성 된 브랜치를 fetch를 통해 가져옴

터미널에서 작업을 위해 새로운 브랜치를 생성합니다. 브랜치명에 이슈 번호를 포함하여 추적이 쉽게 만듭니다.

Git Flow

브랜치를 나누는 방법 중에 하나이다.
작업의 성격에 따라 브랜치를 나눌 수 있다.

⭐️main(master)	서비스를 직접 배포하는 역할을 하는 브랜치
⭐️feature(기능)	각 기능 별 개발 브랜치
develop(개발)	feature에서 개발된 내용을 가지고 있는 브랜치
release(배포)	배포를 하기 전 내용을 QA(품질 검사) 하기 위한 브랜치
hotfix(빨리 고치기)	main 브랜치로 배포를 하고 나서 버그가 생겼을 때 빨리 고치기 위한 브랜치

feature 브랜치는 주로 'feat/{기능_이름}'으로 명명
ex) feature/login
이슈 생성 시 자동으로 ‘feature/#번호_제목’으로 자동 생성됨
git fetch로 origin(원격 저장소)의 내용을 local로 가져오기

자동생성된 브랜치로 이동 후 작업

git checkout ‘자동 생성된 branch’ : 자동생성된 branch로 이동하기
- ex) git checkout feature/#50_PR-템플릿-만들기
코드 작업 및 커밋
```
git add .
gitmoji -c
```

원격 저장소로 푸시

로컬 브랜치를 원격 저장소에 푸시합니다.
```
git push origin ‘자동 생성된 branch’
```

3. Pull Request (PR) 작성하기

GitHub에서 Pull Request 생성
- GitHub 저장소에서 **Pull requests** 탭을 클릭하고, New pull request 버튼을 누릅니다.
- 비교할 브랜치를 선택하여 PR을 만듭니다.
  - base : develop ,
  - compare : 이때까지 작업한 branch
    pr 생성
PR document 작성
pr 내용 작성

PR 설명에는 다음 내용을 포함합니다:
- 이슈 번호
  - PR 본문에 이슈 연결 키워드 + #이슈번호 작성
    - 본문에 작성하면, 해당 이슈에서 PR이 연결된 것을 확인할 수 있다.
  - 이슈 연결 키워드
    - close / closes / closed: 완료된 상태로 단순히 닫는다
    - fix / fixes / fixed: 이슈의 문제나 버그를 수정하여 완료하는 경우
    - resolve / resolves / resolved: 이슈의 해결을 완료하는 의미로, 문제나 과제를 종결짓는 뉘앙스
- 변경 사항 요약: 어떤 수정이 있었는지 요약.
- 테스트 사항: 변경 사항을 테스트한 내용 (필요시).
Create pull request 버튼 클릭 하여 PR 생성

4. merge 및 다음 작업 과정

팀원들이 확인 및 답글을 달면 Merge pull request 버튼 활성화
merge를 하게 되면 이슈가 closed 되고, project 탭의 작업 상태도 done으로 변경

소개 끝났으니 힘내서 프로젝트 진행해 보겠습니다

[JS] for ...of와 for ...in

dev-hpk — Wed, 11 Dec 2024 16:55:21 +0900

JavaScript에서는 배열, 객체, 기타 데이터 구조를 순회(iterate)하는 다양한 방법을 제공합니다. 그중 for... of와 for...in은 이름이 비슷해서 종종 혼동되지만, 작동 방식과 사용 목적이 전혀 다릅니다.

목차
1. for...of

2. for ...in

3. 주요 차이점

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

1. for...of

for...of는 이터러블 객체(배열, 문자열, Set, Map 등)의 값을 순회합니다.

주로 배열이나 기타 이터러블 객체의 값에 접근할 때 사용합니다.

사용 예시

const numArray = [1, 2, 3];
for (const num of numArray) {
    console.log(num); // 1, 2, 3
}

결과가 배열의 값(value)으로 잘 출력되네요.

그럼 배열에 for ...in을 사용하면 어떤 결과가 나올까요?

const numArray = [1, 2, 3];
for (const num in numArray) {
  console.log(num); // 0, 1, 2
}

에러가 발생하지 않고 0 1 2라는 값이 출력되었습니다. 자바스크립트는 배열도 Object 타입으로 인식하기 때문에 결과가 나온 것입니다. 다만 해당 배열의 index가 출력되는 걸 확인할 수 있습니다.

2. for ...in

for ...in은 객체의 열거 가능한 속성(keys)을 순회합니다.

주로 객체의 속성을 확인하거나 순회할 때 사용합니다.

사용 예시

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
    console.log(key); // "a", "b", "c"
}

결과가 객체의 속성(keys)으로 잘 출력되네요.

그럼 객체에 for... of을 사용하면 어떤 결과가 나올까요?

const obj = { a: 1, b: 2, c: 3 };
for (const key of obj) {
    console.log(key);
}

for...of 결과

obj 객체가 반복 가능한 객체가 아니라고 TypeError를 출력되는 걸 확인할 수 있습니다.

3. 주요 차이점

구분	for ...in	for ...of
순회 대상	객체의 열거 가능한 속성(key)	이터러블(iterable) 객체의 값
출력 내용	객체의 속성(key)	이터러블(iterable) 객체의 값
사용 대상	객체	배열, 문자열, Set, Map 등 이터러블(iterable) 객체
상속 속성 포함 여부	상속된 속성도 포함	포함하지 않음

차이 예시

const array = [10, 20, 30];
array.customProperty = "Hello";

// for ...in
for (const key in array) {
    console.log(key); // "0", "1", "2", "customProperty"
}

// for ...of
for (const value of array) {
    console.log(value); // 10, 20, 30
}

for...in은 배열의 인덱스와 추가된 속성(customProperty)을 모두 순회합니다.
for... of는 배열의 값만 순회하며, 추가 속성은 무시합니다.

정리

for...in은 객체의 속성(key)을 순회하며, 배열에서는 예기치 않은 속성까지 포함될 수 있으므로 주의가 필요합니다.
for...of는 이터러블 객체의 값만 순회하므로 배열, 문자열, Set, Map 등에서 더욱 간단하고 직관적인 사용이 가능합니다.