dayannne.log

Next.js | next-translate 기반 다국어(i18n) 설정 탐구하기

Mon, 08 Sep 2025 01:42:31 GMT

🌍 next-translate 기반 다국어 설정 탐구하기

인턴 중인 회사에서 글로벌 플랫폼을 운영함에 따라 다국어 설정 라이브러리로 next-translate를 사용하고 있었다.

next-translate를 기반으로 i18n 세팅을 프로젝트에 어떻게 구성하는지, 특히 i18n.ts 설정 / I18nProvider 적용 / useTranslation 네임스페이스 사용에 대해 탐구한 것을 바탕으로 정리해보려 한다.

Next.js 다국어(i18n) 라이브러리

많이 사용하는 라이브러리로는 react-i18next next-i18next next-translation 가 있는 것 같다.

1️⃣ react-i18next

기반: i18next의 React 버전
사용 대상: 일반 React 프로젝트 or CSR 중심 프로젝트
특징: 가장 널리 쓰이는 i18n 라이브러리 중 하나 훅(useTranslation) 기반으로 컴포넌트에 쉽게 다국어 적용 가능 Lazy loading, namespace, fallback language 등 다양한 기능 지원 서버사이드 렌더링(SSR) 지원은 있지만 Next.js와 완벽한 통합은 아님

2️⃣ next-i18next

기반: react-i18next + Next.js
사용 대상: Next.js 프로젝트에서 SSR과 SSG를 모두 지원하고 싶을 때
특징: Next.js에 최적화된 i18n 솔루션 서버 사이드에서 번역 리소스를 로딩하며 SEO에 유리 파일 기반 번역(json), 언어 별 namespace 구조 제공 app/ 디렉토리 (Next.js 13+) 지원도 진행 중이지만 제한적일 수 있음

3️⃣ next-translation

기반: Next.js 전용 경량화된 i18n 솔루션
사용 대상: 최신 Next.js (app/ 디렉토리 기반)와 함께 사용하는 경우
특징: 작은 번들 사이즈, 빠른 빌드 속도 직관적인 API와 폴더 구조 클라이언트와 서버 모두에서 동작 app/ 디렉토리 기반의 App Router 완전 지원 번역 파일은 페이지 또는 컴포넌트 단위로 나눠 관리 가능

🔧 구조 개요

/locales
    /ko
        common.json
        signup.json
    /en
        common.json
        signup.json
/i18n
    i18n.ts
    i18n.js
/pages
    _app.tsx
/components
    SignUpForm.tsx

🗂 번역 파일 예시

// locales/ko/signup.json
{
  "title": "회원가입",
  "step1": {
    "heading": "1단계"
  }
}

// locales/en/signup.json
{
  "title": "Sign Up",
  "step1": {
    "heading": "Step 1"
  }
}

📁 i18n.ts / i18n.js 설정

기본 세팅은 i18n.js 또는 i18n.ts에 정의한다.

이 파일은 next.config.js와 연결되며, next-translate가 참조하게 된다.

// i18n.ts (or i18n.js)
module.exports = {
  locales: ['ko', 'en'],
  defaultLocale: 'ko',
  pages: {
    '*': ['common'],
    '/signup': ['signup']
  }
}

locales: 지원 언어 목록
defaultLocale: 초기 언어
pages: 경로별로 사용할 네임스페이스(json 파일 이름)를 정의

pages 안에 어떤 페이지에서 어떤 json 파일을 불러올지 배열 형식으로 작성해 준다. 예를 들어 /signup 페이지에선 signup.json과 common.json 두 네임스페이스가 사용 된다.

위와 같이 세팅 후, 번역을 사용할 코드에서는 useTranslation 키워드를 사용하면 된다.

만약 여기서 지정해주지 않은 채로 뷰단에서 useTranslation('signup')을 사용할 시 적용되지 않기 때문에 주의해야 한다..!

🔁 useTranslation

next-translate는 훅 기반의 API를 제공하고 있다. 컴포넌트에서 다음처럼 사용할 수 있다.

import useTranslation from 'next-translate/useTranslation';

const SignUpForm = () => {
  const { t } = useTranslation('signup');

  return {t('title')};
};

useTranslation('signup'): signup 네임스페이스 로드
t('title') : signup.json 내 "title" key 참조

📌 t의 타입이 명확하지 않을 때 아래와 같이 타입 선언도 가능하다 :


const { t }: { t: (key: string) => string } = useTranslation('signup');

🧪 I18nProvider

일반적으로 next-translate는 자체적으로 컨텍스트를 주입하므로, 대부분의 경우 I18nProvider를 따로 쓸 필요는 없다.

그러나 테스트 환경이나, Next.js의 렌더링 흐름 외부에서 번역을 사용할 때는 I18nProvider로 명시적으로 context를 감쌀 수 있다.

예시:

import { I18nProvider } from 'next-translate';
import i18nConfig from '../i18n/i18n';

lang: 언어 지정
namespaces: 직접 번역 값 주입
config: i18n.ts 설정 전달

📌 이 방식은 주로 Storybook, Unit Test, Preview 환경 등에서 사용 되는 듯하다.

⚠️ 주의할 점

항목	설명
네임스페이스 누락	`useTranslation("ns")` 호출 시 해당 파일이 로드되지 않음
JSON key 오타	`t()`가 fallback으로 key 자체를 출력함
`pages` 설정 누락	자동 로딩되지 않아 runtime 오류 발생 가능

✅ 요약

항목	설명
사용 라이브러리	`next-translate`
번역 파일 위치	`/locales/{lang}/{namespace}.json`
주요 훅	`useTranslation('namespace')`
설정 파일	`i18n.ts` or `i18n.js`
Provider 사용	대부분 불필요 (예외: 테스트/프리뷰 환경)

✍️ 마치며

그동안 글로벌 플랫폼은 어떻게 운영되는지에 대한 궁금증이 있었는데, 실제로 현업에서 next-translate를 통해 다국어 설정이 어떻게 되어있는지 살펴보고, 또 관련한 버그를 수정해 보면서 배울 수 있었다.

단순히 텍스트를 번역하는 것을 넘어, 언어별 파일 구조 관리, 페이지 기반 네임스페이스 로딩, 그리고 SSR을 고려한 번역 처리 흐름까지 생각해야 한다는 점이 인상 깊고 알면 알수록 디테일한 고려사항들이 숨어 있는 신비한(?) 프론트엔드 세계...

Next.js | Tanstack Query로 prefetch 적용하기

Sun, 13 Oct 2024 09:39:34 GMT

Next.js + Prisma로 DB를 조회하면서 API를 구현해 작업하고 있는 프로젝트에서,

개발 후 셀프 QA를 하면서 초기 페이지 렌더링 + 데이터 fetching 시간까지 더해 로딩이 무지하게 느려지는 부분이 아쉽게 느껴졌다.

방법을 고민하다 Tanstack Query(React Query)에서 제공하는 Hydration API 를 발견! 이 기능을 통해 Next.js의 서버 컴포넌트에 data prefetching을 사용할 수 있다고 하여 도입해 보기로 했다.

원리는 다음과 같다.

서버 컴포넌트에서 queryClient.prefetchQuery를 사용해 데이터를 불러오고 이를 dehydrate하여 하위 컴포넌트를 HydrationBoundary로 감싸 state를 넘겨 준다.

데이터를 사용하는 컴포넌트에서 useQuery로 동일한 데이터를 불러오면 해당 데이터는 prefetch 된 상태로 넘어와 이를 사용한다.

초기 세팅

useReactQuery.tsx

'use client';

import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

export default function ReactQueryProviders({
  children,
}: React.PropsWithChildren) {
  function makeQueryClient() {
    return new QueryClient({
      defaultOptions: {
        queries: {
          staleTime: 60 * 1000,
        },
      },
    });
  }

  let browserQueryClient: QueryClient | undefined = undefined;

  function getQueryClient() {
    if (typeof window === 'undefined') {
      // Server일 경우
      return makeQueryClient();
    } else {
      // Browser일 경우
      if (!browserQueryClient) browserQueryClient = makeQueryClient();
      return browserQueryClient;
    }
  }

  const queryClient = getQueryClient();

  return (
    
  {children}
{/*  */}

);
}

function makeQueryClient() {
  return new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 60 * 1000,
      },
    },
  });
}

SSR에서 클라이언트에서 즉시 refetch하는 것을 피하기 위해 staleTime을 0보다 크게 설정하는 것이 좋다. 실제로 staleTime을 설정하지 않았다가 query key 변경 사항이 없음에도 무한 refetch를 경험한 적이 있다..b

function getQueryClient() {
  if (typeof window === 'undefined') {
    // Server
    return makeQueryClient();
  } else {
    // Browser
    if (!browserQueryClient) browserQueryClient = makeQueryClient();
    return browserQueryClient;
  }
}

typeof window === 'undefined' (서버인 경우) : 매번 새로운 queryClient를 만든다.
(브라우저인 경우) : queryClient가 존재하지 않을 경우에만 새로운 queryClient를 만든다.

기존에 React Query를 설정할 때는 클라이언트에서 QueryClient를 생성하여 지속적으로 사용하는 방식이다. 그러나 prefetching 기능을 사용할 때는 서버에서도 QueryClient를 생성해야 하므로, 서버에서 이미 생성된 경우에는 다시 생성하지 않도록 로더 함수에 조건문을 추가해 주는 방식이다.

app/layout.tsx

import type { Metadata } from 'next';
import Script from 'next/script';

import { Noto_Sans_KR } from 'next/font/google';

import '../styles/globals.css';

import ReactQueryProviders from './_hooks/useReactQuery';

export const metadata: Metadata = {
  title: '나의 산책 일기',
  description: '나의 산책 일기 - my walk log',
};

const font = Noto_Sans_KR({
  subsets: ['latin'],
});
export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    
      
        
        
          {children}
        
      
    
  );
}

ReactQueryProviders를 chiildren에 싹 감싸준다~

prefetchQuery

기본 세팅 방법은 아래와 같다.

1. 먼저 서버 컴포넌트를 준비!

내 프로젝트에서는 레이아웃 컴포넌트를 모두 서버 컴포넌트로 분리해 두고 있기 때문에 페이지 컴포넌트에 GET 요청이 필요한 컴포넌트가 있는 경우 prefetch & dehydrate 를 적용해 주었다.

prefetch & dehydrate는 useQuery를 사용하는 컴포넌트 바로 상위에서 적용해 주는 것이 좋다. 한 번 상위에서 적용하면 모든 하위 컴포넌트에 전역적으로 적용이 가능하지만, 모든 컴포넌트에서 해당 쿼리 데이터를 미리 불러오게 되기 때문에 불필요한 데이터 로딩이 이뤄질 수 있기 때문이다.

import Header from '@/app/_component/common/Header';
import getQueryClient from '@/app/shared/utils/getQueryCLient';
import { getDiaryDetail } from '@/app/store/server/diary';
import { dehydrate, HydrationBoundary } from '@tanstack/react-query';

export interface DiaryLayoutProps {
  children: React.ReactNode;

  params: { diaryId: number };
}

const DiaryLayout = async ({ children, params }: DiaryLayoutProps) => {
  const queryClient = getQueryClient();

  await queryClient.prefetchQuery({
    queryKey: ['diaryDetail', Number(params?.diaryId)],
    queryFn: () => getDiaryDetail(Number(params?.diaryId)),
  });

  return (
    
      
      
        {children}
      
    
  );
};

export default DiaryLayout;

export const getDiaryDetail = async (diaryId: number) => {
  const response = await axios.get(
    `${process.env.NEXT_PUBLIC_DOMAIN}/api/diary/${diaryId}`,
  );

  return response.data.data;
};

여기서 주의할 점 ⚠️ 보통 axios를 사용한다면

const response = await axios.get(`/api/diary/${diaryId}`,);

이렇게 위와 같이 도메인을 빼고 사용하는데, 서버에서 API를 요청할 때에는 도메인을 꼭 붙여 사용해야 한다. 이는 서버와 클라이언트 환경에서의 실행 방식 차이로, API 요청을 서버에서도 처리하기 위해서는 localhost나 로컬 환경의 도메인과 무관하게 외부 도메인을 포함한 URL이 필요 절대 경로가 필요하기 때문이다! (이 부분을 모르고 세팅했다가 전혀 적용이 되지 않아 바보 고생을 했다는 이야기✌️)

2. 하위 클라이언트 컴포넌트

export const useGetDiaryDetail = (diaryId: number) =>
  queryOptions({
    queryKey: ['diaryDetail', diaryId],
    queryFn: () => getDiaryDetail(diaryId),
    enabled: !!diaryId,
  });

'use client';

import PlaceDetailModal from '@/app/_component/common/Modal/PlaceDetailModal';
import Commentform from '@/app/_component/diary/Commentform';
import CommentList from '@/app/_component/diary/CommentList';
import DiaryItem from '@/app/_component/diary/DiaryItem';
import { useModalStore } from '@/app/store/client/modal';
import { useUserStore } from '@/app/store/client/user';
import {
  useDiaryLike,
  useDeleteDiary,
  useGetDiaryDetail,
} from '@/app/store/server/diary';
import { useSuspenseQuery } from '@tanstack/react-query';
import { useEffect, useState } from 'react';

export interface DiaryPageProps {}

const DiaryPage = ({ params }: { params: { diaryId: number } }) => {
  const { diaryId } = params;

  const queryOptions = useGetDiaryDetail(params.diaryId);
  const { data: diary, isLoading, error } = useSuspenseQuery(queryOptions);

  // ...나머지 코드

  return (
    <>
      
         handleClick(diary?.id)}
        />
        {/* ...나머지 코드*/}
      
      {/* ...나머지 코드*/}
    
  );
};

export default DiaryPage;

그리고 하위 컴포넌트인 Page 컴포넌트에서 useSuspenseQuery / useQuery를 적용해 주면 끝! 이렇게 사용하면 Next.js와 React Query를 함께 사용하여 SSR페이지를 만들 수 있다.

prefetchInfiniteQuery

이번엔 하위 컴포넌트에서 useInfiniteQuery를 사용하는 경우이다. 이때는 prefetchInfiniteQuery를 사용하면 된다.

1. 서버 컴포넌트

export const getFeed = async (pageParam = 1) => {
  const response = await axios.get(
    `${process.env.NEXT_PUBLIC_DOMAIN}/api/feed`,
    {
      params: { page: pageParam, size: 10 },
    },
  );
  return response.data;
};

import Header from '@/app/_component/common/Header';
import { IDiary } from '@/app/shared/types/diary';
import getQueryClient from '@/app/shared/utils/getQueryCLient';
import { getFeed } from '@/app/store/server/feed';
import { HydrationBoundary, dehydrate } from '@tanstack/react-query';

export interface FeedLayoutProps {
  children: React.ReactNode;
}

interface FeedData {
  pages: IDiary[];
  pageParams: number[];
}

const FeedLayout = async ({ children }: FeedLayoutProps) => {
  const queryClient = getQueryClient();
  await queryClient.prefetchInfiniteQuery({
    queryKey: ['feed'],
    queryFn: () => getFeed(1),
    getNextPageParam: (lastPage: any) => {
      const { page, totalPages } = lastPage;
      return page < totalPages ? page + 1 : undefined;
    },
    initialPageParam: 1,
    retry: 1,
    staleTime: 60 * 1000,
  });

  queryClient.setQueryData(['feed'], {
    pages: (queryClient.getQueryData(['feed']) as FeedData)?.pages || [],
    pageParams: [0],
  });

  return (
    
      
        
        
          
            {children}
          
        
      
    
  );
};

export default FeedLayout;

prefetchInfiniteQuery에서는 몇가지 에러를 방지하기 위한 추가 설정이 필요하다.

pageParam이 undefined로 반환되는 문제 클라이언트에서 data fetching 시에는 잘 불러와 지는 데이터가 서버 prefetch 시 불러와 지지 않는 문제가 있었다.
```
  queryClient.setQueryData(['feed'], {
    pages: (queryClient.getQueryData(['feed']) as FeedData)?.pages || [],
    pageParams: [0],
  });
```
queryClient.setQueryData를 적용해 초기 데이터 로딩 시 항상 첫 페이지를 불러오도록 pageparams [0]으로 명시해 준다.
데이터 무결성 문제 방지
```
 {children}
```
JSON.stringify와 JSON.parse를 사용하여 불필요한 속성을 제거하고 불변성을 유지하기 위함인데, pageParam undefined 문제가 발생하지 않는다면 JSON.parse, stringify는 지워줘도 된다.

2. 하위 클라이언트 컴포넌트

export const useGetFeed = () =>
  infiniteQueryOptions({
    queryKey: ['feed'],
    queryFn: () => getFeed(1),
    getNextPageParam: (lastPage: any) => {
      const { page, totalPages } = lastPage;
      return page < totalPages ? page + 1 : undefined;
    },
    initialPageParam: 1,
    refetchOnWindowFocus: false,
    refetchOnMount: true,
    refetchOnReconnect: true,
    retry: 1,
  });

'use client';

import React, { useRef, useEffect } from 'react';
import { useDiaryLike } from '@/app/store/server/diary';
import { WEATHERS } from '@/app/shared/constant';
import { formatTimeAgo } from '@/app/shared/function/format';
import Link from 'next/link';
import Image from 'next/image';
import { useUserStore } from '@/app/store/client/user';
import useInfiniteScroll from '@/app/_hooks/useInfiniteScroll';
import { useGetFeed } from '@/app/store/server/feed';
import { useInfiniteQuery } from '@tanstack/react-query';
import { IDiary } from '@/app/shared/types/diary';

const FeedPage = () => {
  const { user } = useUserStore();
  const queryOptions = useGetFeed();
  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
    useInfiniteQuery(queryOptions);

  // ... 나머지 코드

  return (
    <>
      
        {diaries?.map((diary: IDiary) => (
          
          {/* ...나머지 코드 */}
          
        ))}

      
    
  );
};

export default FeedPage;

결과

아래는 fetching 후 가장 페이지 내 마지막 데이터를 로딩하기까지의 시간을 비교한 결과이다.

prefetch 적용 전 (4~5초)

이미지 기준 5.73초
prefetch 적용 후 (1초대)

1.21초

![](https://velog.velcdn.com/images/day_1226/post/e1ee1d88-a79e-4743-bf82-50d1f66088bb/image.png)


1.53초

Discord + AWS Lambda | 커밋 메시지 / 시간 알림 웹 훅 만들기

Fri, 04 Oct 2024 07:57:12 GMT

6월부터 시작해 어느덧 3개월 넘게 부트캠프부터 함께 프론트엔드를 공부해 온 멤버들과 캠스터디를 하고 있다. 나를 포함해 다들 조금씩 사기가 떨어지고 있는 시기...동기부여가 필요했다! 디스코드를 좀더 활용하고, 스스로도 동기부여가 되었으면 해서 커밋 메시지(+ 멤버의 아이디어✨)와 시간 알림을 웹 훅으로 구현해 디스코드에 알림으로 띄워보기로 했다.

🌱 커밋 메시지 띄우기

1일 1커밋 실천을 위해 커밋을 push할 때마다 커밋 메시지를 채팅 채널에 띄워보기로 했다.

1. Webhook 생성

1) 커밋을 띄우고자 하는 채팅 채널의 채널 편집으로 들어간다. 2) 연동 메뉴를 클릭하고 웹후크로 들어간다. 3) 새 Webhook 생성 후 Webhook 이름을 자유롭게 정한다. Webhook 생성 후 웹후크 URL 복사로 URL을 복사한 후 나의 깃허브 레포지토리로 이동!

2. 깃허브 레포지토리 내 Webhook 생성

1) Algorithm이라는 레포지토리로 들어가 Settings-Webhooks로 이동 2) Add webhook클릭 후 내용을 다음과 같이 채워준다.

Payload URL : 디스코드에서 복사한 Webhook URL + /github를 붙여 입력한다.
Content type - application/json
SSL verification - Enabla SSL verigication
just the push event

그리고 Update webhook으로 저장하면 세팅 완료!

결과

push할 때마다 디스코드에 커밋 알림이 잘 뜨는 것을 확인할 수 있다. 여러 커밋을 한번에 푸시하면 맨 아래 커밋 알림과 같이 한번에 알림이 표시된다.

한 채널에 여러 Webhook를 등록 가능

하나의 Webhook URL을 여러 레포지토리에 등록 가능

이기 때문에 스터디 뿐만 아니라 협업 시에도 활용하기에 좋을 것 같다.

⏰ 시간 알림 띄우기

그동안 스스로 시간을 지켜서 스터디에 참여해왔다보니 헤이해지는 때가 많아서 시간마다 알림 메시지를 띄워서 좀더 다같이 습관화해보면 어떨까 싶었다. 아래와 같이 정한 캠스터디의 시간표에 따라 시간 알림을 띄워보기로 했다.

오전 9시 - 스터디 시작 오후 12시 - 점심 시작 오후 1시 반 - 점심 끝 오후 6시 - 스터디 종료

그런데 깃허브 커밋 알림과 달리 내가 직접 코드를 만들어 디스코드에 알림을 띄우려면 본래는 서버를 만들고 이를 관리해야 할 터, 찾아보니 AWS에서 제공하는 Lambda(람다)라는 서버리스 서비스가 있어 이를 활용해보기로 했다.

AWS Lambda

AWS 에서 제공하는 서버리스 컴퓨팅 플랫폼이다. 여기서의 '서버리스'란,서버가 없다는 뜻이 아니고 개발자가 서버의 존재를 신경쓸 필요가 없다, 즉 직접 서버를 관리할 필요 없이 코드를 실행할 수 있다는 것이다. Lambda 함수에 코드를 구성하면 되는데, 필요할 때만 함수를 실행하고 자동으로 확장된다는 특징이 있어 특정한 시기에만 실행시키는 경우에 사용하기 유용하다.

서버 띄우지 않고 간단한 코드를 실행시키고 싶은 경우
특정 기간 또는 특정 주기로 코드를 실행시켜야 하는 경우
트리거가 실행될때만 코드를 실행시키고 싶은 경우

특정 시간에 알림 메시지를 띄우는 함수를 실행하는 것이 목적이라 아주 적합!

1. Webhook 생성

커밋 알림 설정 때와 동일하게 원하는 채팅 채널에 Webhook를 생성한다.

2. AWS Lambda 함수 생성

1) AWS Lambda로 들어간 다음, 2) 함수 생성을 클릭한다. 스터디 시작 / 점심 시작 / 점심 종료 / 스터디 종료 이렇게 4개의 알림 메시지를 주어야 하니 4개의 함수를 만들 것이다.

(본래는 하나의 함수에 여러개의 트리거를 줘보려 했으나 잘 실행되지 않았고, 각각 함수를 만들어야 한다.)

먼저 스터디 시작 함수를 만들어 보자. 함수 이름 입력 후 다른 설정 변경 없이 함수를 생성한다.

3. 함수 코드 작성 (in VS Code)

함수로 들어가보면 아래에 코드 - 코드 소스 부분에서 코드를 수정할 수 있는데, 여기서 코드 소스를 수정하지 않고 VS Code를 열자. (axios 설치가 필요하기 때문!) 1) 컴퓨터 내 편한 곳에 임의의 폴더를 생성 후 npm init을 통해 node_modules & package.json을 생성한다. 2) 그 다음 axios를 설치한다. 3) 그 다음 디스코드에서 Webhook URL을 복사해 가져온 후, index.mjs파일을 생성해 아래와 같이 작성한다.

import axios from 'axios';

export const handler = async (event) => {
  try {
    const payload = {
      // content: '',
      embeds: [
        {
          title: '⏰ 스터디 시작 📔',
          description: '타이머 켜고⏲️ 스터디룸으로🚶️\n오늘 하루도 화이팅! 🔥',
          color: 0xd3d3d3,
        },
      ],
    };
    await axios.post(
      '{복사한 Webhook URL}',
      payload,
    );
    console.info('웹훅 성공');
  } catch (error) {
    console.error('웹훅 실패', error);
  }

  // 기본 응답
  const response = {
    statusCode: 200,
    body: JSON.stringify('Hello from Lambda!'),
  };
  return response;
};

import axios from 'axios';로 axios를 불러온 후 Webhook URL을 통해 POST 요청을 보낸다.

payload를 잠깐 살펴보면

content - 기본 채팅 문구로 표시
embeds - 박스 인용구로 표시
- title - 인용구 제목
- description - 인용구 설명
- color - 글씨 색상

이렇게 구성되어 있고, content와 embeds 둘 다 보여주거나 코드처럼 하나를 생략해 payload를 작성해도 된다.

4) node_modules, index.mjs, package.json, package-lock.json을 zip파일로 압축한다. | (.Zip X .zip O) index.mjs에서 payload 내 문구만 변경하여 4가지 버전으로 압축 파일을 만들었다.

5) 이제 다시 AWS lambda로 돌아와, 코드 소스 우측의 .zip파일 업로드를 통해 압축파일을 올려 준다.

.Zip파일 업로드 시 '잘못된 입력'으로 처리되기 때문에 .zip 파일을 업로드해야 한다.

업로드 후 코드 소스에 내가 작성한 코드가 잘 들어간 것 확인!

4. 일정 시간마다 알림 메시지를 띄우기 위한 트리거 생성

이제 마지막으로, 트리거 추가를 통해 원하는 시간에 함수가 실행(알림 메시지 띄우기)될 수 있도록 세팅하자.

1) 트리거 추가를 클릭한다. 2) 소스 선택에서 EventBridge를 선택한다.

그러면 규칙을 작성하는 폼이 띄워지는데, 새 규칙 생성 후 규칙 이름, 규칙 설명(선택), 예약 표현식을 입력한다.

여기서 예약 표현식을 cron으로 작성 시 UTC 시간을 기준으로 한다. 내가 한국 시간(UTC+9) 기준 오전 09시 00분에 트리거를 설정하려면 UTC 시간으로는 00시 00분이 된다. 그러므로 cron(0 0 ? * MON-FRI *)와 같이 작성하면 끝!

트리거가 추가되었다.

+) 설정한 트리거 예약 시간과 상관없이 알림 메시지가 잘 띄워보는지 즉시 테스트해 보고 싶다면? 코드 소스에서 파란 Test버튼 클릭 시 함수가 바로 실행된다.클릭 하자마자 디스코드에 알림 메시지가 띄워졌다b

결과

나머지 3개의 함수 생성 후, 각 함수마다 예약 시간을 다르게 설정한 결과는? 서버를 열고 닫을 필요 없이, AWS Lambda 함수를 만든 것 만으로 가만히 있으면 자동으로 알림을 보내주니 아주 편하고 좋았다.

AWS LAmbda를 더 활용해 볼 수 있는 방법이 있는지 시간 나면 더 찾아보고 싶다!💪

참고

Discord Bot - WebHook으로 공부시간 알림 만들기 [Node.js / AWS Lambda / Discord]　시간 자동 알림 디스코드 웹 훅 만들기

Next.js + TS | AWS S3 이미지 업로드 API 구현하기 (+ AWS S3 버킷 생성, route 작성하기)

Thu, 26 Sep 2024 07:03:13 GMT

인턴하면서 AWS S3을 통해 이미지를 저장하고 프로젝트에서 이미지를 읽어들일 때 pre-signed URL로 사용했던 경험을 계기로, Next.js 개인 프로젝트에서 직접 AWS S3 Bucket을 생성해서 이미지를 저장해 사용해 보기로 했다.

AWS S3 버킷 만들기

1. AWS S3 버킷 생성하기

AWS 계정을 이미 생성했다는 가정 하에,

로그인 후 상단 검색을 이용해 S3 서비스를 클릭한다.

버킷 만들기를 클릭해 버킷을 만들 것이다. (버킷은 저장공간을 말한다.)

먼저 AWS 리전이 올바르게 설정되어 있는지 확인한다.

AWS 리전(Region) AWS 인프라를 지리적으로 나누어 배포한 것을 의미한다. 지리적 영역이며 사용자와 리전이 가까울수록 네트워크 지연을 최소화할 수 있다. 따라서 사용자는 AWS 리전 선택 시 글로벌하게 분포되어 있는 리전 중에 실제 서비스를 사용할 사용자층과 가장 가까운 리전을 선택하여 그 리전 내 클라우드 인프라를 사용하는 것이 일반적인 방법이다.

올바르게 설정되어 있지 않다면, 오른쪽 상단의 지역을 변경 후 다시 버킷 만들기를 진행한다.

원하는 버킷이름을 입력한 후, 그 다음은 아래 기본 설정을 따라간다.

객체 소유권 : ACL 비활성화됨 (권장) 버킷 버전 관리 : 비활성화 태그 - 선택사항 : 미지정기 본 암호화 : Amazon S3 관리형 키 (SSE-S3)를 사용한 서버 측 암호화

그 후 이 버킷의 퍼블릭 액세스 차단 설정에서 모든 퍼블릭 액세스 차단을 해제한 후 노란 박스에 체크한다.

최종 버킷 만들기를 클릭하고 대시보드로 돌아가면 버킷이 생성된 것을 확인할 수 잇다.

2. AWS S3 버킷 정책 변경, CORS 설정하기

1) 버킷 정책 변경

누가 버킷을 읽고, 수정, 삭제할 수 있는지에 대한 권한을 정의해야 한다. 해당 버킷의 권한 탭을 클릭 후, 버킷 정책 - 편집버튼을 클릭해 준다.

그 다음 아래와 같이 작성한다.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": "*", 
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::버킷명/*"
        },
        {
            "Sid": "2",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::나의계정아이디:root"
            },
            "Action": [
                "s3:PutObject",
                "s3:DeleteObject"
            ],
            "Resource": "arn:aws:s3:::버킷명/*"
        }
    ]
}

다른 양식은 변경하지 않고, 한글로 되어 있는 부분만 수정해 그대로 붙여 넣어준다.

계정 ID는 오른쪽 상단 username 클릭 시 확인할 수 있다.

2) CORS 설정

다음으로 어떤 사이트에서 버킷 안의 파일들을 읽고, 쓰고, 삭제할 수 있는지 권한을 주기 위한 CORS를 설정한다. 권한 탭의 맨 하단에 CORS(Cross-origin 리소스 공유) 로 이동해 편집을 클릭한다.

그 다음 아래와 같이 작성한다. (모든 사이트에 대한 권한이 허용된다.)

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag"
        ]
    }
]

3. Access 키 발급

오른쪽 상단의 username을 클릭 후 보안 자격 증명으로 이동한다.

그 다음 액세스 키 만들기를 통 해 액세스 키를 발급한다. 만들기를 완료하기 전 꼭 비밀 액세스 키를 다른 곳에 저장해 두거나 CSV 파일을 받아둔다.

비밀 액세스 키를 받아둔 후 완료를 클릭한다.

버킷에서 직접 이미지 업로드 + 불러와 보기

테스트 삼아 이 이미지를 업로드 한 후 불러와 보기로 했다. 버킷 - 객체에서 업로드를 클릭한다. 이미지 파일을 추가한 후 업로드를 클릭해 완료한다. (참고로 여러 파일의 이미지를 한꺼번에 추가해 업로드할 수도 있다.)

다시 돌아와 업로드 된 이미지를 선택 후 URL 복사를 클릭하면 아래와 같은 방식의 pre-signed URL이 복사된다.

https://{버킷명}.s3.{AWS리전}.amazonaws.com/{파일명}

브라우저에 해당 URL을 입력해 이동하면? 이미지가 불러와졌다!

이 원리에 따라 Next.ts 프로젝트에서 이미지 업로드 API 로직을 구현하면, API 요청을 통해 AWS S3에 이미지를 업로드한 후 저장된 이미지의 pre-signed URL로 이미지를 불러오는 방식으로 프로젝트에서 이미지를 사용할 수 있게 된다.

AWS S3 이미지 업로드 API 구현하기

1. 프로젝트 환경변수 설정

이미지 업로드를 구현할 프로젝트의 env파일에 AWS 리전 / 버킷 이름 / ACCESS 키 아이디 / ACCESS 비밀 키를 저장한다.

2. 이미지 업로드 API 구현

먼저 아래 패키지를 설치해 준다.

NPM - @aws-sdk/client-s3 패키지

app > api > image > route.ts에 이미지를 업로드 CREATE 하기 위한 로직을 작성한다.

import { PutObjectCommand, S3Client } from '@aws-sdk/client-s3';

const Bucket = process.env.AMPLIFY_BUCKET;
// S3 클라이언트 설정
const s3 = new S3Client({
  region: process.env.AWS_REGION,
  credentials: {
    accessKeyId: process.env.AWS_ACCESS_KEY_ID as string,
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY as string,
  },
});

// POST 함수 
export async function POST(req: Request, res: Response) {
  try {
    // 폼 데이터 처리
    const formData = await req.formData();
    const files = formData.getAll('img') as File[];

    // 업로드할 이미지 파일 수 제한
    if (files.length > 3) {
      return new Response(
        JSON.stringify({
          message: '업로드할 수 있는 이미지 파일의 수는 최대 3장입니다.',
        }),
        { status: 400 },
      );
    }

    // 이미지 파일을 S3에 업로드
    const uploadPromises = files.map(async (file) => {
      const Body = Buffer.from(await file.arrayBuffer());
      const Key = file.name;
      const ContentType = file.type || 'image/jpg';

      await s3.send(
        new PutObjectCommand({
          Bucket,
          Key,
          Body,
          ContentType,
        }),
      );

      return [
        `https://${Bucket}.s3.${process.env.AWS_REGION}.amazonaws.com/${Key}`,
      ];
    });

    const imgUrls = await Promise.all(uploadPromises);

    // 파일의 개수가 1이면 배열 대신 단일 URL 반환
    if (imgUrls.length === 1) {
      return new Response(JSON.stringify({ data: imgUrls[0], message: 'OK' }), {
        status: 200,
      });
    }

    // 파일 개수가 여러개면 URL 배열 반환
    return new Response(JSON.stringify({ data: [...imgUrls], message: 'OK' }), {
      status: 200,
    });

  } catch (error) {
    console.error('Error uploading files:', error);
    return new Response(
      JSON.stringify({ message: '파일 업로드 중 오류가 발생했습니다.' }),
      { status: 500 },
    );
  }
}

req로 부터 파일 데이터를 받으면,

업로드 가능할 이미지 파일 수를 제한하고,
업로드한 이미지는 https://${Bucket}.s3.${process.env.AWS_REGION}.amazonaws.com/${Key} 와 같이 이미지를 pre-signed URL로 사용할 수 있도록 변환했다.
변환한 이미지 파일 개수가 여러개면 배열 형식으로 반환하고, 단일 이미지라면 URL 문자열만을 반환했다.

이를 바탕으로 어떠한 폼 제출 시 이미지 업로드 API 요청 후, 반환한 pre-signed 이미지 URL를 폼 제출 API Request로 넣는 방식으로 구현할 수 있게 되었다.

에러

The bucket you are attempting to access must be addressed using the specified endpoint. Please send all future requests to this endpoint.

코드상의 리전과 버킷이 위치한 리전이 다른 경우 만난 에러이다. 버킷의 지역이 ap-northeast-2로 설정되어 있는데, pre-signed URL에서 https://{버킷명}.s3.ap-southeast-2.amazonaws.com/{파일명}와 같이 엉뚱한 리전으로 요청될 때이다. 버킷을 만들 때 AWS 리전을 잘 확인하고, ENV 설정에서 올바르게 AWS 리전이 설정되어 있는지 확인한다면 만나지 않을 것이다. 나는 만났지만..^^

참고

AWS S3 이미지 업로드하기 (with NextJS)

Next.js + TS | Kakao 지도 API 프로젝트에 사용하기 #5 장소 위치 지도에 표시하기 (마커, 커스텀오버레이)

Sun, 08 Sep 2024 15:09:33 GMT

Next.js + TS | Kakao 지도 API 프로젝트에 사용하기 #4. 키워드로 장소 검색하기에서 가져온 장소의 위치를 지도에 표시해줄 차례이다.

샘플 코드

장소 검색 결과를 잘 받아온 후 장소의 위치를 지도에 찍어주고 싶다고 할 때, Kakao API에서 사용할 수 있는 객체로는 마커, 인포윈도우, 커스텀오버레이 이렇게 3개가 있다.

기본 마커	인포윈도우	커스텀 오버레이
`Marker`	`InfoWindow`	`CustomOverlay`
(이미지 클릭 시 문서 이동)	(이미지 클릭 시 문서 이동)	(이미지 클릭 시 문서 이동)

Kakao 지도 API 문서에서 설명하는 코드 예시를 보면 다음과 같이 구현할 수 있다.

  // MAP 객체 생성 시 들어갈 설정
  var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
      mapOption = { 
          center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
          level: 3 // 지도의 확대 레벨
      };

 // MAP 객체 
  var map = new kakao.maps.Map(mapContainer, mapOption);
  var position  = new kakao.maps.LatLng(33.450701, 126.570667); 
  var content = ''

  // 마커 띄우기
  var marker = new kakao.maps.Marker({
      position
  });

  // 인포윈도우
  var infowindow = new kakao.maps.InfoWindow({
      position, 
      content
  });
  // 커스텀 오버레이
  var customOverlay = new kakao.maps.CustomOverlay({
      position, 
      content
  });
   marker.setMap(map); // 마커 띄우기
  infowindow.open(map, marker); 
  customOverlay.setMap(map); // 커스텀 오버레이 띄우기

Map 객체 생성 / 혹은 생성되어 있음 전제
position 값 가져오기 (코드에선 지정된 position을 사용하고 있으나, 이후 장소 데이터 각각의 position 값을 불러올 것임.)
Marker, InfoWindow, CustomOverlay 객체 생성
setMap() 메서드를 통해 지도에 띄우기

⭐ 객체 정의 + setMap()메서드를 사용하지 않고 parameter에 map을 넣어 객체를 '생성'만 하는 방식으로도 충분히 요소를 지도에 띄울 수 있다.
```
new kakao.maps.Marker({
 map,
 position
});
```
⭐ 인포윈도우의 경우
- 마커와 함께 사용 시에는 open()메서드를 통해 띄운다.

tip) 각 기능 사용 시 특징

위를 바탕으로 커스텀하기 위해 세개를 모두 사용해본 결과, 각각의 제한이 존재했다.

마커
- option에서 Dom Element 삽입을 지원하지 않음. 단, markerImage 옵션이 존재해 이미지 파일을 적용하는 방식은 가능
인포윈도우
- content옵션을 통해 Dom Element 삽입이 가능하나, 이미지처럼 인포 윈도우 최상위 element에서 고정된 스타일이 있어 커스텀이 어려움(이미지 처럼 테두리 하얀 네모박스...못없앱니다...)

커스텀 오버레이 : 고정 스타일 없음! Dom Element 삽입가능!

결론적으로 커스텀을 하고 싶다면 인포윈도우 사용은 좋지 않았다.

마커 표시만 하고 싶다면, 마커를 사용하고,

마커 위에 장소의 정보를 띄우고 싶다면 커스텀 오버레이로 대체하되 열고 닫기 기능을 추가할 경우 마커에 이벤트를 등록하여 '클릭 시 커스텀 오버레이 생성'하는 방법으로 구현하는 것을 추천한다.

나의 경우 프로젝트에서 필요에 따라 각각 마커와 커스텀 오버레이를 사용하여 다음과 같이 장소 위치를 띄워주고 있는데, 그 방법을 얘기해보려 한다.

- Marker 사용	-CustomOverlay 사용

마커 / 커스텀오버레이 띄우기 준비물

Next.js + TS | Kakao 지도 API 프로젝트에 사용하기 #4. 키워드로 장소 검색하기에 만들었던 useSearchPlaces를 가져왔다.

const useSearchPlaces = () => {

  // 장소 검색 함수
  const searchPlaces = (keyword: string) => {
    if (keyword !== '') {
      const places = new kakao.maps.services.Places();
      places.keywordSearch(keyword, searchPlacesCB);
    }
  };

  // keywordSearch 콜백 함수
  const searchPlacesCB = async (
    data: any,
    status: kakao.maps.services.Status,
    pagination: any,
  ) => {
    if (status === kakao.maps.services.Status.OK) {
      console.log(filteredPlaces);
    } else {
      if (status === kakao.maps.services.Status.ZERO_RESULT) {
        return alert('검색 결과가 존재하지 않습니다.');
      } else if (status === kakao.maps.services.Status.ERROR) {
        return alert('검색 결과 중 오류가 발생했습니다.');
      }
    }
  };

  return { searchPlaces };
};

export default useSearchPlaces;

여기에 Map 객체를 가져오고,
장소 검색 결과로 반환된 데이터의 위치 데이터를 이용해 Marker / Custoverlay 객체를 생성하는 함수를 만들어야 한다.

1번은 #2 지도 띄우기를 구현할 때 mapContext에 미리 저장한 Map 객체를 활용하고, 2번은 displayPlaces라는 함수를 만들어 객체 생성을 처리해볼 것이다.

그러면 아래와 같이 세팅 완!

const useSearchPlaces = () => {
  const mapContext = useMap(); // mapContext 가져오기

  // 장소 검색 함수
  const searchPlaces = (keyword: string) => {
    if (keyword !== '') {
      const places = new kakao.maps.services.Places();
      places.keywordSearch(keyword, searchPlacesCB);
    }
  };

  // keywordSearch 콜백 함수
  const searchPlacesCB = async (
    data: any,
    status: kakao.maps.services.Status,
    pagination: any,
  ) => {
    if (status === kakao.maps.services.Status.OK) {
      displayPlaces(filteredPlaces); // 마커 / 커스텀오버레이를 생성하는 함수 호출
    } else {
      if (status === kakao.maps.services.Status.ZERO_RESULT) {
        return alert('검색 결과가 존재하지 않습니다.');
      } else if (status === kakao.maps.services.Status.ERROR) {
        return alert('검색 결과 중 오류가 발생했습니다.');
      }
    }
  };

  // 마커 / 커스텀오버레이 생성
  const displayPlaces = (places: any[]) => {
      const mapData : kakao.maps.Map = mapContext?.mapData;
    // 만약 Map을 띄움과 동시에 마커를 찍을 거라면 샘플 코드처럼
    // var map = new kakao.maps.Map(mapContainer, mapOption);를 정의해 사용

     places.forEach((place, index) => {
      const position = new kakao.maps.LatLng(place.y, place.x); // position 값 가져오기 

       // ...여기서 Marker,Customoverlay 등을 생성

     }
  }
  return { searchPlaces };
};

export default useSearchPlaces;

커스텀 마커(Marker) 띄우기

사진처럼 내가 커스텀해 만든 마커를 띄우는 방법으로 다른 이미지로 마커 생성하기를 활용하면 되는데,

kakao.maps.Marker(options)

주어진 객체로 마커를 생성한다. 지도 뿐만 아니라 로드뷰 위에도 올릴 수 있다.

var marker = new kakao.maps.Marker({
    map: map,
    position: new kakao.maps.LatLng(33.450701, 126.570667)
});

Parameters

options Object
- map Map | Roadview : 마커가 올라갈 지도 또는 로드뷰
- position LatLng | Viewpoint : 마커의 좌표 또는 로드뷰에서의 시점
- image MarkerImage : 마커의 이미지
- title String : 마커 엘리먼트의 타이틀 속성 값 (툴팁)
- draggable Boolean : 드래그 가능한 마커, 로드뷰에 올릴 경우에는 유효하지 않다
- clickable Boolean : 클릭 가능한 마커
- zIndex Number : 마커 엘리먼트의 z-index 속성 값
- opacity Number : 마커 투명도 (0-1)
- altitude Number : 로드뷰에 올라있는 마커의 높이 값(m 단위)
- range Number : 로드뷰 상에서 마커의 가시반경(m 단위), 두 지점 사이의 거리가 지정한 값보다 멀어지면 마커는 로드뷰에서 보이지 않게 된다

Marker 객체의 Parameters를 살펴보면 image옵션을 이용해 마커 이미지를 지정할 수 있고, MarkerImage라는 객체를 받고 있다.

kakao.maps.MarkerImage(src, size[, options])

Parameters

src String : 이미지 주소
size Size : 마커의 크기
options Obejct
- alt String : 마커 이미지의 alt 속성값을 정의한다.
- coords String : 마커의 클릭 또는 마우스오버 가능한 영역을 표현하는 좌표값
- offset Point : 마커의 좌표에 일치시킬 이미지 안의 좌표 (기본값: 이미지의 가운데 아래)
- shape String : 마커의 클릭 또는 마우스오버 가능한 영역의 모양
- spriteOrigin Point : 스프라이트 이미지 중 사용할 영역의 좌상단 좌표
- spriteSize Size : 스프라이트 이미지의 전체 크기

MarkerImage의 src , size, options - offset를 사용하여 객체 정의 후, Marker 객체를 생성하면 된다.

  // 마커 / 커스텀오버레이 생성
  const displayPlaces = (places: any[]) => {
      const mapData : kakao.maps.Map = mapContext?.mapData;
    // 만약 Map을 띄움과 동시에 마커를 찍을 거라면 샘플 코드처럼
    // var map = new kakao.maps.Map(mapContainer, mapOption);를 정의해 사용

     places.forEach((place, index) => {
      const position = new kakao.maps.LatLng(place.y, place.x); // position 값 가져오기 

      // MarkerImage parameter
      const imageSrc = '/icons/icon-marker.svg',
        imageSize = new kakao.maps.Size(56, 56),
        imageOption = { offset: new kakao.maps.Point(27, 54) };
      // MarkerImage
      const markerImage = new kakao.maps.MarkerImage(
        imageSrc,
        imageSize,
        imageOption,
      );
      // Marker
      const marker = new kakao.maps.Marker({
        position: position,
        image: markerImage,
      });

      // 지도에 띄우기
      marker.setMap(mapContext?.mapData as kakao.maps.Map);

     }
  }

커스텀 오버레이 띄우기

커스텀 오버레이 사용 시 '장소 이름 데이터'를 사용하면서도 원하는 스타일링으로 장소 위치를 띄울 수 있다.

kakao.maps.CustomOverlay(options)

주어진 객체로 커스텀 오버레이를 생성한다.

var customOverlay = new kakao.maps.CustomOverlay({
    map: map,
    clickable: true,
    content: 'Chart',
    position: new kakao.maps.LatLng(33.450701, 126.570667),
    xAnchor: 0.5,
    yAnchor: 1,
    zIndex: 3
});

Parameters

`options Object
- clickable Boolean : true 로 설정하면 컨텐츠 영역을 클릭했을 경우 지도 이벤트를 막아준다.
- content Node | String : 엘리먼트 또는 HTML 문자열 형태의 내용
- map Map | Roadview : 커스텀 오버레이가 올라갈 지도 또는 로드뷰
- position LatLng | Viewpoint : 커스텀 오버레이의 좌표 또는 로드뷰에서의 시점
- xAnchor Number : 컨텐츠의 x축 위치. 0_1 사이의 값을 가진다. 기본값은 0.5
- yAnchor Number : 컨텐츠의 y축 위치. 0_1 사이의 값을 가진다. 기본값은 0.5
- zIndex Number : 커스텀 오버레이의 z-index

content 에 Node를 받고 있어, 컴포넌트를 HTMLElement으로 변환해 넣어 줌으로써 커스텀이 가능하다.

`content`에 들어갈 컴포넌트 만들기

이미지와 같은 말풍선 모양의 마커를 구현하기 위해 장소 이름(placeName)을 받는 MarkerInfo라는 컴포넌트를 만들었다.

'use client';

import Image from 'next/image';

interface MarkerInfoProps {
  placeName: string;
}

const MarkerInfo = ({ placeName }: MarkerInfoProps) => {
  return (
    
      {placeName}
      
    
  );
};

export default MarkerInfo;

이를 String으로 변환해 CustomOverlay 객체 생성 시 content에 지정해 주면 된다.

import MarkerInfo from '../_component/common/MarkerInfo';

  //...

  // 마커 / 커스텀오버레이 생성
  const displayPlaces = (places: any[]) => {
      const mapData : kakao.maps.Map = mapContext?.mapData;
    // 만약 Map을 띄움과 동시에 마커를 찍을 거라면 샘플 코드처럼
    // var map = new kakao.maps.Map(mapContainer, mapOption);를 정의해 사용

     places.forEach((place, index) => {
      const position = new kakao.maps.LatLng(place.y, place.x); // position 값 가져오기 

       // 커스텀오버레이 content에 들어갈 컴포넌트
      const overlayContent = ;
      // 컴포넌트를 string으로 전환 후 HTMLElement에 삽입
      const overlay = document.createElement('div');
      overlay.innerHTML = ReactDOMServer.renderToString(overlayContent);
      // 커스텀 오버레이 생성
      const newOverlay = new kakao.maps.CustomOverlay({
        position: position,
        content: overlay,
        yAnchor: 1.3, // 높이 지정 (선택)
      });

      newOverlay.setMap(mapContext?.mapData as kakao.maps.Map);

     }
  }

마커/커스텀 오버레이에 클릭 이벤트 등록하기

생성과 동시에 클릭 이벤트를 등록해 줌으로써 해당 마커의 위치로 이동하거나, 장소 상세 페이지로 이동하는 등의 기능을 넣어줄 수 있다. 아래는 커스텀오버레이 클릭 시 지도를 해당 마커의 위치로 이동하는 이벤트를 등록한 방법이다.

import MarkerInfo from '../_component/common/MarkerInfo';

  //...

  // 마커 / 커스텀오버레이 생성
  const displayPlaces = (places: any[]) => {
      const mapData : kakao.maps.Map = mapContext?.mapData;
    // 만약 Map을 띄움과 동시에 마커를 찍을 거라면 샘플 코드처럼
    // var map = new kakao.maps.Map(mapContainer, mapOption);를 정의해 사용

     places.forEach((place, index) => {
      const position = new kakao.maps.LatLng(place.y, place.x); // position 값 가져오기 

       // 커스텀오버레이 content에 들어갈 컴포넌트
      const overlayContent = ;
      // 컴포넌트를 string으로 전환 후 HTMLElement에 삽입
      const overlay = document.createElement('div');
      overlay.innerHTML = ReactDOMServer.renderToString(overlayContent);

     // HTMLElement에 이벤트 등록
     overlay.addEventListener('click', () => {
        mapContext?.mapData?.panTo(position);
      });

      // 커스텀 오버레이 생성
      const newOverlay = new kakao.maps.CustomOverlay({
        position: position,
        content: overlay,
        yAnchor: 1.3, 
        clickable: true, // 클릭 가능 여부 true로 설정
      });

      newOverlay.setMap(mapContext?.mapData as kakao.maps.Map);

     }
  }

Next.js + TS | Kakao 지도 API 프로젝트에 사용하기 #4.5 장소 검색 결과를 원하는 카테고리로 필터링하기

Fri, 30 Aug 2024 06:26:50 GMT

장소 검색 결과를 원하는 카테고리로 필터링하기

Next.js + TS | Kakao 지도 API 프로젝트에 사용하기 #4. 키워드로 장소 검색하기에서 장소 결과를 불러온 다음, 나는 프로젝트에 필요한 산책 가능한 장소를 필터링해보기로 했다.

사실 Kakao 지도 API 에서는 '키워드로 장소 검색' 기능과 더불어 '카테고리로 장소 검색'기능을 제공하고 있으나...

KaKao 지도 API - 카테고리별 장소 검색하기

불러올 수 있는 카테고리종류가 다양하지만 내가 원하는 카테고리는 없는 상황이었다...

그래서 다른 방법을 모색하다 적용한 방법이 있다. '키워드로 장소 검색' 기능을 활용하되 필터링할 수 있는💡

{
    "address_name": "서울 성동구 성수동1가 678-1",
    "category_group_code": "",
    "category_group_name": "",
    "category_name": "여행 > 공원 > 도시근린공원",
    "distance": "28619",
    "id": "11331488",
    "phone": "02-460-2905",
    "place_name": "서울숲",
    "place_url": "http://place.map.kakao.com/11331488",
    "road_address_name": "",
    "x": "127.037617759165",
    "y": "37.5443222301513"
}

서울숲을 검색 후 받아온 결과이다. category_name을 주목해 보았다.

다른 산책 가능한 장소도 검색해 보았다. 중랑천(하천), 일월수목원(수목원)...

{
    "address_name": "서울 중랑구 면목동 1338-12",
    "category_group_code": "",
    "category_group_name": "",
    "category_name": "여행 > 관광,명소 > 하천",
    "distance": "34196",
    "id": "8089008",
    "phone": "",
    "place_name": "중랑천",
    "place_url": "http://place.map.kakao.com/8089008",
    "road_address_name": "",
    "x": "127.070847357397",
    "y": "37.5897928353235"
}

{
    "address_name": "경기 수원시 장안구 천천동 430",
    "category_group_code": "AT4",
    "category_group_name": "관광명소",
    "category_name": "여행 > 관광,명소 > 수목원,식물원",
    "distance": "189",
    "id": "380088639",
    "phone": "031-369-2380",
    "place_name": "일월수목원",
    "place_url": "http://place.map.kakao.com/380088639",
    "road_address_name": "경기 수원시 장안구 일월로 61",
    "x": "126.97665617545374",
    "y": "37.28835545840041"
}

모두 여행 > 관광,명소 > 하천으로 카테고리가 분류되어 있는 것을 볼 수 있었다. '카테고리로 장소 검색'기능에 명시되어 있는 카테고리 외로도 장소 데이터마다 카테고리가 잘 분류되어 있는 점을 활용하기로 했다.

1. 카테고리 정의하기

먼저 여러 장소를 검색해보며 산책 가능한 장소마다의 하위 카테고리를 모아 보았고, 상수로 정의한 배열을 만들었다.

export const FILTER_CATEGORIES = [
  '도보여행',
  '둘레길',
  '하천',
  '공원',
  '도시근린공원',
  '국립공원',
  '도립공원',
  '산',
  '오름',
  '호수',
  '저수지',
  '수목원,식물원',
];

2. 필터링 로직 만들기

그 다음 필터링을 위한 함수를 만들었다.

일반 필터링

export const filterPlacesByKeyword = (places: any[]) => {
  return places.filter((place) => {
    const categories = place.category_name.split(` > `);

    return FILTER_CATEGORIES.some((keyword) => categories.includes(keyword));
  });
};

강한 필터링 여행 관광,명소를 포함한 카테고리까지 검색 결과를 정확하게 불러오고 싶다면 강한 필터링을 걸어 놓으면 될 것 같다. (나의 경우 필터링하고자 하는 산책 가능한 장소 데이터 중 여행 관광,명소가 포함되지 않는 일부 장소도 있어 제외하였다)

export const filterPlacesByKeyword = (places: any[]) => {
  return places.filter((place) => {
    const categories = place.category_name.split(` > `);

    const isValidPath =
      categories[0] === '여행' && categories[1] === '관광,명소';
    if (!isValidPath) return false;

    return FILTER_CATEGORIES.some((keyword) => categories.includes(keyword));
  });
};

3. 필터링 적용하기

Next.js + TS | Kakao 지도 API 프로젝트에 사용하기 #4. 키워드로 장소 검색하기에서 keywordSearch메서드를 사용할 때 인자로 콜백 함수를 받고 그 곳에서 검색 결과를 처리한다는 부분에 대해 설명한 적이 있다.

검색 결과에서 받아온 데이터를 필터링 함수를 통해 필터링해주면 된다.

필터링 적용 전

// keywordSearch 콜백 함수
  const searchPlacesCB = async (
    data: any,
    status: kakao.maps.services.Status,
    pagination: any,
  ) => {
    if (status === kakao.maps.services.Status.OK) {
      console.log(data);
    } else {
      if (status === kakao.maps.services.Status.ZERO_RESULT) {
        return alert('검색 결과가 존재하지 않습니다.');
      } else if (status === kakao.maps.services.Status.ERROR) {
        return alert('검색 결과 중 오류가 발생했습니다.');
      }
    }
  };

  return { searchPlaces };
};

필터링 적용 후

  // keywordSearch 콜백 함수
  const searchPlacesCB = async (
    data: any,
    status: kakao.maps.services.Status,
    pagination: any,
  ) => {
    if (status === kakao.maps.services.Status.OK) {
      clearMarkersAndInfo();

      const filteredPlaces = filterPlacesByKeyword(data);
      if (filteredPlaces.length === 0) {
        return alert('검색 결과가 존재하지 않습니다.');
      }
      console.log(filteredPlaces)

      searchPlace(filteredPlaces);
      displayMarkers(filteredPlaces);
    } else {
      if (status === kakao.maps.services.Status.ZERO_RESULT) {
        return alert('검색 결과가 존재하지 않습니다.');
      } else if (status === kakao.maps.services.Status.ERROR) {
        return alert('검색 결과 중 오류가 발생했습니다.');
      }
    }
  };

4. 검색 결과

이전 포스팅과 마찬가지로 서호공원이라는 장소가 위치한 곳에서, 지도에 보이는 영역만을 기준으로 공원을 검색했을 때의 결과는 다음과 같다.

필터링 적용 전
필터링 적용 후

🤔 필터링할 수 있는 다른 카테고리에는 어떤 것이 있을까?

KaKao 지도 API 장소 검색 기능을 활용해서 토이 프로젝트를 해보려는 분들에게 조금이라도 활용하는 데 도움이 되었으면 해서 다른 카테고리도 찾아 보았다.

휴게소 교통,수송 > 휴게소 / 교통,수송 > 휴게소 > 고속도로 휴게소
초,중,고,대학교 - 교육,학문 > 학교 > 대학교
고속,시외버스터미널 교통,수송 > 교통시설 > 고속,시외버스터미널 어쩌면 임시방편의 방법 같기도 하지만, 나의 경우 기획한 프로젝트 아이디어를 꼭 만들어보고 싶어서 모색한 방법이라 유레카였다ㅎ 이 글을 보고 아이디어를 구현할 방법을 찾은 한 분이라도 있다면 좋을 것 같다😊

Next.js + TS | Kakao 지도 API 프로젝트에 사용하기 #4. 키워드로 장소 검색하기

Fri, 23 Aug 2024 05:14:25 GMT

프로젝트 작업이 어느정도 진행된 상황에서 기록을 하려니 힘들구만...하지만 최대한 정리해 보았다.

이번엔 Kakao 지도 API를 사용하게 된 가장 큰 목적, <장소 검색>기능을 구현한 과정을 얘기해 보려 한다.

Kakao 지도 API 샘플 중 '키워드로 장소검색하고 목록으로 표출하기'를 사용할 것이다.

Kakao 지도 API - 키워드로 장소검색하고 목록으로 표출하기

샘플 코드를 보면 목록 + 마커를 함께 생성하고 있는데, 장소 목록을 불러오는 과정까지 얘기하고 마커 생성은 다음 5탄에서 자세히 다뤄볼 예정!

나는 이 키워드 장소 검색 로직을 hook으로 만들어서

위치 이동 시 재검색
카테고리 버튼으로 재검색
새로고침 시 재검색

등의 기능에 재사용해볼 것이다.

구현 순서는 아래와 같이!

장소 검색 Input 만들기 (SearchForm)

장소 검색 Hook 만들기(useSearchPlaces)

검색 결과

위치 기준 검색하기

일정 영역 내에서 검색하기

1. 장소 검색 input 만들기

SearchForm.tsx

import React, { useState } from 'react';
import { useParams, useRouter } from 'next/navigation';
import Image from 'next/image';

import useSearchPlaces from '@/app/_hooks/useSearchPlaces';

const SearchForm = () => {
  const router = useRouter();
  const { searchPlaces } = useSearchPlaces();

  const [keyword, setKeyword] = useState('');

  const onSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    searchPlaces(keyword);
    router.push(`/place/search/${keyword}`);
  };

  const handleInputChange = (e: React.ChangeEvent) => {
    setKeyword(e.currentTarget.value);
  };

  return (
    
      
        
        
      
    
  );
};

export default SearchForm;

2. 장소 검색 Hook 만들기

useSearchPlaces.tsx

useSearchPlaces - searchPlaces useSearchPlaces훅에서 반환할 장소 검색 함수를 만든다.
```
const useSearchPlaces = () => {

  // 장소 검색 함수
  const searchPlaces = (keyword: string) => {
    if (keyword !== '') {
      const places = new kakao.maps.services.Places();
      places.keywordSearch(keyword, searchPlacesCB);
    }
  };

  //...

  return { searchPlaces };
};

export default useSearchPlaces;
```
- 검색 키워드에 해당하는 keyword 매개변수를 받고 빈 문자열인지 확인한다.
- 카카오 지도 API의 장소 검색 서비스를 제공하는 kakao.maps.services.Places 객체를 생성한다.
- places.keywordSearch 메서드를 호출해 키워드로 장소를 검색한다. 두번째 인자에서 콜백 함수를 호출하는데, 콜백 함수를 만들어 검색 후의 결과를 처리하면 된다.

useSearchPlaces - searchPlaceCB

const useSearchPlaces = () => {

  // 장소 검색 함수
  const searchPlaces = (keyword: string) => {
    if (keyword !== '') {
      const places = new kakao.maps.services.Places();
      places.keywordSearch(keyword, searchPlacesCB);
    }
  };

  // keywordSearch 콜백 함수
  const searchPlacesCB = async (
    data: any,
    status: kakao.maps.services.Status,
    pagination: any,
  ) => {
    if (status === kakao.maps.services.Status.OK) {
      console.log(data);
    } else {
      if (status === kakao.maps.services.Status.ZERO_RESULT) {
        return alert('검색 결과가 존재하지 않습니다.');
      } else if (status === kakao.maps.services.Status.ERROR) {
        return alert('검색 결과 중 오류가 발생했습니다.');
      }
    }
  };

  return { searchPlaces };
};

export default useSearchPlaces;

data : 검색된 장소의 결과 데이터

status : 검색의 성공 여부

// kakao.maps.services.Status
export enum Status {
ERROR = "ERROR", // 서버 응답에 문제가 있는 경우
OK = "OK", //검색 결과 있음
ZERO_RESULT = "ZERO_RESULT", // 정상적으로 응답 받았으나 검색 결과는 없음
}

pagination : 페이지네이션 정보로, 검색 결과가 여러 페이지에 걸쳐 있을 때 이를 처리하는 데 사용

3. 검색 결과

여기까지 작성 후 결과를 확인해 보자. '공원'을 검색했을 때의 결과이다.

최대 15개의 목록 결과가 잘 불러와 진다.

+ 장소 검색 옵션 설정하기

그런데 검색 결과의 주소들을 자세히 보면 여러 지역에서 골고루 결과를 가져오고 있다.

현재 나의 위치, 혹은 지도가 띄워진 중심 좌표를 기준으로 검색하고 싶을 때
지도가 띄워진 영역 내의 검색 결과만 가져오고 싶을때

의 경우에는 위 검색 결과가 아쉬울 수 있다. 이 때 지도 객체에서 중심좌표나, 영역 정보를 가져와 검색 옵션을 지정해 줄 수 있다.

Next.js + TS | Kakao 지도 API 프로젝트에 사용하기 #2 지도 띄우기에서 만든 useMap() Context에서 mapData Map 객체(kakao.maps.Map)를 가져와 활용해보자.

예시로 지도가 이미지와 같이 '서호공원'이라는 장소를 zoom해 보여지고 있고 지도의 중심좌표, 영역을 각각 지정해 주었을 때의 결과를 비교해 보자.

지도의 중심 좌표를 기준으로 검색하기 places.keywordSearch 메서드를 다시 살펴 보자. 알고 보니 keyword, 콜백 함수, options 이렇게 3개의 인자를 받는다. option 중 location을 지정해 주면 된다.

import { useMap } from '../shared/contexts/Map';

const useSearchPlaces = () => {
 const mapContext = useMap();
 // 장소 검색 함수
 const searchPlaces = (keyword: string) => {
   if (keyword !== '') {
     const { mapData } = mapContext!;
     const location = mapData?.getCenter();
     const places = new kakao.maps.services.Places();
     places.keywordSearch(keyword, searchPlacesCB, {
       location,
     });
   }
 };

 // keywordSearch 콜백 함수
 // ...

};

export default useSearchPlaces;

mapData라는 이름으로 저장했던 Map 객체의 내장메서드 getCenter()를 통해 지도의 중심값을 불러와, keywordSearch의 3번째 인자에 넣어주면 끝! 지도에 보이는 '서호공원'과 주변 '공원'에 해당하는 검색 결과가 모두 불러와 졌다.

현재 내 위치의 좌표를 기준으로 검색하기
Next.js + TS | Kakao 지도 API 프로젝트에 사용하기 #3 현재 위치 불러오기에서 만들어보았던 useGeolocation훅을 여기에 활용할 수 있다.
```
import { useState, useEffect } from 'react';
```
const useGeolocation = () => { const [location, setLocation] = useState
(null); // 현재 위치를 저장할 상태

return { location }; };

export default useGeolocation;

// import { useMap } from '../shared/contexts/Map';
import useGeolocation from './useGeolocation';

const useSearchPlaces = () => {
 // const mapContext = useMap();
 const { location: myLocation } = useGeolocation();

 // 장소 검색 함수
 const searchPlaces = (keyword: string) => {
   if (keyword !== '') {
     // const { mapData } = mapContext!;
     // const location = mapData?.getCenter();
     const places = new kakao.maps.services.Places();
     places.keywordSearch(keyword, searchPlacesCB, {
       location: new kakao.maps.LatLng(
         myLocation?.latitude as number,
         myLocation?.longitude as number,
       ),
     });
   }
 };

 // keywordSearch 콜백 함수
 // ...

 return { searchPlaces };
};

export default useSearchPlaces;

'현재 내 위치에서 재검색' 과 같은 기능을 넣고 싶다면 이 로직을 활용하면 된다.

지도의 영역을 기준으로 검색하기 영역은 places.keywordSearch메서드의 option 중 bounds을 지정해 주면 된다.

import { useMap } from '../shared/contexts/Map';

const useSearchPlaces = () => {
   const mapContext = useMap();
   // 장소 검색 함수
   const searchPlaces = (keyword: string) => {
     if (keyword !== '') {
       const { mapData } = mapContext!;
       const bounds = mapData?.getBounds();
       // const location = mapData?.getCenter();
       const places = new kakao.maps.services.Places();
       places.keywordSearch(keyword, searchPlacesCB, {
         bounds,
       });
     }
   };

 // keywordSearch 콜백 함수
 // ...

 return { searchPlaces };
};

export default useSearchPlaces;

지도 내 표시된 관련 장소만 불러오는 것을 확인할 수 있다.

Next.js + TS | Kakao 지도 API 프로젝트에 사용하기 #2.5 지도가 안뜨는 문제🥲

Sun, 11 Aug 2024 12:43:09 GMT

분명 APP Key도 잘 받아왔고, Map을 띄우는 코드도 잘 작성한 것 같은데 에러가 난다..? 이전에 포스팅으로 다뤘던 에러 사항에 더해 추가의 경우를 모아 새로 작성해 보려 한다.

⚠️ 문제 상황1 - TypeError

TypeError: Cannot read properties of null (reading 'currentStyle')

App key를 받아 layout.tsx에 Script 태그를 잘 적용했고, Map 객체를 불러오는 코드도 잘 작성했는데 위와 같은 오류가 만날 때이다.

'#2 지도 띄우기' 포스팅과 같이 Kakao Maps API를 활용한 지도 컴포넌트를 구현했고, MapProvider로 지도가 필요한 페이지마다 사용할 수 있도록 구현한 상태이다.

const MapProvider: React.FC = ({ children }) => {

  const mapRef = useRef(null);

  //...

  useEffect(() => {
    const { kakao } = window;

    kakao?.maps.load(() => {
      const mapElement = mapRef.current;
      // 컴포넌트 mount 후 DOM 요소에 접근
      if (mapElement) {
        const options = {
          center: new kakao.maps.LatLng(
            location?.latitude as number,
            location?.longitude as number,
          ),
          level: 3,
          smooth: true,
          tileAnimation: false,
        };
        let zoomControl = new kakao.maps.ZoomControl();
        // 지도 생성
        const kakaoMap = new kakao.maps.Map(mapElement, options);
        kakao.maps.event.addListener(kakaoMap, 'dragend', function () {
          // 지도 중심좌표
          const latlng = kakaoMap.getCenter();
          setCurrLocation(latlng);
        });
        kakaoMap.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
        setMap(kakaoMap);
      }
    });
  }, [location?.latitude, location?.longitude]);

  //...

  return (
    <>
      {location && (
        
          
            {children}
            
          
        
      )}
    
  );
};

export default MapProvider;

이 코드를 사용하여 지도를 렌더링하던 중, MapProvider가 포함된 현재 페이지에서 새로고침 또는 다른 MapProvider가 포함된 페이지로 이동할 때 위와 같은 TypeError 에러가 발생했다.

🧐 원인

React 컴포넌트의 생명주기를 보면, 컴포넌트가 처음 마운트될 때 useEffect 훅이 실행되는데, 이 때 mapRef.current가 null일 수 있다.

즉, DOM 요소가 아직 마운트(생성)되지 않은 상태에서 해당 요소에 접근하려고 했기 때문에 에러가 발생한 것이다.

카카오 Dev 페이지 답변 - 카카오 api 사용 시 currentStyle null값 에러에 의하면, 여기서는

가 생성되지 않은 상태에서 #map을 참조하려고 하기 때문에 발생한다.

✅ 해결

해결을 위해서는 DOM 요소가 마운트된 후에 지도 생성 로직을 실행해야 힌다.

이를 위해 useEffect 내부에서 mapRef.current가 null이 아닌지 확인하는 조건문을 추가한다.

  useEffect(() => {
    const { kakao } = window;

    kakao?.maps.load(() => {
      const mapElement = mapRef.current;
      // 컴포넌트 mount 후 DOM 요소에 접근
      if (mapElement) {
        const options = {
          center: new kakao.maps.LatLng(
            location?.latitude as number,
            location?.longitude as number,
          ),
          level: 3,
          smooth: true,
          tileAnimation: false,
        };
        let zoomControl = new kakao.maps.ZoomControl();
        // 지도 생성
        const kakaoMap = new kakao.maps.Map(mapElement, options);
        kakao.maps.event.addListener(kakaoMap, 'dragend', function () {
          // 지도 중심좌표
          const latlng = kakaoMap.getCenter();
          setCurrLocation(latlng);
        });
        kakaoMap.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
        setMap(kakaoMap);
      }
    });
  }, [location?.latitude, location?.longitude]);

⚠️ 문제 상황2 - 흰 화면만 보여요

분명 지도가 띄워져야 할 자리에 흰 화면만 보인다..? console 창에 에러도 안뜨는 상황이 당황스럽다면...

🧐 원인

해당 문제가

배포 시

혹은 로컬에서 localhost:3000이 아닌 다른 Port번호로 실행했을 때(3001, 3002)

발생한다면 원인은 해당 프로젝트를 실행한 도메인에 있다.

이는 Kakao Developers에서 처음 App key를 발급하기 위해 생성했던 어플리케이션에 등록된 도메인과 다르기 때문이다.

도메인을 추가로 등록해 주어야 한다.

✅ 해결

KaKao Developers 사이트에서 내 애플리케이션 > 앱 설정 > 플랫폼에서 Web > 수정 버튼을 눌러 수정한다.

위와 같이 여러개의 도메인을 줄바꿈으로 추가 작성해 준다. 나는 포트번호가 다른 경우, 그리고 배포 URL을 함께 등록해 주었다.

⚠️ http://localhost:3000/ (x) -> 도메인 끝에 /(슬래시)는 붙이면 안됨

해결!

Next.js + TS | Kakao 지도 API 프로젝트에 사용하기 #3 현재 위치 불러오기

Sun, 28 Jul 2024 14:56:35 GMT

현재 위치 불러오기

이전에 임의로 location을 설정했다면 이번에는 처음 페이지 접속/실행 시 현재 위치를 기준으로 지도를 렌더링하는 훅을 구현해 보자.

`useGeolocation` 훅 작성하기

useGeolocation.ts라는 파일을 생성 한다.

1.1 상태 초기화

import { useState, useEffect } from 'react';
import { Latlng } from '../shared/types/map';

const useGeolocation = () => {
  const [location, setLocation] = useState(null); // 현재 위치를 저장할 상태


  return { location };
};

export default useGeolocation;

우선, useState를 사용하여 현재 위치 정보를 저장할 상태를 초기화한 다음 상태의 초기값은 null로 설정한다.

여기서 Latlng은 위도(latitude)와 경도(longitude)를 미리 설정한 타입이다.

export interface Latlng {
  latitude: number;
  longitude: number;
}

1.2 위치 정보 요청

컴포넌트가 처음 렌더링될 때 위치 정보를 요청해야 하므로, useEffect를 사용하여 위치 정보 요청 로직을 실행한다.

import { useState, useEffect } from 'react';
import { Latlng } from '../shared/types/map';

const useGeolocation = () => {
  const [location, setLocation] = useState(null); // 현재 위치를 저장할 상태

  useEffect(() => {
    navigator.geolocation.getCurrentPosition(successHandler, errorHandler); // 성공시 successHandler, 실패시 errorHandler 함수가 실행된다.
  }, []);

  const successHandler = () => {};

  const errorHandler = () => {};

  return { location };
};

export default useGeolocation;

컴포넌트가 마운트될 때 usenavigator.geolocation.getCurrentPosition 메서드를 통해 브라우저의 Geolocation API를 사용하여 현재 위치를 가져올 수 있으며, 메소드는 순서대로 성공, 실패 시의 콜백 함수 2개를 인자로 받는다.

콜백 함수 작성

import { useState, useEffect } from 'react';
import { Latlng } from '../shared/types/map';

const useGeolocation = () => {
  const [location, setLocation] = useState(null); // 현재 위치를 저장할 상태

  useEffect(() => {
    navigator.geolocation.getCurrentPosition(successHandler, errorHandler); // 성공시 successHandler, 실패시 errorHandler 함수가 실행된다.
  }, []);

  const successHandler = (response: {
    coords: { latitude: number; longitude: number };
  }) => {
    const { latitude, longitude } = response.coords;
    setLocation({ latitude, longitude });
  };

  const errorHandler = (error: GeolocationPositionError) => {
    console.log(error);
  };

  return { location };
};

export default useGeolocation;

successHandler

위치 정보 요청이 성공했을 때 호출되는 successHandler 함수는 response 객체를 인자로 받는다. response.coords는 Geolocation API가 반환하는 객체로, 여기서 latitude와 longitude를 추출해 setLocation을 통해 상태를 업데이트한다.

errorHandler

위치 정보 요청이 실패했을 때 호출되는 errorHandler 함수는 GeolocationPositionError 타입의 error 객체를 인자로 받는다.

적용

이전 2탄 지도 띄우기 포스트 글 작성 시 Map 객체 생성 시 임의의 위치값을 넣었었는데, 이번에는 useGeoLocation을 사용해 현재 위치 값을 넣어 Map 객체를 생성해 보자.

import useGeolocation from '@/app/_hooks/useGeolocation';

//...

const MapProvider: React.FC = ({ children }) => {
  const { location } = useGeolocation(); // 현재 위치 값 불러오기

  const mapRef = useRef(null);
  const [map, setMap] = useState(null);
  const [markerClusterer, setMarkerClusterer] =
    useState(null);
  const [overlays, setOverlays] = useState([]);
  const [prevKeyword, setPrevKeyword] = useState([]);
  const [places, setPlaces] = useState([]);
  const [prevLocation, setPrevLocation] = useState(
    null,
  );
  const [currLocation, setCurrLocation] = useState(
    null,
  );

  useEffect(() => {
    const { kakao } = window;

    kakao?.maps.load(() => {
      const mapElement = mapRef.current;
      // 컴포넌트 mount 후 DOM 요소에 접근
      if (mapElement) {
        const options = {
          center: new kakao.maps.LatLng(
            location?.latitude as number,
            location?.longitude as number, // 현재 경도, 위도 적용
          ),
          level: 3,
          smooth: true,
          tileAnimation: false,
        };
        // 지도 생성
        const kakaoMap = new kakao.maps.Map(mapElement, options);

        // 현재 중심좌표 값 갱신
        kakao.maps.event.addListener(kakaoMap, 'dragend', function () {
          const latlng = kakaoMap.getCenter();
          setCurrLocation(latlng);
        });

        setMap(kakaoMap);
      }
    });
  }, [location?.latitude, location?.longitude]);

Next.js + TS | Kakao 지도 API 프로젝트에 사용하기 #2 지도 띄우기

Fri, 19 Jul 2024 07:38:46 GMT

1탄에서 받아온 App Key를 이용해 Next.js + TS 프로젝트에 Kakao 지도 띄워보기!

Next.js에서 KaKao 지도를 띄우기 위한 방법에는 기본적으로 Map 컴포넌트를 만들어 활용할 수 있지만, 나는 다음과 같은 이유로 Provider로 만들어 지도를 띄우기로 했다.

Provider를 통해 지도를 쉽게 초기화하고 관리

필요한 페이지에만 지도를 불러오기
useMap 훅으로 만들고 Context API를 통해 지도 객체, 마커 클러스터, 오버레이, 위치 등의 상태를 전역적으로 관리하기
상태 관리와 로직을 분리해 자식 컴포넌트들이 필요한 상태에 쉽게 접근하고 수정 가능

그리고 이를 위한 설정 방법을 다룰 예정이다.

🗂️ 프로젝트 환경

npx create-next-app@latest (프로젝트 명) --typescript
cd (프로젝트 명)

현재 진행 중인 프로젝트는 위와 같이 Next.js +TS의 프로젝트 환경이며 app router 방식을 사용하고 있다. (+ Tailwind CSS)

🗂️ 환경변수 설정

발급한 App Key를 .env파일에 저장한다.

🗂️ `app/layout.tsx`

layout.tsx 파일을 수정하여 Kakao 지도 스크립트를 로드한다.

import type { Metadata } from 'next';
import Script from 'next/script';

import { Noto_Sans_KR } from 'next/font/google';

import '../styles/globals.css';

export const metadata: Metadata = {
  title: '나의 프로젝트',
  description: '나의 프로젝트 - my project',
};

const font = Noto_Sans_KR({
  subsets: ['latin'],
});
export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    
      
        
           {children}
      
    
  );
}

가이드에 따르면 스크립트 태그는 반드시 실행 코드보다 먼저 선언되어야 한다고 되어 있다. 그렇기 때문에 다른 컴포넌트들이 렌더링 되는 children보다 위쪽에 배치하자.

기본적으로 //dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 삽입
libraries - 라이브러리 불러오기

Kakao 지도 API 는 아래와 같이 지도와 함께 사용할 수 있는 라이브러리를 지원하고 있다.
- clusterer: 마커를 클러스터링 할 수 있는 클러스터러 라이브러리
- services: 장소 검색 과 주소-좌표 변환 을 할 수 있는 services 라이브러리
- drawing: 지도 위에 마커와 그래픽스 객체를 쉽게 그릴 수 있게 그리기 모드를 지원
(프로젝트에서 클러스터러와 장소 검색 기능을 사용하기 떄문에 services, clusterer를 불러왔다.)
autoload - Kakao 지도 API 스크립트를 로드할 때 자동으로 지도를 초기화할지 여부
- autoload=true(기본값) - Kakao 지도 API 스크립트가 로드되면 자동으로 지도 관련 리소스를 초기화
- autoload=false - 스크립트가 로드된 후, kakao.maps.load() 함수를 호출해야만 지도 관련 리소스가 초기화됨 false로 설정 시 스크립트가 로드된 후 지도를 초기화하는 시점을 제어할 수 있고, 필요하지 않을 때에도 지도가 초기화 되는 것을 막을 수 있다.
(Provider를 통해 kakao.maps.load()로 지도를 불러올 예정이기 때문에 false로 설정해 두었다.)

🛠️ MapProvider 만들기

MapProvider 파일을 생성한다. 나의 경우 app\shared\contexts\Map.tsx와 같은 파일 경로로 생성해 주었다.

📍 1. Context 생성

// Map.tsx

'use client';

// ...import

interface IMapContextValue {
  mapData: kakao.maps.Map | null;
  // 아래는 그 외 상태 관리가 필요한 데이터들을 추가한 것
  markerClusterer: kakao.maps.MarkerClusterer | null;
  setMarkerClusterer: (markers: kakao.maps.MarkerClusterer | null) => void;
  overlays: kakao.maps.CustomOverlay[];
  setOverlays: (markers: kakao.maps.CustomOverlay[]) => void;
  places: IPlace[];
  setPlaces: React.Dispatch>;
  prevKeyword: string[];
  setPrevKeyword: React.Dispatch>;
  currLocation: kakao.maps.LatLng | null;
  setCurrLocation: React.Dispatch<
    React.SetStateAction
  >;
  prevLocation: kakao.maps.LatLng | null;
  setPrevLocation: React.Dispatch<
    React.SetStateAction
  >;
}

const MapContext = createContext({
  mapData: null,
  // 아래는 그 외 상태 관리가 필요한 데이터들을 추가한 것
  markerClusterer: null,
  setMarkerClusterer: () => {},
  overlays: [],
  setOverlays: () => {},
  places: [],
  setPlaces: () => {},
  prevKeyword: [],
  setPrevKeyword: () => {},
  currLocation: null,
  setCurrLocation: () => {},
  prevLocation: null,
  setPrevLocation: () => {},
});

먼저 지도의 상태와 관련 상태를 업데이트하는 역할의 컨텍스트 객체 MapContext를 만들어 준다.

초기값으로는 모든 상태와 함수를 빈 값으로 설정한다.
처음에는 mapData만 담으면 되고, 그 외에는 위 코드와 같이 필요할 때마다 상태 관리가 필요한 데이터들을 추가하면 된다.

Map 객체를 포함한 다른 지도 관련 데이터 type 정의 시에는 kakao.maps.~ 와 같이 지정된 타입을 불러와 사용한다.

📍 2. MapProvider 컴포넌트

그 다음 MapProvider 컴포넌트를 만들어 주어야 한다.

1) 변수 생성

// Map.tsx

// ...MapContext 코드

interface MapProps {
  children?: React.ReactNode;
}

const MapProvider: React.FC = ({ children }) => {
  const location = { latitude: 37.5665, longitude: 126.9780 }; // 임의의 위도와 경도

먼저 지도를 불러올 때의 중심 위치를 설정한다. 이해를 위해 임의의 좌표 값으로 설정해둔 상태이고, 프로젝트에서는 사용자의 현재 위치를 불러오는 훅을 만들어 사용하고 있다.

(3탄에 사용자 현재 위치 불러오기 구현 방법을 다룰 예정!)

// Map.tsx

const MapProvider: React.FC = ({ children }) => {
  const location = { latitude: 37.5665, longitude: 126.9780 }; // 임의의 위도와 경도  

  const mapRef = useRef(null);
  const [map, setMap] = useState(null);
  const [markerClusterer, setMarkerClusterer] = useState(null);
  const [overlays, setOverlays] = useState([]);
  const [prevKeyword, setPrevKeyword] = useState([]);
  const [places, setPlaces] = useState([]);
  const [prevLocation, setPrevLocation] = useState(null);
  const [currLocation, setCurrLocation] = useState(null);

  //...

  return ();
};

export default MapProvider;

mapRef - useRef로 지도 DOM 요소를 참조하기 위함
useState 훅을 사용해 지도 객체(Map), 그 외 마커 클러스터러, 오버레이 목록, 이전 검색어, 장소 목록, 이전 위치, 현재 위치 등의 상태를 관리하는 변수를 생성한다.

2) 지도 초기화 및 설정

// Map.tsx

 const MapProvider: React.FC = ({ children }) => {
     // ...변수 세팅

  useEffect(() => {
    const { kakao } = window;

    kakao?.maps.load(() => {
      const mapElement = mapRef.current;
      // 컴포넌트 mount 후 DOM 요소에 접근
      if (mapElement) {
        const options = {
          center: new kakao.maps.LatLng(
            location?.latitude as number,
            location?.longitude as number,
          ),
          level: 3,
          smooth: true,
          tileAnimation: false,
        };
        // 지도 생성
        const kakaoMap = new kakao.maps.Map(mapElement, options);

        // 현재 중심좌표 값 갱신
        kakao.maps.event.addListener(kakaoMap, 'dragend', function () {
          const latlng = kakaoMap.getCenter();
          setCurrLocation(latlng);
        });

        // 줌 컨트롤
        let zoomControl = new kakao.maps.ZoomControl();
        kakaoMap.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
        setMap(kakaoMap);
      }
    });
  }, [location?.latitude, location?.longitude]);

      // ...

  return (

  );
};

Kakao Maps API 로드
```
const { kakao } = window;

kakao?.maps.load(() => {
  // 지도 초기화 및 설정 내용
});
```
- window 객체에서 kakao 속성을 가져와 Kakao Maps API를 사용
- kakao?.maps.load()는 Kakao Maps API가 로드되었을 때 실행되는 콜백 함수
지도 초기화
```
const mapElement = mapRef.current;
 if (mapElement) {
    const options = {
      center: new kakao.maps.LatLng(location?.latitude as number, location?.longitude as number),
      level: 3,
      smooth: true,
      tileAnimation: false,
    };
    const kakaoMap = new kakao.maps.Map(mapElement, options);

   //...
 }
```
- mapElement가 존재하는 경우, Kakao Maps API를 사용하여 지도를 생성한다.
  
  이전에 이 부분 관련 에러 핸들링으로 다뤘던 글 참고 ⚛️React | 카카오맵 api - Cannot read properties of null (reading 'currentStyle')
- options
  - (필수) center : 지도의 중심 좌표, kakao.maps.LatLng 객체를 사용해 위도와 경도 지정
  - level : 지도의 확대 레벨 (1~10) (기본값: 3)
  - smooth : 지도 줌/팬 애니메이션을 부드럽게 설정
  - tileAnimation : 지도 타일 애니메이션 설정 여부 (기본값: true)
    
    그 외 옵션 참고 API Docs - Map
    https://apis.map.kakao.com/web/documentation/#Map
(그 외) 지도 이벤트 리스너 등록하기 여기 부터는 프로젝트를 위해 따로 추가한 기능이라 참고로 보면 좋을 것 같다. API Docs를 보면 등록할 수 있는 다양한 이벤트가 존재하는데,

API Docs - Map Events https://apis.map.kakao.com/web/documentation/#Map_Events

프로젝트에서 지도를 움직일 때마다 '현재 위치 기준 재검색' 하는 기능을 구현하기 위해 dragend 이벤트로 지도가 드래그 될 때마다(=지도의 위치가 움직일 때마다) 계속해서 현재 위치를 갱신해 저장하고 있다.
```
kakao.maps.event.addListener(kakaoMap, 'dragend', function () {
  const latlng = kakaoMap.getCenter();
  setCurrLocation(latlng);
});
```
(그 외) 줌 컨트롤 띄우기 지도를 불러올 때 아래 설정을 추가해 사진과 같은 줌 컨트롤을 띄울 수 있다.
```
let zoomControl = new kakao.maps.ZoomControl();
kakaoMap.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
```
- kakao.maps.ZoomControl 객체를 생성
- kakao.maps.ControlPosition.RIGHT : 줌 컨트롤을 지도의 오른쪽에 배치
  
  그 외 컨트롤 배치 위치 참고 API Docs - ControlPosition https://apis.map.kakao.com/web/documentation/#ControlPosition

3) 메모이제이션

// Map.tsx

const MapProvider: React.FC = ({ children }) => {
 // ...변수 세팅

 // ...useEffect 훅

  const values: IMapContextValue = useMemo(
    () => ({
      currLocation,
      setCurrLocation,
      prevLocation,
      setPrevLocation,
      mapData: map,
      markerClusterer,
      setMarkerClusterer,
      overlays,
      setOverlays,
      places,
      setPlaces,
      prevKeyword,
      setPrevKeyword,
    }),
    [
      currLocation,
      prevLocation,
      map,
      markerClusterer,
      overlays,
      places,
      prevKeyword,
    ],
  );

  return ();
};

export default MapProvider;

export const useMap = () => useContext(MapContext);

useMemo로 컨텍스트에 제공할 값을 메모이제이션한다. 의존성 배열에 있는 값들이 변경될 때만 재계산된다.

4) 컨텍스트 프로바이더와 지도 렌더링

return (
    <>
      {location && (
        
          
            {children}
            
          
        
      )}
    
  );
};

위치 정보가 있을 때만 MapContext.Provider를 렌더링한다.
values 객체를 컨텍스트 값으로 전달한다.
children을 렌더링하고
지도가 표시되는 영역

5) useMap 훅 정의

마지막으로 useMap 훅을 정의하여 컨텍스트를 쉽게 사용할 수 있도록 해주면 MapProvider 설정 끝!

export const useMap = () => useContext(MapContext);

MapProvider 전체 코드

'use client';

import React, {
  createContext,
  useContext,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react';
import { IPlace } from '@/app/shared/types/map';

interface MapProps {
  children?: React.ReactNode;
}

interface IMapContextValue {
  mapData: kakao.maps.Map | null;
  // 아래는 그 외 상태 관리가 필요한 데이터들을 추가한 것
  markerClusterer: kakao.maps.MarkerClusterer | null;
  setMarkerClusterer: (markers: kakao.maps.MarkerClusterer | null) => void;
  overlays: kakao.maps.CustomOverlay[];
  setOverlays: (markers: kakao.maps.CustomOverlay[]) => void;
  places: IPlace[];
  setPlaces: React.Dispatch>;
  prevKeyword: string[];
  setPrevKeyword: React.Dispatch>;
  currLocation: kakao.maps.LatLng | null;
  setCurrLocation: React.Dispatch<
    React.SetStateAction
  >;
  prevLocation: kakao.maps.LatLng | null;
  setPrevLocation: React.Dispatch<
    React.SetStateAction
  >;
}

const MapContext = createContext({
  mapData: null,
  // 아래는 그 외 상태 관리가 필요한 데이터들을 추가한 것
  markerClusterer: null,
  setMarkerClusterer: () => {},
  overlays: [],
  setOverlays: () => {},
  places: [],
  setPlaces: () => {},
  prevKeyword: [],
  setPrevKeyword: () => {},
  currLocation: null,
  setCurrLocation: () => {},
  prevLocation: null,
  setPrevLocation: () => {},
});

const MapProvider: React.FC = ({ children }) => {
  const { location } = useGeolocation();

  const mapRef = useRef(null);
  const [map, setMap] = useState(null);
  const [markerClusterer, setMarkerClusterer] =
    useState(null);
  const [overlays, setOverlays] = useState([]);
  const [prevKeyword, setPrevKeyword] = useState([]);
  const [places, setPlaces] = useState([]);
  const [prevLocation, setPrevLocation] = useState(
    null,
  );
  const [currLocation, setCurrLocation] = useState(
    null,
  );

  useEffect(() => {
    const { kakao } = window;

    kakao?.maps.load(() => {
      const mapElement = mapRef.current;
      // 컴포넌트 mount 후 DOM 요소에 접근
      if (mapElement) {
        const options = {
          center: new kakao.maps.LatLng(
            location?.latitude as number,
            location?.longitude as number,
          ),
          level: 3,
          smooth: true,
          tileAnimation: false,
        };
        // 지도 생성
        const kakaoMap = new kakao.maps.Map(mapElement, options);

        // 현재 중심좌표 값 갱신
        kakao.maps.event.addListener(kakaoMap, 'dragend', function () {
          const latlng = kakaoMap.getCenter();
          setCurrLocation(latlng);
        });

        // 줌 컨트롤
        let zoomControl = new kakao.maps.ZoomControl();
        kakaoMap.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
        setMap(kakaoMap);
      }
    });
  }, [location?.latitude, location?.longitude]);

  const values: IMapContextValue = useMemo(
    () => ({
      currLocation,
      setCurrLocation,
      prevLocation,
      setPrevLocation,
      mapData: map,
      markerClusterer,
      setMarkerClusterer,
      overlays,
      setOverlays,
      places,
      setPlaces,
      prevKeyword,
      setPrevKeyword,
    }),
    [
      currLocation,
      prevLocation,
      map,
      markerClusterer,
      overlays,
      places,
      prevKeyword,
    ],
  );

  return (
    <>
      {location && (
        
          
            {children}
            
          
        
      )}
    
  );
};

export default MapProvider;

export const useMap = () => useContext(MapContext);

🗺️ 지도 띄우기

자 이제 길었던 MapProvider 설정 얘기는 끝...! 지도를 띄우는 방법은 간단하다.

MapProvider를 사용할 때 페이지마다 전역으로 띄우는 방법과 일부 페이지에서만 띄우는 방법이 있다.

전역(모든 페이지)

처음 스크립트 태그를 설정했던 app/layout.tsx 페이지에서 children에 MapProvider를 감싸주면 모든 페이지에 지도를 띄울 수 있다.

//app/layout.tsx
  import type { Metadata } from 'next';
  import Script from 'next/script';

  import { Noto_Sans_KR } from 'next/font/google';

  import '../styles/globals.css';

  import MapProvider from './shared/contexts/Map';

  export const metadata: Metadata = {
    title: '나의 산책 일기',
    description: '나의 산책 일기 - my walk log',
  };

  const font = Noto_Sans_KR({
    subsets: ['latin'],
  });
  export default async function RootLayout({
    children,
  }: Readonly<{
    children: React.ReactNode;
  }>) {
    return (
      
        
          
          {children}
        
      
    );
  }

일부 페이지만 띄우기

만약 페이지별로 다른 레이아웃을 지정해 사용하고 있다면 지도를 사용할 페이지의 layout 컴포넌트에 MapProvider를 불러온다.

예시 app\(search)\layout.tsx

'use client';

import MapProvider from '@/app/shared/contexts/Map';

export interface layoutProps {
  children: React.ReactNode;
}

const SearchLayout = ({ children }: layoutProps) => {
  return (
    
      {children}
    
  );
};

export default SearchLayout;

Container 사용하기

지도를 일부 페이지에서만 불러오되 Header와 같은 다른 요소들도 항상 같이 불러오려면? Container 컴포넌트를 만들고 이렇게 MapProvider를 활용할 수 있다.

// Container.tsx

  'use client';

  import { ReactNode } from 'react';

  import Header from './Header';
  import MapProvider from '@/app/shared/contexts/Map';

  interface ContainerProps {
    children: ReactNode;
  }

  const Container = ({ children }: ContainerProps) => {
    return (
      <>
        
          
            
            
              {children}
            
          
        
      
    );
  };

  export default Container;

// `app\(search)\layout.tsx`

  'use client';

  import Container from '@/app/_component/common/Container';

  export interface layoutProps {
    children: React.ReactNode;
  }

  const SearchLayout = ({ children }: layoutProps) => {
    return (
      
        {children}
      
    );
  };

  export default SearchLayout;

🔍 결과

Next.js + TS | Kakao 지도 API 프로젝트에 사용하기 #1 App key 발급하기

Fri, 12 Jul 2024 06:46:17 GMT

현재 개발 중인 Next.js + TS 프로젝트에서 Kakao 지도 API를 사용해 지도를 불러와 구현 중에 있는데, 구현 단계를 기록해 두려 시리즈로 만들어 보려고 한다!

Kakao 지도 API

Kakao 지도 API Kakao 지도 API는 웹사이트와 모바일 애플리케이션에서 지도를 이용한 서비스를 제작할 수 있도록 카카오에서 지원하는 오픈 API이다.

가이드와 샘플, 문서가 자세하게 나와있고, Wizard를 통해 지도를 커스텀해볼 수도 있다.

(사실 가이드에 key 발급부터 지도 생성까지 가이드에 잘 나와 있어 이를 참고해도 좋다.)

기본 언어는 JavaScript 기준이다.

TypeScript로의 코드 가이드는 나와있지 않아서 TypeScript로 구현 시 구글링이 좀 필요하다. 앞으로 TypeScript 기준으로 구현한 내용을 담을 예정이니 참고하면 좋을 것 같다.

App key 발급하기

내 프로젝트에 지도를 불러오려면 먼저 App key가 필요하다.

카카오 개발자사이트 에 접속해 로그인하기 갖고 있는 카카오 계정으로 로그인할 수 있다.
로그인 후 상단의 [내 어플리케이션] 메뉴로 들어가 애플리케이션을 추가한다.
애플리케이션을 누르면 설정 페이지로 이동되고, [앱 키] 메뉴에 들어간다. 플랫폼 별로 앱키가 나와 있고, 'JavaScript 키'를 복사해 프로젝트에 가져오면 발급 끝!

+) react-kakao-maps-sdk 라이브러리

react-kakao-maps-sdk 라이브러리

기존 JavaScript 기반의 Kakao 지도 API(Web)를 react에 맞게 포팅한 라이브러리가 있어 같이 소개하고 싶다. Map, MapMarker, MapInfoWindow 등 이미 만들어진 컴포넌트를 통해 react 환경 안에서 좀더 쉽게 구현할 수 있는 장점이 있고, TypeScript도 제공한다!

가이드도 Kakao 지도 API 사이트와 같이 자세하게 설명되어 있고, Hook으로 사용하는 법, Next.js에서의 설정 방법도 나와있다.

Next.js에서도 사용 가능하나, tailwind css 사용은 어려운 단점이 있어 참고 바란다.

컴포넌트에 className props 사용 불가 초기 react-kakao-maps-sdk를 프로젝트에 적용했다가 위와 같이 라이브러리에서 제공하는 MapMarker 컴포넌트에 className을 지정하려고 하니 "className 속성이 없다"는 에러가 발생하는 걸 볼 수 있었다. 그러나 마커는 이미지 삽입으로 마커 커스텀이 가능하고, 다른 컴포넌트는 styles props가 지정 가능한 경우가 있기 때문에 tailwind 외 다른 스타일 라이브러리 사용 시에는 문제없을 것 같다.
고정된 기본 스타일 ![] (https://velog.velcdn.com/images/day_1226/post/cd39e576-9324-46d3-a51e-f1204a62a606/image.png)
```
 
   {marker.placeName}
 
```
더욱이 위 사진처럼 Marker와 CustomOverlay를 함께 불러오면, 기본 오버레이가 없어지지 않는 버그가 있었다. className 설정 없이 tailwind로 이를 컨트롤 하기도 어렵기에...

따라서 나는 프로젝트에서 지도와 관련된 요소들을 좀더 자유롭게 커스텀해 사용하고 싶어 위 기존의 Kakao 지도 web API를 바탕으로 진행하고 있다.

✍️회고 | 스타트업 프론트엔드 개발 인턴 회고

Fri, 05 Jul 2024 08:42:18 GMT

🌻 Intern Review

올해 초 2월 중순부터 5월 중순까지 일경험 프로그램을 통해 3달간 스타트업에서 인턴으로 근무했다. 그토록 꿈꾸던 실무 경험이었는데 짧지만 경험하고 배운 점이 많아 전체적인 업무 내용과, 배운 점, 잘한 점, 그리고 아쉬운 점까지 회고로 풀어보려 한다.

📍 Where

내가 근무한 기업은 '건강 및 피트니스' 도메인의 스타트업이다. 안정적인 사용자층을 확보한 어플리케이션을 운영하고 있고, 소상공인, 지자체와 함께 협력하며 지역사회 활성화에 기여하고 있는 점에 흥미가 있어 지원했다. 그리고 무엇보다 스타트업의 분위기와 커뮤니케이션을 경험해 보고 싶었다.

기업에서의 커뮤니케이션 방식

스탠드업 미팅 : 매일 아침 10시 반에 모두 일어나 한명 씩 돌아가면서 어제까지 한 일, 하고 있는 일의 진척상황, 오늘 할 일을 다같이 간단히 공유하는 시간을 가졌다. 15분 내로 끝났고 방향을 조정하는 등 간단한 소통도 함께 이뤄졌다. 인턴은 일주일에 한번 참여했는데, 처음엔 개발이사님부터 모든 직원분들에게 주목받는 게 긴장되었지만, 어떤 작업을 하고 계신지 알게 되었고 직책, 직무 상관없이 동일하게 진행하고 귀기울여 주는 방식에서 수평적인 스타트업의 분위기를 많이 느꼈다.
온라인 커뮤니케이션 : 자리가 가깝더라도 우선적으로 슬랙의 DM을 통해 커뮤니케이션이 이뤄졌고, 자세히 얘기할 사항은 구두로 얘기하면서 소통했다. 내 자리의 경우 사수님과 떨어져 있어서 DM으로 질문하는 일이 많았는데, 까다로운 질문의 경우에는 구두보다 소통하기에 좋았던 것 같다.

📍 나의 목표

질문 많이 하기

이거 하나였는데 굉장히 중요하게 여겼던 것 같다.

이전부터 느낀 나의 단점 중 하나는 '너무 혼자 해결하려고 하는 것'이다. 어떻게 보면 책임감이 크고 스스로 주어진 일을 잘 해내고 싶은 마음도 있지만 그런 마음 때문에 도움을 요청하는 것도, 질문하는 것도 막상 하려고 하면 어려웠다. 또 여기에 더해 이게 물어볼 만한 일일까 생각하면서 결국은 혼자 어찌저찌 해결했지만, 사실 그 과정이 비효율적이었던 것 같다.

그래서 입사 초기 "인턴인 나는 모르는 게 당연하다"고 생각하려고 노력했다.

그리고 질문도 잘 해야 한다고, 실무에서는 어떻게 물어봐야 하는지 고민이 많았다. 그래서 "많이 질문해 보면서 늘자"고 생각했고, 그 과정에서 더 많이 배울 수 있기를 기대했다.

🌻 Experience Overview

📍 사용 스택

FE : React TypeScript Emotion Recoil React-Query React-Hook-form MUI Storybook
협업 툴 : Git, Jira Butbucket Slack Notion Figma, Swagger Postman

📍 업무

✔️ (1개월 차) 소상공인 클라이언트 사이트 개발

첫 업무는 이전 인턴분이 프로젝트 환경을 구축하고 진행하던 작업을 이어받아 마무리한 프로젝트였다. 기획과 디자인은 이미 완료된 상태였고, 프론트엔드(나), 백엔드 개발자 한 분과 함께 프로젝트를 진행했다.

1달간 미작업 구현 사항을 구현하고 2차 QA까지 진행, 개발계->운영계 배포를 마쳤다. QA를 진행하면서 사실상 프로젝트 전반을 다뤘는데, 처음 코드를 보았을 때 이전 인턴분이 환경 구축은 탄탄하게 해주셨지만 급하게 최대한 만들다 가신 느낌이 드는 상태였다🥲. 기존 작업 내용은 요구사항에 맞게 로직을 고치고, 복잡한 코드 정리하고, 중복 컴포넌트 분리하고, 폴더 구조도 재정비 하면서 완성하더라도 혹시나 나중에 작업할(?) 누군가를 고려하며 가독성을 높이려 했다.

이후에는 모바일 반응형 디자인을 반영하고 발생한 버그와 오류를 해결하다, 퇴사 전 UI/UX 개선을 위한 디자인 변경 & 기능 추가 사항이 있어 이를 반영하고 추가 QA를 마침과 동시에 퇴사했다👼.

모르는 건 사수님의 도움을 받았지만, 실무에서 맡은 첫 프로젝트라 책임감이 컸고 나오는 QA 사항은 오로지 나의 것이라는..부담도 있었다. 그러나 그만큼 다양한 요구사항을 접하고, 다양한 에러 상황을 해결해 보고 스택들도 제대로 다뤄볼 수 있었기 때문에 가장 크게 성장한 경험이 아닐까 싶다.

✔️ (2개월 차) 데이터 포탈 UI 컴포넌트 구현 참여

사내 개발 중인 데이터 포탈에서 UI 컴포넌트 구현을 맡았다. 아래는 그 중 가장 기억에 남는 컴포넌트 구현 내용이다.

테이블 입력 폼 오디오/이미지/텍스트/날짜 입력 폼이 테이블 형식으로 짜인 컴포넌트를 구현했다. 폼 자체는 구현이 어렵지 않았지만, '테이블 레이아웃'에 맞춘 요구사항을 충족하기 위해 성능보다도 UI에 대한 고민을 많이 하며 개발한 경험이었다.
- 텍스트 입력 폼은 클릭 시 입력 모달을 띄워 입력받기
- 오디오/이미지는 키보드 Delete/Backspace 키로도 삭제할 수 있어야 함
- 행을 10개 이상 입력 시 상하 스크롤 활성화
- 좌/우로 폼이 나뉜 상태에서 좌측 폼은 고정, 우측 폼은 shift키를 눌렀을 때에만 좌우 스크롤 기능 활성화

✔️ (3개월 차) Storybook 기반 디자인 시스템 구축

입사한 지 2달이 되어갈 때쯤 사수님이 'Storybook'을 사용해 본 적이 있는지 물어보시면서 내가 있을 때 이를 같이 도입해 보고 싶다고 했다. 사실 Storybook에 대해 잘 모르고 언제 한번 공부해 보고 싶다는 생각만 하다가 새로운 스택을 사용해 본다는 게 좋아서 호기롭게 "주말 동안 공부해 보고 올게요!" 로 시작된 업무였다.

사수님이랑 같이 일주일에 1-2번 스터디를 진행하고 3주 동안 아래 플로우로 구현했다.

Storybook + 컴포넌트 라이브러리 프로젝트 환경 구축

작업 중인 UI 컴포넌트들을 바탕으로 문서화 진행 (그 외 타이포그래피, 컬러 팔레트 등등)
Chromatic으로 Storybook 배포
UI 컴포넌트들은 NPM 라이브러리로 따로 배포
빗버킷(Bitbucket) CI/CD 파이프라인 세팅으로 두 배포 자동화

🌻 느낀 점

🌱 배운 점

✔️ 문제 파악하기

기획팀으로부터 QA가 들어오면 "~에서 ~와 같이하면 ~동작이 안돼요"와 같은 보여지는 부분에 대한 피드백으로 받게 되는데, 이를 해석해서 코드 내의 어떤 로직에서 문제가 있는지 도출하기까지 파악할 수 있게 되었다.
백엔드 API 요청 중 500 에러 제외 에러가 날 경우 이게 백엔드 문제인지 프론트엔드 문제인지 바로 파악 후, 백엔드 에러의 경우 원인을 백엔드로 전달하면서 함께 해결할 수 있게 되었다.

✔️ 프론트엔드가 UX를 고려하는 방법

쉬운 예로 '999,999개까지의 개수를 입력할 수 있는 인풋'이 있다면 아래와 같은 요구사항이 있을 것이다.

6자리 입력 제한 또는 유효성 검사

0, 음수(-), 문자열, 특수기호, 소수점 입력 방지 / 혹은 에러 문구 표시
비어 있는 경우 에러 표시
띄어쓰기 금지
천 단위 구분기호(콤마) 넣기

"누가 음수를 입력하겠어? 누가 띄어쓰기를 입력하겠어? 아무리 그래도 999,999개+까지 입력하겠어?"와 같은 여지는 실무에서 허용되지 않으며, 무조건 언젠가 QA로 들어올 사항이고😇, 개발자가 구현 시 먼저 충분히 고려해야 함을 느꼈다.

실제로 180+개의 프론트엔드 QA를 처리하면서, 구현 전 기획 요구 사항을 꼼꼼히 확인 하에 설계 방법을 세우고, 이 컴포넌트를 마치 '미운 4살' 아이가 다룰 수도 있다고 생각하고 사용하는 클라이언트의 시선에서 개발하는 마인드를 지니게 되었다.

🌱 좋았던 점

✔️ 대안을 제시하다

3개월 차에 진행했다고 언급한 Storybook을 배포할 때 곤란한 문제가 있었다.

Bitbucket 배포가 가능해야 함

다른 배포 플랫폼은 Bitbucket이 안되거나 비공개 레포지토리에 대한 제약 있음
배포 자동화도 필요함

사수님과 계속 고민하다가 여러 배포 플랫폼을 조사하던 중 Chromatic을 발견했다. Chromatic은 Storybook 관리자가 만든 무료 배포 서비스로 배포 과정이 간단하고, 시각적 테스트 자동화를 지원하면서도 팀과 함께 리뷰할 수 있다는 점이 좋아 보여 사수님에게 제안드렸는데 긍정적으로 여겨주셔서 Chromatic으로 배포를 진행했다. 자동화는 Bitbucket CI/CD 파이프라인 구축으로 처리하게 되었다.

문제 상황에서 열심히 대안을 찾아보고 제안한 것을 바탕으로 무사히 배포까지 이끌어낼 수 있어 뿌듯했다.

✔️ 좋은 질문하기

사수님으로부터 좋은 피드백을 받았던 부분이다.

사수님에게 도움 요청 시 기업 슬랙 채널을 통한 소통 + 내 자리와 사수님의 자리가 떨어져 있어 항상 DM으로 먼저 질문을 드리고 사수님이 확인 후 답변 혹은 내 자리에서 조언을 주시는 방식으로 도움을 구했다. 입사 초반에는 인턴으로서 사수님에게 드리는 DM이 긴장되어서 먼저 양해를 잘 구해야 되겠다(?)는 생각이 들었는데, 다른 직원분들 간의 커뮤니케이션 방식이 생각보다 편하고 자유로운 분위기였고, 다들 바쁘게 업무에 임하고 계신 걸 보면서 오히려 빠른 전달이 더 중요하다고 느꼈다.

그래서 질문이 간단한 경우 서론 없이 바로 DM으로 질문을 드렸고,

코드 리뷰처럼 설명이 필요한 경우 "현재 ㅇㅇ 관련 문제가 있는데 확인 괜찮으신가요?"와 같은 간단한 DM을 드린 후, '문제 상황 + 코드(파일 경로 포함) + 주요 코드 설명'을 글로 정리해 DM을 보냈다.

이 방식에 대해 사수님은 빨리 확인하고 파악해서 도움을 줄 수 있는 방식이 좋았다고 하셨다.

물론 어떤 커뮤니케이션 방식이 옳게 여겨지는 지는 사람, 회사에 따라 또 다를 수도 있겠지만 요지 파악을 위한 '정확한 전달'만큼은 커뮤니케이션에서 항상 중요하다고 생각하게 되었다.

🌱 아쉬운 점

✔️ 일정 예측 및 관리

전달받은 업무에 대해 "얼마나 걸릴 것 같아요?"라고 질문을 받으면 어떻게 구현할지 전혀 감이 잡히지 않아 머뭇거리거나 항상 넉넉잡아 말씀드리곤 했다. 오래 걸릴 수 있음을 드러내는 게 인턴으로서 좋아 보이지 않을 테지만, 내가 말한 기간에 대해 책임져야 한다고 생각했기 때문이다. 이에 사수님은 "나라면 이 작업은 며칠, 저 작업은 며칠 정도면 될 것 같은데" 요렇게 요구사항을 보며 바로 계획을 잡는 모습을 보고 놀랐다. 결과적으론 사수님과 함께 일정을 조율했고, 내가 처음 넉넉잡은 기간보다 빠르게 완성하기도 했다.

요구사항을 보고 머릿속으로 그려보면서 구현 방향을 예측할 수 있게 된다면 다른 이해관계자들과의 협업에도, 프로젝트 일정 관리와 진행에도 큰 도움이 될 것 같다는 생각이 들었다. 그러려면 더 성장해야지💪

✍️ 마무리

소통 능력과 스킬에 대한 빠른 적응력을 인정받고, 그동안 공부해오던 스택을 직접 사용해 본 값진 시간이었다. 많이 배운 만큼 부족한 부분도 느꼈고 앞으로 내가 무엇을 채워나가야 하는지 안다.

글을 쓰는 지금은 벌써 인턴 퇴사 두달차가 되어가지만 조급해하지 않고 단단한 개발자로 계속 나아가고 싶다.

Next.js | [에러] Next.js 외부 이미지 사용 에러(Error: Invalid src prop)

Sun, 30 Jun 2024 11:50:06 GMT

Unhandled Runtime Error Error: Invalid src prop (https://storep-phinf.pstatic.net/ogq_618430508a376/original_7.png?type=p100_100) on next/image, hostname "my-walklog.s3.ap-southeast-2.amazonaws.com" is not configured under images in your next.config.js See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

Next.js에서 외부 이미지 데이터를 불러와 Image 컴포넌트로 사용할 때 다음과 같은 에러가 발생했다. AWS S3에 저장한 이미지 url을 사용할 때에도 위 에러가 발생했다.

해석하면 다음과 같다.

next/image 컴포넌트에 전달된 src 속성의 값이 유효하지 않음

이미지의 호스트 도메인 "my-walklog.s3.ap-southeast-2.amazonaws.com"이 next.config.js 파일에 구성되어 있지 않음

원인

Next.js에서 next/image 컴포넌트를 사용해 외부 호스트에서 호스팅하는 이미지를 렌더링하려면 해당 호스트를 next.config.js에 등록해야 한다.

해결

next.config.js 파일에서 images-domains에 허용하고자 하는 도메인을 설정해 준다.

/** @type {import('next').NextConfig} */
const nextConfig = {

  //...다른 설정

  // 이미지 호스트 추가
  images: {
    domains: [
      'my-walklog.s3.ap-southeast-2.amazonaws.com',
    ],
  },
};

export default nextConfig;

여러 이미지 도메인을 등록할 수 있다. 저장한 뒤, 만약 npm run dev로 실행 중이었다면 종료 후 재실행해야 적용되는 것을 볼 수 있다.

Next.js | prisma로 csv 파일 DB에 저장하기

Sun, 16 Jun 2024 08:55:29 GMT

현재 구현 중인 Next.js 프로젝트에 필요한 오픈 API를 찾던 중 필요한 데이터가 CSV로만 제공하는 데이터였고, CSV 파일을 DB에서 저장해 관리해야 하는 문제가 있었다. 그래서 prisma를 사용해 DB에 미리 CSV 파일을 업로드해 저장하는 로직을 구현해보기로 했는데...,

구글링 해보니 관련 자료가 없었고, 있더라도 딱 세팅까지의 내용만 있어서 이후는 혼자 시행착오를 겪으며 결국 성공한😭 업로드까지의 과정을 남겨보려 한다.

1. prisma 환경 세팅

프로젝트를 vercel로 배포되어 있고, db는 vercel postgres를 선택해 미리 기본 스키마 및 db를 세팅해 둔 상태이다.

vercel postgres db 세팅 참고 아래 vercel 문서 URL 내용과 같이 세팅해 두었다. https://vercel.com/guides/nextjs-prisma-postgres

그리고 나는 아래와 같은 산책로 공공테이터를 DB에 업로드해보려 한다. 내 주변 산책로 데이터 URL

1) prisma 관련 패키지 다운로드하기

  npm i @prisma/client
npm i prisma --save-dev-

2) `schema.prisma` 파일 작성

프로젝트 가장 상위에 prisma 폴더 생성 후 schema.prisma라는 이름의 파일이 추가되어 있음을 가정한다. 이 곳에 DB schema 정의가 되어 있을텐데, 업로드하고자 하는 csv 파일의 컬럼명을 참고해 모델을 추가 작성한다. 만약 이렇게 데이터에 컬럼명 정의서가 있다면 이를 참고해 작성하면 된다.

    // schema.prisma

    generator client {
      provider = "prisma-client-js"
    }

    datasource db {
      provider = "postgresql"
      url = env("POSTGRES_PRISMA_URL")
      directUrl = env("POSTGRES_URL_NON_POOLING") 
    }

    // 다른 model...

    model Trail{
      ESNTL_ID           String @id @unique
      WLK_COURS_FLAG_NM  String
      WLK_COURS_NM       String
      COURS_DC           String
      SIGNGU_NM          String
      COURS_LEVEL_NM     String
      COURS_LT_CN        String
      COURS_DETAIL_LT_CN String
      ADIT_DC            String
      COURS_TIME_CN      String
      OPTN_DC            String
      TOILET_DC          String
      CVNTL_NM           String
      LNM_ADDR           String
      COURS_SPOT_LA      String
      COURS_SPOT_LO      String
    }

3) DB 업데이트

정의한 스키마를 db에 업데이트 해주면 세팅 끝!

npx prisma generate // db 업데이트 (실행 후 migrations 폴더에 이전 기록이 만들어진다.)
npx prisma migrate dev --name init // 기존 db 초기화

2. csv 파일로 DB에 적용하기

1) csv-parser 설치

csv 파일을 파싱하기 위한 csv-parser 패키지를 설치한다. (패키지 설치 없이 csv 파일을 불러올 수 있는 방법도 있다. 아래에 이 방법도 함께 언급할 예정)

 npm i csv-parser

2) tsconfig.json 수정

{
  "compilerOptions": {
    //...다른 설정
    "module": "commonjs",
    "esModuleInterop": true,
    "outDir": "./dist",
  },
  "include": ["**/*.ts", ...],
}

위 속성을 꼭 작성해 주어야 한다.

3) csv import 파일 작성(csv-parser 사용.ver)

dist폴더 생성 후 ts파일을 만들어 준다.

// dist\importTrails.ts

'use server'; // prisma를 사용하기때문에 "use server" 선언

import { PrismaClient } from '@prisma/client';
import * as fs from 'fs';
const csvParser = require('csv-parser');

const prisma = new PrismaClient();

type Trail = {
  ESNTL_ID: string;
  WLK_COURS_FLAG_NM: string;
  WLK_COURS_NM: string;
  COURS_DC: string;
  SIGNGU_NM: string;
  COURS_LEVEL_NM: string;
  COURS_LT_CN: string;
  COURS_DETAIL_LT_CN: string;
  ADIT_DC: string;
  COURS_TIME_CN: string;
  OPTN_DC: string;
  TOILET_DC: string;
  CVNTL_NM: string;
  LNM_ADDR: string;
  COURS_SPOT_LA: string;
  COURS_SPOT_LO: string;
};

async function main() {
  const trails: Trail[] = [];

  fs.createReadStream('dist/trails.csv')
    .pipe(
      csvParser({
        mapHeaders: ({ header }: { header: string }) => header.trim(),
      }),
    )
    .on('data', (row: Trail) => {
      trails.push(row);
    })
    .on('end', async () => {
      console.log('CSV 파일이 성공적으로 처리되었습니다.');
      for (const trail of trails) {
        await prisma.trail.create({ data: trail });
      }
      console.log('모든 데이터가 삽입되었습니다.');
      await prisma.$disconnect();
    });
}

main().catch((e) => {
  console.error(e);
  prisma.$disconnect();
});

use server : Prisma를 사용하기 위해 서버 측 코드임을 명시
PrismaClient 및 fs 모듈 가져오기: Prisma 클라이언트(PrismaClient)와 파일 시스템 모듈(fs)을 사용
require('csv-parser') : csv-parser 모듈 불러오기

⚠️ 에러 : import csv from 'csv-parser’ 사용 시 아래와 같은 에러가 발생할 수 있다. "This module is declared with 'export =', and can only be used with a default import when using the 'esModuleInterop' flag."
- csv-parser 모듈은 'export ='를 사용하여 내보내기가 선언되어 있기 때문
- tsconfig.json 파일에서 esModuleInterop 플래그가 활성화되어 있지 않을 때에도 발생하나, esModuleInterop : true로 설정하더라도 import형식으로 불러올 때 동일하게 에러가 발생하였다.
type Trail - csv 타입 정의 : CSV 파일에서 읽어온 데이터를 저장하기 위한 타입 정의하기
main() 함수 정의 및 실행

fs.createReadStream()을 사용하여 csv 파일 읽어오기

⚠️ 에러 : 첫번째 데이터만 undefined로 출력되는 문제 키값에 따옴표가 붙어서 파싱되는 문제 때문에 첫번째 데이터만 undefined로 불러오지 못하는 문제가 있었다.
```
{
   'ESNTL_ID': 'KCCWSPO20N000001623',
   WLK_COURS_FLAG_NM: '관동별곡 8백리길',
   WLK_COURS_NM: '총 13코스',
   …,
}
```
mapHeaders: ({ header }: { header: string }) => header.trim() 을 사용해 열 이름을 불러와 trim() 메소드를 실행해주니 해결되었다.

csvParser()를 사용하여 CSV 파일을 파싱하고, 각 행을 Trail 타입의 객체로 변환
파싱된 데이터를 선언한 배열에 저장
모든 데이터 처리가 완료되면, prisma.(schema에 저장한 모델명).create()를 사용하여 각 객체를 데이터베이스에 저장
예외 처리와 함께 main() 함수 호출

+) csv import 파일 작성(csv-parser 사용 없이.ver)

csv-parser 모듈을 사용 안할 경우 기본으로 내장되어 있는readline 모듈로도 csv 파일을 읽어올 수 있다.

'use server'; // prisma를 사용하기때문에 "use server" 선언
import { PrismaClient } from '@prisma/client';
import * as fs from 'fs';
import * as readline from 'readline';

const prisma = new PrismaClient();

type Trail = {
  ESNTL_ID: string;
  WLK_COURS_FLAG_NM: string;
  WLK_COURS_NM: string;
  COURS_DC: string;
  SIGNGU_NM: string;
  COURS_LEVEL_NM: string;
  COURS_LT_CN: string;
  COURS_DETAIL_LT_CN: string;
  ADIT_DC: string;
  COURS_TIME_CN: string;
  OPTN_DC: string;
  TOILET_DC: string;
  CVNTL_NM: string;
  LNM_ADDR: string;
  COURS_SPOT_LA: string;
  COURS_SPOT_LO: string;
};

async function main() {
  const trails: Trail[] = [];

  const fileStream = fs.createReadStream('dist/trails.csv');
  const rl = readline.createInterface({
    input: fileStream,
    crlfDelay: Infinity,
  });

  let isFirstLine = true; // 첫 번째 줄인지 여부를 확인하기 위한 플래그

  for await (const line of rl) {
    if (isFirstLine) {
      isFirstLine = false;
      continue; // 첫 번째 줄인 경우 스킵하고 다음 줄로 이동
    }

    const row = line.split(',');

    trails.push({
      ESNTL_ID: row[0],
      WLK_COURS_FLAG_NM: row[1],
      WLK_COURS_NM: row[2],
      COURS_DC: row[3],
      SIGNGU_NM: row[4],
      COURS_LEVEL_NM: row[5],
      COURS_LT_CN: row[6],
      COURS_DETAIL_LT_CN: row[7],
      ADIT_DC: row[8],
      COURS_TIME_CN: row[9],
      OPTN_DC: row[10],
      TOILET_DC: row[11],
      CVNTL_NM: row[12],
      LNM_ADDR: row[13],
      COURS_SPOT_LA: row[14],
      COURS_SPOT_LO: row[15],
    });
  }

  console.log('CSV 파일이 성공적으로 처리되었습니다.');

  for (const trail of trails) {
    await prisma.trail.create({ data: trail });
  }

  console.log('모든 데이터가 삽입되었습니다.');
  await prisma.$disconnect();
}

main().catch((e) => {
  console.error(e);
  prisma.$disconnect();
});

3. DB에 업로드

이제 작성한 파일을 실행시켜주면 DB에 업로드할 수 있게 된다!

나는 초기 데이터를 db에 미리 저장하려고 하기 때문에 node 환경에서 importTrail 파일을 실행해주었다. (그렇지 않을 경우 원하는 컴포넌트에 위 파일을 불러아 async await으로 main()함수를 실행하면 된다)

1) js 로 변환

npx tsc dist/importTrails.ts ts // js로 변환

명령어 실행 후 dist 폴더에 js 파일이 생겨난다.

2) import 파일 실행하기

변환한 js 파일을 node 환경에서 실행한다.

node dist\importTrails.js // 실행

💡 DB에 들어갈 데이터가 많을 경우 업로드 시간이 좀 걸리기 때문에 위 코드처럼 console.log를 찍어 진행 상태와 완료 여부를 확인하는 것이 좋다.

모든 데이터가 삽입되었습니다. 출력 후 npx prisma studio 실행 시 db에 아래와 같이 업로드된 것을 확인할 수 있다. (캡처한 이미지는 업로드 진행 중일 때 확인한 것으로, 업로드 진행 중에 studio를 들어가면 새로고침할 때마다 실시간으로 데이터가 들어오고 있는 것을 볼 수 있다.)

참고

Velog - CSV파일 prisma 이용해서 DB에 저장하기

React | Chromatic으로 Storybook 배포하기

Sun, 21 Apr 2024 12:08:27 GMT

chromatic?

chromatic은 스토리북 관리자들이 만든 무료 퍼블리싱 서비스이다. Netlify, Vercel과 같이 스토리북 사이트를 배포할 수 있을뿐만 아니라, 크로마틱 사이트 자체에서 컴포넌트를 미리 확인할 수 있고, 빌드 내역이 기록되어 컴포넌트 단위로 변경 사항을 확인할 수 있어 스토리북에 최적화 되어 있다.

실무에서 스토리북으로 제작한 디자인 시스템을 Chromatic으로 배포를 진행했는데, 선택하게 된 이유는 다음과 같았다.

1) 사내에서 사용 중인 bitBucket으로 배포를 진행할 수 있고, Private 리포지토리도 가능해야 함 2) 스토리북으로 제작한 디자인 시스템을 여러명이 접근하고 협업할 수 있어야 함 3) 단 chromatic에서 지원되지 않는 부분인 배포 자동화가 필요해서 고민을 했는데, 이는 파이프라인 설치를 통해 리포지토리 자체에서 배포 자동화를 하기로 함 (생각보다는 어렵지 않은 부분이었음)

1) chromatic 가입하기

https://www.chromatic.com/

Githuyb, BitBucket, GitLab 연동으로 가입이 가능하다. 블로그 글을 쓰면서 깃허브로 가입 및 Github Action으로 배포 자동화를 진행해 보고 싶어서 나는 깃허브로 가입해 보기로!

가입하면 바로 프로젝트를 생성할 수 있다. Choose from Github 클릭 스토리북 프로젝트 리포지토리 선택! 그리고 StoryBook 선택하면 리포지토리 동기화가 완료되었고, chromatic을 프로젝트에 설치하고 배포하라는 명령어가 나온다. 뒷 부분은 토큰인데, 배포 이후 setting에서 다시 확인할 수 있으니 꼭 적어두지 않아도 괜찮을 것 같다.

2) chromatic 배포하기

npm install --save-dev chromatic

npx chromatic --project-token={토큰 값}

본래 다른 곳에서 배포 시 npm run build-storybook과 같이 build해야 하는데, 위 명령어는 build와 배포를 자동 진행해준다.

설치 마지막에 "package.json에 chromatic script가 없어 추가해 주겠다"고 하는데, 수락 시 package.json의 scripts에 chromatic이 추가되고, npm run chromatic 명령어로 간단하게 빌드할 수 있게 한다.

해도 좋고 안해도 좋고 선택!

설치가 완료 되면 배포 사이트와 chromatic 프로젝트 사이트 url을 알려준다.

들어가보면?

npm run storybook으로 열어 보았던 스토리북 페이지와 스토리북 프로젝트 페이지를 볼 수 있다.

3) 스토리북 프로젝트 살펴보기

Builds

프로젝트 초기 화면이다.

컴포넌트 변경사항을 만들고 한번 더 build를 재 진행해야 관리 페이지에 접근할 수 있다.

이런 내용이 나오고, 계속 클릭하면

짠!

변경사항 확인 및 코멘트까지 남길 수 있다.

그리고 우측 상단 View Storybook 버튼을 클릭하면 변경사항이 반영된 사이트를 확인할 수 있다. 이 때 이동한 사이트는 build마다 그 때의 변경사항이 적용된 부분까지만 보여지게 된다.

Library

컴포넌트들을 모아볼 수 있는 곳. 각 컴포넌트 들의 canvas와 snapshot(실제 브라우저가 스토리를 렌더링할 당시 '본' 이미지)을 살펴볼 수 있다.

Manage - Automate

visual test를 지원하는데, 기본적으로 Chrome을 테스트할 수 있고 유료 플랜 시 Firefox, Safari, Edge까지 볼 수 있는 듯.

그리고 무료플랜의 경우 snapshot을 5,000개까지 지원해 준다고 한다.
Slack 알림 받기 기능이 있다. 아직 안사용해 봤지만 실무에서 Slack을 쓰고 있는데, 디자인 시스템 구축이 더 필요하게 될 때 도입하기 유용할 것 같다.

Manage - Collaborate

Collaborators : 링크 공유 또는 email 초대를 통해 다른 사용자가 해당 프로젝트를 열람(Viewer)하고, 리뷰(Reviewer)하고, 개발(Developer), Owner까지 권한을 줄 수 있다.
Permalinks : 아까 Builds 탭을 살펴보면서 go to srtorybook으로 접근한 사이트는 각 build에서 적용된 변경사항까지만을 보여준다고 했는데(=이후 build에서 변경된 사항은 적용 안된다), 두 링크에서 부분에 브랜치를 입력해 접속하면 해당 링크는 브랜치를 가리켜 그 브랜치에 적용된 최신 사항을 항상 보여준다.
Visiblity : 보통 사이트를 배포하면 접근 시 모두가 볼 수 있는 게 기본인데, 크로마틱에서는 공개 여부를 private로 해놓으면 배포된 스토리북 사이트를 나를 포함한 초대한 사용자만 볼 수 있게 해준다. 좋은 기능인 것 같다b

Manage - Configure

Project : 프로젝트 이름을 변경하고, 토큰을 확인할 수 있다.
Connected Applications : 리포지토리 동기화. 깃허브로 로그인 후 프로젝트 생성 시 리포지토리를 이미 연결했기 때문에 자동으로 연결되어 있다. 만약 연결 없이 새로 프로젝트를 생성했을 때 여기서 Github, bitBucket, Gitlab의 리포지토리와 연결할 수 있다. 또 Figma 연결도 가능해 Figma의 디자인을 storybook 에서 볼 수 있다고...b (자세한 사항은 링크 참고 https://www.chromatic.com/docs/figma-in-chromatic/)

React | Storybook 기반 컴포넌트 문서화 도입하기 (React + Vite + TS)

Sun, 14 Apr 2024 12:21:36 GMT

근황 : 실무에서 Storybook 개발 도구 공부해 2주 만에 컴포넌트 문서화 도입 + 라이브러리 배포한 이야기...

React + Vite + TS 환경에서의 Storybook 세팅 방법과 Storybook 컴포넌트 구현 정보가 생각보다 많지 않았어서 여기서 찾고 저기서 찾고 많이 헤맸었다. 그래서 Storybook 적용하면서 틈틈이 기록해 두었던 것을 블로그 글로 남겨보려 한다.

이번 글에서는 React + Vite + TS 내에서의 스토리북 설치 방법과, 나중에라도 보기만 하면 따라할 수 있도록 story 컴포넌트를 만드는 방법을 정리해 보고, 이후에 docs 세팅 방법, actions 사용 방법, mdx 적용 방법...잘하면 npm 라이브러리 배포까지 이야기 해보고 싶다.

1. 프로젝트 환경 세팅

React + Vite + TS 설치

// 기본
npm create vite@latest
// npm 6.x
npm create vite@latest [프로젝트 명] --template react-ts
// npm 7+, extra double-dash is needed:
npm create vite@latest [프로젝트 명] -- --template react-ts

세 방법 중 적당한 방법으로 설치

emotion 설치

npm i @emotion/styled @emotion/react emotion-reset

2. Storybook 설치

npx storybook@latest init

설치 중 npm 최신 버전 설치를 추천해 주는데, 이 부분도 같이 설치해 주었다.

설치를 마치면 storybook 페이지가 자동으로 실행되고, 이후 실행 시 아래 명령어로 storybook을 열어줄 수 있다.

npm run storybook

프로젝트 디렉토리를 보게 되면 프로젝트 루트에 .storybook이라는 폴더와 src 폴더 내 stories 폴더가 생성되어 있는 것을 볼 수 있다.

Storybook Vite builder 설치

Storybook은 Webpack 기반의 프레임워크이므로 Vite 환경에서 storybook을 작업하기 위해 vite builder를 따로 설치해준다.

npm install @storybook/builder-vite --save-dev

참고 : https://storybook.js.org/docs/6.5/react/builders/vite

vite.config.ts,

story 컴포넌트에서도 import 시 편하게 @/~~~형태로 가져올 수 있는 설정을 추가해 준다.

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import * as path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
  },
});

tsconfig.json

{
  "compilerOptions": {

    //...다른 설정

    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

3. Storybook 세팅

`main.ts`

Vite builder 설치한 내용을 .storybook/main.js에 세팅해 준다.

  import type { StorybookConfig } from '@storybook/react-vite';

  const config: StorybookConfig = {
    core: {
      builder: '@storybook/builder-vite', // 👈 The builder enabled here.
    },
    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
    addons: [
      '@storybook/addon-onboarding',
      '@storybook/addon-links',
      '@storybook/addon-essentials',
      '@chromatic-com/storybook',
      '@storybook/addon-interactions',
    ],
    framework: {
      name: '@storybook/react-vite',
      options: {},
    },
    docs: {
      autodocs: 'tag',
    },
  };
  export default config;

preview.ts -> `preview.tsx`

storybook 컴포넌트에서 다음을 사용한다면 preview.ts의 세팅이 필요하다 preview.ts 파일 명을preview.tsx`로 변경 후 아래와 같이 세팅해 준다.

폰트 설정 `preview-head.html`

사용하는 폰트가 있다면 preview-head.html을 만들어 해당 폰트 link 태그를 가져와 아래와 같이 세팅한다.

  
  

  // 사용 중인 폰트 link 태그 삽입

참고 : https://storybook.js.org/docs/configure/story-rendering#adding-to-head

4. Story 컴포넌트(.stories.tsx) 만들기

스토리 컴포넌트 파일 생성 시 디렉토리 구조를 story컴포넌트만 모아놓는 방법도 있는데, 실제 작업하면서 이렇게 컴포넌트와 스타일, 그리고 story 컴포넌트를 함께 넣어놓는 방식이 컴포넌트에서 Story 컴포넌트로 Props를 받아올 수도 있고 관리하기에 수월했다.

기본 세팅 방식

아래는 storybook 공식 문서에 나와 있는 기본 story 컴포넌트 세팅 방식이다. 먼저 각 meta 내 props에 대해 알아보고, 아래 방식 말고도 다양하게 story 컴포넌트를 세팅할 수 있는 방법을 소개하려 한다.

// 기본 import
import type { Meta, StoryObj } from '@storybook/react';
// Story로 만들 컴포넌트 불러오기
import { Button } from './Button';

const meta = {
    title: "Components/Buttons/Button",
  component: Button,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  args: {}
  argTypes: {}
} satisfies Meta;

export default meta;
type Story = StoryObj;

export const Primary: Story = {
  args: {
    primary: true,
    label: 'Button',
  },
};

title - 폴더 구조 만들기 (depth 1 - 카테고리, depth 2 - 폴더, depth 3 - 컴포넌트 폴더)
component - import한 컴포넌트 삽입
parameters - layout - 컴포넌트가 보여지는 위치
- centerd 가로 세로 중앙

- `fullscreen`여백 없이

    ![](https://velog.velcdn.com/images/day_1226/post/075112e4-0c24-47e6-9b0f-6561b4a41a04/image.png)


- `padded` (기본값) - 임의의 패딩 여백이 주어짐

    ![](https://velog.velcdn.com/images/day_1226/post/fed3f599-e7bb-4ebd-aff7-31278c2f5b28/image.png)

tags: ["autodocs"] - 자동 Docs 생성
args : 스토리 컴포넌트에 넣어줄 props default 값 지정

다른 Story 컴포넌트 형식

참고 : https://storybook.js.org/docs/api/csf

미리 type Story = StoryObj타입 지정 후 args 에 props, decorators (또는 render)에 컴포넌트를 렌더링하는 방법

import { Button } from './Button';

// 기존과 동일
  const meta = {
      title: "Components/Buttons/Button",
    component: Button,
    parameters: {
      layout: "centered",
    },
    tags: ["autodocs"],
    args: {}
    argTypes: {}
  } satisfies Meta;
  type Story = StoryObj;

  export const Default: Story = {
    args: {
      main: "Main",
      mainLink: "mainLink",
    },
    decorators: [
      (Story) => (
        
          Menu Button
          
        
      ),
    ],
  };

export const Default: Story = {
args: {
  main: "Main",
  mainLink: "mainLink",
},
render: ({ main, mainLink }) => (
  
    Menu Button
    
  
),
};

리액트 컴포넌트 스타일 형식으로 만들기

  export const DropDown = (args: Props) => (
    
      Menu Dropdown
      
    
  );

  import type { Meta } from "@storybook/react";

  import Component, { Props } from ".";

  const meta = {
    title: "Components/Component",
    component: Component,
    parameters: {
      layout: "centered",
    },
    tags: ["autodocs"],
    argTypes: {},
    args: {},
  } satisfies Meta;

  export default meta;

  export const Default = (args: Props) => (
    <>
      
    
  );

⚛️React | 리액트 파일 input 다루기 2탄 - API 요청 시 formData 다루기 (json Data 함께 넣기, 여러개 파일 넣기)

Sun, 07 Apr 2024 13:54:23 GMT

1. formData 안에 json Data 넣기

보통 이미지/오디오 업로드 시 formData를 사용해 API 요청을 하게 되는데, 백엔드에서 formData 안에 application/json 형식의 json data와 파일을 함께 넣어서 요청하는 방식으로 구현해 주셨다. 처음에 보고 읭 json data를 formData에 넣을 수 있다고? 싶었는데 알고 보니 방법이 있었다.

const handleFileChange = (event: React.ChangeEvent) => {
    const file = event.target.files[]

    if(file){
       const data = { fileType : "abcde" } // 백엔드에서 요청한 json 예시
       const formData = new FormData();

       formData.append(
          "data",
          new Blob([JSON.stringify(data)], {
            type: "application/json",
          }) // application/json 형식으로 넣어 주기
       );
       // 하나의 파일
       formData.append("image", file) // multipart/form-data 형식, 업로드할 파일 집어넣기

       // ...API 요청
     }

    // ...
}

Blob을 사용해 첫번째 인수에 JSON.stringify()로 변환해 준 데이터, 그리고 type을 application/json로 지정하면 application/json 형식으로 json data를 보낼 수 있다.

2. formData 안에 여러 개의 파일 집어넣기

파일 업로드 API가 여러 개의 파일 업로드가 가능하도록 구현되어 있는 경우이다. 어떻게 여러 개의 파일을 동시에 보낼 수 있는지 싶었는데 이것도 아주 간단한 방법이!

const handleFileChange = (event: React.ChangeEvent) => {
  const files = event.target.files;

  if (files) {
    const formData = new FormData();
    // 여러 개의 파일
    Object.values(files).forEach((file) =>
       if(type){
          formData.append("files", file, file.name)
       }
    );
    // ...API 요청
  }
  //...
}

Object 형식인 files의 values(file)만 가져와서 각 file마다 key name, file, file 이름을 formData에 담아 주면 끝!

3. FileReader로 보여주는 방식에서 API 응답 데이터를 가져와 보여주기 (feat. useMutation)

이대로 마무리하기 아쉬워서... 백엔드 API가 만들어 지기 전 FileReader 객체로 화면에서 파일 관련 정보(이미지 미리보기, 오디오 정보 등) 확인해 볼 수 있도록 로직을 먼저 구현해 놓고 API를 나중에 적용하게 될 때의 경우이다.

setState로 값을 변경하는 방식은 동일하게 적용하되, 아예 업로드 API 요청 후 응답 데이터 값을 가져와 뿌려주도록 'file 이벤트 함수에서 useMutation을 통한 API 요청 + setState를 통한 값 변경' 방식의 적용은 다음과 같이 구현할 수 있다. (이전의 json Data 넣기, 여러 개의 파일 집어넣기까지 모두 포함해 보았다!)

변경 전

// ** 1) Recoil atom의 useSetRecoilState / 또는 useState 의 setState props 가져오기 
// ** 2) POST API 요청을 위한 useMutate 훅 가져오기
const { mutate:audioUpload } = usePostAudioUpload();

const handleFileChange = (event: React.ChangeEvent) => {
  const files = event.target.files;

  const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = (e) => {
      const newAudio = new Audio(e.target?.result as string);

      newAudio.onloadedmetadata = () => {
        setData((prev) => {
          // audio file과 재생시간 값 가져오기
          const updatedData = prev.map((prevData, i) => {
            if (index === i) {
              return {
                ...prevData,
                audio: file,
                duration: newAudio.duration,
              };
            }
            return data;
          });
          return updatedData;
        });
      };
  };
}

변경 후

// ** 1) Recoil atom의 useSetRecoilState / 또는 useState 의 setState props 가져오기 
// ** 2) POST API 요청을 위한 useMutate 훅 가져오기
const { mutate:audioUpload } = usePostAudioUpload();

const handleFileChange = (event: React.ChangeEvent) => { const files = event.target.files;

if (files) {

const data = { fileType : "abcde" };
const formData = new FormData();

formData.append(
  "data",
  new Blob(data)], {
  type: "application/json",
  })
);
// 여러 개의
Object.values(files).forEach((file) =>
   formData.append("files", file, file.name)
);

// 오디오 업로드 API 요청
audioUpload(formData, {
  onSuccess: (data) => {
    setData((prev) => {
      const updatedData = prev.map((prevData, i) => {
        if (index === i) { // 기존 data의 index 값과 비교
          return {
            ...prevData,
            audio: data[i].url,
            duration: data[i].duration,
          };
        }
        return audio;
      });
      return updatedData;
    });
  },
});

} }

React | 리액트 파일 input 다루기 1탄 - 버튼 클릭으로 파일 선택창 열기, FileLeader로 이미지&오디오 데이터 가져오기

Sun, 31 Mar 2024 13:01:08 GMT

1탄 2탄에 나누어 리액트에서 첨부파일을 가져와 화면에 보여주고, 가져온 첨부파일을 API로 요청하는 방법에 대한 글을 써보려 한다.

이번 글에서는 버튼 클릭으로 input 파일 선택창을 실행하는 방법과, fileChangeHandler에서 FileLeader를 사용해서 이미지, 오디오 데이터 정보를 가져오는 방법에 대한 내용을 먼저 다루고,

그 다음글에서 react query의 useMutaion으로 이미지/오디오 파일 업로드 API 구현 방법과 실무에서 formData로 API 요청 시의 다양한 경우(json Data 함께 넣기, 여러개 파일 formData에 넣기)대처 방법에 대해 다뤄볼 예정이다.

1) 버튼 클릭으로 input 파일 선택창 실행하기

사용자가 버튼을 클릭하면 파일 선택 창을 열어 이미지 파일을 선택할 수 있게 하는 기능은 다음과 같이 구현할 수 있다.

const ref = useRef(null);

const fileHandler = () => {
  if (ref.current) {
    ref.current!.click();
  }
};

const handleFileChange = () =>{
 //...
}

💡 <!> 단언 연산자를 사용한 이유?

체이닝에서 ref.current!.click()과 같이 !를 사용해 주면 ref.current가 존재한다, 즉 Nullish(null이나 undefined)한 값이 아니라는 확신을 심어줄 수 있다. 그렇지 않을 시 타입 에러가 발생할 수 있다

1. useRef Hook 사용

const ref = useRef(null);

useRef는 React의 Hook 중 하나로, DOM 요소에 직접적으로 접근할 수 있게 해주는 친구로, 여기서는 엘리먼트에 접근하기 위해 사용된다. 타입 스크립트에서는 useRef(null)과 같이 초기값은 null로 지정해줄 것.

2. fileHandler 함수

버튼 클릭 이벤트 함수 안에서 ref.current가 존재할 경우, 즉 input 엘리먼트가 마운트된 상태라면 해당 엘리먼트의 click() 메서드를 호출해 준다. 그래서 사용자가 직접 input을 클릭한 것처럼 버튼 클릭 시 파일 선택창을 열게 한다.

const fileHandler = () => {
  if (ref.current) {
    ref.current.click();
  }
};

3. button과 input 요소

button

onClick={fileHandler} : 버튼 클릭 시 fileHandler 함수를 실행하여 파일 선택 창을 연다.
input
ref : ref={ref}를 통해 이 input에 대한 참조를 저장
onChange={handleImageChange} : 파일이 선택되었을 때 실행될 콜백 함수
className="a11y-hidden" : input을 화면상에서 숨기기 위해 미리 css에서 설정한 클래스 가져오기
multiple : 한 번에 여러 개의 파일을 가져올 때 사용, 그렇지 않을 때에는 생략

2) FileLeader로 데이터 정보 가져오기 - 이미지, 오디오

이미지 데이터를 미리 화면에 띄워 보여주거나, 오디오 데이터의 이름, 실행 시간 등의 값을 가져올 때 FileReader를 활용할 수 있다. 먼저 input 파일 선택창 실행 후 받아온 파일을 다루기 위해 위 코드에서 handleFileChange에 해당하는 onChange 이벤트 함수를 세팅해 주자.

한 개의 파일

const handleFileChange = (event: React.ChangeEvent) => {
  const file = event.target.files?.[0];
  if (file) {
    console.log("선택된 파일:", file);
}

여러 개의 파일

const handleFileChange = (event: React.ChangeEvent) => {
  const files = event.target.files;
  if (files) {
    for(const file of files){
      console.log("선택된 파일:", file);
    }
}

잠깐 💡 트러블 슈팅! - 동일 파일 연속으로 안가져와지는 오류

파일 선택창에서 한 번 가져온 파일이 연속적으로 불러와지지 않는 오류가 있다. 구글링하다 발견한 아주 간단한 방법은,

const handleFileChange = (event: React.ChangeEvent) => {
    const file = event.target.files?.[0];
    event.target.value = ""; // 동일 파일 업로드 오류 방지
    if (file) {
      console.log("선택된 파일:", file);
}

onChange 시 e.target.value에 담긴 값이 유지되어서 같은 파일 재업로드가 막히는 것 같다. event.target.value값을 초기화해 주면 해결!

이미지 데이터

이미지를 미리 보여줄 수 있는 로직은 아래와 같이 구현해 준다.

  const [selectedImage, setSelectedImage] = useState("");
  const [imageFile, setImageFile] = useState()

  const handleImageChange = (event: React.ChangeEvent) => {
      const file = event.target.files?.[0];
      if (file) {
        // FileReader를 사용해 파일 읽기(JS의 내장기능)
        const fileReader = new FileReader();
        // blob 타입의 file을 url 형태로 만들기
        fileReader.readAsDataURL(file);
        // 읽기 작업이 완료되면, 결과물이 data로 들어오고 아래 함수가 실행된다
        fileReader.onload = (e) => {
            if (typeof data.target?.result === "string") {
              // useState 초기값으로 string("")을 넣었기 때문에 꼭 타입을 지정해서 변경해 줄 것
                setSelectedImage(e.target?.result as string) // 미리보기를 위한 임시 url 
                  setImageFile(file) // API로 보내기 위한 File 저장
            }    
        }
     }
}

//...

return(

핵심은 딱 이 세 단계를 기억할 것!

const fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = (e) => {}

오디오 데이터

오디오 파일 이름과 재생 시간을 가져오는 로직이다. 파일 이름은 그냥 file.name으로 가져올 수 있지만, 재생 시간과 같은 오디오 정보를 가져올 때에는 오디오 객체가 필요하다.

  const [fileName, setFileName] = useState("");
  const [duration, setDuration] = useState(0)

  const handleFileChange = (event: React.ChangeEvent) => {
    const file = event.target.files?.[0];
    if (file) {
      console.log("선택된 파일:", file);

      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = (e) => {
        // 읽기 작업이 완료되면, 오디오 객체를 생성하고 메타데이터를 로드
        const audio = new Audio(e.target?.result as string);
        audio.onloadedmetadata = () => {
          // 메타데이터 로드가 완료되면, 파일 이름과 재생 시간을 가져오기
          // file 이름
          setFileName(file.name);
          // 추출된 오디오 재생 시간
          setDuration(audio.duration) // (2분 30초=)150와 같이 초 단위로 가져와 짐

        };
      };
    }

 //...

 return(
   <>

여기서의 포인트는

1) const audio = new Audio(e.target?.result as string); - 오디오 객체 생성 2) audio.onloadedmetadata = () => {} 안에서 오디오 데이터 가져오기!

React + TS | Emotion Theme 세팅하기

Sun, 24 Mar 2024 12:30:56 GMT

현재 실무 프로젝트에서 emotion을 사용하고 있는데, 기존의 styled components와 비슷해서 어려울 건 없지만 theme 세팅 방법에 대해 정리해두려 한다. (설치부터의 사용법은 다음에!)

Emotion 설치

npm install @emotion/react @emotion/styled

React 프로젝트에서 emotion을 사용할 수 있는 @emotion/react 패키지와 styled-components처럼 스타일링 컴포넌트 생성을 위한 @emotion/styled를 설치해 준다.

Theme 객체 생성하기

emotion에서는 아래와 같이 테마에 포함될 스타일 속성들을 객체 형태로 정의할 수 있다.

// theme.ts
export const theme = {
  fontSizes: {
    sm: "13px",
    base: "14px",
    md: "18px",
  },
  lineHeight: {
    sm: "13px",
    base: "14px",
    md: "18px ",
  },
  letterSpacing: "-2%",
  colors: {
    main: "#2F3438",
    red: "#FF0000",
    white: "#FFFFFF",
    gray: "#999999",
    blueGray2: "#505B6D",
    blueGray3: "#505B6D",
    blueGray4: "#9DA8B6",
    border01: "#E7EDF6",
    border02: "#8899B6",
    bg01: "#F9FAFC",
  },
};

theme.js 파일을 생성해서, fontSizes, lineHeight, letterSpacing, colors 등 필요에 따라 테마를 설정해 준다.

아래는 이전까지 프로젝트에서의 GlobalStyle css -> :root 세팅 방식인데, 비교해서 보니 emotion의 theme 설정이 조금 더 스타일을 세분화해서 사용할 수 있는 장점이 있는 것 같다.

:root{
 --main-color:#724FFF;
 --font-color:#191919; 
 --sub-font-color:#767676;
 --extra-font-color: #909090;
 --tertiary-font-color: #575757;
 --border-color:#DBDBDB;
 --modal-border-color: #EDEDED;
 --input-background-color:#F1F1F5;
 --btn-border-color:#724FFF;
 --btn-background-color:#724FFF;
 --btn-point-color: #7D4FFF;
 --playlist-info-bg-color: #8969FF;
 --playlist-info-sub-color: #DBDBDB;
 --error-color: #FF003E;
 --font-xl : 22px;
 --font-l: 18px;
 --font-lg: 16px;
 --font-md: 14px; 
 --font-sm : 12px;
 letter-spacing: -0.02em;
   }

TypeScript에서 Theme 인터페이스 확장하기

이건 TypeScript를 사용한다면 emotion을 사용하기 좋은 큰 이유이자 이점이라고 생각한다. TypeScript를 사용하는 경우, @emotion/react 모듈의 Theme 인터페이스를 확장하여 테마 객체에 정의된 속성들에 대한 타입을 선언 및 지정해 줄 수 있다(!)

/// theme.ts
import "@emotion/react";

declare module "@emotion/react" {
  export interface Theme {
    fontSizes: {
      sm: string;
      base: string;
      md: string;
    };
    lineHeight: {
      sm: string;
      base: string;
      md: string;
    };
    letterSpacing: string;
    colors: {
      wb500: string;
      red: string;
      white: string;
      gray: string;
      blueGray2: string;
      blueGray3: string;
      blueGray4: string;
      border01: string;
      border02: string;
      bg0: string;
    };
  }
}

이렇게 테마를 정의한 theme.ts 파일 내에 Theme에 대한 타입을 함께 지정해 두면, 테마 내 스타일 속성을 사용할 때의 타입 체킹까지 가능하게 된다. (물론 타입 선언이 theme 세팅에서의 필수가 아니라 세팅하지 않아도 작동에 문제는 없다.)

theme 타입 세팅 시 주의⚠️ declare로 정의해 준다고 해서 타입 선언을 다른 파일에 분리해 정의를 하게 될 경우 Typescript compiler가 type을 감지하지 못하는 버그가 발생할 수 있다고 한다.

Property 'colors' does not exist on type 'Theme'.

다음과 같은 에러를 만날 수 있으니 꼭 타입을 한 파일 같이 내에 넣어 줄 것! (나도 작업 중 만난 에러인데, 해당 원인 외에도 theme 내에 설정한 스타일이 타입 내에 누락 될 경우에도 에러 문구를 만날 수 있으니 꼼꼼한 타입체킹하기)

ThemeProvider로 애플리케이션 감싸기

// index.ts
import React from "react";
import ReactDOM from "react-dom/client";
import { ThemeProvider } from "@emotion/react";
import App from "./App";

import "./index.css";
import "./fonts/Font.css";
import { theme } from "./styles/theme";

ReactDOM.createRoot(document.getElementById("root")!).render(
      
        
          
        
      
);

index.ts 파일에 theme.ts 파일을 불러온 다음, ThemeProvider로 App 컴포넌트를 감싸주면 세팅이 끝난다.

세팅 끝, Theme 사용하기

import styled from "@emotion/styled";

export const Wrapper = styled.div`
  color: ${({ theme }) => theme.colors.main};
  font-size : ${({ theme }) => theme.fontSizes.sm};
  background-color : ${({ theme }) => theme.colors.bg};
`;

작업하게 될 컴포넌트 스타일 적용 시 다음과 같이 theme을 가져와 사용하면 된다. ThemeProvider 덕분에 theme을 import하는 등의 과정은 불필요하다!

마무리하며

emtion의 theme 세팅 및 사용 방법은 스타일 컴포넌트와 비슷한 방법으로, emotion 하면 또 다른 가장 유명한 방법은 태그에서 css props로 스타일을 지정하고 접근할 수 있는 방법이 있다. 이 부분은 다음에 한 번더 포스팅으로 정리해 보고 싶다!

CSS | 테이블 요소 모바일 반응형으로 만들기📊

Sun, 17 Mar 2024 13:05:28 GMT

테이블 요소 모바일 반응형 디자인 만들기

웹	모바일

프로젝트에서 급하게 테이블 요소를 모바일 디바이스에서 오른쪽과 예시와 같이 커스텀한 디자인으로 적용해야 했다. table 관련 태그 요소들은 기본 스타일이 설정되어 있기 때문에 가끔씩 스타일이 적용되지 않는 부분이 있어 까다로운 편이라, 알고 보니 간단했는데 헤맸던 테이블 요소 모바일 반응형 스타일 팁을 정리해 보려 한다.

우선 위 이미지에서 모바일 반응형 디자인에 반영되여야 할 사항은 다음과 같다.

컬럼 제목 삭제
'번호' 컬럼에 해당하는 데이터 삭제
테이블 데이터 세로로 정렬해 카드 형태로 변경
데이터마다 위 아래 여백 주기
일부 요소 한 줄에 나란히 배치하기

그리고 아래는 @media screen and (max-width: 768px)기준으로 모바일 반응형 디자인을 적용한 결과이다.

!codepen[Da-Youn/embed/JjVbLxe?default-tab=html%2Cresult]

1. `display:none`으로 필요하지 않은 요소 없애기

thead, td.index {  
    display: none;
}

반대로 모바일 반응형에서만 추가로 표시해야 할 요소가 있다면 기본으로 display:none 설정 후 모바일 반응형 크기에서 display:block로 표시해 준다.

2. `display:block` 적절히 활용하기

td.name {
  display: flex;
  flex-direction: row;
  align-items:center;
  gap: 20px;
}

@media screen and (max-width: 768px){

  tbody tr {
      display:block;
      padding-top: 24px;
      padding-bottom: 14px;
      border-bottom: 1px solid #d6d8e1;
  }

}

tr 태그에 display:block 적용 시 td.name와 같이 display:flex가 설정된 요소를 제외한 나머지 td요소들은 한 줄에 inline으로 정렬된 상태가 된다. 그리고 추가로 원래는 tr 태그에 적용되지 않았던 padding 스타일 설정도 적용되는 것을 볼 수 있다.

td.desc{
    display:block;
}

그리고 나란히 배치가 필요한 요소를 제외하고 display:block 스타일을 주어 적절히 배치할 수 있다.

3. "`data-*`" props를 이용해 요소 옆에 제목 표시하기

"정보 : A의 정보"와 같이 모바일 반응형 디자인 시 요소의 옆으로 제목이 자연스럽게 배치되어야 했는데, 이때 data-label과 같이 td 태그에 쓰이는 data-* props를 활용했다.

*`data-` 속성이란? ** 표준이 아닌 속성이나 추가적인 DOM 속성과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있게 도와준다. https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes

  
    
      1
      A
      A입니다 줄 잠깐 문득 준 재우쳤다. 5년 언땅에 못해서 싹싹하였다. 듯한 약을 발로 말인가?
      A의 정보
      2024.01.01
    
    
      2
      B
      B입니다 줄 잠깐 문득 준 재우쳤다. 5년 언땅에 못해서 싹싹하였다. 듯한 약을 발로 말인가?
      B의 정보
      2024.01.02
    
    
      3
      C
      C입니다 줄 잠깐 문득 준 재우쳤다. 5년 언땅에 못해서 싹싹하였다. 듯한 약을 발로 말인가?
      C의 정보
      2024.01.03

tbody tr td:not(.index, .name, .desc):before {
    font-weight: 700;
    content: attr(data-label) " : ";
}

before 선택자를 사용, attr(data-label)로 data-label에 접근해 데이터 앞에 "데이터 : "와 같이 표시해 줄 수 있다.

기타 모바일 반응형 스타일 방법 참고

참고했던 다른 테이블 반응형 방법 링크도 올려두며 글을 마무리해본다.

제목-데이터-제목-데이터 순으로 배치하기, 스크롤, 리스트형 테이블 반응형으로 만드는 방법 3가지
data-label로 행 제목을 열 제목으로 만들기 테이블 코드를 반응형으로 만들기

dayannne.log

Next.js | next-translate 기반 다국어(i18n) 설정 탐구하기

🌍 next-translate 기반 다국어 설정 탐구하기

Next.js 다국어(i18n) 라이브러리

1️⃣ react-i18next

2️⃣ next-i18next

3️⃣ next-translation

🔧 구조 개요

🗂 번역 파일 예시

📁 i18n.ts / i18n.js 설정

🔁 useTranslation

{t('title')}

🧪 I18nProvider

⚠️ 주의할 점

✅ 요약

✍️ 마치며

Next.js | Tanstack Query로 prefetch 적용하기

초기 세팅

prefetchQuery

1. 먼저 서버 컴포넌트를 준비!

2. 하위 클라이언트 컴포넌트

prefetchInfiniteQuery

1. 서버 컴포넌트

2. 하위 클라이언트 컴포넌트

결과

Discord + AWS Lambda | 커밋 메시지 / 시간 알림 웹 훅 만들기

🌱 커밋 메시지 띄우기

1. Webhook 생성

2. 깃허브 레포지토리 내 Webhook 생성

결과

⏰ 시간 알림 띄우기

AWS Lambda

1. Webhook 생성

2. AWS Lambda 함수 생성

3. 함수 코드 작성 (in VS Code)

4. 일정 시간마다 알림 메시지를 띄우기 위한 트리거 생성

결과

참고

Next.js + TS | AWS S3 이미지 업로드 API 구현하기 (+ AWS S3 버킷 생성, route 작성하기)

AWS S3 버킷 만들기

1. AWS S3 버킷 생성하기

2. AWS S3 버킷 정책 변경, CORS 설정하기

1) 버킷 정책 변경

2) CORS 설정

3. Access 키 발급

버킷에서 직접 이미지 업로드 + 불러와 보기

AWS S3 이미지 업로드 API 구현하기

1. 프로젝트 환경변수 설정

2. 이미지 업로드 API 구현

에러

참고

Next.js + TS | Kakao 지도 API 프로젝트에 사용하기 #5 장소 위치 지도에 표시하기 (마커, 커스텀오버레이)

샘플 코드

tip) 각 기능 사용 시 특징

마커 / 커스텀오버레이 띄우기 준비물

커스텀 마커(Marker) 띄우기

kakao.maps.Marker(options)

kakao.maps.MarkerImage(src, size[, options])

커스텀 오버레이 띄우기

kakao.maps.CustomOverlay(options)

content에 들어갈 컴포넌트 만들기

마커/커스텀 오버레이에 클릭 이벤트 등록하기

Next.js + TS | Kakao 지도 API 프로젝트에 사용하기 #4.5 장소 검색 결과를 원하는 카테고리로 필터링하기

장소 검색 결과를 원하는 카테고리로 필터링하기

1. 카테고리 정의하기

2. 필터링 로직 만들기

3. 필터링 적용하기

4. 검색 결과

🤔 필터링할 수 있는 다른 카테고리에는 어떤 것이 있을까?

Next.js + TS | Kakao 지도 API 프로젝트에 사용하기 #4. 키워드로 장소 검색하기

1. 장소 검색 input 만들기

SearchForm.tsx

2. 장소 검색 Hook 만들기

useSearchPlaces.tsx

3. 검색 결과

+ 장소 검색 옵션 설정하기

Next.js + TS | Kakao 지도 API 프로젝트에 사용하기 #2.5 지도가 안뜨는 문제🥲

⚠️ 문제 상황1 - TypeError

🧐 원인

✅ 해결

`content`에 들어갈 컴포넌트 만들기

`useGeolocation` 훅 작성하기

🗂️ `app/layout.tsx`

2) `schema.prisma` 파일 작성