이미지 출처: wikipedia

Progressive Web Application(PWA)은 웹사이트를 모바일 앱처럼 사용할 수 있게 해주는 기술입니다. 이번 포스트에서는 Next.js 프로젝트에 PWA 기능을 추가하는 방법에 대해 알아보겠습니다.

PWA란?

PWA(Progressive Web Application)는 웹과 네이티브 앱의 장점을 결합한 웹 애플리케이션입니다. 모바일에서 앱 스토어를 통해 설치하는 네이티브 앱처럼 사용할 수 있으면서도, 웹의 접근성과 편리함을 유지합니다.

PWA의 주요 특징

• 오프라인 작동 가능
• 홈 화면에 설치 가능
• 푸시 알림 지원
• 네이티브 앱과 유사한 사용자 경험 제공
• 항상 최신 상태 유지

Next.js 프로젝트에서 PWA 적용하기

Next.js 프로젝트에 next-pwa 라이브러리를 사용하여 PWA 기능을 추가하는 방법입니다.

1. next-pwa 패키치 설치

사용하는 패키지 매니저에 따라 next-pwa를 설치합니다.

// npm 
npm install next-pwa

// yarn
yarn add next-pwa

// pnpm
pnpm add next-pwa

2. Next.js 설정 업데이트

next.config.ts 파일을 수정하여 PWA 설정을 추가합니다.

import withPWA from 'next-pwa';

const pwaConfig = withPWA({
  dest: 'public',
  register: true,
  skipWaiting: true,
  disable: process.env.NODE_ENV === 'development',
});

export default pwaConfig(nextConfig);

3. manifest.json 파일 생성

PWA의 메타데이터를 정의하는 manifest.json 파일을 publice 디렉토리에 생성합니다.

{
  "name": "PWA manifest",
  "short_name": "PWA manifest",
  "description": "PWA manifest",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/images/icon.png",
      "sizes": "192x192",
      "type": "image/png",
    },
    {
      "src": "/images/icon.png",
      "sizes": "512x512",
      "type": "image/png",
    }
  ]
}

manifest.json에서 정의한 아이콘들을 public/icons/ 디렉토리에 추가합니다. 최소한 192x192와 512x512 크기의 아이콘을 준비하는 것이 권장됩니다.

4. RootLayout.tsx 설정

저는 App Router를 사용하므로 App Router 기준입니다.

Pages Router를 사용한다면 pages/_document.tsx 파일에 추가합니다.

app/layout.tsx 파일에 PWA 관련 메타태그를 추가합니다.

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
  manifest: '/manifest.json',
};

5. next-pwa 타입 정의 추가

TypeScript를 사용하신다면 next-pwa의 타입 정의를 추가해야 합니다.

// next-pwa.d.ts
/* eslint-disable @typescript-eslint/no-unused-vars */
declare module 'next-pwa' {
  import { NextConfig } from 'next';

  type PWAConfig = {
    dest?: string;
    disable?: boolean;
    register?: boolean;
    skipWaiting?: boolean;
  };

  const withPWA =
    (config: PWAConfig): ((nextConfig: NextConfig) => NextConfig) =>
    (nextConfig: NextConfig) =>
      NextConfig;

  export default withPWA;
}

PWA 테스트 방법

pnpm build && pnpm start

PWA 적용 결과

PC 버전

Mobile 버전

결론

Next.js에서 next-pwa 라이브러리를 사용하면 간단하게 PWA 기능을 구현할 수 있습니다. 오프라인 지원과 설치 가능한 웹앱을 제공함으로써 사용자 경험을 크게 향상시킬 수 있습니다.

✅ 참고

• Next.js 공식 문서 - Progressive Web Apps
• Next.js 프로젝트 PWA 구축하기

Next.js의 App Router를 사용하여 다국어 웹사이트를 개발할 때 next-intl은 매우 유용한 라이브러리입니다. 이 글에서는 next-intl을 설치하고 구성하는 방법부터 실제 사용 예시까지 자세히 살펴보겠습니다.

next-intl 설치 및 폴더 구조

설치

// npm
npm install next-intl

// yarn 
yarn add next-intl

// pnpm
pnpm add next-intl

사용하시는 패키지 매니저에 맞게 next-intl를 설치합니다.

폴더 구조

다음은 next-intl을 사용하기 위한 권장 폴더 구조입니다.

├── messages
│   ├── ko.json
│   ├── en.json
│   └── ...
├── next.config.ts
└── src
    ├── i18n
    │   ├── routing.ts    # 라우팅 설정
    │   ├── navigation.ts # 네비게이션 유틸리티
    │   └── request.ts    # 서버 요청 관련 유틸리티
    ├── middleware.ts     # 언어 감지 및 리다이렉션
    └── app
        └── [locale]      # 동적 경로 세그먼트로 언어 코드를 받음
            ├── layout.tsx
            ├── page.tsx
            └── YOUR_PAGE_PATH
                └── page.tsx

설정

기본 JSON 파일

언어별 번역 파일을 JSON 파일에 설정합니다.

// ko
{
  "fetchError": "데이터를 불러오는데 실패했습니다.",
  "noSearchResults": "검색 결과가 없습니다",
}

// en
{
  "fetchError": "Failed to fetch data.",
  "noSearchResults": "No search results found",
}

Next.js 설정

// next.config.ts 
import type { NextConfig } from 'next';
import createNextIntlPlugin from 'next-intl/plugin';

const nextConfig: NextConfig = {};

const withNextIntl = createNextIntlPlugin();

export default withNextIntl(nextConfig);

i18n 디렉토리 설정

src/i18n/routing.ts

이 파일은 지원하는 로케일과 기본 로케일을 설정합니다,

import {defineRouting} from 'next-intl/routing';

export const routing = defineRouting({
  // A list of all locales that are supported
  locales: ['en', 'de'],

  // Used when no locale matches
  defaultLocale: 'en'
});

src/i18n/navigation.ts

이 파일은 클라이언트 컴포넌트에서 사용할 네비게이션 유틸리티를 제공합니다.

import {createNavigation} from 'next-intl/navigation';
import {routing} from './routing';

export const {Link, redirect, usePathname, useRouter, getPathname} =
  createNavigation(routing);

src/request.ts

서버 컴포넌트에서 번역을 가져오는 방법을 제공합니다

import {getRequestConfig} from 'next-intl/server';
import {hasLocale} from 'next-intl';
import {routing} from './routing';

export default getRequestConfig(async ({requestLocale}) => {
  const requested = await requestLocale;
  const locale = hasLocale(routing.locales, requested)
    ? requested
    : routing.defaultLocale;

  return {
    locale,
    messages: (await import(`../../messages/${locale}.json`)).default
  };
});

src/middleware.ts

미들웨어는 사용자의 요청을 인터셉트하여 로케일을 확인하고 필요시 리다이렉션합니다.

import createMiddleware from 'next-intl/middleware';
import {routing} from './i18n/routing';

export default createMiddleware(routing);

export const config = {
  // Match all pathnames except for
  // - … if they start with `/api`, `/trpc`, `/_next` or `/_vercel`
  // - … the ones containing a dot (e.g. `favicon.ico`)
  matcher: '/((?!api|trpc|_next|_vercel|.*\\..*).*)'
};

사용 예시

src/app/[locale]/layout.tsx

루트 레이아웃에서 next-intl의 NextIntlClientProvider를 설정합니다.

import { NextIntlClientProvider } from 'next-intl';
import { getMessages } from 'next-intl/server';

export async function generateStaticParams() {
  return ['en', 'ko', 'zh'].map(locale => ({ locale }));
}

export default async function LocaleLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const resolvedParams = await params;
  const locale = resolvedParams.locale;
  const messages = await getMessages({ locale });

  return (
    <NextIntlClientProvider locale={locale} messages={messages}>
      {children}
    </NextIntlClientProvider>
  );
}

generateStaticParams 함수는 빌드 시 지원할 언어 목록을 정적으로 생성합니다. 여기서는 영어(en), 한국어(ko), 중국어(zh)를 지원하도록 설정했습니다.

src/app/[locale]/page.tsx

'use client';

import { useState, useEffect } from 'react';
import { useTranslations } from 'next-intl';
import { useParams } from 'next/navigation';



const HistoricSite = () => {
  const t = useTranslations();
  const { locale } = useParams();

  return (
    <div className="container mx-auto px-4 py-8">
        <div className="text-center py-8 text-gray-500">{t('noSearchResults')}</div>
    </div>
  );
};

export default HistoricSite;

위 JSON 파일에 작성된 noSearchResults 제외 다른 코드들은 지웠습니다.

이 예시에서는 useTranslations 훅을 사용하여 현재 활성화된 언어의 번역을 가져옵니다.

위와 같이 구현하면 기존 domain/HistoricSite URL이 이제 domain/ko/HistoricSite 또는 domain/en/HistoricSite와 같이 로케일 경로가 포함된 형태로 변경됩니다.

저는 사진 우측상단 드롭다운을 통해 [locales]를 변경했습니다.

결론

next-intl은 Next.js App Router에서 다국어 지원을 구현하는 데 강력한 도구입니다. 기본적인 번역부터 날짜/시간 포맷팅, 복수형 처리까지 다양한 국제화 기능을 제공합니다.

useParams를 사용하여 현재 로케일 정보를 가져오고, useTranslations를 통해 해당 언어의 번역 텍스트를 렌더링함으로써 사용자에게 친숙한 언어로 콘텐츠를 제공할 수 있습니다.

✅ 참고

• next-intl_docs

• next-intl을 활용한 다국어 웹사이트 구현하기

1. Error: localStorage is not defined

발생 원인

이 오류는 Next.js의 서버 사이드 렌더링 때문에 발생합니다. 코드가 서버에서 실행될 때 localStorage는 브라우저 환경에서만 사용 가능한 API이기 때문에 서버에서는 접근할 수 없습니다.

해결 방법

typeof window !== 'undefined'를 사용하여 페이지가 마운트될 때까지 기다렸다가 localStorage에 접근하도록 합니다.

if (typeof window !== 'undefined') {
  localStorage.getItem('~~~');
}

✅ 참고

• [NextJS] localStorage 에러핸들링 -localStorage is not defined-_hyo

useState와 useRef의 차이를 아시나요?

라는 질문을 받았습니다. 당시 뭐라 답했는지 기억은 나지 않지만 긴장감 속에서 제대로 답하지 못했던 기억이 있습니다.

useState와 useRef에 대해서 정리해보겠습니다.

useState

공식 문서에 따르면

useState는 컴포넌트에 state 변수를 추가할 수 있는 React Hook 입니다.

React에서 컴포넌트는 자신의 상태 또는 props가 바뀌면 리렌더링 됩니다. 상태를 관리하기 위해 React에서 useState를 활용합니다.

const [state,setState] = useState(initialState);

useState는 상태 유지 값가 그 값을 갱신하는 함수를 반환합니다. setState 함수는 새 state를 받아 컴포넌트 리렌더링 큐에 등록합니다.

컴포넌트는 다음 렌더링 시에 useState를 통해 반환받은 첫번째 값은 항상 갱신된 최신 state가 됩니다.

useState 예시

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
      <button onClick={() => setCount(count - 1)}>감소</button>
    </div>
  );
}

useState 주요 특징

• 비동기적 업데이트: setState는 비동기적으로 동작하며, 즉시 상태를 업데이트 하지 않습니다.
• 함수형 업데이트: 이전 상태를 기반으로 업데이트할 때는 함수형 업데이트를 사용할 수 있습니다.

useRef

공식 문서에 따르면

useRef렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook 입니다.

useRef는 useState와 달리 리렌더링을 유발하지 않습니다. 값이 변경되어도 컴포넌트가 다시 렌더링 되지 않습니다. ref 속성을 사용하여 특정 DOM 요소에 접근할 때 활용되며 렌더링과 무관하게 값을 유지해야 할 경우 유용합니다.

useRef 예시

import { useRef } from "react";

function Example() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus(); // input 요소에 직접 접근하여 포커스를 줌
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

useState와 useRef의 차이

언제 사용할까?

• 컴포넌트가 변경된 값에 따라 리렌더링이 필요: useState
• 렌더링과 관계없이 값을 유지: useRef
• DOM 요소에 직접 접근: useRef

✅ 참고

• React_useState_docs
• React_useRef_docs
• useState vs useRef_현진

"이벤트 루프에 대해 설명해주세요."

프론트엔드 자바스크립트 기술 면접 단골 손님 이벤트 루프에 대해서 알아보겠습니다.

❗️ 내가 이해하기 위해 적은 글 ❗️

싱글(단일) 스레드

자바스크립트는 싱글 스레드 기반의 언어이고, 자바스크립트 엔진은 하나의 콜 스택만 사용합니다. 즉, 동시에 하나의 작업만 처리할 수 있다 는 뜻입니다.

하지만 자바스크립트를 사용하다 보면 마치 동시에 여러 작업이 처리되는 것처럼 보입니다. 예를 들어, 이벤트가 발생하는 동안에도 다른 작업이 진행되거나, 여러 개의 HTTP 요청이 동시에 처리되는 것처럼 보이는 경우가 있습니다.

이러한 동작이 가능한 이유는 바로 이벤트 루프 덕분입니다. 자바스크립트는 싱글 스레드 언어이지만, 자바스크립트가 실행되는 환경(예: 브라우저, Node.js)은 멀티 스레드 기능을 제공합니다.

이 환경과 자바스크립트 엔진이 연동하여 비동기 작업을 처리할 수 있도록 해주는 핵심 장치가 바로 이벤트 루프 입니다.

이벤트 루프의 동작 원리

이미지 출처: JavaScript Event Loop And Call Stack Explained

이미지 출처: MDN_이벤트 루프

이벤트 루프는 다음과 같은 방식으로 동작합니다.

1. Heap (힙): 객체와 같은 동적 메모리가 할당되는 영역입니다.
2. Call Stack(콜 스택): 코드가 실행될 때 함수들이 쌓이는 스택 메모리입니다. 싱글 스레드이므로 한 번에 하나의 작업만 실행할 수 있습니다.
3. Web APIs: 브라우저가 제공하는 API로, setTimeout, Promise, DOM 이벤트 등이 포합됩니다. 이들은 비동기 작업을 처리하는 데 사용됩니다.
4. Callback Queue(콜백 큐): 비동기 작업이 완료되면 해당 콜백 함수가 여기에 대기하며, 클 스택이 비어야 실행됩니다.
5. Microtask Queue(마이크로태스크 큐): Promise.then(), MutationObserver 같은 고우선순위 비동기 작업이 들어가는 큐입니다. 이벤트 루프는 콜 스택이 비면 먼저 마이크로태스크 큐의 작업을 실행한 후, 콜백 큐에서 대기 중인 작업을 실행합니다.

이벤트 루프 흐름을 이해하기 위한 예제

console.log("Start");

setTimeout(() => console.log("setTimeout"), 0);

Promise.resolve().then(() => console.log("Promise"));

console.log("End");

출력 결과

Start
End
Promise
setTimeout

실행 과정 분석

1. console.log("Start") 실행 → Call Stack에서 실행 후 제거

2. setTimeout 실행 → Web API에 넘김 (0ms 후 콜백 큐로 이동)

3. Promise.resolve().then() 실행 → 마이크로태스크 큐에 저장

4. console.log("End") 실행 → Call Stack에서 실행 후 제거

5. Call Stack이 비어 있음 → Microtask Queue에서 Promise 실행 후 제거

6. Call Stack이 다시 비어 있음 → Callback Queue에서 setTimeout 실행 후 제거

"Microtask Queue > Animation Frame > Task Queue" 순으로 Microtask Queue가 가장 먼저 실행되고 Task Queue가 가장 늦게 실행됩니다.

✅ 참고

• Javascript Event Loop 이벤트 루프 정리

• JavaScript-이벤트 루프, 콜 스택, 태스크 큐

🎨첫 디자이너와 협업, 피그마 그리고 회의의 힘

desub 프로젝트는 처음으로 디자이너와 함께 진행한 프로젝트였다. 더군다나 디자이너 분들이 직접 운영해보고 싶은 주제로 기획된 만큼, 직접 기획하던 기존과는 전혀 다른 방식이 진행했다. 팀 구성은 프론트엔드 4명, 백엔드 2명, 디자이너 2명으로 총 8명이었고, 자연스럽게 커뮤니케이션 툴로 피그마(Figma)를 사용하게 되었다.

처음에는 피그마의 댓글 기능을 활용해 의견을 주고받았지만, 텍스트만으로는 서로의 의도를 100% 이해하기가 어려웠다. 단순히 디자인 피드백을 주고받는 걸 넘어, "이 의도가 맞을까?", "이 흐름이 적절할까?" 같은 맥락까지 공유하려면 더 직접적인 소통이 필요했다.

그래서 매주 수요일, 정기 미팅을 열었다. 그리고 결론부터 말하자면…

이 미팅 없었으면 프로젝트 완성도는 바닥을 쳤을 거다.

매주 진행 상황을 공유하고, 피드백을 반영하고, 현실적인 일정 조율까지 할 수 있는 시간이었기 때문이다. 여기서 가장 크게 배운 점은, "일정 내에 가능한 것과 불가능한 것을 명확히 구분하는 것" 이었다.

특히, 팀 내에 퍼블리셔로 일하던 분이 있어서 많이 보고 배울 수 있었다.

"이건 기한 내 구현하기 어려울 것 같은데, 이런 방향으로 조정해보는 건 어떨까요?" "이 기능은 후순위로 미뤄도 괜찮을까요?"

이런 식으로 기능의 우선순위를 정리하고, 일정 안에서 가능한 범위를 조정하는 과정이 필수적이라는 걸 뼈저리게 느꼈다. 프로젝트는 완벽함이 아니라, 기한 내에 최선의 결과물을 내는 것이 중요하다는 걸 다시 한번 깨닫게 된 경험이었다.

📱반응형 + 애니메이션, 둘 다 잡을 수 있을까?

프로젝트에서 TailwindCSS를 사용한 스타일링과 Framer Motion을 활용해 스크롤 애니메이션을 구현했다.

무엇이 문제였을까? 다들 예상한 대로 그 문제였다. 📌 웹뷰에서는 완벽한데, 모바일뷰에서는 깨진다? 📌 모바일뷰를 완벽하게 수정하면, 웹뷰에서 깨진다?

애니메이션을 유지하며 반응형을 적용하려고 하니 레이아웃이 깨지거나 부자연스러운 움직임이 발생하는 문제가 발생했다. 사실 반응형을 진행하기 전부터 예상했다.

프로젝트 프론트엔드 멘토님께서는 monorepo을 활용하여 모바일뷰를 따로 작업하는 것을 추천하였다. 프로젝트의 폴더 루트가 달라지기 때문에 서로의 영향이 없어 수월하게 진행할 수 있다고 이유였다.. 멘토님의 말씀대로 디자이너 분들께 제안을 했지만, "나중에 저희 쪽에서 유지보수 하기에는 반응형이 편해서 반응형으로 부탁합니다."

"넵."

그렇다. 반응형으로 진행했다. 피그마에 모바일뷰 프레임이 추가된 상황에 다른 팀원들은 API 연결 작업과 Admin 시스템을 구축하고 있었고 어쩌다보니 대부분의 페이지 반응형 작업을 내가 작업하는 상황이 만들어졌다. 어쩔 수 있나? 잠을 줄이고 시간을 갈아넣었다..

🎢프로젝트를 이어가지 못한 이유

6개월 동안의 부트캠프를 마쳤다. 하지만 부트캠프만으로 바로 취업 시장에서 살아남기엔 아직 부족하다는 현실을 마주해야 했다. 특히 요즘 신입 개발자의 취업 시장은 역대급으로 힘든 상황이라, 우리 팀원들도 프로젝트를 계속 발전시키면서 리팩토링하고, 취업 준비도 병행하는 방법을 고민했다. 그럼에도 결국 프로젝트를 종료하기로 결정했다.

🚪각자의 선택, 각자의 길

팀원들은 각자 다른 이유로 프로젝트를 계속할 수 없는 상황이었다.

• 이미 취업해도 이상하지 않을 실력자 퍼블리셔로 일한 경험이 있는 팀원이 있었다. 실력적으로 당장 프론트엔드 직무로도 취업이 가능할 수준이었고, 실제 부트캠프 막바지에 여러 회사 면접을 다녀왔다. "취업에 집중 이슈."

• 개발자가 아닌 PM의 길을 선택한 팀원 프로젝트를 하며 개발보다는 기획과 팀 운영에 더 흥미를 느낀 팀원도 있었다.

• 현생이 너무 바빠진 팀원들 위에 작성된 팀원들을 제외하고도 모두 취업 준비를 집중해야 했고, 각자의 계획이 있었다. 사이드 프로젝트, 자격증 준비 등 각자 사정으로 더 이상 프로젝트에 시간을 할애하기 어려운 상황이 되었다.

📦 디자이너들에게 프로젝트를 넘기며

프로젝트를 이어가고 싶었지만, 각자의 목표가 달라지면서 지속적인 유지보수가 어려웠다. 이런 상황에서 디자이너 분들이 프로젝트를 계속 운영하고 싶어 했고, 우리는 개발된 코드를 디자이너분들(기획자들)에게 넘기며 프로젝트를 마무리하기로 했다.

나는 코드를 넘기면서도 이런 생각이 들었고 실제로 백엔드 팀원 @moutain-kangkang님은 이렇게 말했다.

"시간이 조금 더 있었더라면,, "조금만 더 하면,,"

🏁 프로젝트 종료, 그리고 앞으로

이 프로젝트를 끝으로 나 또한 취업 준비와 자격증 준비에 집중할 예정이다. 2025년 2월 정보처리기사 필기에 응시했고 4월에 실기를 앞두고 있다. 비록 프로젝트와 부트캠프는 여기서 끝이 났지만, 개발자로서의 길은 이제 시작이라고 생각한다.

취준생 주민재는 죽었다. 프론트 개발자 다시 태어난 주민재

ㅋㅋㅋ 부트캠프 수료 소식을 친구들에게 전했더니 온 답장이다. 친구의 말처럼 프론트 개발자로 다시 태어나는 그 날까지..

현업 기획자로 일하고 있는 형도

현재 개발자를 준비하는 있는 동기들도

현업 개발자로 일하고 있는 동기들도

같이 부트캠프 수강하다가 취업해서 졸업한 학생들도

나의 노력을 알아줘서 고맙다..

마지막으로, 함께 프로젝트를 진행했던 팀원들, 그리고 6개월 동안 함께 고생한 부트캠프 수료생들에게 이 말을 전하고 싶다.

Keep Moving, Keep Growing, Keep Learning See you at work

덴젤 워싱턴의 이 말처럼, 우리가 업계에서 다시 만나게 될 그날까지 모두 응원합니다. 🚀🔥

운영에 힘써주신 조교, 코치, 매니저님들 모두 감사합니다.

1. 메타데이터 설정

Next.js 14에서는 metadata 객체를 통해 각 페이지의 메타데이터를 쉽게 설정할 수 있습니다.

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: '페이지 제목',
  description: '페이지 설명',
  keywords: ['키워드1', '키워드2'], // 검색 키워드
  openGraph: {
    title: 'OG 제목',
    description: 'OG 설명',
    images: [{
      url: '/image.jpg',
      width: 1200,
      height: 630,
      alt: '이미지 설명'
    }]
  }
};

메타데이터는 다음과 같은 중요한 SEO 요소들을 포함할 수 있습니다.

• 기본 메타데이터: title, description, keywords
• Open Graph 메타데이터: 소셜 미디어 공유용
• Twitter 카드

2. 시맨틱 HTML 마크업

시맨틱 HTML 태그를 사용하면 웹페이지의 구조와 의미를 검색 엔진이 더 잘 이해할 수 있습니다. Next.js에서는 일반적인 HTML5 시맨틱 태그를 모두 사용할 수 있습니다. 예를 들어

<header>
  <nav>
    {/* 네비게이션 내용 */}
  </nav>
</header>
<main>
  <article>
    <h1>메인 제목</h1>
    <p>본문 내용...</p>
  </article>
</main>
<footer>
  {/* 푸터 내용 */}
</footer>

3. 이미지 최적화

Next.js의 Image 컴포넌트를 사용하면 자동으로 이미지를 최적화할 수 있습니다. 이는 페이지 로딩 속도를 개선하고 사용자 경험을 향상시켜 간접적으로 SEO에 도움을 줍니다.

import Image from 'next/image'

<Image
  src="/images/profile.jpg"
  alt="프로필 이미지"
  width={500}
  height={500}
/>

이미지 컴포넌트뿐만 아니라 폰트 최적화를 위해 next/font 사용, 적절한 캐싱 전략 구현, 코드 분할과 지연 로딩 활용을 종합적으로 적용하면 검색 엔진에서 더 높은 순위를 얻을 수 있습니다.

4. Sitemap 설정하기

사이트맵은 웹사이트의 구조를 검색 엔진에 알려주는 중요한 파일입니다. Next.js에서는 정적 또는 동적으로 사이트맵을 생성할 수 있습니다.

정적 사이트맵을 생성하려면 app 디렉토리의 루트에 sitemap.xml 파일을 생성하면 됩니다. 동적 사이트맵을 생성하려면 app 디렉토리에 sitemap.ts 또는 sitemap.js 파일을 만들고 다음과 같이 작성할 수 있습니다.

import { MetadataRoute } from 'next'

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://www.example.com',
      lastModified: new Date(),
    },
    {
      url: 'https://www.example.com/about',
      lastModified: new Date(),
    },
    // 추가 URL들...
  ]
}

5. robots.txt 설정하기

robots.txt 파일은 검색 엔진 크롤러에게 어떤 페이지를 크롤링해야 하는지 알려줍니다. Next.js에서는 정적 파일이나 동적 생성을 통해 robots.txt를 설정할 수 있습니다.

정적 robots.txt 파일을 사용하려면 app 디렉토리의 루트에 파일을 생성하면 됩니다. 동적으로 생성하려면 app 디렉토리에 robots.ts 또는 robots.js 파일을 만들고 다음과 같이 작성할 수 있습니다.

import { MetadataRoute } from 'next'

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: '/private/',
    },
    sitemap: 'https://www.example.com/sitemap.xml',
  }
}

적용

위 검색 엔진 최적화 기법을 적절히 활용하여 Lighthouse SEO 점수를 73에서 91로 향상시켰습니다.

또한, metadata의 openGraph를 사용하여 소셜 미디어 공유 시 미리보기 이미지도 설정하였습니다.

이러한 SEO 최적화 기법들을 종합적으로 적용함으로써, 웹사이트의 검색 엔진 순위를 효과적으로 개선하고 사용자 경험을 향상시킬 수 있습니다. Next.js App Router의 새로운 기능들을 활용하면 더욱 효율적이고 강력한 SEO 전략을 구현할 수 있습니다.

✅ 참고

• Next.js SEO 최적화 적용하기
• Next.js SEO 최적화 가이드: 검색 순위 높이기

웹 페이지에서 이미지는 큰 비중을 차지하며, HTTP 아카이브에 따르면 웹 페이지의 대략 58%가 이미지로 구성되어 있고 이미지의 용량도 다른 콘텐츠에 비해 월등히 높습니다. 따라서 이미지 최적화는 웹 성능을 향상시키는 핵심 요소입니다.

최적화되지 않은 이미지는 페이지 로딩을 느리게 하여 사용자 이탈률을 높이며, SEO에도 부정적인 영향을 미칠 수 있습니다.

Next.js는 이러한 문제를 해결하기 위해 강력한 이미지 최적화 기능을 제공하는 next/image 컴포넌트를 제공합니다. next/image의 이미지 최적화 원리에 대해서 알아보겠습니다.

next/image 최적화 기능

next/image 컴포넌트는 아래 기능들을 제공합니다.

• 최신 포맷으로 변환: WebP, AVIF 등 차세대 이미지 형식으로 자동 변환
• 이미지 크기 최적화: 디바이스 크기에 맞는 이미지 제공
• Lazy Loading: 레이지 로딩 (Lazy Loading) 구현
• Placeholder Blur: 블러 이미지 플레이스홀더 제공
• CDN 최적화: Vercel 배포 시 자동으로 CDN을 활용한 최적화 수행

next/image는 클라이언트가 지원하는 최적의 포맷으로 타입을 결정하는데, 만약 formats 배열의 값을 모두 지원하지 않는다면 원본 포맷을 유지합니다.

// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    formats: ['image/avif', 'image/webp'], 
  },
}

export default nextConfig

next.config에서 options를 설정할 수 있으며 기본값은 image/webp 입니다.

최적화 되지 않는 이미지

동적으로 최적화를 해야 하므로 이미지 최적화가 필요 없는 SVG와 같은 vector 이미지, 그리고 GIF와 같은 상대적으로 복잡하고 최적화에 오래 걸리는 애니메이션 이미지의 경우에서는 코드 레벨에서 최적화를 진행하지 않고 바로 응답으로 내려주게 되어 있습니다.

GIF는이미지 최적화 과정을 건너뛰기 위해 unoptimized={true}를 권장합니다.

next/image에서 SVG를 사용하려면 unoptimized={true}를 반드시 적용해야 합니다.

next/image에서 unoptimized는 true인 경우, 품질, 크기 또는 형식을 변경하지 않고 원본 이미지를 그대로 제공합니다.

// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    formats: ['image/avif', 'image/webp'],
    dangerouslyAllowSVG: true, 
    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;", 
  },
}

export default nextConfig

next.config에서 프로젝트 전체에 적용할 수 있습니다. 대신 dangerouslyAllowSVG 설정이 필요하고, XSS 공격 등 보안성 위험 때문에 contentSecurityPolicy 설정을 통해 보안 정책을 설정 할 수 있습니다.

최적화는 언제 이루어지는가?

next/image의 최적화는 빌드 시점이 아닌, 브라우저에서 이미지를 요청할 때 이루어집니다.

1. HTML에서 이미지 태그 렌더링
2. 브라우저가 서버에 이미지 요청
3. 서버가 이미지 최적화 수행
4. 최적화된 이미지 응답

과정으로 최적화가 이루어집니다.

next/image 컴포넌트를 사용하면 이미지 URL을 image?url= 형태로 반환합니다. 이 URL로 요청이 들어오면 Next.js의 이미지 최적화 미들웨어가 동작합니다.

sharp 라이브러리

Next.js는 기본으로 Squoosh를 최적화 모듈로 사용하고 있습니다. Squoosh는 빠른 설치 속도와 개발 환경에서 적합합니다.

운영 환경에서는 sharp를 사용하는 것을 매우 강력하게 권장하고 있습니다.

Next.js는 sharp의 설치 여부를 확인하고 이후에 동작하는 로직에서 sharp 변수를 기준으로 동작하는 방식으로 코드가 작성되어 있습니다.

Next.js 15 버전은 sharp를 기본적으로 사용하고 있습니다.

이미지 최적화 과정

1. avif, webp 사용하기(최신 포맷으로 변환)

WebP는 Google이 개발한 이미지 포맷으로, JPEG보다 작은 파일 크기로 비슷한 품질을 제공합니다. AVIF는 더 최신의 포맷으로, WebP보다 더 나은 압축률을 제공할 수 있습니다.

2. 이미지 크기 최적화

Next.js는 sizes 속성을 사용하여 다양한 화면 크기에 맞는 이미지를 생성합니다. 이를 통해 모바일 기기에는 작은 이미지를, 데스크톱에는 큰 이미지를 제공하여 불필요한 데이터 전송을 줄입니다.

3. Lazy Loading

Lazy Loading을 통해 뷰포트 밖에 있는 이미지의 로딩을 지연시켜, 초기 페이지 로드 시간을 크게 줄일 수 있습니다. 이는 특히 이미지가 많은 페이지에서 효과적입니다.

위 과정을 적절히 사용하여 이미지의 Size와 Time을 최적화가 가능합니다.

✅ 참고

• NEXT.JS의 이미지 최적화는 어떻게 동작하는가?-올리브영테크블로그

• NextJS는 어떻게 이미지를 최적화할까?

Tailwind CSS를 사용해 스타일링을 하던 중, 스크롤바를 숨기고 싶었습니다. 하지만 Tailwind 공식 문서에서는 기본적으로 스크롤바를 숨기는 유틸리티 클래스를 제공하지 않는다는 걸 알게 되었고, 이에 대한 해결 방법을 찾던 중, tailwind-scrollbar-hide 플러그인을 활용하면 간단하게 해결할 수 있다는 것을 발견했습니다.

📌 Tailwind에서 기본적으로 스크롤바를 숨길 수 없을까?

Tailwind는 다양한 스타일링 유틸리티를 제공하지만, 기본적으로 스크롤바를 숨기는 클래스를 포함하고 있지 않습니다. 따라서 직접 스타일을 추가하거나, 플러그인을 활용해야 합니다.

여기서는 tailwind-scrollbar-hide 플러그인을 사용해 스크롤바를 숨기는 방법을 소개합니다.

🔧 tailwind-scrollbar-hide 플러그인 설치 및 설정

1️⃣ 플러그인 설치

아래 명령어 중 사용하는 패키지 매니저에 맞게 설치합니다.

// npm
npm install tailwind-scrollbar-hide

// yarn
yarn add tailwind-scrollbar-hide

// pnpm 
pnpm add tailwind-scrollbar-hide

2️⃣ Tailwind 설정 파일(tailwind.config.ts) 수정

설치한 플러그인을 Tailwind 설정 파일에 추가합니다.

import type { Config } from 'tailwindcss';
import scrollbarHide from 'tailwind-scrollbar-hide';

export default {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        background: 'var(--background)',
        foreground: 'var(--foreground)',
      },
    },
  },
  plugins: [scrollbarHide],
} satisfies Config;

3️⃣ scrollbar-hide 클래스 적용

이제 scrollbar-hide 클래스를 적용하면 스크롤바를 감출 수 있습니다.

<div className="scrollbar-hide overflow-auto h-64">
  {/* 내용 */}
</div>

위처럼 scrollbar-hide를 적용하면 해당 요소의 스크롤바가 완전히 숨겨진다.

(추가) scrollbar-hide 플러그인 없이 구현하는 방법

만약 추가적인 플러그인을 설치하지 않고 직접 Tailwind에서 구현하고 싶다면 @layer utilities를 활용해 아래와 같이 직접 스타일을 추가할 수도 있습니다.

@layer utilities {
  .scrollbar-hide {
    &::-webkit-scrollbar {
      display: none;
    }
    scrollbar-width: none;
  }
}

이렇게 하면 Tailwind의 @apply 기능을 활용하여 scrollbar-hide 클래스를 사용할 수 있습니다.

<div className="scrollbar-hide overflow-auto h-64">
  {/* 내용 */}
</div>

마무리

Tailwind CSS에서는 기본적으로 스크롤바를 숨기는 유틸리티 클래스를 제공하지 않기 때문에, tailwind-scrollbar-hide 플러그인을 활용하거나 직접 @layer utilities를 이용해 스타일을 추가하는 방법을 사용할 수 있습니다.

✅ 참고

• npm tailwind-scrollbar-hide

• tailwind v3 docs

디자이너분들이 만들어주신 피그마를 만들고 있는 장면입니다. 여기 사진을 보면 계산기가 있는 것을 볼 수 있습니다. 계산기가 왜 있을까요?

px값을 rem으로 바꾸기 위해서죠. 하나씩 계산해가며 노가다를 하다가 생각이 들었습니다. 이 방법을 좀 더 쉽게 하는 방법은 없을까?

그래서 🐶고수 soheekim님께 바로 물어봤습니다.

font-size 를 62.5로 설정하라고 ? 그게 뭐야

font-size: 62.5%

1. 브라우저 기본 폰트 크기

대부분의 브라우저에서 기본 폰트 크기는 16px로 설정되어 있습니다. 이 기본 크기는 html 요소의 폰트 크기로 사용됩니다. CSS에서 다른 요소에 rem 단위를 사용할 경우, 이 기본 폰트 크기를 기준으로 계산됩니다.

html {
  font-size: 16px;
}

h1 {
  font-size: 2rem; /* 16px * 2 = 32px */
}

2. 62.5%로 폰트 크기 변경

font-size: 62.5%는 기본 폰트 크기인 16px의 62.5% 값을 설정합니다.

계산을 해보면 16px × 0.625 = 10px

즉, html 태그의 폰트 크기를 10px로 설정한 것과 동일한 효과를 냅니다.

기본 폰트 크기를 10px로 설정하면, rem 단위는 다음과 같이 직관적으로 변환됩니다.

• 1rem = 10px
• 1.6rem = 16px
• 3.2rem = 32px

3. 62.5% 설정

html {
  /* 62.5% of 16px browser font size is 10px (16px * 0.625 = 10px) */
  font-size: 62.5%;
}

body {
  /* 1.6 * 10px = 16px */
  font-size: 1.6rem; /* 16px와 동일 */
}

.tag {
  font-size: 2.4rem; /* 24px와 동일 */
}

이 설정을 통해 개발자는 디자인 가이드라인에서 제시된 px 단위 값을 rem으로 변환하는 과정을 더 쉽게 할 수 있습니다.

Thanks to soheekim 🙇🏻

25.01.30

VSCode Extension에도 역시나 있었습니다.

1. 프로젝트 구조

두 개의 주요 컴포넌트로 구성됩니다

1.ChatList: 사용자의 채팅 목록을 표시하고 관리합니다. 2.ChatRoom: 실제 채팅이 이루어지는 공간으로, WebSocket 연결을 관리합니다.

2. ChatList 컴포넌트

ChatList 컴포넌트는 사용자의 채팅 목록을 표시하고, 필터링 기능을 제공합니다.

import React, { useState, useEffect } from 'react';
import useAuthStore from '@/stores/authStore';
import { Chat } from '@/types/chat';
import { MessageSquare } from 'lucide-react';
import Link from 'next/link';

export interface ChatListProps {
  initialChats: Chat[];
  selectedChatId: number | null;
  onChatCreated?: (newChat: Chat) => void;
}

type FilterType = 'all' | 'buy' | 'sell';

const ChatList: React.FC<ChatListProps> = ({ initialChats, selectedChatId }) => {
  const { user } = useAuthStore();
  const myName = user?.username;
  const [filteredChats, setFilteredChats] = useState(initialChats);
  const [activeFilter, setActiveFilter] = useState<FilterType>('all');

  // ... (필터링 로직 및 UI 렌더링 코드)

  return (
    <div className="h-full border-r border-[#d9d9d9] bg-white flex flex-col">
      {/* ... (필터 버튼 및 채팅 목록 UI) */}
    </div>
  );
};

export default ChatList;

ChatList.tsx

3. ChatRoom 컴포넌트

ChatRoom 컴포넌트는 WebSocket을 사용하여 실시간 채팅 기능을 구현합니다.

import useAccessToken from '@/hooks/useAccessToken';
import React, { useEffect, useRef, useState, useCallback, useLayoutEffect } from 'react';
import { Send } from 'lucide-react';
import useAuthStore from '@/stores/authStore';
import { ChatRoomProps, Message } from '@/types/chat';

const ChatRoom: React.FC<ChatRoomProps> = ({ chatId }) => {
  const socketRef = useRef<WebSocket | null>(null);
  const [isConnected, setIsConnected] = useState<boolean>(false);
  const [messages, setMessages] = useState<Message[]>([]);
  const [inputMessage, setInputMessage] = useState<string>('');

  // ... (WebSocket 연결 및 메시지 처리 로직)

  return (
    <div className="flex flex-col h-full bg-white">
      {/* ... (메시지 표시 및 입력 UI) */}
    </div>
  );
};

export default ChatRoom;

ChatRoom.tsx

4. WebSocket 연결 관리

ChatRoom 컴포넌트에서 WebSocket 연결을 관리하는 방법을 자세히 살펴보겠습니다.

const connect = useCallback(() => {
  if (!accessToken) return;

  socketRef.current = new WebSocket(
    `${process.env.NEXT_PUBLIC_WS_URL}/${chatId}/?token=${encodeURIComponent(accessToken)}`,
  );

  socketRef.current.onopen = () => {
    setIsConnected(true);
    // ... (연결 성공 처리)
  };

  socketRef.current.onmessage = event => {
    // ... (메시지 수신 및 처리)
  };

  socketRef.current.onerror = error => {
    console.error('WebSocket error:', error);
    setIsConnected(false);
  };

  socketRef.current.onclose = () => {
    setIsConnected(false);
    // ... (재연결 로직)
  };
}, [accessToken, chatId]);

useEffect(() => {
  connect();
  return () => {
    disconnect();
  };
}, [connect, disconnect]);

5. 메시지 송수신

메시지 송수신은 다음과 같이 구현됩니다.

const sendMessage = () => {
  if (
    socketRef.current &&
    socketRef.current.readyState === WebSocket.OPEN &&
    inputMessage.trim()
  ) {
    const messageData = {
      message: inputMessage,
      sender: myName,
    };
    socketRef.current.send(JSON.stringify(messageData));
    setInputMessage('');
  }
};

// 메시지 수신 처리 (socketRef.current.onmessage 내부)
const newMessage: Message = {
  id: data.id?.toString() || Date.now().toString(),
  content: data.message || '',
  sender: (typeof data.sender === 'object' ? data.sender.username : data.sender) || 'Unknown',
  createdAt: new Date(data.created_at || Date.now()),
  chatRoom: data.chat_room_id?.toString() || chatId,
};
setMessages(prev => [...prev, newMessage]);

✅ 참고

• Frontend를 위한, Socket과 WebSocket_mingule

이미지출처

JWT(JSON Web Token)는 사용자 인증을 관리하기 위한 강력한 도구입니다. 하지만, JWT의 짧은 유효 기간 때문에 사용자가 인증 상태를 유지하려면 Access Token을 주기적으로 갱신해야 합니다. 이번 글에서는 Next.js의 Middleware를 활용하여 Access Token을 자동으로 갱신하는 방법을 살펴보겠습니다.

1. 문제 정의: Access Token의 유효 기간

Access Token은 클라이언트가 인증된 상태를 증명하기 위해 서버에 전송하는 JSON Web Token입니다. 보안상의 이유로 Access Token은 유효 기간(exp)을 짧게 설정하는 경우가 많습니다.

이로 인해 사용자는 토큰이 만료될 때마다 새로 로그인해야 하는 불편함을 겪을 수 있습니다. 이를 해결하기 위해 Refresh Token을 활용하여 Access Token을 갱신하는 방식이 일반적입니다.

현재 진행하는 프로젝트에서는 Access Token은 30분, Refresh Token은 7일의 유효 기간이고 토큰 갱신 코드가 완성되면 Access Token의 유효 기간을 더 줄여서 보안 강화할 계획입니다.

2. Next.js Middleware의 역할

Next.js Middleware는 서버와 클라이언트 사이의 요청을 가로채어 필요한 전처리를 수행할 수 있는 강력한 기능을 제공합니다. 이를 활용해 보호된 경로에 접근하기 전에 JWT의 유효성을 검증하고, 필요할 경우 Access Token을 갱신할 수 있습니다.

3. 구현: Middleware 코드

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { sendRefreshTokenRequest } from '@/api/auth';
import { jwtDecode } from 'jwt-decode';

const PROTECTED_ROUTES = ['/create', '/chat', '/mypage'];
const AUTH_ROUTES = ['/auth/signIn', '/auth/signUp'];

export const middleware = async (req: NextRequest) => {
  const { pathname } = new URL(req.url);

  if (AUTH_ROUTES.some(route => pathname.startsWith(route))) {
    const refreshToken = req.cookies.get('refreshToken')?.value;

    if (refreshToken) {
      return NextResponse.redirect(new URL('/mypage', req.url));
    }
    return NextResponse.next();
  }

  if (!PROTECTED_ROUTES.some(route => pathname.startsWith(route))) {
    return NextResponse.next();
  }

  const accessToken = req.cookies.get('accessToken')?.value;
  const refreshToken = req.cookies.get('refreshToken')?.value;

  if (!accessToken && !refreshToken) {
    return NextResponse.redirect(new URL('/auth/signIn', req.url));
  }

  try {
    if (accessToken) {
      const decodedToken: { exp: number } = jwtDecode(accessToken);
      const currentTime = Math.floor(Date.now() / 1000);

      if (decodedToken.exp > currentTime) {
        return NextResponse.next();
      }
    }

    if (refreshToken) {
      const refreshResponse = await sendRefreshTokenRequest(refreshToken);

      if (refreshResponse.success && refreshResponse.tokens) {
        const response = NextResponse.next();

        response.cookies.set('accessToken', refreshResponse.tokens.access, {
          httpOnly: true,
          secure: process.env.NODE_ENV === 'production',
          path: '/',
        });
        response.cookies.set('refreshToken', refreshResponse.tokens.refresh, {
          httpOnly: true,
          secure: process.env.NODE_ENV === 'production',
          path: '/',
        });

        return response;
      } else {
        console.error('Refresh token 갱신 실패:', refreshResponse.message);
        const response = NextResponse.redirect(new URL('/auth/signIn', req.url));
        response.cookies.delete('refreshToken');
        return response;
      }
    }

    return NextResponse.redirect(new URL('/auth/signIn', req.url));
  } catch (error) {
    console.error('Token verification error:', error);
    const response = NextResponse.redirect(new URL('/auth/signIn', req.url));
    response.cookies.delete('refreshToken');
    return response;
  }
};

export const config = {
  matcher: ['/create/:path*', '/chat/:path*', '/mypage/:path*', '/auth/signIn', '/auth/signUp'],
};

4. Access Token 갱신 요청

sendRefreshTokenRequest 함수는 서버로 Refresh Token을 전송하여 Access Token을 갱신합니다.

export const sendRefreshTokenRequest = async (refresh: string): Promise<RefreshResponse> => {
  if (!refresh) {
    return {
      success: false,
      message: 'Refresh token이 없습니다.',
    };
  }

  try {
    const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/users/refresh`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${refresh}`,
      },
      body: JSON.stringify({ refresh }),
      credentials: 'include',
    });

    if (!response.ok) {
      const errorData = await response.json().catch(() => ({}));
      console.error('Refresh API Error:', {
        status: response.status,
        statusText: response.statusText,
        error: errorData,
      });

      return {
        success: false,
        message: `토큰 갱신 실패 (${response.status}): ${errorData.message || response.statusText}`,
      };
    }

    const data: RefreshResponse = await response.json();
    return data;
  } catch (error) {
    console.error('토큰 갱신 요청 오류:', error);
    return {
      success: false,
      message: error instanceof Error ? error.message : '토큰 갱신 요청에 실패했습니다.',
    };
  }
};

마무리

Next.js의 Middleware는 클라이언트와 서버 간의 인증 로직을 관리하는 데 매우 유용합니다. 위 코드를 참고하여 여러분의 프로젝트에 Access Token 갱신 기능을 통합해 보세요. 이 과정에서 보안 및 사용자 경험을 모두 만족시키는 인증 시스템을 구현할 수 있을 것입니다.

✅ 참고

• Next.js로 Access Token 만료 확인 및 재발급 받기_ClydeHan

Middleware란?

Middleware는 HTTP 요청이 특정 페이지로 전달되기 전에 실행됩니다. 그런 다음, 들어오는 요청에 따라 응답을 재작성, 리디렉션, 요청 또는 응답 헤더 수정, 또는 직접 응답할 수 있습니다.

주요 특징

• Edge 실행: Middleware는 Edge Runtime에서 실행되며, 빠르고 서버 리소스를 적게 사용합니다.
• 유연성: 요청을 수정하거나 리다이렉션, 응답을 차단할 수 있습니다.
• 코드 실행: 클라이언트 요청이 서버에 도달하기 전에 코드를 실행할 수 있습니다.

인증 상태에 따른 페이지 접근 제어

1. 로그인하지 않은 사용자가 게시물 작성, 채팅, 마이페이지와 같은 페이지에 접근하면 로그인 페이지로 리디렉션
2. 로그인한 사용자가 로그인 또는 회원가입 페이지에 접근하면 마이페이지로 리디렉션

Middleware 작성하기

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export const middleware = (req: NextRequest) => {
  const refreshToken = req.cookies.get('refreshToken');

  if (
    !refreshToken &&
    (req.url.includes('/create') || req.url.includes('/chat') || req.url.includes('/mypage'))
  ) {
    return NextResponse.redirect(new URL('/auth/signIn', req.url));
  }

  if (refreshToken && (req.url.includes('/auth/signIn') || req.url.includes('/auth/signUp'))) {
    return NextResponse.redirect(new URL('/mypage', req.url));
  }

  return NextResponse.next();
};

export const config = {
  matcher: ['/create/:path*', '/chat/:path*', '/mypage/:path*', '/auth/signIn', '/auth/signUp'],
};

Matcher

matcher를 사용하여 특정 경로에서만 Middleware를 실행하도록 필터링 할 수 있습니다.

단일 경로나 여러 경로를 배열 구문으로 매칭할 수 있습니다.

• matcher: '/create/:path*'
• mathcer: ['/create/:path*', '/chat/:path*']

❗️ middleware는 페이지와 동일한 수준(루트 또는 src 디렉터리에)에 위치해야 합니다.

클라이언트 코드 간소화

이제 클라이언트에서 조건부 라우팅을 제거할 수 있습니다.

// 기존 코드 예시
const { isAuthenticated } = useAuthStore();

const handleCreateClick = () => {
    if (isAuthenticated) {
      router.push('/create');
    } else {
      router.push('/auth/signIn');
    }
  };

// 수정 코드 예시
  const handleCreateClick = () => {
    router.push('/create');
  };

이제 router.push는 페이지 이동만 처리하며, 접근 제어는 Middleware에서 수행됩니다.

결론

Next.js Middleware는 인증 및 권한 관리를 효율적으로 처리할 수 있는 강력한 도구입니다. 클라이언트와 서버 간 역할을 명확히 분리하여 코드를 간소화하고 보안을 강화할 수 있습니다.

✅ 참고

• NEXT.JS_docs
• NextJS: Middleware_hwisaac

2024년 10월부터 시작된 팀 프로젝트가 12월 17일부로 마무리되었습니다. 벌써 약 2주가 흘렀지만, 팀원들과 함께 즐겁게 프로젝트를 진행했던 기억은 여전히 생생합니다. 이 글은 그 시간을 되돌아보며 남기는 작은 기록입니다. (연말에 바빠서 이제야 쓰는 건 절대 아닙니다...)

프로젝트 준비

우리 팀은 총 5명으로 구성되어 두 팀으로 나뉘어 진행하기로 했습니다. 팀 구성은 랜덤이었고, 제가 속한 팀은 세 명이 함께 작업하게 되었습니다.

팀원들의 배경은 다양했는데, 리액트를 처음 사용하는 분도 있었고, 팀 프로젝트 경험이 없는 분도 있었습니다. 걱정이 될 수도 있었지만, 그런 감정보다는 기대감이 더 컸습니다. 현업에서 일하신 분, 전 퍼블리셔 초고수, 컴퓨터공학 전공자, 그리고 영어 강사 출신의 팀원까지. 모두 대단한 이력을 가진 분들이었고, 지금 돌아보면 독학으로 공부해온 제가 가장 초라해 보였을 정도였습니다.

우여곡절 끝에 기술 스택을 정하고, 가장 어려웠던(?) 팀명도 정했습니다. 우리 팀은 모두 MBTI가 T여서 커뮤니T라는 이름으로 결정했는데, 이 이름만큼이나 논리적인 팀워크를 보여주고 싶다는 다짐을 했습니다.

프로젝트 시작

프로젝트가 시작되면서 저는 팀장이 되었습니다. 이유는 모르겠지만, 두 팀원이 저를 지목했죠.

특히, 팀원 중 한 분이 피그마에 능숙하셨는데, 혼자서 프로젝트 기획을 피그마로 정리해 주셨습니다. 덕분에 초기 작업을 매우 수월하게 진행할 수 있었습니다. 피그마를 활용한 디자인 프로세스를 직접 경험하면서, 사용자 경험(UX)에 대한 이해를 넓히고 피그마 사용법까지 자연스럽게 배울 수 있었던 좋은 기회였습니다.

저는 팀원들에게 하고 싶은 테스크를 먼저 맡겼고, 제 업무도 차근차근 진행하기 시작했습니다. 초반에는 모든 것이 낯설고 어려웠지만, 함께 공부하고 자료를 공유하면서 문제를 하나씩 해결해 나갔습니다. 이 과정에서 팀원들과의 커뮤니케이션의 중요성을 깊이 느꼈습니다. 시간에 상관없이 각자의 의견을 자유롭게 말하고, 다른 팀원의 의견을 묻는 방식으로 소통하면서 문제를 효율적으로 해결할 수 있었습니다.

또한, GPT와 Claude 같은 AI 도구들의 도움을 많이 받았는데, 덕분에 기술적 난관도 비교적 수월하게 넘어갈 수 있었습니다. 이번 프로젝트를 통해 AI의 위대함을 다시 한 번 체감하는 동시에, 효과적인 팀 커뮤니케이션이 프로젝트 성공의 핵심이라는 것을 깨달았습니다.

연말이라는 고비

프로젝트의 마감일은 12월 17일로 정해져 있었습니다. 11월까지는 순조롭게 진행되던 작업이 12월에 접어들면서 예기치 못한 문제들에 부딪히기 시작했습니다. AWS Jam 참여와 연말 바쁜 일정이 겹치면서 모든 팀원들의 프로젝트 참여가 어려워졌습니다. 결국 기획했던 기능 중 일부, 예를 들어 채팅과 알람 기능을 제외하기로 했습니다.

12월 초부터는 진행 속도가 현저히 느려졌습니다. 사실 느려진 것이 아니라 거의 멈췄다고 해도 과언이 아니었습니다. 어느 정도 만들어진 결과물로 마무리할 수도 있었지만, 저는 프로젝트를 끝까지 완성하고 싶었습니다. 다른 두 팀원은 동시에 진행 중인 다른 프로젝트가 있었기 때문에 제가 주도적으로 마무리하겠다고 나섰습니다.

하지만 놀랍게도, 두 팀원 모두 커뮤니T 프로젝트에 다시 적극적으로 참여하기 시작했습니다. 덕분에 우리는 막판 스퍼트를 내며 프로젝트를 마무리할 수 있었습니다. 서로가 서로를 격려하며 끝까지 함께할 수 있었다는 점에서 이번 프로젝트는 정말 의미 있는 경험이었습니다.

마무리

이번 프로젝트는 단순히 결과물을 만드는 것을 넘어, 협업과 성장의 소중함을 느끼게 해준 시간이었습니다. Redux, Axios 등 다양한 라이브러리를 사용해보는 경험도 얻었고 각자의 상황이 다르고 환경이 어려웠음에도 불구하고 끝까지 함께 노력했던 팀원들에게 감사함을 전하고 싶습니다.커뮤니T라는 이름처럼, 앞으로도 논리적이고 끈끈한 협업의 가치를 이어가고 싶습니다.

많은 것을 배우게 도와준 여진, 소희, 세윤, 도훈 모두 감사합니다 🙇🏻

백엔드 작업과 우리를 키워주신 창준_멘토님.. 압도적 감사합니다..

라이브 서버는 끝났지만 깃허브 코드는 영원하다

마지막 사진은 같이 했던 자리와 도서관에서 UX/UI 책 읽는 도훈님..

Zustand는 React 애플리케이션에서 상태 관리를 간단하고 직관적으로 할 수 있도록 도와주는 상태 관리 라이브러리입니다. Next.js와 함께 사용할 때, Zustand는 전역 상태를 효과적으로 관리할 수 있는 훌륭한 선택이 됩니다. 이 블로그 글에서는 Next.js에서 Zustand를 사용하여 전역 상태를 관리하는 방법을 안내하겠습니다.

1. Zustand 설치

먼저 Zustand를 프로젝트에 설치합니다. 프로젝트에서 사용하는 패키지 매니저에 따라 설치 방법이 다릅니다. 아래 명령어 중 하나를 실행하세요.

// npm
npm install zustand
// yarn
yarn add zustand
// pnpm
pnpm add zustand

2. Zustand Store 생성

Zustand를 사용하려면 상태를 관리할 store를 만들어야 합니다. 저는 authStore.ts라는 파일을 만들었습니다.

// src/stores/authStore.ts
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import { Tokens, User } from '@/types/types';

type AuthState = {
  user: User | null;
  isAuthenticated: boolean;
  token: Tokens | null;
  login: (userData: User, token: Tokens) => void;
  logout: () => void;
};

const useAuthStore = create<AuthState>()(
  persist(
    set => ({
      user: null,
      isAuthenticated: false,
      token: null,
      login: (userData, token) =>
        set({
          user: userData,
          isAuthenticated: true,
          token,
        }),
      logout: () =>
        set({
          user: null,
          isAuthenticated: false,
          token: null,
        }),
    }),
    {
      name: 'auth-storage',
    },
  ),
);

export default useAuthStore;

위 코드에서는 authStore.ts라는 파일을 생성하고, 사용자 인증 정보를 관리하는 상태를 저장합니다. persist 미들웨어를 사용하여 로컬 스토리지에 상태를 유지할 수 있습니다. user, isAuthenticated, token 상태와 login, logout 함수를 정의하여 사용자 로그인/로그아웃 기능을 구현합니다.

3. Zustand Store 사용하기

useAuthStore 훅을 통해 이 상태를 전역적으로 접근할 수 있습니다. 예를 들어, 네비게이션 바에서 사용자의 로그인 상태를 확인하고, 로그아웃 버튼을 구현하는 방식입니다.

import useAuthStore from '@/stores/authStore';

const Nav = () => {
  const { isAuthenticated, logout } = useAuthStore();

  return (
    <nav>
      {isAuthenticated ? (
        <>
          <span>Welcome, User!</span>
          <button onClick={logout}>Logout</button>
        </>
      ) : (
        <span>Please log in</span>
      )}
    </nav>
  );
};

이 예제에서는 isAuthenticated를 통해 사용자가 로그인한 상태인지 확인하고, logout 함수를 호출하여 로그아웃 기능을 제공합니다.

Zustand는 간단한 상태 관리에 적합하지만, 상태를 보다 세부적으로 나누어 관리할 수 있습니다. 예를 들어, authStore 외에도 다른 기능을 담당하는 상태를 별도로 만들 수 있습니다. persist 미들웨어를 활용하여 상태를 브라우저에 저장하고, 페이지 새로 고침 시에도 상태를 유지할 수 있습니다.

Zustand는 Next.js 프로젝트에서 상태 관리를 간단하고 효율적으로 처리할 수 있는 훌륭한 도구입니다. 이 글에서는 Zustand를 사용하여 로그인 상태를 관리하는 방법을 살펴봤습니다. Zustand를 통해 전역 상태를 쉽게 관리하고, 페이지 간에 상태를 공유하는 방식으로 애플리케이션의 일관성을 유지할 수 있습니다.

✅ 참고

• zustand
• Zustand로 전역 상태 관리하기_유세지

1. Vercel에서 도메인 추가하기

1. Vercel에서 프로젝트를 배포한 후, 프로젝트 Settings - Domain 메뉴로 이동합니다.
2. 연결할 도메인을 입력하고 추가합니다.
3. 추가 후 오류 메세지가 나타납니다. 이때 Vercel에서 제공하는 A 레코드와 CNAME 값을 확인하고 복사합니다.

A 레코드와 CNAME 레코드의 차이와 사용 시점

1. A 레코드 (Address Record)

A 레코드는 도메인 이름을 고정된 IPv4 주소와 연결할 때 사용합니다.

• 사용 사례

  • 루트 도메인(예: example.com)을 서버의 IP 주소와 연결할 때
  • 특정 호스트 이름이 특정 IP를 가리키도록 할 때

• 장점

  • 직접 IP 주소를 지정해 빠른 연결이 가능
  • 모든 트래픽이 지정된 IP 주소로 이동

• 제한사항

  • 서버 IP가 변경되면 A 레코드도 반드시 업데이트해야 함

2. CNAME 레코드 (Canonical Name Record)

CNAME 레코드는 도메인을 다른 도메인 이름(별칭)과 연결할 때 사용합니다

• 사용 사례

  • 서브도메인(예: www.example.com)을 루트 도메인(예: example.com)이나 다른 도메인으로 리디렉션할 때
  • 콘텐츠 배포 네트워크(CDN), 클라우드 서비스(Vercel, Netlify) 등의 동적 서비스 주소와 연결할 때

• 장점

  • 별칭 주소가 변경되어도 대상 도메인만 업데이트하면 됨
  • 관리가 간편하고 유연성 제공

• 제한사항

  • 루트 도메인에는 사용 불가 (RFC 규약)
  • 도메인 연결 속도가 간접적으로 느려질 수 있음

Route53에서 레코드 설정하기

1. AWS Route53 콘솔로 이동해, 도메인을 선택하거나 추가합니다.

2. 호스팅 영역 세부 정보에서 레코드 생성을 클릭합니다.

   • A 레코드
     • 레코드 이름: 공백
     • 값: Vercel에서 제공한 A 레코드 값
   • CNAME
     • 레코드 이름: www
     • 값: Vercel에서 제공한 CNAME 값

3. 저장 후 변경 사항이 적용될 때까지 시간이 소요됩니다.

3. 연결 확인하기

설정이 완료되면 브라우저에서 도메인을 입력해 연결 여부를 확인합니다. example.com과 www.example.com 모두 확인합니다.

네이버 클라우드 플랫폼에 가입하고 네이버 지도 API 이용 신청을 합니다.

애플리케이션을 등록하면 API key가 발급됩니다. 이 key는 나중에 다시 확인할 수 있으니 복사를 못했다고 걱정하지 않으셔도 됩니다.

API 무료 사용 횟수가 제한이 있어서 저는 우선 제한 한도를 무료 사용 횟수에 맞춰놨습니다.

프로젝트 설정

네이버 지도 API의 타입을 명시적으로 선언하기 위해 @types/navermaps 설치합니다.

pnpm add -D @types/navermaps

지도 표시

저는 메인 화면, 즉 홈에서 map을 띄우기 위해 src/app/page.tsx에서 작업했습니다.

declare global {
  interface Window {
    naver: any;
  }
}

네이버 지도 API가 window.naver 객체에 정의되므로 타입스크립트에서 이를 알 수 있도록 명시적으로 선언합니다. 타입스크립트가 window.naver의 속성을 추론하지 못하는 문제를 방지하도록 any 타입으로 설정합니다.

interface NaverMapProps {
  width?: string;
  height?: string;
  initialCenter?: { lat: number; lng: number };
  initialZoom?: number;
}

지도 컨테이너의 크기, 지도의 초기 중심 좌표와 초기 줌 레벨을 설정하는 props 타입을 정의합니다.

const Home = ({
  width = '100%',
  height = '700px',
  initialCenter = { lat: 37.5656, lng: 126.9769 },
  initialZoom = 13,
}: NaverMapProps) => {

기본값을 설정하여 사용자 입력이 없을 경우에도 동작하도록 합니다.

  const mapRef = useRef<HTMLDivElement>(null);

지도 객체가 렌더링될 DOM 요소를 참조합니다.

  useEffect(() => {
    const initializeMap = () => {
      if (!window.naver) return;

      const mapOptions = {
        center: new window.naver.maps.LatLng(initialCenter.lat, initialCenter.lng),
        zoom: initialZoom,
        zoomControl: true,
        zoomControlOptions: {
          position: window.naver.maps.Position.TOP_RIGHT,
        },
      };
    };

    const script = document.createElement('script');
    script.src = `https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=${process.env.NEXT_PUBLIC_NAVER_MAP_CLIENT_ID}`;
    script.async = true;
    script.onload = initializeMap;
    document.head.appendChild(script);

    return () => {
      document.head.removeChild(script);
    };
  }, [initialCenter, initialZoom]);

• 스크립트 추가: 네이버 지도 API를 로드하기 위해 동적으로