Hyun Dev

ESLint로 리액트 import 순서 자동 정리하기

Hyun Dev — Fri, 30 May 2025 02:03:24 +0900

React 프로젝트를 진행하다 보면 import 순서가 제각각이라서 보기 불편해질 때가 많습니다.
처음에는 수동으로 정리하려 했는데, 이걸 매번 사람이 맞추는 건 너무 번거롭고 비효율적이라 방법을 찾다가 ESLint로 해결하게 됐습니다.

1. 필요한 라이브러리 설치

먼저, eslint-plugin-import 플러그리를 설치합니다.

npm install eslint-plugin-import --save-dev

2. eslint.config.js 설정

// eslint.config.js
import importPlugin from 'eslint-plugin-import';

export default [
  {
    /* ... 기타 설정 생략 ... */
    plugins: {
      /* ... 기타 플러그인 생략 ... */
      import: importPlugin, // ESLint가 이 플러그인을 인식함
    },

    rules: {
      /* ... 기타 룰 생략 ... */
      'import/order': [
        'warn', // 경고로 띄움 (에러는 아님)
        {
          groups: [
            'external', // 외부 라이브러리 (예: react, axios)
            'internal', // 프로젝트 내부 import (@/components 등)
            ['parent', 'sibling', 'index'], // 상대경로 import (../, ./)
          ],
          pathGroups: [
            {
              pattern: '@/**', // @로 시작하는 경로를 internal로 인식
              group: 'internal',
            },
          ],
          'newlines-between': 'always-and-inside-groups', // 그룹 간 줄바꿈
          alphabetize: {
            order: 'asc', // 알파벳순 정렬
            caseInsensitive: true, // 대소문자 구분 X
          },
        },
      ],
    },
  },
];

3. import 정렬 기준

위처럼 설정하면, import 순서는 다음과 같이 정렬됩니다.

1. external – 외부 라이브러리
예: react, react-dom, axios 등

2. internal – 프로젝트 내부 경로 (절대 경로)
예: @/hooks, @/components 등
@/** 경로는 내부 import로 인식되도록 설정해줍니다.

3. parent, sibling, index – 상대 경로
예: ../, ./, 같은 폴더의 index.ts

@/** 경로는 internal로 인식되게 별도로 설정해줍니다.
각 그룹 간에는 줄바꿈이 자동으로 들어가고, 같은 그룹 내에서는 알파벳 순서로 정렬됩니다.

4. 사용 방법

import 순서 오류 확인만 하고 싶다면

npx eslint src

자동으로 정렬까지 하고 싶다면

npx eslint src --fix

이렇게 설정해두면 수동으로 import 순서 맞출 필요 없이, eslint --fix 한 번이면 다 정리돼서 훨씬 편해집니다.

추가적으로 쓸 수 있는 옵션도 많으니 eslint-plugin-import 공식 문서 참고해도 좋습니다.

URL 기반 모달 라우팅 구현

Hyun Dev — Fri, 23 May 2025 12:46:48 +0900

X(구 트위터) 사이트를 클론코딩하다가, 회원가입이나 로그인 버튼을 누르면 모달이 뜨고 URL이 '/i/flow/signup', '/i/flow/login'으로 바뀌는 걸 봤습니다.
처음엔 그냥 페이지 이동인 줄 알았는데, 실제로는 화면은 그대로고 모달만 올라오는 구조였습니다.

생각해보니 이 방식이 꽤 괜찮은 것 같았습니다.
특히 모바일에선 실수로 뒤로가기를 눌렀을 때, 모달만 닫히고 기존 페이지는 그대로 유지돼서, 사용자 입장에서 훨씬 안정적인 흐름을 만들 수 있다고 생각했습니다.

사용자 입장에서 꽤 괜찮은 흐름이라고 판단했고, 그래서 저도 이 구조를 비슷하게 구현해봤습니다.

경로 기반으로 모달 열기

아래처럼 버튼을 눌렀을 때 navigate()를 사용해 URL을 바꾸면서 현재 위치 정보를 state로 같이 넘기도록 만들었습니다.

const navigate = useNavigate();
const location = useLocation();

const openModal = (path: string) => {
  navigate(path, {
    state: { backgroundLocation: location },
  });
};

버튼엔 이렇게 연결했습니다.

<button onClick={() => openModal('/signup')}>회원가입</button>
<button onClick={() => openModal('/login')}>로그인</button>

여기서 backgroundLocation이라는 이름은 제가 임의로 지은 것입니다.
다른 이름을 써도 상관없고, 중요한 건 현재 경로를 넘기는 것입니다.

라우터 구성

App.tsx에서는 아래처럼 라우터를 구성했습니다.

const location = useLocation();
const state = location.state;

return (
    <>
        <Routes location={state?.backgroundLocation || location}>
            <Route path='/' element={<AppLayout />}>
                <Route index element={<HomePage />} />
            </Route>
        </Routes>

        {location.pathname === '/signup' && <SignUpModal />}
        {location.pathname === '/login' && <LoginModal />}
    </>
);

중요한 건 <Routes location={...}> 부분입니다.
React Router는 기본적으로 현재 location을 기준으로 라우팅을 하지만, 우리는 이전 경로를 backgroundLocation으로 넘겨줬기 때문에 실제 URL이 /signup이어도 화면은 '/' 기준으로 라우팅됩니다.
그 위에 모달만 조건부로 띄우는 방식입니다.

모달 닫기 시 navigate(-1) 처리

모달에 닫기 버튼이 있다면 아래처럼 navigate(-1)을 반드시 호출해줘야 합니다.

const handleClose = () => {
  modalRef.current?.close();
  navigate(-1);
};

이걸 넣지 않으면 모달은 닫히지만 URL은 그대로 /signup에 남아 있고,
뒤로가기를 누를 때 다시 모달이 열리는 등 흐름이 꼬일 수 있습니다.
navigate(-1)을 호출해주면 주소도 함께 되돌아가기 때문에 자연스럽게 닫히는 구조가 됩니다

모달 열기 처리 (Daisy UI)

저는 Daisy UI 모달을 사용했기 때문에 showModal()을 수동으로 호출해줘야 했습니다.
하지만 Daisy UI처럼 <dialog> 태그를 사용하는 방식이 아니라면, 이런 코드는 필요하지 않을 수도 있습니다.

useEffect(() => {
  const modal = modalRef.current;
  if (modal && !modal.open) {
    modal.showModal();
  }
}, []);

Zustand 리렌더링 최적화 하기 + Redux Toolkit 최적화

Hyun Dev — Sun, 18 May 2025 03:29:10 +0900

최근 프로젝트를 진행하면서 다양한 상태관리 라이브러리를 사용해봤습니다.

그중에서도 가장 자주 사용한 건 Zustand였고, 최근에는 Redux Toolkit도 경험해봤습니다.

사실 React에서는 Context API만으로도 상태 공유가 가능합니다.

그런데도 사람들이 굳이 Zustand나 Redux 같은 상태관리 라이브러리를 사용하는 이유는 뭘까요?

Context API를 피하는 이유

Context API는 Provider로 컴포넌트를 감싸서 상태를 공유할 수 있게 해줍니다. 문제는 하나의 값만 바뀌더라도 value 전체가 바뀐 것으로 간주되어, 이를 구독하고 있는 모든 컴포넌트가 리렌더링된다는 점입니다.

이 문제를 해결하려면 memoization, context 분리, useMemo 등을 활용해야 하지만, 솔직히 번거롭고 복잡한 작업이 많습니다.

그래서 자연스럽게 Zustand 같은 라이브러리로 눈이 가게 됩니다.

그런데 나 Zustand 잘못 쓰고 있었더라

Zustand는 리렌더를 최소화해서 성능 최적화에 유리하다고 알려져 있습니다.

저도 이 장점 때문에 사용해왔습니다. 그런데 최근에야 깨달았어요. 제가 Zustand를 잘못 쓰고 있었다는 걸요.

예전에는 아래처럼 상태를 한번에 가져와서 사용했습니다.

const { checkAuth, isCheckingAuth, accessToken } = useAuthStore();

겉보기에는 깔끔해 보이지만, 이 방식은 실제로 성능상 좋지 않습니다.

그 이유는 Zustand가 상태 변경 여부를 판단할 때 객체의 내부 값이 아닌 참조값을 기준으로 비교하기 때문입니다.

예를 들어 checkAuth, isCheckingAuth, accessToken을 구조분해 할당으로 한 번에 가져오면, 이 중 하나라도 값이 바뀌면 전체 객체의 참조가 변경됩니다.

만약 다른 컴포넌트에서 여기서 꺼내오지도 않은 authUser를

const { authUser } = useAuthStore();

처럼 가져왔다면, 이 컴포넌트는 상태 전체를 구독하는 것과 같아서,

위 컴포넌트에서 isCheckingAuth가 변경되는 등 전혀 관련 없는 상태 변화에도 불필요하게 리렌더링됩니다.

즉, 객체를 통째로 구독하는 방식은 내부 값 하나만 바뀌어도 전체가 바뀐 것으로 간주되기 때문에, Zustand의 성능 최적화 이점을 제대로 누릴 수 없습니다.

Redux Toolkit에서도 동일한 원칙이 적용됩니다.

최근까지 다음처럼 주로 썼습니다.

const { accessToken, isCheckingAuth } = useSelector(
  (state: RootState) => state.auth
);

마찬가지로 이 방식도 성능 면에서는 비효율적입니다.

왜냐하면 state.auth 객체 자체가 참조 변경으로 간주되기 때문에, 내부 필드가 하나만 바뀌어도 이 값을 사용하는 모든 컴포넌트가 리렌더링되기 때문입니다.

올바른 사용법

리렌더링을 최소화하려면 아래처럼 각각의 상태를 선택자로 분리해서 사용하는 것이 좋습니다.
이렇게 하면 오직 선택한 값이 변경될 때만 컴포넌트가 리렌더링됩니다.

const checkAuth = useAuthStore(state => state.checkAuth);
const isCheckingAuth = useAuthStore(state => state.isCheckingAuth);
const accessToken = useAuthStore(state => state.accessToken);

Redux Toolkit을 쓸 때도 다음과 같이 필드 단위로 셀렉터를 분리하는 것이 좋습니다.

const accessToken = useSelector((state: RootState) => state.auth.accessToken);
const isCheckingAuth = useSelector((state: RootState) => state.auth.isCheckingAuth);

그런데 매번 이렇게 분리하는 게 귀찮다?

사용하는 값이 많아질수록 위처럼 하나하나 나눠서 쓰는 건 비효율적일 수 있습니다.

이럴 때 사용할 수 있는 게 바로 useShallow입니다.

Zustand는 공식적으로 useShallow이라는 훅을 제공합니다.

이 훅을 활용하면 여러 값을 객체 형태로 한번에 가져오면서도, 내부 값이 변경될 때만 리렌더가 발생하도록 해줍니다.

https://zustand.docs.pmnd.rs/hooks/use-shallow

useShallow ⚛️ - Zustand

How to memoize selector functions

zustand.docs.pmnd.rs

import { useShallow } from 'zustand/shallow';

const { checkAuth, isCheckingAuth, accessToken } = useAuthStore(
  useShallow((state) => ({
    checkAuth: state.checkAuth,
    isCheckingAuth: state.isCheckingAuth,
    accessToken: state.accessToken,
  }))
);

이렇게 하면 checkAuth, isCheckingAuth, accessToken 중 실제로 변경된 값이 있을 때만 해당 컴포넌트가 리렌더링됩니다.

Redux에서는 useSelector와 함께 shallowEqual을 사용하면 비슷한 방식으로 최적화할 수 있습니다.

이렇게 하면 accessToken이나 isCheckingAuth 중 하나만 변경될 경우에만 해당 컴포넌트가 리렌더링됩니다.
즉, Redux에서도 객체 전체가 아니라 내부 값 변경 여부를 기준으로 리렌더링 여부를 판단하게 되는 셈입니다.

import { shallowEqual, useSelector } from 'react-redux';

const { accessToken, isCheckingAuth } = useSelector(
  (state: RootState) => ({
    accessToken: state.auth.accessToken,
    isCheckingAuth: state.auth.isCheckingAuth,
  }),
  shallowEqual
);

변경 전

변경 후

결론적으로, 구조분해 할당은 피하고 필요한 상태만 선택적으로 구독하는 것이 좋습니다.
여러 값을 한꺼번에 가져와야 할 때는 Zustand에서는 useShallow 훅을, Redux Toolkit에서는 shallowEqual을 사용해 얕은 비교를 적용하는 것이 성능 최적화에 도움이 됩니다.

Socket.IO를 이용한 채팅 및 온라인/오프라인 실시간 상태 반영

Hyun Dev — Thu, 1 May 2025 23:38:48 +0900

https://socket.io/docs/v4/server-initialization/

Server Initialization | Socket.IO

Once you have installed the Socket.IO server library, you can now init the server. The complete list of options can be found here.

socket.io

채팅 앱에서는 유저가 메시지를 실시간으로 주고받는 것뿐만 아니라, 누가 온라인인지도 즉시 보여주는 기능이 중요합니다.

이를 위해 Socket.IO를 도입했습니다.

서버(Node.js) 에서는 socket.io 라이브러리를 사용하였고, 클라리언트(React) 에서는 socket.io-client 라이브러리를 사용하였습니다.

socket.js: 소켓 서버 설정

socket.js 파일을 새로 만들어 기본 서버 위에 Socket.IO 서버를 올립니다.

import { Server } from 'socket.io';
import http from 'http';
import express from 'express';
import jwt from 'jsonwebtoken';

const app = express();
const server = http.createServer(app);

const io = new Server(server, {
  cors: {
    origin: ['http://localhost:5173'],
  },
});

export function getReceiverSocketId(userId) {
  return userSocketMap[userId];
}

const userSocketMap = {};

io.on('connection', (socket) => {
  const token = socket.handshake.auth.token;
  if (!token) {
    console.log('토큰이 제공되지 않았습니다.');
    return socket.disconnect();
  }

  try {
    const decoded = jwt.verify(token, process.env.ACCESS_TOKEN_SECRET);
    const userId = decoded.id;

    if (userId) userSocketMap[userId] = socket.id;

    io.emit('getOnlineUsers', Object.keys(userSocketMap));

    socket.on('disconnect', () => {
      console.log('disconnected', socket.id);
      delete userSocketMap[userId];
      io.emit('getOnlineUsers', Object.keys(userSocketMap));
    });
  } catch (error) {
    console.error('유효하지 않은 토큰:', error);
    return socket.disconnect();
  }
});

export { io, app, server };

Server는 Socket.IO 서버 객체이며, http 서버 위에 올려야 작동합니다.
userSocketMap은 현재 온라인 상태인 유저들의 socket.id를 userId 기준으로 저장합니다.
handshake.query.userId를 통해 클라이언트가 접속 시 전달한 userId를 확인할 수 있습니다.
io.emit('getOnlineUsers', ...)를 통해 현재 접속 중인 모든 유저에게 온라인 목록을 전송합니다.
연결이 끊기면 해당 유저를 userSocketMap에서 제거하고 다시 전체에 알립니다.

index.js 수정

기존에 express로만 서버를 실행했다면, 이제는 socket.js에서 만든 server 객체로 실행해야 합니다.

import { app, server } from './lib/socket.js';

// 기존 app.listen → server.listen 으로 변경
server.listen(PORT, () => {
    console.log('Server running on PORT:', PORT);
    connectToDB();
});

메시지 전송 시 소켓 사용 (메시지 컨트롤러)

유저가 메시지를 전송할 때, 해당 메시지를 받는 유저가 현재 접속 중이라면 실시간으로 전달합니다.

const receiverSocketId = getReceiverSocketId(receiverId);
if (receiverSocketId) {
    io.to(receiverSocketId).emit('newMessage', newMessage);
}

getReceiverSocketId()를 통해 수신자의 소켓 ID를 얻습니다.
io.to(socketId).emit(...)은 특정 유저에게만 메시지를 전송합니다.

클라이언트 측: 소켓 연결 (zustand)

useAuthStore

유저가 로그인할 때 소켓 연결을 열고, 로그아웃할 때는 연결을 끊는 함수를 만들어 두었으며, 로그인/로그아웃 시 해당 함수를 호출해주면 됩니다.

connectSocket: () => {
  const { authUser, accessToken } = get();
  if (!authUser || !accessToken || get().socket?.connected) return;

  const socket = io(BASE_URL, {
    auth: {
      token: accessToken,
    },
  });
  socket.connect();

  set({ socket });

  socket.on('getOnlineUsers', (userIds) => {
    set({ onlineUsers: userIds });
  });
},

disconnectSocket: () => {
  if (get().socket?.connected) get().socket.disconnect();
},

useChatStore

선택된 유저로부터 새로운 메시지를 수신할 때만 상태를 업데이트합니다.

subscribeToMessages: () => {
  const { selectedUser } = get();
  if (!selectedUser) return;

  const socket = useAuthStore.getState().socket;

  socket?.on('newMessage', (newMessage) => {
    const isMessageSentFromSelectedUser = newMessage.senderId === selectedUser._id;
    if (!isMessageSentFromSelectedUser) return;

    set({
      messages: [...get().messages, newMessage],
    });
  });
},

unsubscribeFromMessages: () => {
  const socket = useAuthStore.getState().socket;
  socket?.off('newMessage');
},

Cloudinary를 이용한 프로필 업데이트 기능 구현

Hyun Dev — Tue, 29 Apr 2025 19:55:44 +0900

사용자가 회원가입 시 또는 이후에 프로필 사진을 업로드할 수 있도록 하기 위해, 이미지 저장소로 Cloudinary를 연동하는 기능을 구현했습니다.

https://cloudinary.com/documentation/node_integration

Node.js SDK – Node.js Upload + Image, Video Transformations | Cloudinary

The Cloudinary Node.js SDK provides simple, yet comprehensive image and video upload, transformation, optimization, and delivery capabilities through the Cloudinary APIs, that you can implement using code that integrates seamlessly with your existing Node.

cloudinary.com

먼저 패키지를 설치합니다.

npm install cloudinary

Cloudinary 설정 및 환경변수 구성

.env 파일에 Cloudinary API 정보를 추가합니다.

CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

Cloudinary를 설정하는 모듈은 아래와 같이 작성했습니다.

// lib/cloudinary.js
import { v2 as cloudinary } from 'cloudinary';
import { config } from 'dotenv';

config();

cloudinary.config({
    cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
    api_key: process.env.CLOUDINARY_API_KEY,
    api_secret: process.env.CLOUDINARY_API_SECRET,
});

export default cloudinary;

프로필 업데이트 라우트 설정

router.put('/update-profile', protectRoute, updateProfile);

프로필 이미지 업로드 기능 구현

이미지를 base64 형식으로 클라이언트에서 전송받아 Cloudinary에 업로드한 후, 사용자 정보에 이미지 URL을 저장합니다.

export const updateProfile = async (req, res) => {
    try {
        const { profilePic } = req.body;
        const userId = req.user._id;

        if (!profilePic) {
            return res
                .status(400)
                .json({ message: '프로필 사진이 필요합니다.' });
        }

        const uploadResponse = await cloudinary.uploader.upload(profilePic);

        const updatedUser = await User.findByIdAndUpdate(
            userId,
            {
                profilePic: uploadResponse.secure_url,
            },
            { new: true }
        );

        res.status(200).json(updatedUser);
    } catch (error) {
        console.log('프로필 업데이트 중 오류 발생:', error);
        res.status(500).json({ message: '서버 오류가 발생했습니다.' });
    }
};

Postman 테스트

임의의 base64 데이터를 포함해 요청을 보내면, 아래와 같이 프로필이 정상적으로 업데이트되는 것을 확인할 수 있습니다.

아래와 같이 Cloudinary에도 이미지가 정상적으로 추가된 것을 확인할 수 있습니다.

Google 로그인 구현 (OAuth 2.0 + JWT + Zustand)

Hyun Dev — Thu, 27 Feb 2025 17:35:35 +0900

MERN todo 프로젝트에서 Google OAuth 2.0을 활용한 로그인 기능을 구현했습니다.
@react-oauth/google 라이브러리를 활용하여 클라이언트에서 Google 로그인 버튼을 만들고, 서버에서는 Google API를 이용해 사용자 정보를 받아와 JWT를 발급하는 방식으로 처리했습니다.

1. Google OAuth 로그인 흐름

클라이언트에서 useGoogleLogin 훅을 이용해 Google 로그인 요청
- @react-oauth/google 라이브러리에서 제공하는 useGoogleLogin 훅을 사용했습니다.
- 이 훅을 이용하면 Google 로그인 창을 띄우고, 로그인 성공 시 code를 반환받을 수 있습니다.
Google에서 code를 반환하면 이를 서버로 전송
- code는 Google OAuth 서버에서 발급하는 인증 코드로, 이를 백엔드로 보내야 합니다.
- 클라이언트에서는 response.code를 POST 요청의 body에 담아 서버로 전송합니다.
서버에서 Google API에 요청해 access_token을 받음
- 서버에서는 https://oauth2.googleapis.com/token 엔드포인트에 요청을 보냅니다.
- 이 요청을 통해 access_token과 refresh_token을 받을 수 있습니다.
access_token을 사용해 Google 사용자 정보를 가져옴
- access_token은 Google API에 접근하기 위한 토큰입니다.
- 이를 이용해 https://www.googleapis.com/oauth2/v2/userinfo 엔드포인트에서 사용자 정보를 가져왔습니다.
DB에서 해당 사용자가 있는지 확인하고 없으면 새로 생성
- 받은 사용자 정보(email, name, avatar 등)를 활용해 DB에서 해당 사용자를 찾습니다.
- 없다면 새로 생성하여 저장합니다.
서비스 전용 accessToken과 refreshToken을 생성하여 반환
- accessToken은 클라이언트에서 API 요청 시 사용됩니다.
- refreshToken은 httpOnly 쿠키에 저장하여 자동 로그인 및 토큰 갱신에 활용됩니다.

2. 서버: Google 로그인 API (/api/user/google)

서버에서는 express와 fetch를 활용하여 Google API에 요청하고, JWT를 생성하여 클라이언트에서 사용할 수 있도록 했습니다.

export async function googleLogin(req, res, next) {
    try {
        const { code } = req.body;

        if (!code) {
            return res
                .status(400)
                .json({ message: 'Google 인증 코드가 없습니다.' });
        }

        const tokenResponse = await fetch(
            'https://oauth2.googleapis.com/token',
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: new URLSearchParams({
                    client_id: process.env.GOOGLE_CLIENT_ID,
                    client_secret: process.env.GOOGLE_CLIENT_SECRET,
                    code,
                    grant_type: 'authorization_code',
                    redirect_uri: process.env.GOOGLE_REDIRECT_URI,
                }).toString(),
            }
        );

        const tokenData = await tokenResponse.json();
        const { access_token } = tokenData;

        if (!access_token) {
            return res.status(400).json({
                message: 'Google Access Token을 가져오지 못했습니다.',
            });
        }

        const userInfoResponse = await fetch(
            'https://www.googleapis.com/oauth2/v2/userinfo',
            {
                headers: { Authorization: `Bearer ${access_token}` },
            }
        );

        const userInfo = await userInfoResponse.json();
        const { id: googleId, email, name, picture } = userInfo;

        await connectToDB();

        let user = await User.findOne({ email });

        if (!user) {
            user = new User({
                googleId,
                email,
                name,
                avatar: picture,
            });
            await user.save();
        }

        const accessToken = generateAccessToken(user._id);
        const refreshToken = generateRefreshToken(user._id);

        res.cookie('refresh_token', refreshToken, {
            httpOnly: true,
            secure: true,
            sameSite: 'strict',
            maxAge: 24 * 60 * 60 * 1000,
        });

        res.json({
            _id: user.id,
            email: user.email,
            name: user.name,
            avatar: user.avatar,
            access_token: accessToken,
        });
    } catch (error) {
        console.error('Google 로그인 에러:', error);
        next(error);
    }
}

3. 클라이언트: Google 로그인 버튼 & API 요청

@react-oauth/google 라이브러리에서 제공하는 useGoogleLogin 훅을 사용하여 Google 로그인 기능을 구현했습니다.

이 훅을 이용하면 로그인 창을 띄우고, 로그인 성공 시 code를 반환받을 수 있습니다.

아래는 로그인 페이지에서 Google 로그인 버튼을 구현한 코드입니다.

import { useAuthStore } from '@/store/useAuthStore';
import { useGoogleLogin } from '@react-oauth/google';
import toast from 'react-hot-toast';
import { Button } from './ui/button';
import { Loader2 } from 'lucide-react';

export default function GoogleLoginButton() {
  const googleLogin = useAuthStore((state) => state.googleLogin);
  const isLoggingIn = useAuthStore((state) => state.isLoggingIn);

  const googleLoginHandler = useGoogleLogin({
    flow: 'auth-code',
    onSuccess: async (response) => {
      const code = response.code;
      await googleLogin(code);
    },
    onError: () => {
      toast.error('Google 로그인 실패');
    },
  });

  return (
    <Button
      type='button'
      className='flex items-center w-full gap-4 px-12 mb-4 bg-transparent rounded-full cursor-pointer'
      disabled={isLoggingIn}
      variant='outline'
      onClick={() => googleLoginHandler()}
    >
      <img src='/google.png' alt='google' className='w-5' />
      {isLoggingIn ? (
        <>
          <Loader2 className='size-5 animate-spin' />
          Loading...
        </>
      ) : (
        'Google 계정으로 로그인'
      )}
    </Button>
  );
}

4. 클라이언트: Google Client ID 설정 및 로그인 처리

로그인 페이지에서 Google 로그인 버튼을 렌더링하려면, GoogleOAuthProvider로 감싸야 합니다.

또한, 클라이언트에서 googleClientId를 백엔드에서 받아오는 방법을 사용하여, 배포 환경에 맞게 Google OAuth 2.0을 처리합니다.

import { useEffect } from 'react';
import { useAuthStore } from '@/store/useAuthStore';
import { Loader } from 'lucide-react';
import { GoogleOAuthProvider } from '@react-oauth/google';
import GoogleLoginButton from './GoogleLoginButton';
import { useShallow } from 'zustand/shallow';

export function LoginPage() {
  const { login, isLoggingIn, googleClientId, getGoogleClientId } =
    useAuthStore(
      useShallow((state) => ({
        login: state.login,
        isLoggingIn: state.isLoggingIn,
        googleClientId: state.googleClientId,
        getGoogleClientId: state.getGoogleClientId,
      }))
    );

  useEffect(() => {
    getGoogleClientId();
  }, [getGoogleClientId]);

  if (!googleClientId)
    return (
      <div className='flex items-center justify-center h-screen'>
        <Loader className='size-10 animate-spin' />
      </div>
    );

  return (
    <GoogleOAuthProvider clientId={googleClientId}>
      <GoogleLoginButton />
    </GoogleOAuthProvider>
  );
}

회원가입 및 로그인 기능 구현

Hyun Dev — Thu, 20 Feb 2025 07:34:07 +0900

프론트엔드에서 회원가입과 로그인 기능을 구현하면서 zustand 상태 관리와 axios 인스턴스를 활용하여 API 요청을 효율적으로 처리했습니다. 아래는 그 전체적인 흐름입니다.

1. Axios 인스턴스 설정

먼저 API 요청에 사용할 axios 인스턴스를 생성합니다. 개발/배포 환경에 따라 baseURL을 다르게 설정하고, 쿠키를 함께 전송할 수 있도록 withCredentials: true 옵션도 추가합니다.

import axios from 'axios';

export const axiosInstance = axios.create({
  baseURL:
    import.meta.env.MODE === 'development'
      ? 'http://localhost:3000/api'
      : '/api',
  withCredentials: true,
});

2. 회원가입 기능 구현

회원가입 요청은 zustand의 스토어 내부에 signup 함수를 정의해서 처리했습니다. 요청 전후 상태를 관리하기 위해 isSigningUp 값을 함께 사용하고 있습니다.

signup: async (data) => {
  set({ isSigningUp: true });
  try {
    const res = await axiosInstance.post('/auth/register', data);
    if (res.status === 201) {
      toast.success('회원가입이 완료되었습니다.');
      return true;
    }
    return false;
  } catch (error) {
    const err = error as AxiosError<{ message: string }>;
    const errorMessage = err.response?.data?.message || 'Unknown error occurred';
    toast.error(errorMessage);
    return false;
  } finally {
    set({ isSigningUp: false });
  }
},

회원가입 폼에서는 handleSubmit 함수 내에서 유효성 검사 후 signup 함수를 호출하며, 성공 시 로그인 페이지로 이동합니다.

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  const isValid = validateForm();
  if (isValid === true) {
    const isSuccess = await signup(formData);
    if (isSuccess) navigate('/login');
  }
};

3. 로그인 기능 구현

로그인 기능 역시 zustand 내부에서 처리하며, 성공 시 반환된 accessToken을 상태로 저장합니다.

login: async (data) => {
  set({ isLoggingIn: true });
  try {
    const res = await axiosInstance.post('/auth/login', data);
    set({ accessToken: res.data.accessToken });
    toast.success('로그인 성공');
  } catch (error) {
    const err = error as AxiosError<{ message: string }>;
    const errorMessage = err.response?.data?.message || 'Unknown error occurred';
    toast.error(errorMessage);
  } finally {
    set({ isLoggingIn: false });
  }
},

4. 로그인 유지 기능 구현

로그인 상태를 유지하려면 주기적으로 서버에 토큰을 확인하고, 이를 통해 사용자가 여전히 인증된 상태인지를 확인해야 합니다.

이를 위해 /auth/refresh-token 엔드포인트를 호출하여 쿠키에 저장된 refreshToken을 기반으로 새로운 accessToken을 받아옵니다.

1. checkAuth 함수 구현

checkAuth 함수는 앱이 로드될 때마다 서버로부터 새로운 액세스 토큰을 받아와 상태를 업데이트합니다. 이 함수는 useAuthStore 내부에서 정의됩니다.

checkAuth: async () => {
  set({ isCheckingAuth: true });
  try {
    const res = await axiosInstance.get('/auth/refresh-token');
    set({ accessToken: res.data.accessToken });
  } catch (error) {
    console.log('Error in checkAuth: ', error);
    set({ accessToken: null });
  } finally {
    set({ isCheckingAuth: false });
  }
},

checkAuth 함수는 로그인 상태를 확인하는 비동기 요청을 보내고, 서버에서 accessToken을 성공적으로 반환하면 이를 상태로 저장합니다. 만약 오류가 발생하면, accessToken을 null로 설정하여 로그아웃 상태를 만듭니다.

2. useEffect로 로그인 유지 처리

앱이 시작될 때마다 checkAuth를 호출하여 로그인 상태를 유지합니다. useEffect 훅을 사용하여 초기 렌더링 시에 checkAuth를 실행합니다.

import { Navigate, Route, Routes } from 'react-router-dom';
import HomePage from './pages/HomePage';
import SignupPage from './pages/SignupPage';
import LoginPage from './pages/LoginPage';
import { Toaster } from 'react-hot-toast';
import { useEffect } from 'react';
import { useAuthStore } from './store/useAuthStore';
import { useShallow } from 'zustand/shallow';
import { Loader } from 'lucide-react';

function App() {
  const { checkAuth, isCheckingAuth, accessToken } = useAuthStore(
    useShallow((state) => ({
      checkAuth: state.checkAuth,
      isCheckingAuth: state.isCheckingAuth,
      accessToken: state.accessToken,
    }))
  );

  useEffect(() => {
    checkAuth();
  }, [checkAuth]);

  if (isCheckingAuth && !accessToken)
    return (
      <div className='flex items-center justify-center h-screen'>
        <Loader className='size-10 animate-spin' />
      </div>
    );

  return (
    <>
      <Routes>
        <Route
          path='/'
          element={accessToken ? <HomePage /> : <Navigate to='/login' />}
        />
        <Route
          path='/signup'
          element={!accessToken ? <SignupPage /> : <Navigate to='/' />}
        />
        <Route
          path='/login'
          element={!accessToken ? <LoginPage /> : <Navigate to='/' />}
        />
      </Routes>
      <Toaster />
    </>
  );
}

export default App;

Todo CRUD API 구현하기

Hyun Dev — Wed, 19 Feb 2025 05:17:10 +0900

이번 글에서는 Todo CRUD 기능을 구현한 내용을 정리했습니다.
사용자의 할 일 목록을 추가, 조회, 수정, 삭제할 수 있도록 API를 만들었습니다.

1. 전체 목록 조회 (GET /todo)

export const getAllTodos = async (req, res) => {
    try {
        const todos = await Todo.find({ userId: req.user._id });

        if (!todos || todos.length === 0) {
            return res.status(404).json({
                message: '등록된 할 일이 없습니다.',
            });
        }

        res.status(200).json({
            message: '할 일 목록을 성공적으로 불러왔습니다.',
            todos,
        });
    } catch (error) {
        console.error('할 일 목록 가져오기 오류:', error);
        res.status(500).json({
            message: '서버 오류가 발생했습니다.',
        });
    }
};

find({ userID: req.user.id })를 사용해 해당 유저의 todo만 조회한다.

2. 할 일 추가 (POST /todo)

export const addTodo = async (req, res) => {
    const { title } = req.body;

    try {
        if (!title) {
            return res.status(400).json({
                message: '할 일 내용을 입력해 주세요.',
            });
        }

        const newTodo = new Todo({
            userId: req.user._id,
            title,
        });

        await newTodo.save();

        res.status(201).json({
            message: '할 일이 성공적으로 추가되었습니다.',
        });
    } catch (error) {
        console.error('할 일 추가 오류:', error);
        res.status(500).json({
            message: '서버 오류가 발생했습니다.',
        });
    }
};

새로운 Todo 객체를 생성한 후 DB에 저장.

3. 할 일 수정 (PUT /todo/:id)

export const updateTodo = async (req, res) => {
    const { id } = req.params;
    const { title, isCompleted } = req.body;

    try {
        const todo = await Todo.findById(id);

        if (todo.userId.toString() !== req.user._id.toString()) {
            return res.status(403).json({
                message: '권한이 없습니다.',
            });
        }

        todo.title = title || todo.title;

        if (isCompleted !== undefined) {
            todo.isCompleted = isCompleted;
        }

        await todo.save();

        res.status(200).json({
            message: '할 일이 업데이트 되었습니다.',
        });
    } catch (error) {
        console.error('할 일 업데이트 오류:', error);
        res.status(500).json({
            message: '서버 오류가 발생했습니다.',
        });
    }
};

findById로 해당 Todo를 찾고, 사용자 검증 후 수정 진행.
req.body.title이 있으면 제목 수정, isCompleted 값이 있으면 완료 여부 변경.
수정 후 "할 일이 업데이트 되었습니다." 메시지 반환.

5. 할 일 삭제 (DELETE /todo/:id)

export const deleteTodo = async (req, res) => {
    const { id } = req.params;

    try {
        const todo = await Todo.deleteOne({
            _id: id,
            userId: req.user._id,
        });

        if (!todo) {
            return res.status(404).json({
                message: '할 일을 찾을 수 없습니다.',
            });
        }

        res.status(200).json({
            message: '할 일이 삭제되었습니다.',
        });
    } catch (error) {
        console.error('할 일 삭제 오류:', error);
        res.status(500).json({
            message: '서버 오류가 발생했습니다.',
        });
    }
};

deleteOne({ _id, userID })를 사용해 Todo 삭제.
삭제 성공 시 "할 일이 삭제되었습니다." 메시지 반환.

전체 코드

import Todo from '../models/todo.model.js';

export const getAllTodos = async (req, res) => {
    try {
        const todos = await Todo.find({ userId: req.user._id });

        if (!todos) {
            return res.status(404).json({
                message: '할 일 목록 가져오기 오류',
            });
        }

        res.status(200).json({
            message: '할 일 목록을 가져왔습니다.',
            todos,
        });
    } catch (error) {
        console.error('할 일 목록 가져오기 오류:', error);
        res.status(500).json({
            message: '서버 오류가 발생했습니다.',
        });
    }
};

export const addTodo = async (req, res) => {
    const { title } = req.body;

    try {
        if (!title) {
            return res.status(400).json({
                message: '내용을 입력해 주세요.',
            });
        }

        const newTodo = new Todo({
            userId: req.user._id,
            title,
        });

        await newTodo.save();

        res.status(201).json({
            message: '할 일이 추가되었습니다.',
        });
    } catch (error) {
        console.error('할 일 추가 오류:', error);
        res.status(500).json({
            message: '서버 오류가 발생했습니다.',
        });
    }
};

export const updateTodo = async (req, res) => {
    const { id } = req.params;
    const { title, isCompleted } = req.body;

    try {
        const todo = await Todo.findById(id);

        if (todo.userId.toString() !== req.user._id.toString()) {
            return res.status(403).json({
                message: '권한이 없습니다.',
            });
        }

        todo.title = title || todo.title;

        if (isCompleted !== undefined) {
            todo.isCompleted = isCompleted;
        }

        await todo.save();

        res.status(200).json({
            message: '할 일이 업데이트 되었습니다.',
        });
    } catch (error) {
        console.error('할 일 업데이트 오류:', error);
        res.status(500).json({
            message: '서버 오류가 발생했습니다.',
        });
    }
};

export const deleteTodo = async (req, res) => {
    const { id } = req.params;

    try {
        const todo = await Todo.deleteOne({
            _id: id,
            userId: req.user._id,
        });

        if (!todo) {
            return res.status(404).json({
                message: '할 일을 찾을 수 없습니다.',
            });
        }

        res.status(200).json({
            message: '할 일이 삭제되었습니다.',
        });
    } catch (error) {
        console.error('할 일 삭제 오류:', error);
        res.status(500).json({
            message: '서버 오류가 발생했습니다.',
        });
    }
};

JWT 인증 방식 개선: 쿠키 기반에서 토큰 기반으로 전환

Hyun Dev — Tue, 18 Feb 2025 11:26:04 +0900

기존에는 JWT를 이용해 Access Token을 생성한 후 쿠키에 저장하여 인증하는 방식으로 로그인 및 Todo 관련 API를 Protected Route 로 처리하였습니다.

하지만 정보를 찾아본 결과 쿠키 기반 인증 방식에는 보안 취약점이 있기 때문에 이를 개선하고자 토큰 기반 인증 방식으로 변경하였습니다.

쿠키 기반 인증의 보안 문제

쿠키는 오랜 시간 유지될 수 있음 → 토큰이 탈취되면 장기간 악용될 가능성이 있음
자바스크립트로 쿠키 접근 가능 → XSS(Cross-Site Scripting) 공격에 취약함
CSRF(Cross-Site Request Forgery) 공격 가능 → 악성 사이트에서 사용자의 인증된 요청을 위장할 수 있음

이러한 이유로 보안상 쿠키 기반 인증은 많이 사용되지 않는 방식이라고 합니다.

토큰 기반 인증 방식으로 변경

토큰 기반 인증으로 변경하기 위해 여러 가지 방식을 조사한 결과, Access Token을 브라우저의 Local Storage나 Session Storage에 저장하는 것도 보안에 취약하다는 점을 알게 되었습니다.

1. Access Token을 Local Storage / Session Storage에 저장하면?

XSS(Cross-Site Scripting) 공격에 취약함
→ 악성 스크립트가 브라우저에서 실행되면 저장된 토큰을 탈취할 수 있습니다.
Local Storage는 브라우저를 껐다 켜도 유지됨
→ 해커가 한 번 탈취하면 장기간 사용할 수 있습니다.

2. 가장 안전한 방식: Access Token을 메모리(Private 변수)에 저장

이러한 보안 문제를 방지하기 위해 Access Token은 클라이언트의 메모리(자바스크립트의 Private 변수)에 저장하는 것이 가장 안전하다고 판단하였습니다.

메모리(Private 변수) 저장의 장점

XSS 공격으로 토큰을 탈취할 수 없습니다.
CSRF 공격 위험이 없습니다.

하지만 메모리에 저장된 토큰은 새로고침 시 사라지는 단점이 있습니다.
이를 해결하기 위해 Refresh Token을 이용해 Access Token을 갱신하는 API를 추가하였습니다.

3. Refresh Token을 활용한 로그인 유지

Access Token은 클라이언트 메모리에 저장함
Refresh Token은 HTTPOnly 쿠키에 저장함 (클라이언트에서 접근 불가)
Access Token이 만료되거나 새로고침하면, Refresh Token을 이용해 새로운 Access Token을 발급함

우선, 서버와 클라이언트 측 모두에서 해당 방식으로 구현해 본 적이 없었기 때문에 전체적인 흐름을 먼저 파악하였습니다.

로그인 시
- Access Token(짧은 유효기간)과 Refresh Token(긴 유효기간)을 함께 발급
- Access Token은 클라이언트 측에서 zustand를 이용해 메모리(Private 변수)에 저장
- Refresh Token은 서버 측에서 HTTPOnly 쿠키에 저장
API 요청 시
- 요청할 때마다 zustand에 저장된 Access Token을 Authorization 헤더에 포함하여 전송
Access Token 만료 시
- Access Token이 없거나 만료되면, Refresh Token을 이용해 새로운 Access Token을 발급
- 새로운 Access Token을 받아 zustand 상태를 갱신하여 인증 유지
새로고침 시
- zustand에 저장된 Access Token은 사라짐
- Refresh Token을 이용해 자동으로 새로운 Access Token을 발급 및 저장하여 로그인 상태 유지

서버 측 변경 및 추가점

1. 로그인 API 수정

기존 로그인 API에서는 JWT를 생성한 후 쿠키에 저장하는 방식이었지만, 토큰 기반 인증 방식으로 변경하기 위해 Access Token과 Refresh Token을 함께 발급하는 방식으로 수정하였습니다.

변경된 로그인 API 동작 방식

로그인 요청이 들어오면, 이메일과 비밀번호를 확인합니다.
유효한 사용자인 경우 Access Token과 Refresh Token을 생성합니다.
Refresh Token은 HTTPOnly 쿠키에 저장하여 보안성을 높입니다.
Access Token은 클라이언트에서 활용할 수 있도록 JSON 형태로 응답합니다.

export const login = async (req, res) => {
    const { email, password } = req.body;

    try {
        const user = await User.findOne({ email });
        if (!user || !(await bcrypt.compare(password, user.password))) {
            return res.status(400).json({ message: '이메일 또는 비밀번호가 올바르지 않습니다.' });
        }

        const accessToken = generateAccessToken(user._id);
        const refreshToken = generateRefreshToken(user._id);

        res.cookie('refresh-token', refreshToken, {
            httpOnly: true,
            secure: process.env.NODE_ENV === 'production',
            sameSite: 'strict',
            maxAge: 7 * 24 * 60 * 60 * 1000,
        });

        res.json({
            accessToken,
            user: {
                id: user._id,
                email: user.email,
            },
        });
    } catch (error) {
        console.error('로그인 오류:', error);
        res.status(500).json({ message: '서버 오류가 발생했습니다.' });
    }
};

2. 로그아웃 API 수정

로그아웃 API는 기존에 access_token을 clearCookie 하던 방식에서, refresh_token을 clearCookie 하도록 변경되었습니다.

export const logout = async (req, res) => {
    res.clearCookie('refresh-token', {
        httpOnly: true,
        secure: process.env.NODE_ENV === 'production',
        sameSite: 'strict',
    });

    res.status(200).json({ message: '로그아웃되었습니다.' });
};

3. Access Token 재발급 기능 추가

기존에는 Access Token이 만료되면 별도의 처리 없이 로그아웃되었지만, 이제 Refresh Token을 이용해 새로운 Access Token을 발급할 수 있도록 API를 추가하였습니다.

HTTPOnly 쿠키에 저장된 refresh_token을 이용하여 새로운 Access Token을 재발급할 수 있습니다.

export const refreshAccessToken = async (req, res) => {
    const refreshToken = req.cookies['refresh-token'];

    try {
        if (!refreshToken) {
            return res.status(401).json({
                message: 'Refresh Token이 없습니다. 다시 로그인해주세요.',
            });
        }

        const decoded = jwt.verify(
            refreshToken,
            process.env.REFRESH_TOKEN_SECRET
        );

        if (!decoded) {
            return res.status(403).json({
                message: 'Refresh Token이 유효하지 않습니다.',
            });
        }

        const user = await User.findById(decoded.id);

        if (!user) {
            return res.status(404).json({
                message: '사용자를 찾을 수 없습니다.',
            });
        }

        const newAccessToken = generateAccessToken(user._id);

        res.json({
            accessToken: newAccessToken,
        });
    } catch (error) {
        console.error('Access Token 갱신 오류:', error);
        res.status(500).json({
            message: '서버 오류가 발생했습니다.',
        });
    }
};

4. Auth 라우트 수정

기존 auth 라우트에 refreshAccessToken 엔드포인트를 추가하였습니다.

이제 클라이언트는 이 엔드포인트를 통해 새로운 Access Token을 발급받을 수 있습니다.

import express from 'express';
import { register, login, logout, refreshAccessToken } from '../controllers/auth.controller.js';

const router = express.Router();

router.post('/login', login);

router.post('/register', register);

router.post('/logout', logout);

router.get('/refresh-token', refreshAccessToken); // 추가

export default router;

5. Protected Route 인증 방식 변경

기존에는 req.cookies.access_token을 확인했지만,
이제 요청 헤더의 Authorization에 Bearer {access_token}을 포함하여 인증하는 방식으로 변경하였습니다.

import jwt from 'jsonwebtoken';
import User from '../models/user.model.js';

export const protectRoute = async (req, res, next) => {
    const authHeader = req.headers.authorization;

    if (!authHeader || !authHeader.startsWith('Bearer')) {
        return res.status(401).json({ message: '토큰이 없습니다.' });
    }

    const token = authHeader.split(' ')[1];

    try {
        const decoded = jwt.verify(token, process.env.ACCESS_TOKEN_SECRET);
        const user = await User.findById(decoded.id);

        if (!user) {
            return res.status(401).json({ message: '사용자를 찾을 수 없습니다.' });
        }

        req.user = user;
        next();
    } catch (error) {
        return res.status(401).json({ message: '토큰이 유효하지 않습니다.' });
    }
};

Bearer 접두어를 확인하여 올바른 형식의 토큰인지 검사.
jwt.verify()를 사용하여 토큰을 해독하고, 인증된 사용자의 정보를 req.user에 저장.

이제 Protected Route에 대한 API 요청 시 Authorization 헤더에 Bearer {access_token}을 포함해야 합니다.

// 예제
fetch('http://localhost:3000/api/todos', {
    method: 'GET',
    headers: {
        'Authorization': `Bearer ${accessToken}`,
        'Content-Type': 'application/json',
    },
    credentials: 'include',
});

MongoDB 연결 및 회원가입 구현

Hyun Dev — Mon, 17 Feb 2025 11:56:38 +0900

이번 글에서는 Mongoose를 이용해 데이터베이스 모델을 정의하고, 회원가입 API를 작성 한 내용을 정리하겠습니다.

1.MongoDB 스키마 정의

먼저, MongoDB에서 사용할 데이터 모델(스키마)을 정의합니다.
데이터는 MongoDB에 저장되며, 이를 Mongoose의 Schema를 통해 관리합니다.

1-1.models/user.model.js

import mongoose from 'mongoose';

const userSchema = new mongoose.Schema({
    googleId: {
        type: String,
        unique: true,
        sparse: true,
    },

    email: {
        type: String,
        required: true,
        unique: true,
    },
    password: {
        type: String,
        required: true,
        minlength: 6,
    },
});

const User = mongoose.model('User', userSchema);

export default User;

1-2.models/todo.model.js

import mongoose from 'mongoose';

const todoSchema = new mongoose.Schema({
    userId: {
        type: mongoose.Schema.Types.ObjectId,
        ref: 'User',
        required: true,
    },
    title: {
        type: String,
        required: true,
    },

    isCompleted: {
        type: Boolean,
        default: false,
    },
});

const Todo = mongoose.model('Todo', todoSchema);

export default Todo;

userID: MongoDB의 ObjectId 타입으로 저장되며, User 모델을 참조함 (ref: 'User')

2.MongoDB 연결

데이터베이스에 연결하기 위해 MongoDB의 URI를 환경변수에서 가져와 연결합니다.

import mongoose from 'mongoose';

const connection = { isConnected: null };

export const connectToDB = async () => {
    try {
        if (connection.isConnected) {
            return;
        }
        const db = await mongoose.connect(process.env.MONGO_URI);
        connection.isConnected = db.connections[0].readyState;
    } catch (error) {
        console.log("데이터베이스에 연결할 수 없습니다: ", error);
    }
};

.env 파일에서 MONGO_URI를 가져와 MongoDB에 연결
이미 연결된 경우 재연결 방지
연결 실패 시 에러 메시지 출력

3.controllers/auth.controller.js: 회원가입 API 구현

사용자가 이메일과 비밀번호를 입력하면 이를 DB에 저장하는 기능입니다.

우선 req.body에서 클라이언트가 보낸 JSON 데이터(email, password)를 사용할 수 있도록,

app.js에 app.use(express.json()); 한 줄을 추가해야 합니다.

import { createError } from '../utils/error.js';
import { connectToDB } from '../utils/connect.js';
import User from '../models/userModel.js';
import bcrypt from 'bcryptjs';

export const register = async (req, res) => {
    const { email, password, passwordCheck } = req.body;

    try {
        if (!email || !password || !passwordCheck) {
            return res
                .status(400)
                .json({ message: '모든 필수 항목을 입력해 주세요.' });
        }

        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

        if (!emailRegex.test(email)) {
            return res.status(400).json({
                message: '이메일 형식이 올바르지 않습니다.',
            });
        }

        if (password.length < 6) {
            return res
                .status(400)
                .json({ message: '비밀번호는 최소 6자 이상이어야 합니다.' });
        }

        if (password !== passwordCheck) {
            return res.status(400).json({
                message: '비밀번호와 비밀번호 확인이 일치하지 않습니다.',
            });
        }

        const existingUser = await User.findOne({ email });
        if (existingUser) {
            return res
                .status(400)
                .json({ message: '이미 존재하는 이메일입니다.' });
        }

        const salt = await bcrypt.genSalt(10);
        const hashedPassword = await bcrypt.hash(password, salt);

        const newUser = new User({
            email,
            password: hashedPassword,
        });
        await newUser.save();

        res.status(201).json({
            message: '회원가입이 완료되었습니다.',
        });
    } catch (error) {
        console.error('회원가입 오류:', error);
        res.status(500).json({
            message: '서버 오류가 발생했습니다.',
        });
    }
};

export const login = async(req, res) => {};

export const logout = async(req, res) => {};

bcrypt.genSaltSync(10); → 랜덤한 솔트(Salt) 값을 생성
bcrypt.hashSync(req.body.password, salt); → 솔트를 사용하여 비밀번호를 해싱(암호화)

그리고 newUser.save()를 통해 MongoDB에 사용자 정보를 저장합니다.

4.Postman으로 회원가입 테스트 및 DB 확인

Postman

Postman 테스트

MongoDB

Node.js 서버 초기 설정 및 라우팅 구성

Hyun Dev — Mon, 17 Feb 2025 09:36:12 +0900

MERN 스택을 활용하여 간단한 Todo 앱을 만들려고 합니다.

이번 포스팅에서는 Node.js 초기 프로젝트 설정과 Auth 및 Todo 라우팅 구성, 그리고 controllers 폴더까지 구현하는 과정을 정리합니다.

1. 프로젝트 초기화

먼저 프로젝트를 초기화하기 위해 npm init -y 명령을 실행하여 package.json을 생성합니다.

{
  "name": "todo",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon src/index.js",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

nodemon 설치 후 scripts에 "dev": "nodemon src/index.js" 추가 (저장 시 자동 반영)

이제 npm run dev를 실행하면 nodemon이 적용되어 코드 변경 시 자동으로 서버가 재시작됩니다.

그리고 필요한 패키지를 설치하고 ES 모듈(import 방식)을 사용하기 위해 type: module을 추가합니다.

{
    "name": "backend",
    "version": "1.0.0",
    "main": "index.js",
    "scripts": {
        "dev": "nodemon src/index.js"
    },
    "keywords": [],
    "author": "",
    "type": "module",
    "license": "ISC",
    "description": "",
    "dependencies": {
        "bcryptjs": "^3.0.2",
        "cookie-parser": "^1.4.7",
        "cors": "^2.8.5",
        "dotenv": "^16.5.0",
        "express": "^5.1.0",
        "jsonwebtoken": "^9.0.2",
        "mongoose": "^8.14.1"
    },
    "devDependencies": {
        "nodemon": "^3.1.10"
    }
}

2. Express 서버 설정 (app.js)

import express from 'express';

import authRoutes from './routes/auth.route.js';
import todoRoutes from './routes/todo.route.js';

import dotenv from 'dotenv';

dotenv.config();
const app = express();
const PORT = process.env.PORT || 3000;

app.use('/api/auth', AuthRoute);
app.use('/api/todo', TodoRoute);

app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

현재는 auth 및 todo 라우터 설정을 구성한 상태입니다.

3. Auth 라우터 설정 (routes/auth.route.js)

import express from 'express';
import { register, login, logout } from '../controllers/auth.controller.js';

const router = express.Router();

router.post('/login', login);
router.post('/register', register);
router.post('/logout', logout);

export default router;

컨트롤러 파일 (controllers/auth.controller.js)

controllers/ 폴더는 라우터에서 요청을 처리하는 함수들을 모아두는 곳입니다.

export const register = async (req, res) => {};

export const login = async (req, res) => {};

export const logout = async (req, res) => {};

현재 컨트롤러 내부 로직은 작성하지 않았으며, Postman으로 간단한 API 테스트만 진행했습니다.

5. Todo 라우터 설정 (routes/todo.route.js)

import express from 'express';
import { getAllTodos, getTodo, updateTodo, deleteTodo, addTodo } from '../controllers/todo.controller.js';

const router = express.Router();

router.get('/', getAllTodos); // 모든 Todo 조회

router.post('/', addTodo); // Todo 추가

router.put('/:id', updateTodo); // 특정 Todo 수정

router.get('/:id', getTodo); // 특정 Todo 조회

router.delete('/:id', deleteTodo); // 특정 Todo 삭제

export default router;

컨트롤러 파일(controllers/todo.controller.js)

export const getAllTodos = async (req, res) => {};

export const addTodo = async (req, res) => {};

export const updateTodo = async (req, res) => {};

export const getTodo = async (req, res) => {};

export const deleteTodo = async (req, res) => {};

현재 controllers/todo.controller.js도 컨트롤러 로직은 작성하지 않았고, Postman을 이용해 라우팅이 정상적으로 동작하는지 테스트하였습니다.

쿠키와 세션을 활용한 로그인 구현 및 보안 개선

Hyun Dev — Mon, 20 Jan 2025 22:05:38 +0900

1. 클라이언트 요청의 한계

클라이언트가 서버에 요청을 보낼 때, 누가 요청했는지 정확히 알기 어렵습니다.
IP 주소나 브라우저 정보를 통해 일부 확인할 수 있지만, 같은 IP를 여러 컴퓨터가 공유하거나 한 컴퓨터를 여러 사람이 사용할 수도 있습니다.

2. 로그인으로 해결하기

로그인은 쿠키와 세션을 이용해 사용자를 식별합니다.
로그인 후 새로 고침해도 로그아웃되지 않는 이유는 서버가 사용자를 기억하고 있기 때문입니다.
서버는 응답 시 쿠키를 전송하고, 브라우저는 이를 저장해 요청 시마다 자동으로 쿠키를 포함해 보냅니다.
서버는 요청에 포함된 쿠키를 읽어 사용자를 식별합니다.

3. 쿠키의 특징

쿠키는 단순한 '키-값' 형태입니다.
브라우저는 쿠키를 자동으로 처리하며, 서버에서 쿠키를 전송하는 코드만 작성하면 됩니다.
쿠키는 요청 헤더에 담겨 전송되고, 브라우저는 응답 헤더에 따라 쿠키를 저장합니다.

쿠키 기반 간단한 로그인 구현(개선 전)

HTML 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>쿠키 & 세션 이해하기</title>
</head>
<body>
    <form action="/login">
        <input type="text" id="name" name="name" placeholder="이름을 입력하세요" required>
        <button type="submit">로그인</button>
    </form>
</body>
</html>

Node.js 서버 코드

const http = require('http');
const fs = require('fs').promises;
const path = require('path');

const PORT = 8080;
const COOKIE_PATH = '/';

// 쿠키 파싱 함수
const parseCookies = (cookie = '') =>
    cookie
        .split(';')
        .map((v) => v.split('='))
        .reduce((acc, [k, v]) => {
            acc[k.trim()] = decodeURIComponent(v);
            return acc;
        }, {});

// 서버 생성
const server = http.createServer(async (request, response) => {
    const cookies = parseCookies(request.headers.cookie);

    if (request.url.startsWith('/login')) {
        handleLogin(request, response);
    } else if (cookies.name) {
        greetUser(response, cookies.name);
    } else {
        serveHtml(response);
    }
});

// 로그인 요청 처리
const handleLogin = (request, response) => {
    const url = new URL(request.url, `http://localhost:${PORT}`);
    const name = url.searchParams.get('name');

    if (!name) {
        response.writeHead(400, { 'Content-Type': 'text/plain; charset=utf-8' });
        response.end('이름이 제공되지 않았습니다.');
        return;
    }

    const expires = new Date();
    expires.setMinutes(expires.getMinutes() + 5);

    response.writeHead(302, {
        Location: '/',
        'Set-Cookie': `name=${encodeURIComponent(name)}; Expires=${expires.toGMTString()}; HttpOnly; Path=${COOKIE_PATH}`,
    });
    response.end();
};

// 사용자 환영 메시지
const greetUser = (response, name) => {
    response.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' });
    response.end(`${name}님 안녕하세요.`);
};

// HTML 파일 제공
const serveHtml = async (response) => {
    try {
        const filePath = path.join(__dirname, 'cookie.html');
        const data = await fs.readFile(filePath);

        response.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
        response.end(data);
    } catch (err) {
        response.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8' });
        response.end(`파일 읽기 실패: ${err.message}`);
    }
};

// 서버 시작
server.listen(PORT, () => {
    console.log(`${PORT}번 포트에서 서버가 실행 중입니다.`);
});

1. parseCookies 함수

parseCookies는 쿠키 문자열을 객체로 변환하는 함수입니다.

예를 들어, 쿠키 문자열이 아래와 같다면

"name=John; age=30"

다음과 같은 객체를 반환합니다.

{ name: "John", age: "30" }

2. 쿠키 옵션

쿠키는 서버와 클라이언트 간 상태를 관리하기 위해 사용되며, 몇 가지 중요한 옵션이 있습니다.

HttpOnly: JavaScript가 쿠키에 접근하지 못하도록 설정.
- 이를 통해 XSS 공격을 방지할 수 있습니다.
Expires: 쿠키의 만료 시간을 지정.
- 예를 들어, 만료 시간이 지나면 브라우저가 쿠키를 삭제합니다.
- 세션 쿠키로 사용하려면 Expires를 설정하지 않습니다.
Path: 쿠키가 유효한 경로를 지정.
- 기본값은 쿠키를 설정한 경로이며, 특정 경로에서만 쿠키가 유효하도록 설정할 수 있습니다.

쿠키와 관련된 상세한 옵션이나 사용 방법은 아래에서 확인할 수 있습니다.

https://ko.javascript.info/cookie

쿠키와 document.cookie

ko.javascript.info

문제점

쿠키 기반의 로그인 방식은 몇 가지 보안 문제를 가질 수 있습니다.

브라우저의 Application 탭에서 쿠키가 쉽게 노출됩니다.

예를 들어, 사용자의 이름, 비밀번호 등 개인정보를 쿠키에 저장하는 것은 부적절합니다.

쿠키는 클라이언트 측에서 쉽게 접근할 수 있으므로, 민감한 데이터가 노출될 위험이 있습니다.

민감한 정보를 쿠키에 저장하지 않고, 서버가 관리하도록 설계해야 합니다.

쿠키에는 민감한 데이터를 저장하지 않고, 세션 ID만 저장합니다.
세션 ID를 통해 사용자를 식별하고, 실제 민감한 정보는 서버에서만 관리합니다.
브라우저는 세션 ID를 이용해 서버와 통신하며, 모든 민감한 데이터는 서버의 세션에 저장됩니다.

세션 기반 로그인 코드(개선 후)

민감한 정보를 쿠키에 저장하지 않고, 세션 ID를 쿠키에 저장하며 사용자 정보를 서버에서 관리합니다.

const http = require('http');
const fs = require('fs').promises;
const path = require('path');

const PORT = 8080;
const COOKIE_PATH = '/';
const session = {};

// 쿠키 파싱 함수
const parseCookies = (cookie = '') =>
    cookie
        .split(';')
        .map((v) => v.split('='))
        .reduce((acc, [k, v]) => {
            acc[k.trim()] = decodeURIComponent(v);
            return acc;
        }, {});

// 서버 생성
const server = http.createServer(async (request, response) => {
    const cookies = parseCookies(request.headers.cookie);

    if (request.url.startsWith('/login')) {
        handleLogin(request, response);
    } else if (cookies.session && session[cookies.session]?.expires > new Date()) {
        greetUser(response, cookies.session);
    } else {
        serveHtml(response);
    }
});

// 로그인 요청 처리
const handleLogin = (request, response) => {
    const url = new URL(request.url, `http://localhost:${PORT}`);
    const name = url.searchParams.get('name');

    if (!name) {
        response.writeHead(400, { 'Content-Type': 'text/plain; charset=utf-8' });
        response.end('이름이 제공되지 않았습니다.');
        return;
    }

    const sessionId = String(Date.now());
    const expires = new Date();
    expires.setMinutes(expires.getMinutes() + 5);

    session[sessionId] = { name, expires };

    response.writeHead(302, {
        Location: '/',
        'Set-Cookie': `session=${sessionId}; Expires=${expires.toGMTString()}; HttpOnly; Path=${COOKIE_PATH}`,
    });
    response.end();
};

// 사용자 환영 메시지
const greetUser = (response, sessionId) => {
    const { name } = session[sessionId];
    response.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8;' });
    response.end(`${name}님 안녕하세요.`);
};

// HTML 파일 제공
const serveHtml = async (response) => {
    try {
        const filePath = path.join(__dirname, 'cookie.html');
        const data = await fs.readFile(filePath);
        response.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
        response.end(data);
    } catch (err) {
        response.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8' });
        response.end(`파일 읽기 실패: ${err.message}`);
    }
};

// 서버 시작
server.listen(PORT, () => {
    console.log(`${PORT}번 포트에서 서버가 실행 중입니다.`);
});

Node.js로 RESTful Server 만들어보기

Hyun Dev — Mon, 13 Jan 2025 20:05:09 +0900

HTML 코드는 간단하게 작성되어 있어, 이 블로그 글에 첨부하지 않을 예정입니다.
아래 깃허브 주소를 통해 확인해주세요.

https://github.com/GangHyun95/restful-api-practice

GitHub - GangHyun95/restful-api-practice: practice

practice. Contribute to GangHyun95/restful-api-practice development by creating an account on GitHub.

github.com

RESTful Server란?

RESTful Server는 REST 규칙을 잘 준수하는 API 서버를 의미합니다. REST는 자원을 URL로 표현하고, HTTP 메서드(GET, POST, PUT, DELETE 등)를 활용하여 CRUD(Create, Read, Update, Delete) 작업을 수행하는 구조를 따릅니다.

예를 들어

/users URL에 GET 요청을 보내면 모든 사용자 목록을 조회할 수 있습니다.
/user/:id URL에 PUT 요청을 보내면 특정 사용자를 수정할 수 있습니다.

서버 코드

GET 요청: 사용자 목록 제공
POST 요청: 새 사용자 추가
PUT 요청: 사용자 정보 수정
DELETE 요청: 사용자 삭제

const http = require('http');
const fs = require('fs').promises;
const path = require('path');

const users = {}; // 사용자 데이터를 저장할 메모리 객체

const sendResponse = (res, statusCode, contentType, data) => {
    res.writeHead(statusCode, { 'Content-Type': `${contentType}; charset=utf-8` });
    res.end(data);
};

const handleFileRequest = async (res, filePath, contentType) => {
    try {
        const data = await fs.readFile(filePath);
        sendResponse(res, 200, contentType, data);
    } catch (error) {
        sendResponse(res, 404, 'text/plain', 'NOT FOUND');
    }
};

// GET 요청 처리
const handleGetRequest = async (req, res) => {
    if (req.url === '/') {
        return handleFileRequest(res, path.join(__dirname, 'restFront.html'), 'text/html');
    } else if (req.url === '/users') {
        return sendResponse(res, 200, 'application/json', JSON.stringify(users));
    }
    return handleFileRequest(res, path.join(__dirname, req.url), 'application/octet-stream');
};

// POST 요청 처리
const handlePostRequest = (req, res) => {
    if (req.url === '/user') {
        let body = '';
        req.on('data', (data) => {
            body += data;
        });
        req.on('end', () => {
            try {
                const { name } = JSON.parse(body);
                const id = Date.now();
                users[id] = name;
                sendResponse(res, 201, 'text/plain', '등록 성공');
            } catch (error) {
                sendResponse(res, 400, 'text/plain', 'Invalid JSON');
            }
        });
    } else {
        sendResponse(res, 404, 'text/plain', 'NOT FOUND');
    }
};

// PUT 요청 처리
const handlePutRequest = (req, res) => {
    if (req.url.startsWith('/user/')) {
        const key = req.url.split('/')[2];
        let body = '';
        req.on('data', (data) => {
            body += data;
        });
        req.on('end', () => {
            try {
                const { name } = JSON.parse(body);
                if (users[key]) {
                    users[key] = name;
                    sendResponse(res, 200, 'application/json', JSON.stringify(users));
                } else {
                    sendResponse(res, 404, 'text/plain', 'User not found');
                }
            } catch (error) {
                sendResponse(res, 400, 'text/plain', 'Invalid JSON');
            }
        });
    } else {
        sendResponse(res, 404, 'text/plain', 'NOT FOUND');
    }
};

// DELETE 요청 처리
const handleDeleteRequest = (req, res) => {
    if (req.url.startsWith('/user/')) {
        const key = req.url.split('/')[2];
        if (users[key]) {
            delete users[key];
            sendResponse(res, 200, 'application/json', JSON.stringify(users));
        } else {
            sendResponse(res, 404, 'text/plain', 'User not found');
        }
    } else {
        sendResponse(res, 404, 'text/plain', 'NOT FOUND');
    }
};

http.createServer(async (req, res) => {
    try {
        console.log(req.method, req.url);

        if (req.method === 'GET') {
            await handleGetRequest(req, res);
        } else if (req.method === 'POST') {
            handlePostRequest(req, res);
        } else if (req.method === 'PUT') {
            handlePutRequest(req, res);
        } else if (req.method === 'DELETE') {
            handleDeleteRequest(req, res);
        } else {
            sendResponse(res, 405, 'text/plain', 'Method Not Allowed');
        }
    } catch (error) {
        console.error(error);
        sendResponse(res, 500, 'text/plain', 'Internal Server Error');
    }
}).listen(8080, () => {
    console.log('8080번 포트에서 서버 대기 중입니다.');

req.on('data', ...)

Node.js의 HTTP 서버는 요청 데이터를 스트림(Stream)으로 처리합니다.

클라이언트에서 전송한 데이터가 한 번에 도착하지 않고, 조각(chunk) 단위로 나누어 도착합니다. 이 데이터를 처리하기 위해 req.on('data', ...) 이벤트를 사용합니다.

let body = '';
req.on('data', (data) => {
    body += data; // 들어오는 데이터 조각을 누적
});
req.on('end', () => {
    console.log('데이터 수신 완료:', body);
});

큰 데이터 처리: 요청 데이터가 클 경우, 데이터를 한꺼번에 메모리에 로드하면 비효율적입니다. 스트림 처리를 통해 메모리 사용량을 줄이고 효율적으로 데이터를 처리합니다.
비동기 처리: 데이터를 조각 단위로 처리하여, I/O 작업의 효율성을 극대화합니다.

클라이언트 코드

사용자 목록 조회 (GET)
사용자 추가 (POST)
사용자 수정 (PUT)
사용자 삭제 (DELETE)

// GET
async function fetchUsers() {
    try {
        const response = await fetch('/users');
        if (!response.ok) {
            throw new Error('Failed to fetch users: ' + response.statusText);
        }
        return await response.json();
    } catch (error) {
        console.error(error);
        alert('사용자 목록을 가져오는 데 실패했습니다.');
        return {};
    }
}

// PUT 
async function updateUser(key, name) {
    try {
        const response = await fetch(`/user/${key}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ name }),
        });
        if (!response.ok) {
            throw new Error('Failed to update user: ' + response.statusText);
        }
    } catch (error) {
        console.error(error);
        alert('사용자 수정에 실패했습니다.');
    }
}

// DELETE
async function deleteUser(key) {
    try {
        const response = await fetch(`/user/${key}`, {
            method: 'DELETE',
        });
        if (!response.ok) {
            throw new Error('Failed to delete user: ' + response.statusText);
        }
    } catch (error) {
        console.error(error);
        alert('사용자 삭제에 실패했습니다.');
    }
}

// POST
async function addUser(name) {
    try {
        const response = await fetch('/user', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ name }),
        });
        if (!response.ok) {
            throw new Error('Failed to add user: ' + response.statusText);
        }
    } catch (error) {
        console.error(error);
        alert('사용자 추가에 실패했습니다.');
    }
}

function createUserElement(key, name) {
    const userDiv = document.createElement('div');
    userDiv.innerHTML = `
        <span>${name}</span>
        <button class="edit-button">수정</button>
        <button class="delete-button">삭제</button>
    `;

    const editButton = userDiv.querySelector('.edit-button');
    editButton.addEventListener('click', async () => {
        const newName = prompt('바꿀 이름을 입력하세요.', name);
        if (!newName) {
            return alert('이름을 반드시 입력하셔야 합니다.');
        }
        await updateUser(key, newName);
        await renderUserList();
    });

    const deleteButton = userDiv.querySelector('.delete-button');
    deleteButton.addEventListener('click', async () => {
        if (confirm('정말로 삭제하시겠습니까?')) {
            await deleteUser(key);
            await renderUserList();
        }
    });

    return userDiv;
}

async function renderUserList() {
    const users = await fetchUsers();
    const list = document.querySelector('#list');
    list.innerHTML = '';

    Object.entries(users).forEach(([key, name]) => {
        const userElement = createUserElement(key, name);
        list.appendChild(userElement);
    });
}

document.querySelector('#form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const name = e.target.username.value.trim();
    if (!name) {
        return alert('이름을 입력하세요.');
    }
    await addUser(name);
    await renderUserList();
    e.target.username.value = '';
});

document.addEventListener('DOMContentLoaded', renderUserList);

Node.js로 HTTP 서버 만들어보기

Hyun Dev — Mon, 6 Jan 2025 16:22:06 +0900

1. HTTP 프로토콜이란?

HTTP(HyperText Transfer Protocol)는 클라이언트(브라우저)와 서버가 요청(Request)과 응답(Response)을 주고받는 공통된 언어입니다.
예를 들어, 사용자가 서버에 메인 페이지를 요청하면, 서버는 이 요청을 이해하고 적절한 데이터를 응답으로 전달합니다.
서버 프로그래밍을 할 때는 반드시 HTTP 프로토콜 규약을 따라야 합니다.

2. Node.js에서 HTTP 서버 만들기

Node.js에서는 http 모듈을 사용하여 간단하게 HTTP 서버를 만들 수 있습니다.

const http = require('http');

const server = http.createServer((req, res) => {
    // 응답 데이터 전송
    res.write('<h1>Hello Node!</h1>');
    res.write('<p>Hello Server</p>');
    res.end('<p>Bye</p>');
});

server.listen(8080); // 서버 8080 포트로 실행

server.on('listening', () => {
    console.log('8080번 포트에서 서버 대기 중입니다.');
});

server.on('error', (error) => {
    console.error(error);
});

http.createServer: 클라이언트의 요청이 들어올 때 실행됩니다.
res.write: 응답 데이터를 스트림 형태로 클라이언트에 전달합니다.
res.end: 응답을 종료합니다.

3. Content-Type과 헤더 설정

어떤 브라우저에서는 응답 데이터를 HTML로 처리하지 못하는 경우가 있습니다.
이를 방지하려면 응답 헤더에 Content-Type을 설정해야 합니다.

res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });

Content-Type: 데이터 형식을 지정합니다. (text/html은 HTML 문서를 의미)
charset: 데이터의 문자 인코딩을 설정합니다. (utf-8은 한글 지원)

4. HTML 코드 분리하기

HTML 코드를 res.write로 작성하면 유지보수가 어렵고 비효율적입니다.
이를 개선하기 위해 HTML 파일을 별도로 작성하고, Node.js의 fs 모듈을 사용하여 파일을 읽는 방식으로 변경합니다.

HTML 파일 예시 (server1.html)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Node.js 웹 서버</title>
</head>
<body>
    <h1>Node.js 웹 서버</h1>
    <p>공부 중</p>
</body>
</html>

Node.js 코드 수정

const http = require('http');
const fs = require('fs').promises;
const path = require('path');

const server = http.createServer(async (req, res) => {
    try {
        // HTML 파일 읽기
        const filePath = path.join(__dirname, 'server1.html');
        const data = await fs.readFile(filePath);

        res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
        res.end(data);
    } catch (error) {
        console.error(error);

        // 에러 응답
        res.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8' });
        res.end('파일을 읽는 중 오류가 발생했습니다.');
    }
});

server.listen(8080);

server.on('listening', () => {
    console.log('8080번 포트에서 서버 대기 중입니다.');
});

server.on('error', (error) => {
    console.error(error);
});

Node.js 란?

Hyun Dev — Sun, 5 Jan 2025 09:34:54 +0900

Node.js는 크롬 V8 자바스크립트 엔진을 기반으로 빌드된 자바스크립트 런타임입니다.

Node.js의 등장으로 자바스크립트는 HTML과 브라우저의 종속성에서 벗어나, 브라우저 없이도 실행 가능한 언어로 확장되었습니다.

Node.js란 ?

자바스크립트와 Node.js의 차이
- 자바스크립트는 프로그래밍 언어입니다.
- Node.js는 자바스크립트 런타임으로, 자바스크립트로 작성된 프로그램을 실행할 수 있는 환경을 제공합니다.
Node.js는 서버인가요?
- 아닙니다. Node.js는 서버 역할도 수행할 수 있는 자바스크립트 런타임입니다.
- Node.js는 HTTP, HTTPS, HTTP/2 등 서버 실행에 필요한 모듈을 제공하며, 이를 활용해 자바스크립트로 작성된 서버를 실행할 수 있습니다.

Node.js의 핵심 구성 요소

V8 엔진
- 오픈 소스 자바스크립트 엔진으로, 구글 크롬 브라우저에서 사용됩니다.
- 자바스크립트 코드를 고성능으로 실행합니다.
libuv
- 이벤트 기반, 논블로킹 I/O 모델을 구현한 라이브러리입니다.
- Node.js의 주요 특징인 비동기 I/O와 이벤트 루프를 지원합니다.

Node.js의 주요 특징

논블로킹 I/O 모델
- 오래 걸리는 작업(예: 파일 시스템 접근, 네트워크 요청, 데이터 압축)을 백그라운드에서 처리합니다.
- 메인 스레드는 다음 코드를 계속 실행하며, 작업 완료 시 비동기 방식으로 응답을 처리합니다.
- 일부 작업(I/O)은 백그라운드에서 병렬로 처리되고, 나머지 작업은 싱글 스레드로 실행됩니다.
싱글 스레드와 멀티 스레드
- Node.js는 싱글 스레드 기반으로 동작합니다.
- 그러나 내부적으로 멀티 스레드를 활용하며, 프로그래머가 직접 다룰 수 있는 스레드는 하나뿐입니다.
멀티 프로세스 활용
- Node.js는 멀티 스레드 대신 멀티 프로세스를 활용하는 경우가 많습니다.
- 프로세스: 운영체제에서 할당하는 작업의 단위 (프로세스 간 작업 공유 불가).
- 스레드: 프로세스 내에서 실행되는 작업의 단위 (부모 프로세스의 자원을 공유).

싱글 스레드와 논블로킹 I/O의 장단점

싱글 스레드 모델
- 장점:
  - 프로그래밍 난이도가 비교적 쉽습니다.
  - CPU와 메모리 자원을 적게 사용합니다.
- 단점:
  - 블로킹 작업 발생 시 다른 작업이 모두 대기 상태가 됩니다.
  - 에러 처리 실패 시 서버가 멈출 수 있습니다.
멀티 스레드 모델
- 장점:
  - 에러 발생 시 새로운 스레드를 생성해 문제를 극복할 수 있습니다.
- 단점:
  - 프로그래밍 난이도가 높습니다.
  - 새로운 스레드 생성이나 유휴 스레드 관리에 비용이 발생합니다.
  - 스레드 수만큼 자원을 많이 사용합니다.

Node.js 서버의 특징

Node.js는 서버를 구성할 수 있는 다양한 모듈을 제공합니다.
HTTP/HTTPS 모듈을 활용해 서버를 손쉽게 구축할 수 있으며, 논블로킹 I/O 모델로 높은 성능을 발휘합니다.

실행 예제와 결과

동기적 실행 예제

function longRunningTask() {
  console.log('작업 끝');
}
console.log('시작');
longRunningTask();
console.log('다음 작업');

시작
작업 끝
다음 작업

모든 작업이 순차적으로 실행됩니다.

하나의 작업이 완료될 때까지 다음 작업은 대기합니다(블로킹 방식).

비동기 실행 예제

function longRunningTask() {
  console.log('작업 끝');
}
console.log('시작');
setTimeout(longRunningTask, 0);
console.log('다음 작업');

시작
다음 작업
작업 끝

JavaScript는 기본적으로 동기적으로 코드를 실행하지만, 비동기 코드를 만나면 작업을 Web API 또는 Node.js 환경(libuv)으로 넘깁니다.

Web API 또는 libuv는 타이머, 네트워크 요청 등의 작업을 백그라운드에서 처리합니다.

이후 콜 스택이 비게 되면, 이벤트 루프가 콜백 큐에서 작업을 가져와 콜 스택에 올려 실행합니다.

Zustand로 상태 관리, 포켓몬 검색 기능 구현하기

Hyun Dev — Thu, 2 Jan 2025 11:30:08 +0900

POKE API에서는 기본적으로 검색 기능을 제공하지 않습니다.

따라서 전체 포켓몬 리스트를 가져와 자체적으로 필터링하여 검색 기능을 구현하기로 했습니다.

검색 기능을 구현하면서, 검색 결과에 대한 페이지네이션, 필터 기능 등을 추가 구현하기 위해 포켓몬 데이터를 여러 컴포넌트에서 재사용해야 하는 상황이 발생했습니다.

상위 루트에 데이터를 정의하고 props로 내려주는 방식보다는, 전역 상태 관리를 통해 구현하는 것이 가독성 면에서 더 좋고 관리하기도 편리할 것이라고 판단하여 Zustand를 사용했습니다.

또한, 기존에 모든 타입 지정과 서버 API 요청 등을 하나의 파일에 작성하던 방식을 개선하여, 다음과 같이 파일을 분리했습니다.

types.ts: 타입 정의.
api.ts: 서버 API 요청.
usePokemonStore.ts: Zustand로 상태 관리.

1. 타입 정의 (types.ts)

포켓몬과 관련된 데이터를 다루기 위해 필요한 타입을 정의했습니다.

// lib/types.ts

export type Pokemon = {
    name: string;
    url: string;
};

export type PokemonDetail = {
    id: number;
    name: string;
    abilities: AbilitiesType[];
    types: PokemonType[];
    stats: StatsType[];
    height: number;
    weight: number;
    base_experience: number;
    cries: {
        legacy: string;
        latest: string;
    };
    sprites: {
        front_default: string;
        other?: {
            home?: {
                front_default?: string;
                front_shiny?: string;
            };
            showdown?: {
                front_default?: string;
            };
        };
    };
};

type PokemonType = {
    type: {
        name: string;
        url: string;
    };
};

type AbilitiesType = {
    ability: {
        name: string;
        url: string;
    };
};

type StatsType = {
    base_stat: number;
    stat: {
        name: string;
        url: string;
    };
};

2. API 요청 (api.ts)

POKE API와 통신하는 모든 함수를 정리했습니다. 이 파일은 API 호출의 책임만을 가지며, 다른 파일과의 의존성을 최소화했습니다.

// lib/api.ts

import { Pokemon, PokemonDetail } from './types';

const pokemonBaseUrl = 'https://pokeapi.co/api/v2';

export async function fetchPokemon(page = 1): Promise<{ count: number; results: Pokemon[] }> {
    const offset = (page - 1) * 20;
    const response = await fetch(`${pokemonBaseUrl}/pokemon?limit=20&offset=${offset}`);
    if (!response.ok) {
        throw new Error('포켓몬 목록을 가져오는 데 실패했습니다.');
    }
    const data = await response.json();
    return { count: data.count, results: data.results };
}

export async function fetchAllPokemon(): Promise<Pokemon[]> {
    const response = await fetch(`${pokemonBaseUrl}/pokemon?limit=1118`);
    if (!response.ok) {
        throw new Error('전체 포켓몬 목록을 가져오는 데 실패했습니다.');
    }
    const data = await response.json();
    return data.results;
}

export async function fetchPokemonDetails(pokemonList: { url: string }[]): Promise<PokemonDetail[]> {
    const details = await Promise.all(
        pokemonList.map(async (pokemon) => {
            const response = await fetch(pokemon.url);
            if (!response.ok) {
                throw new Error(`포켓몬 상세 정보를 가져오는 데 실패했습니다. URL: ${pokemon.url}`);
            }
            return await response.json();
        })
    );
    return details;
}

export async function fetchPokemonByName(name: string): Promise<PokemonDetail> {
    const response = await fetch(`${pokemonBaseUrl}/pokemon/${name}`);
    if (!response.ok) {
        throw new Error(`포켓몬(${name}) 정보를 가져오는 데 실패했습니다.`);
    }
    return await response.json();
}

fetchPokemon: 페이지 번호를 기반으로 포켓몬 리스트를 가져옵니다.

fetchAllPokemon: 전체 포켓몬 리스트를 가져옵니다.

fetchPokemonDetails: 포켓몬 상세 정보를 가져옵니다.

fetchPokemonByName: 특정 이름의 포켓몬 정보를 가져옵니다.

3. Zustand로 상태 관리 (usePokemonStore.ts)

Zustand를 활용하여 포켓몬 데이터를 효율적으로 관리했습니다. 각종 데이터 요청 및 검색 로직을 하나의 스토어로 통합했습니다.

// store/usePokemonStore.ts

import { create } from 'zustand';
import { fetchAllPokemon, fetchPokemon, fetchPokemonDetails } from '@/lib/api';
import { Pokemon, PokemonDetail } from '@/lib/types';

type PokemonStore = {
    count: number;
    loading: boolean;
    currentPage: number;
    pokemonList: Pokemon[];
    allPokemon: Pokemon[];
    searchQuery: string;
    pokemonListDetails: Record<number | string, PokemonDetail[]>;
    fetchPokemon: (page: number) => Promise<void>;
    fetchAllPokemon: () => Promise<void>;
    fetchPokemonDetails: (page: number) => Promise<void>;
    searchPokemon: (query: string) => void;
    updateSearchQuery: (query: string) => void;
};

let debounceTimer: NodeJS.Timeout | null = null;

export const usePokemonStore = create<PokemonStore>((set, get) => ({
    count: 0,
    loading: false,
    currentPage: 1,
    pokemonList: [],
    allPokemon: [],
    pokemonListDetails: {},
    searchQuery: '',

    fetchPokemon: async (page = 1) => {
        set({ loading: true });
        try {
            const data = await fetchPokemon(page);
            set({
                count: data.count,
                pokemonList: data.results,
                currentPage: page,
                loading: false,
            });
        } catch (error) {
            console.error('Failed to fetch Pokémon list:', error);
            set({ loading: false });
        }
    },

    fetchAllPokemon: async () => {
        set({ loading: true });
        try {
            const results = await fetchAllPokemon();
            set({ allPokemon: results, loading: false });
        } catch (error) {
            console.error('Failed to fetch all Pokémon:', error);
            set({ loading: false });
        }
    },

    fetchPokemonDetails: async (page = 1) => {
        const { pokemonList, pokemonListDetails } = get();
        if (pokemonListDetails[page]) return;

        set({ loading: true });
        try {
            const details = await fetchPokemonDetails(
                pokemonList.map((pokemon) => ({ url: pokemon.url }))
            );
            set((state) => ({
                pokemonListDetails: {
                    ...state.pokemonListDetails,
                    [page]: details,
                },
                loading: false,
            }));
        } catch (error) {
            console.error('Failed to fetch Pokémon details:', error);
            set({ loading: false });
        }
    },

    searchPokemon: async (query) => {
        const { allPokemon } = get();

        if (!query) {
            set((state) => ({
                pokemonListDetails: {
                    ...state.pokemonListDetails,
                    search: [],
                },
                searchQuery: '',
            }));
            return;
        }

        set({ loading: true });
        try {
            const filteredPokemon = allPokemon.filter((pokemon) =>
                pokemon.name.toLowerCase().includes(query.toLowerCase())
            );

            const filteredDetails = await fetchPokemonDetails(
                filteredPokemon.map((pokemon) => ({ url: pokemon.url }))
            );

            set((state) => ({
                pokemonListDetails: {
                    ...state.pokemonListDetails,
                    search: filteredDetails,
                },
                loading: false,
            }));
        } catch (error) {
            console.error('Error occurred during Pokémon search:', error);
            set({ loading: false });
        }
    },

    updateSearchQuery: (query) => {
        set({ searchQuery: query });
        if (debounceTimer) clearTimeout(debounceTimer);

        debounceTimer = setTimeout(() => {
            const { searchPokemon } = get();
            searchPokemon(query);
        }, 500);
    },
}));

검색 로직

전체 포켓몬 데이터를 한 번에 가져와 검색어를 기준으로 필터링하는 방식으로 구현했습니다.
검색 시 디바운스를 적용하여 사용자가 입력을 멈춘 후 일정 시간(500ms) 이후에만 API 요청을 보내도록 최적화했습니다.

캐싱 처리

fetchPokemonDetails 함수에서 각 페이지별로 데이터를 캐싱하여, 사용자가 다른 페이지로 이동했다가 다시 돌아오는 경우 API를 다시 호출하지 않고 캐싱된 데이터를 재사용하도록 했습니다.

MongoDB와 Prisma를 활용한 북마크/좋아요 기능 구현

Hyun Dev — Wed, 1 Jan 2025 18:43:39 +0900

사용자 계정이 있을 시 좋아요와 북마크 기능을 추가하려고 했습니다.

아무래도 데이터를 저장하고 관리하려면 데이터베이스가 필요할 것 같아서, 학습도 할 겸 Prisma와 MongoDB를 사용하기로 결정했습니다.

Prisma와 MongoDB 설정

Prisma는 MongoDB와 같은 NoSQL 데이터베이스에서도 편리하게 데이터를 다룰 수 있도록 해줍니다.

이를 위해 schema.prisma 파일을 다음과 같이 작성했습니다.

// schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mongodb"
  url      = env("DATABASE_URL")
}

model User {
  id          String    @id @default(cuid()) @map("_id")
  auth0Id     String    @unique
  bookmarks   String[]
  liked       String[]  
  createdAt   DateTime  @default(now())
  updatedAt   DateTime  @updatedAt
}

bookmarks와 liked 필드는 문자열 배열로 정의하여 포켓몬 이름을 저장합니다.

Prisma 클라이언트를 생성하기 위해 npx prisma generate 명령어를 실행했습니다.

Prisma 클라이언트 설정

PrismaClient를 여러 인스턴스로 생성하는 문제를 방지하기 위해 전역으로 관리합니다.

import { PrismaClient } from '@prisma/client';

const globalForPrisma = global as unknown as { prisma: PrismaClient };

export const prisma =
  globalForPrisma.prisma ||
  new PrismaClient();

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;

export default prisma;

개발 환경에서는 Prisma 클라이언트를 재사용하고, 배포 환경에서는 새 인스턴스를 생성합니다.

API 엔드포인트 구현

POST 요청: 북마크/좋아요 토글

사용자가 좋아요 또는 북마크를 클릭할 때 데이터를 추가하거나 제거하는 API입니다.

import { NextRequest, NextResponse } from 'next/server';
import prisma from '@/utils/connect';

export async function POST(req: NextRequest) {
    try {
        const { userId, pokemon, action } = await req.json();

        if (!['bookmark', 'like'].includes(action)) {
            return NextResponse.json(
                { message: '잘못된 작업입니다. (action이 bookmark 또는 like 여야 합니다.)' },
                { status: 400 }
            );
        }

        let user = await prisma.user.findUnique({
            where: { auth0Id: userId },
        });

        if (!user) {
            user = await prisma.user.create({
                data: {
                    auth0Id: userId,
                    bookmarks: [],
                    liked: [],
                },
            });
        }

        const fieldToUpdate = action === 'bookmark' ? 'bookmarks' : 'liked';
        const currentItems = user[fieldToUpdate];
        const updatedItems = currentItems.includes(pokemon)
            ? currentItems.filter((item) => item !== pokemon)
            : [...currentItems, pokemon];

        await prisma.user.update({
            where: { auth0Id: userId },
            data: { [fieldToUpdate]: updatedItems },
        });

        return NextResponse.json({
            toggledOff: currentItems.includes(pokemon),
            success: true,
            message: `성공적으로 ${pokemon}를 ${action === 'bookmark' ? '북마크' : '좋아요'} 처리했습니다.`,
        });
    } catch (error) {
        console.log('링크 또는 북마크 처리 중 오류 발생', error);

        return NextResponse.json(
            { message: '요청을 처리하는 동안 오류가 발생했습니다.' },
            { status: 500 }
        );
    }
}

prisma.user.findUnique로 유저를 조회하고, 존재하지 않으면 새로 생성합니다.

좋아요/북마크 배열에서 항목을 추가하거나 제거한 후, 업데이트합니다.

GET 요청: 사용자 데이터 반환

현재 사용자의 정보를 반환하는 API입니다.

import { NextRequest, NextResponse } from 'next/server';
import prisma from '@/utils/connect';

export async function GET(req: NextRequest, { params }: { params: { userId: string } }) {
    try {
        const { userId } = params;

        if (!userId) {
            return NextResponse.json(
                { message: '유효하지 않은 사용자입니다.' },
                { status: 400 }
            );
        }

        const user = await prisma.user.findUnique({
            where: { auth0Id: userId },
        });

        if (!user) {
            return NextResponse.json(
                { message: '사용자를 찾을 수 없습니다.' },
                { status: 404 }
            );
        }

        return NextResponse.json(user);
    } catch (error) {
        console.log('Error', error);
        return NextResponse.json({ message: 'Error' }, { status: 500 });
    }
}

Zustand를 활용한 상태 관리

Zustand를 사용하여 사용자 데이터를 상태로 관리했습니다. API 요청으로 데이터를 가져오거나, 좋아요와 북마크 작업을 수행합니다.

export const useUserStore = create<UserStore>((set, get) => ({
    userDetails: null,

    fetchUserDetails: async (userId) => {
        try {
            const response = await fetch(`/api/user/${userId}`);
            if (!response.ok) {
                throw new Error('사용자 정보를 가져오는 데 실패했습니다.');
            }
            const data = await response.json();
            set({ userDetails: data });
        } catch (error) {
            console.error('사용자 정보를 가져오는 중 오류가 발생했습니다:', error);
        }
    },

    performAction: async (userId, pokemon, action) => {
        try {
            set((state) => {
                if (!state.userDetails) return state;

                const updatedBookmarks =
                    action === 'bookmark'
                        ? state.userDetails.bookmarks.includes(pokemon)
                            ? state.userDetails.bookmarks.filter((p) => p !== pokemon)
                            : [...state.userDetails.bookmarks, pokemon]
                        : state.userDetails.bookmarks;

                const updatedLikes =
                    action === 'like'
                        ? state.userDetails.liked.includes(pokemon)
                            ? state.userDetails.liked.filter((p) => p !== pokemon)
                            : [...state.userDetails.liked, pokemon]
                        : state.userDetails.liked;

                return {
                    userDetails: {
                        ...state.userDetails,
                        bookmarks: updatedBookmarks,
                        liked: updatedLikes,
                    },
                };
            });

            const response = await fetch('/api/pokemon', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ userId, pokemon, action }),
            });

            if (!response.ok) {
                throw new Error('요청을 수행하는 데 실패했습니다.');
            }
        } catch (error) {
            console.error('요청을 수행하는 중 오류가 발생했습니다:', error);
            const { fetchUserDetails } = get();
            await fetchUserDetails(userId);
        }
    },
}));

PokeAPI와 페이지네이션 기능 구현하기

Hyun Dev — Mon, 30 Dec 2024 18:45:19 +0900

PokeAPI는 총 1302개의 포켓몬 데이터를 제공합니다.

하지만 1302개의 데이터를 한 번에 보여주는 것은 비효율적이여서 이를 해결하기 위해 페이지네이션 기능을 구현했습니다.

PokeAPI 데이터 가져오기

PokeAPI는 전체 포켓몬의 개수를 count로 제공합니다. 이를 활용해 데이터를 20개씩 나눠서 가져오도록 했습니다.

export async function fetchPokemon(page = 1): Promise<{ count: number; results: Pokemon[] }> {
    const offset = (page - 1) * 20;
    const response = await fetch(`${pokemonBaseUrl}/pokemon?limit=20&offset=${offset}`);
    if (!response.ok) {
        throw new Error('포켓몬 목록을 가져오는 데 실패했습니다.');
    }
    const data = await response.json();
    return { count: data.count, results: data.results };
}

limit: 한 페이지에 표시할 포켓몬의 수 (여기서는 20으로 설정)
offset: 페이지 번호에 따라 가져올 데이터의 시작점. (page - 1) * limit으로 계산

maxVisiblePages

페이지네이션에서 한 번에 보여질 페이지 번호의 최대 개수를 제한하기 위해 maxVisiblePages를 선언했습니다. 여기서는 5로 설정했습니다.

const maxVisiblePages = 5;

getPageNumbers 함수

getPageNumbers 함수는 페이지네이션 번호와 생략 기호(...)를 생성합니다.

이 함수는 최대 maxVisiblePages개의 페이지 번호를 표시하고, 필요하면 생략 기호를 포함합니다.

const getPageNumbers = () => {
    const pages: (number | '...')[] = [];
    pages.push(1);

    if (currentPage < maxVisiblePages) {
        for (let i = 2; i <= Math.min(totalPages - 1, maxVisiblePages); i++) {
            pages.push(i);
        }
    } else {
        const half = Math.floor((maxVisiblePages - 1) / 2);
        const startPage = Math.max(2, currentPage - half);
        const endPage = Math.min(totalPages - 1, currentPage + half);

        if (startPage > 2) {
            pages.push('...');
        }

        for (let i = startPage; i <= endPage; i++) {
            pages.push(i);
        }
    }

    if (currentPage + Math.floor((maxVisiblePages - 1) / 2) < totalPages - 1) {
        pages.push('...');
    }

    pages.push(totalPages);

    return pages;
};

maxVisiblePages로 한 번에 보여질 최대 페이지 번호를 제한.
첫 번째 페이지 번호(1)는 항상 추가.
currentPage가 maxVisiblePages보다 작으면 순차적으로 번호를 추가.
currentPage가 중앙에 위치하도록 앞뒤로 균형 있게 페이지 번호를 추가.
필요한 경우 생략 기호(...)를 삽입.
마지막 페이지 번호(totalPages)를 추가.

전체 코드

'use client';

import Link from 'next/link';

type Props = {
    currentPage: number;
    totalPages: number;
};

export default function Pagination({ currentPage, totalPages }: Props) {
    const maxVisiblePages = 5;

    const getPageNumbers = () => {
        const pages: (number | '...')[] = [];
        pages.push(1);

        if (currentPage < maxVisiblePages) {
            for (let i = 2; i <= Math.min(totalPages - 1, maxVisiblePages); i++) {
                pages.push(i);
            }
        } else {
            const half = Math.floor((maxVisiblePages - 1) / 2);
            const startPage = Math.max(2, currentPage - half);
            const endPage = Math.min(totalPages - 1, currentPage + half);

            if (startPage > 2) {
                pages.push('...');
            }

            for (let i = startPage; i <= endPage; i++) {
                pages.push(i);
            }
        }

        if (currentPage + Math.floor((maxVisiblePages - 1) / 2) < totalPages - 1) {
            pages.push('...');
        }

        pages.push(totalPages);

        return pages;
    };

    const pageNumbers = getPageNumbers();

    return (
        <div className="mb-10 flex justify-center items-center gap-2">
            {pageNumbers.map((page, index) => {
                if (page === '...') {
                    return (
                        <span key={`ellipsis-${index}`} className="text-gray-500 px-2">
                            ...
                        </span>
                    );
                }
                return (
                    <Link
                        key={page}
                        href={`/?page=${page}`}
                        className={`py-2 px-4 w-10 h-10 flex items-center justify-center rounded-full ${
                            page === currentPage
                                ? 'bg-purple text-white font-bold'
                                : 'bg-gray-200 text-black hover:bg-purple/30'
                        }`}
                    >
                        {page}
                    </Link>
                );
            })}
        </div>
    );
}

Next.js 15.1.2 -> 14.2.21로 다운그레이드

Hyun Dev — Fri, 27 Dec 2024 20:47:57 +0900

Auth0를 사용하여 로그인 상태를 서버 컴포넌트에서 확인하기 위해 getSession을 호출했더니 아래와 같은 오류가 발생했습니다.

Route "/api/auth/[auth0]" used `params.auth0`. `params` should be awaited before using its properties

공식 문서에 있는 코드를 똑같이 복사해서 사용해도 똑같은 결과가 나왔습니다.

https://stackoverflow.com/questions/79270854/route-api-auth-auth0-used-params-auth0-params-should-be-awaited-before

Route "/api/auth/[auth0]" used `params.auth0`. `params` should be awaited before using its properties

I'm working on a Next.js 15 and Auth0 with package @auth0/nextjs-auth0 app using dynamic API route handler. When access /api/auth/login I got the following error: Route "/api/auth/[auth0]"...

stackoverflow.com

검색을 통해 알아본 결과, Auth0의 현재 버전이 Next.js 최신 버전을 지원하지 않아서 발생한 문제로 추측됩니다.

이에 Next.js를 다운그레이드하여 문제를 해결했습니다.

1. Next.js 및 React 버전 다운그레이드

Next.js를 15.x에서 14.2.21로, React를 19에서 18로 다운그레이드했습니다.

npm install next@14.2.21 react@18 react-dom@18

다운그레이드 후, package.json 확인

"dependencies": {
  "next": "14.2.21",
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
}

2. Next.js 설정 파일 변경

1) next.config.ts → next.config.js

Next.js 14에서는 next.config.ts을 지원하지 않으므로, 설정 파일을 next.config.js 로 변경합니다.

내용은 아래와 같이 수정합니다.

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

export default nextConfig;

2) Turbopack 제거

package.json의 스크립트에서 Turbopack 관련 옵션을 제거했습니다.

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

3. 폰트 관련 오류

Next.js 15.1.2에서 app 폴더 아래의 layout.tsx에 기본 폰트로 다음과 같은 코드가 사용됩니다.

import { Geist, Geist_Mono } from 'next/font/google';

하지만 Geist와 Geist_Mono는 next/font/google에서 지원되지 않아 오류가 발생합니다.

이 경우, 다른 폰트를 사용하면 문제가 해결됩니다. 예를 들어, Google Fonts에서 지원하는 폰트로 대체할 수 있습니다.

Next.js와 Auth0를 이용한 간단한 로그인 기능 구현하기

Hyun Dev — Mon, 23 Dec 2024 17:59:51 +0900

https://auth0.com/

Auth0: Secure access for everyone. But not just anyone.

Rapidly integrate authentication and authorization for web, mobile, and legacy applications so you can focus on your core business.

auth0.com

Pokemon API를 활용한 포켓몬 사이트를 구현하면서 간단한 로그인 기능도 추가하기 위해 Auth0를 사용했습니다.

이번 글에서는 Auth0를 설정하고 Next.js 프로젝트에 통합하는 과정을 정리해보겠습니다.

Auth0 설정하기

애플리케이션 유형 선택 Next.js를 사용하기 때문에 Single Page Web Applications를 선택했습니다.
애플리케이션 추가 새로운 애플리케이션을 생성합니다. 저는 "Pokemon"이라는 이름으로 어플리케이션을 만들었습니다.
Allowed Callback URLs 설정 Auth0 대시보드에서 Settings로 이동한 후, Allowed Callback URLs에 아래의 값을 추가합니다.이 URL은 Auth0가 인증 후 리디렉션할 경로를 지정합니다.
http://localhost:3000/api/auth/callback

Next.js 프로젝트에 Auth0 통합하기

1. Auth0 관련 패키지 설치

Auth0를 Next.js에 통합하려면 다음 패키지를 설치합니다:

npm install @auth0/nextjs-auth0

2. 환경 변수 설정

.env.local 파일에 Auth0 설정 값을 추가합니다:

AUTH0_SECRET='use [openssl rand -hex 32] to generate a 32 bytes value'
AUTH0_BASE_URL='http://localhost:3000'
AUTH0_ISSUER_BASE_URL='https://YOUR_DOMAIN.auth0.com'
AUTH0_CLIENT_ID='YOUR_CLIENT_ID'
AUTH0_CLIENT_SECRET='YOUR_CLIENT_SECRET'

AUTH0_SECRET: 32바이트 길이의 랜덤 문자열을 생성하려면 터미널에서 다음 명령어를 실행합니다:

openssl rand -hex 32

나머지 값은 Auth0 애플리케이션 설정에서 복사하여 사용합니다.

3. API 라우트 추가

app/api/auth/[auth0]/route.ts 파일을 생성하고 다음과 같이 작성합니다:

import { handleAuth } from '@auth0/nextjs-auth0';

export const GET = handleAuth();

4. 레이아웃 설정

app/layout.tsx 파일에서 Auth0의 UserProvider로 애플리케이션을 감쌉니다.

import { UserProvider } from '@auth0/nextjs-auth0/client';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <UserProvider>
        <body>{children}</body>
      </UserProvider>
    </html>
  );
}

이미지 호스트 문제 해결하기

Next.js에서 next/image를 사용할 때 외부 호스트의 이미지를 로드하려면 next.config.js 파일에 해당 호스트를 추가해야 합니다. 다음과 같이 설정합니다.

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    domains: ['lh3.googleusercontent.com'],
  }
  /* config options here */
};

export default nextConfig;

로그인 상태에 따른 UI 변경

클라이언트 컴포넌트에서는 Auth0의 useUser 훅을, 서버 컴포넌트에서는 getSession을 사용하여 로그인 상태를 확인할 수 있습니다.

이를 기반으로 로그인 여부에 따라 헤더 UI를 다르게 표시할 수 있습니다.

useAuth의 user 출력

'use client';

import { useUser } from '@auth0/nextjs-auth0/client';

export default function Header() {
    const { user, isLoading } = useUser();
    console.log(user);

    return <header></header>;
}

import { getSession } from '@auth0/nextjs-auth0';

export default async function Header() {
    const session = await getSession();
    const user = session?.user;

    return <header></header>;
}

현재 Next.js가 15버전인 경우, getSession을 사용하면 다음과 같은 에러가 발생합니다.
Route "/api/auth/[auth0]" used params.auth0. params should be awaited before using its properties

이는 Auth0의 현재 버전이 Next.js 15를 완전히 지원하지 않아서 발생한 문제로 추측됩니다.
현재는 Next.js를 14버전으로 다운그레이드하면 오류가 사라집니다.

특정 줄에서 no-unused-vars 오류 해결 방법

Hyun Dev — Wed, 6 Nov 2024 13:46:14 +0900

타입스크립트를 사용하는 Next.js 프로젝트에서 특정 라이브러리를 사용할 때 한 가지 오류가 발생했습니다.

아래와 같이 props에서 변수를 할당하려고 했습니다.

const { children, className, node ...rest } = props;

그런데 ref를 할당하지 않으면 오류가 발생했습니다. 정확한 이유는 알 수 없었지만, ref를 포함하니 오류가 사라졌습니다.

그러나 빌드 시점에서 ref와 node가 실제로 사용되지 않기 때문에 ESLint의 no-unused-vars 규칙에 걸려 빌드가 실패했습니다.

이 문제를 해결하기 위해, // eslint-disable-next-line @typescript-eslint/no-unused-vars 주석을 추가하여 특정 줄에서만 no-unused-vars 규칙을 무시하도록 했습니다.

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { ref, children, className, node, ...rest } = props;

Next.js 에서 폰트 설정하기

Hyun Dev — Thu, 24 Oct 2024 08:09:42 +0900

폰트를 설정하는 방법은 크게 두 가지가 있습니다.

1. 구글 폰트 사용하기

구글 폰트는 next/font/google에서 원하는 폰트를 불러와 사용할 수 있습니다.

필요한 폰트, 서브셋(subsets), 두께(weight), 그리고 디스플레이(display) 옵션을 지정할 수 있습니다.

const notoSans = Noto_Sans({
  weight: ['400', '700'],
  subsets: ['latin'],
  display: 'swap',
});

subsets: 폰트가 지원하는 문자셋을 선택합니다.

weight: 400(보통)과 700(굵은)을 적용해 다양한 weight을 지원합니다.

display: swap으로 설정해, 폰트가 로드되지 않은 상태에서도 텍스트가 표시되며, 로드 후 폰트가 교체됩니다.

2. 로컬 폰트 사용하기

로컬 폰트를 사용할 때는 next/font/local을 통해 폰트 파일을 직접 경로로 지정해 사용할 수 있습니다.

const pretendard = localFont({
  src: './fonts/PretendardVariable.woff2',
  display: 'swap',
  weight: '45 920',
  variable: '--font-pretendard',
});

src: 로컬 폰트 파일 경로를 지정합니다.

display: 구글 폰트와 마찬가지로 swap을 사용해 폰트가 로드되지 않아도 기본 텍스트가 표시되도록 설정합니다.

weight: 여기서는 45부터 920까지 가변적인 폰트 두께를 지정했습니다.

variable: CSS 변수 --font-pretendard로 폰트를 설정해주며, Tailwind CSS에서 쉽게 사용할 수 있습니다.

import type { Config } from 'tailwindcss';

const config: Config = {
    content: [
    	// ...생략
    ],
    theme: {
        extend: {
            fontFamily: {
                pretendard: ['var(--font-pretendard)'],
            },
            // ...생략
        },
    },
    plugins: [],
};
export default config;

3. 적용 순서

body 태그에서 우선적으로 적용할 폰트를 설정할 수 있습니다.

예를 들어, notoSans가 먼저 적용되고, 실패하면 pretendard가 적용됩니다.

<body className={`${notoSans.className} ${pretendard.variable} bg-background text-foreground`}>

폰트를 className으로 적용하면 기본적으로 HTML 요소에 바로 스타일이 적용되며, variable을 사용할 때는 CSS 변수를 통해 Tailwind CSS와 같은 프레임워크에서 폰트 관련 스타일을 손쉽게 사용할 수 있습니다.

텍스트에 linear-gradient 적용하기

Hyun Dev — Thu, 24 Oct 2024 07:41:59 +0900

그라데이션 효과가 적용된 텍스트

텍스트에 Linear-gradient 적용하기

텍스트에 그라데이션 효과를 주기 위해 linear-gradient를 사용하여 다음과 같이 스타일을 적용할 수 있습니다.

.gradient-text {
    display: inline-block;
    background-image: linear-gradient(90deg, #0ea5ea, #0bd1d1 51%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

1. display: inline-block;

텍스트 요소는 일반적으로 h1, p처럼 블록 요소이기 때문에 너비가 전체 화면을 차지합니다.

inline-block으로 변경해서 텍스트의 크기만큼만 너비를 차지하게 만들어줘서 그라데이션 효과가 텍스트에만 적용되게 합니다.

2. background-image

linear-gradient(90deg, #0ea5ea, #0bd1d1 51%)로 그라데이션을 지정합니다.

90도는 그라데이션이 왼쪽에서 오른쪽으로 적용된다는 의미이며, 첫 번째 색상이 51%까지 차지하고, 나머지 49%는 두 번째 색상으로 채워집니다.

3. -webkit-text-fill-color: transparent;

이 속성은 텍스트의 색을 투명하게 만드는 속성입니다.

텍스트 자체에 색상을 적용하는 대신, 배경의 그라데이션 색상을 텍스트에 입히기 위해 사용됩니다.

4. -webkit-background-clip: text;

이 속성은 배경 이미지를 텍스트에만 클립(잘라내기)하여 배경 이미지가 텍스트 부분에만 적용되도록 합니다.

5. background-clip: text;

-webkit- 접두사가 없는 background-clip: text;는 같은 기능을 하며, 다른 브라우저에서도 동일하게 그라데이션이 텍스트에 적용되도록 해줍니다.

이렇게 설정하면 텍스트에만 그라데이션이 적용된 스타일을 만들 수 있습니다.

버튼 그라데이션 효과와 호버 애니메이션

그라데이션이 적용된 버튼에 애니메이션 효과를 줄 때 다양한 방법이 있지만, background-size와 background-position을 사용하면 그라데이션이 이동하는 듯한 효과를 연출할 수 있습니다.

.gradient-btn {
    background-image: linear-gradient(90deg, #0ea5ea, #0bd1d1 51%, #0ea5ea);
    background-size: 200%;
    background-position: left;
    transition: background-position 0.5s ease;
}

.gradient-btn:hover {
    background-position: right;
}

1. background-image

linear-gradient(90deg, #0ea5ea, #0bd1d1 51%, #0ea5ea)는 첫 번째 색상인 #0ea5ea로 시작해서 51% 지점까지 적용됩니다.

그 이후로는 두 번째 색상인 #0bd1d1이 나타나고, 마지막에는 다시 첫 번째 색상 #0ea5ea가 나타납니다.

즉, 그라데이션이 대칭적으로 적용되어 양쪽 끝이 동일한 색상으로 마무리됩니다.

2. background-size

background-size: 200%는 배경 이미지의 크기를 200%로 늘려주어, 그라데이션이 더 크게 표현되고 배경이 움직일 수 있도록 공간을 확보해 줍니다. 이를 통해 애니메이션 시 배경이 자연스럽게 이동하는 효과를 줄 수 있습니다.

3. background-position

초기 배경 위치를 left로 설정하여 배경이 왼쪽에서 시작하도록 합니다.

4. hover 시

hover 상태에서는 background-position: right로 변경되어 배경이 오른쪽으로 이동합니다. 이로 인해 그라데이션이 움직이는 것처럼 보이는 시각적 효과가 나타납니다.

SSG를 ISR로 전환하는 방법, fetch로 SSG, SSR, ISR 처리하기

Hyun Dev — Fri, 27 Sep 2024 14:46:11 +0900

SSG -> ISR 으로 전환하기

SSG는 빌드 시점에 정적 HTML을 생성하는 방식입니다.

하지만 ISR로 전환하면, 정적 페이지의 성능을 유지하면서도 주기적으로 데이터를 새로 가져와 페이지를 업데이트할 수 있습니다.

ISR로 전환하려면 revalidate 옵션을 추가하여 페이지가 일정 시간마다 다시 생성되도록 설정할 수 있습니다.

// 3초마다 페이지 재생성
export const revalidate = 3;

Next.js에서 fetch 사용하기: SSG, ISR, SSR 결정하기

Next.js에서는 서버 컴포넌트에서 fetch를 사용할 수 있습니다. fetch 함수는 두 번째 옵션에 따라 SSG, ISR, SSR 방식을 결정합니다.

1. SSG

fetch 호출 시 두 번째 옵션을 제공하지 않는다면, 기본적으로 SSG로 동작하게 됩니다.

페이지는 빌드 시점에 정적 HTML로 생성되고 이후에는 재생성되지 않습니다.

const res = await fetch('https://api.adviceslip.com/advice');
const data = await res.json();
const advice = data.slip.advice;

2. ISR

ISR 방식으로 페이지를 주기적으로 재생성하고 싶다면, revalidate 옵션을 추가하면 됩니다.

예를 들어, 3초마다 페이지를 다시 생성하고 싶다면 아래와 같이 revalidate 값을 설정할 수 있습니다.

const res = await fetch('https://api.adviceslip.com/advice', {
  next: { revalidate: 3 },
});

3. SSR

SSR은 요청 시마다 서버에서 HTML 페이지를 다시 생성하는 방식입니다. cache: 'no-store' 옵션을 사용하면 페이지는 항상 서버에서 새로 렌더링됩니다.

const res = await fetch('https://api.adviceslip.com/advice', {
  cache: 'no-store',
});

또는 revalidate: 0으로 설정하면, SSR처럼 동작하게 됩니다.

const res = await fetch('https://api.adviceslip.com/advice', {
  next: { revalidate: 0 },
});

서버 컴포넌트 vs 클라이언트 컴포넌트

Hyun Dev — Thu, 26 Sep 2024 16:12:25 +0900

https://nextjs.org/docs/app/building-your-application/rendering/client-components

Rendering: Client Components | Next.js

Learn how to use Client Components to render parts of your application on the client.

nextjs.org

Next.js에서는 모든 컴포넌트가 기본적으로 서버 컴포넌트입니다.

별도로 설정하지 않으면 컴포넌트는 서버에서 실행되며, 예를 들어 console.log를 사용할 경우 콘솔이 브라우저 콘솔이 아닌 서버 터미널에 출력됩니다.

이는 서버 컴포넌트가 서버에서 실행되기 때문에 발생하는 현상으로, 브라우저는 서버에서 렌더링된 HTML만 받아서 화면에 표시하게 됩니다.

그리고 서버 컴포넌트는 서버에서만 동작하기 때문에 브라우저에서 제공하는 API(Web API)를 사용할 수 없습니다.

하지만 서버 측에서 Node.js API를 사용하여 파일 시스템에 접근하거나 데이터베이스와 상호작용하는 작업은 가능합니다.

단, 서버 컴포넌트에서는 React의 상태 관리 훅(useState, useEffect 등)을 사용할 수 없습니다.

만약 사용자의 이벤트 처리나 상태 관리를 해야 한다면, 해당 부분은 클라이언트 컴포넌트로 만들어야 합니다.

클라이언트 컴포넌트를 사용해야 할 때

클라이언트 컴포넌트를 사용할 필요가 있는 경우, 해당 컴포넌트 최상단에 use client 를 명시합니다.

"use client";

import { useState } from "react";

export default function Input() {
    const [text, setText] = useState("");
    return (
        <>
            <input
                type="text"
                value={text}
                onChange={(e) => setText(e.target.value)}
                className="border"
            />
            {text}
        </>
    );
}

여기서 중요한 것은 클라이언트 컴포넌트를 만든다고 해서 그것이 클라이언트 사이드 렌더링을 의미하는 것은 아니라는 점입니다.

Next.js는 가능한 한 모든 컴포넌트를 정적으로 생성하여, 사용자가 페이지를 요청하면 정적인 HTML을 먼저 보내줍니다.

클라이언트 컴포넌트는 사용자의 이벤트 처리나 브라우저에서 실행되어야 하는 코드를 포함하는 부분입니다.

이 컴포넌트는 클라이언트에만 관련된 코드를 포함하며, 정적인 HTML이 먼저 로드된 후, 리액트 라이브러리와 함께 브라우저에서 실행되어야 할 추가적인 자바스크립트 코드들이 다운로드되어 하이드레이션이 이루어집니다.

이로 인해 전체 페이지를 클라이언트에서 처리하는 대신, 필요한 부분만 클라이언트에서 실행되어 자바스크립트의 전송량이 줄어들어 성능이 최적화됩니다.

Next.js에서의 라우팅

Hyun Dev — Wed, 25 Sep 2024 15:58:10 +0900

https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts

Routing: Pages and Layouts | Next.js

Create your first page and shared layout with the Pages Router.

nextjs.org

React에서는 라우팅을 설정할 때 react-router-dom 같은 라이브러리를 주로 사용하지만, 반드시 이 라이브러리를 사용할 필요는 없고, 원하는 방식으로 자유롭게 라우팅을 설정할 수 있었습니다.

반면, Next.js는 프레임워크이기 때문에 정해진 라우팅 방식을 사용해야 합니다.

Next.js에서는 별도로 라우터를 설정하는게 아닌 폴더 및 파일 구조에 따라 자동으로 라우팅이 설정이 됩니다.

폴더 구조만으로 경로가 정의되며, 정적 라우팅과 동적 라우팅을 모두 지원합니다.

1. 정적 라우팅

Next.js에서 정적 라우팅은 app폴더 안에 경로에 해당하는 폴더를 만들고, 그 안에 page.tsx 파일을 생성하면 Next.js가 해당 경로를 자동으로 인식하여 라우팅을 처리합니다.

폴더 구조

app
└── posts
    ├── javascript
    │   └── page.tsx
    ├── page.tsx
    └── react
        └── page.tsx

export default function PostPage() {
  return (
    <div>
      <h1>포스트 페이지</h1>
    </div>
  );
}

export default function JavaScriptCategoryPage() {
  return (
    <div>
      <h1>JavaScript 카테고리의 글</h1>
    </div>
  );
}

export default function ReactCategoryPage() {
  return (
    <div>
      <h1>React 카테고리의 글</h1>
    </div>
  );
}

이렇게 폴더를 구성하면 /posts/javascript, /posts/react와 같은 경로로 접근할 수 있습니다.

Next.js는 이 폴더 구조를 바탕으로 자동으로 라우팅을 설정합니다.

하지만 카테고리의 수가 매우 많아지면, 각각의 카테고리마다 폴더와 파일을 생성하는 것은 비효율적입니다.

이런 경우를 해결하기 위해 Next.js는 동적 라우팅을 지원합니다.

2. 동적 라우팅

동적 라우팅을 사용하면, 경로가 동적으로 변하는 경우에도 하나의 페이지에서 처리할 수 있습니다.

동적 라우팅을 구현하려면 폴더명에 대괄호를 사용하여 변수를 정의합니다. 일반적으로 [slug] 같은 이름을 사용하는 것 같습니다.

예를 들어, category 경로 아래에 동적 라우팅을 설정하려면 [category] 폴더를 생성합니다.(변수명은 자유)

폴더 구조

app
└── posts
    ├── [category]
    │   └── page.tsx
    └── page.tsx

위 구조에서는 /posts/javascript, /posts/react와 같이 URL의 마지막 부분이 동적으로 바뀔 수 있으며, 그 값을 Next.js가 자동으로 params 객체를 통해 전달합니다.

type Props = {
  params: {
    category: string;
  };
};

export default function Page({ params }: Props) {
  console.log(params);
  return <div>{params.category}</div>;
}

이 코드를 통해 params 객체 안에 있는 category 값을 받아와서 화면에 출력할 수 있습니다.

예를 들어 /posts/javascript 경로로 접속하면 params.category는 javascript 값을 가지게 됩니다.

props를 출력해 보면 다음과 같습니다.

{
  "params": {
    "category": "javascript"
  },
  "searchParams": {}
}

3. generateStaticParams

generateStaticParams 사용 전 (좌) generateStaticParams 사용 후 (우)

동적 라우팅은 기본적으로 SSR 방식으로 처리되지만, generateStaticParams를 사용하면 특정 경로에 한해 SSG처럼 정적 페이지를 미리 생성할 수 있습니다.

generateStaticParams는 Next.js에서 정해진 함수 이름이며, 동적 라우트 페이지에서 어떤 경로를 미리 생성할지 지정하는 역할을 합니다.

type Props = {
    params: {
        category: string;
    };
};
export default function page({ params }: Props) {
    console.log(params);
    return <div>{params.category}</div>;
}

export function generateStaticParams() {
    const categories = ["javascript", "react"];
    return categories.map((category) => ({
        category: category,
    }));
}

이 함수는 빌드 시점에 javascript와 react 경로에 대해 미리 정적 페이지를 생성합니다.

즉, generateStaticParams를 사용하면 동적 라우팅 페이지도 특정 경로에 대해 미리 렌더링된 페이지를 제공할 수 있어 SSG처럼 동작하게 됩니다.

4. NotFound 페이지 설정

Next.js에서 404 Not Found 페이지를 지정하려면 app 폴더 안에 not-found파일을 생성해주면 됩니다.

이는 Next.js에서 정한 규칙으로, 이 파일을 통해 에러 페이지를 커스터마이징할 수 있습니다.

// app/not-found.tsx
export default function NotFound() {
    return (
        <div>
            <h1>404 - 페이지를 찾을 수 없습니다</h1>
            <p>요청한 페이지를 찾을 수 없습니다. 다시 홈으로 돌아가 주세요.</p>
        </div>
    );
}

5. 레이아웃 페이지 설정

React를 사용할 때는 react-router-dom의 Outlet을 이용해, 헤더나 사이드바와 같은 공통 요소를 Outlet 바깥에 두고, 내용이 바뀌는 부분은 Outlet으로 처리했습니다.

하지만 Next.js에서는 layout.tsx 파일을 통해 이와 같은 기능을 제공합니다.

Next.js는 폴더 기반 라우팅을 지원하므로, 공통 레이아웃을 설정할 수 있는 구조를 가지고 있습니다.

전체 레이아웃 수정

app 폴더 바로 아래에 있는 layout.tsx 파일은 전체 페이지에 적용되는 레이아웃을 관리할 수 있습니다.

이 파일 안에서 children 속성을 이용하여, 그 안에 페이지별로 다른 내용이 렌더링되도록 할 수 있습니다.

특정 경로에서만 레이아웃 적용하기

특정 경로에서만 공통 레이아웃을 설정하고 싶을 때는, 그 경로 안에 layout.tsx 파일을 생성하면 됩니다.

예를 들어, posts 경로 안에서만 공통 레이아웃을 적용하려면, posts 폴더에 layout.tsx 파일을 생성하여 관리할 수 있습니다.

posts
├── [category]
│   └── page.tsx
├── layout.tsx
└── page.tsx

import Link from "next/link";

export default function PostLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    return (
        <>
            <nav className="p-4 mt-2 flex gap-2 border">
                <LinkButton href="/posts/">전체</LinkButton>
                <LinkButton href="/posts/javascript">JavaScript</LinkButton>
                <LinkButton href="/posts/react">React</LinkButton>
            </nav>
            <section>{children}</section>
        </>
    );
}

function LinkButton({
    href,
    children,
}: {
    href: string;
    children: React.ReactNode;
}) {
    return (
        <Link href={href} className="px-2">
            {children}
        </Link>
    );
}

위 예시에서는 posts 경로 안에서 공통으로 사용되는 네비게이션을 설정했고, 각 경로에 따라 다른 콘텐츠가 children 속성으로 표시됩니다.

layout.tsx를 활용하면 특정 경로에만 공통 요소를 적용할 수 있으며, 다른 경로는 영향을 받지 않도록 설정할 수 있습니다.

위 코드에서 사용된 Link 태그는 Next.js에서 제공되며, a 태그와 유사한 기능을 합니다.

Link 태그를 사용하는 이유는, Link 태그가 뷰포트에 들어오면 자동으로 링크된 페이지의 데이터를 pre-fetching하는 기능 덕분에 페이지 전환 속도가 빠르고 최적화에 유리해서 Link 태그를 사용합니다.

create-next-app으로 Next.js 프로젝트 시작하기

Hyun Dev — Tue, 24 Sep 2024 14:28:19 +0900

https://nextjs.org/docs/getting-started/installation

Getting Started: Installation | Next.js

Create a new Next.js application with `create-next-app`. Set up TypeScript, styles, and configure your `next.config.js` file.

nextjs.org

이번 글에서는 npx create-next-app@latest를 사용하여 Next.js 프로젝트를 설치하는 과정과 주요 프로젝트 구조를 간략하게 작성하겠습니다.

설치 과정 및 설정

npx create-next-app@latest       # Next.js 최신 버전 프로젝트 생성 명령어 실행
✔ What is your project named? … my-app  # 프로젝트 이름 설정
✔ Would you like to use TypeScript? … No / Yes  # TypeScript 사용 여부
✔ Would you like to use ESLint? … No / Yes  # ESLint 사용 여부
✔ Would you like to use Tailwind CSS? … No / Yes  # Tailwind CSS 사용 여부
✔ Would you like to use `src/` directory? … No / Yes  # src/ 디렉터리 사용 여부
✔ Would you like to use App Router? (recommended) … No / Yes  # App Router 사용 여부
✔ Would you like to customize the default import alias (@/*)? … No / Yes  # Import Alias 설정 여부
✔ What import alias would you like configured? … @/*  # Import alias 값 설정

이렇게 순서대로 뜨면 각 항목에 대해 원하는 옵션을 선택하면 됩니다.

Next.js 주요 프로젝트 구조 설명

Next.js 프로젝트를 생성하면 아래와 같은 파일이 생성됩니다.

1. src/app/page.tsx

이 파일은 홈페이지의 첫 번째 페이지 컴포넌트를 정의하는 파일입니다.

Next.js에서 app 디렉터리를 사용하는 경우, 이 page.tsx 파일은 기본적으로 루트 경로(/)에 해당하는 페이지로 사용됩니다. 즉, http://localhost:3000/으로 접속했을 때 보여지는 페이지가 됩니다.

이 파일 안에는 React 컴포넌트로 구성된 JSX 코드가 들어가며, 원하는 UI를 구성할 수 있습니다.

2. src/app/layout.tsx

layout.tsx 파일은 Next.js의 레이아웃 컴포넌트를 정의합니다.

모든 페이지에 공통으로 적용되는 레이아웃을 정의할 수 있으며, header, footer, navbar 등 모든 페이지에 적용될 UI 요소들을 이 파일에서 관리할 수 있습니다.

page.tsx의 내용이 이 레이아웃 안에서 렌더링됩니다.

또한, layout.tsx에서는 메타데이터 및 폰트 설정도 관리할 수 있습니다.

메타데이터 설정: metadata 객체를 사용하여 페이지 제목, 설명, Open Graph 등의 메타 정보를 정의할 수 있습니다. 이 메타데이터는 페이지의 <head> 태그에 자동으로 추가됩니다.
폰트 설정: localFont를 통해 로컬 폰트를 불러와 페이지에 적용할 수 있습니다.

import type { Metadata } from "next";
import localFont from "next/font/local";

const customFont = localFont({
  src: "./fonts/CustomFont.woff",
  variable: "--font-custom",
});

export const metadata: Metadata = {
  title: "My Website",
  description: "A great website built with Next.js",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={customFont.variable}>
        {children}
      </body>
    </html>
  );
}

Next.js 주요 명령어

dev: 개발 모드
- next dev는 개발할 때 사용하는 명령어로, 실시간으로 코드 변경 사항을 확인할 수 있는 개발용 서버를 실행합니다.
- 개발 모드에서는 SSG로 설정된 페이지도 항상 SSR처럼 동작합니다. 이는 별도의 빌드 과정을 거치지 않기 때문에, 미리 생성된 정적 HTML 파일이 없고, 변경 사항을 즉각 반영해야 하기 때문입니다.
build: 프로젝트 빌드
- next build는 프로젝트를 배포하기 전에 코드와 페이지를 빌드하는 명령어입니다.
- 개발 중에 SSG와 SSR 동작 방식을 실제로 확인하고 싶을 때, 빌드를 통해 프로젝트를 미리 생성된 정적 페이지로 구성할 수 있습니다.
start: 빌드 후 실행
- next start는 프로젝트가 배포된 후, 빌드된 파일을 서버에서 실행하는 명령어입니다.
- 배포 전 실제로 프로젝트가 어떻게 동작하는지 궁금할 때, 개발 중에도 빌드 후 start 명령어로 실행해볼 수 있습니다.

Next.js란? 그리고 CSR, SSR, SSG, ISR 이해하기

Hyun Dev — Mon, 23 Sep 2024 17:47:43 +0900

Next.js 란?

Next.js는 리액트를 기반으로 웹 애플리케이션을 개발하기 위한 프레임워크입니다.

리액트는 컴포넌트 단위로 UI를 구성하며 주로 단일 페이지 애플리케이션(SPA)과 클라이언트 사이드 렌더링(CSR)을 사용합니다.

그러나 리액트만으로는 SEO 최적화, 초기 로딩 속도, 서버 측 렌더링 등 다양한 요구 사항을 해결하기에 한계가 있는데, Next.js는 이를 보완하여 다양한 렌더링 방식을 제공합니다.

서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 클라이언트 사이드 렌더링(CSR)을 모두 지원하며, 이들을 결합한 하이브리드 렌더링으로 성능 최적화와 SEO 개선을 동시에 이룰 수 있습니다.

이러한 기능 덕분에 Next.js는 복잡한 웹 애플리케이션뿐만 아니라, 서버와 클라이언트를 모두 다루는 풀스택 애플리케이션 개발에도 적합한 도구로 자리 잡았습니다.

CSR (Client Side Rendering)

CSR은 리액트가 주로 사용하는 렌더링 방식으로, 클라이언트에서 모든 렌더링을 담당하는 방식입니다.

브라우저가 웹 페이지에 접속하면 클라이언트가 서버에 요청을 보내고, 서버는 텅 빈 HTML을 클라이언트에 전달합니다.

이때 브라우저는 리액트 라이브러리와 우리가 작성한 자바스크립트 소스 코드를 다운로드해 메모리에 탑재하고, 리액트가 실행되면서 빈 HTML 페이지에 콘텐츠를 렌더링합니다.

- 장점

초기 한 번만 로딩이 되면 이후에는 서버와 통신 없이 빠르게 페이지 전환이 가능하며, 페이지의 특정 부분만 데이터를 갱신하면 되기 때문에 전체 페이지를 다시 로드하지 않아도 됩니다.

이러한 방식은 서버의 부하를 줄이고, 사용자 경험을 향상시킵니다.

- 단점

자바스크립트가 로드된 후, createRoot와 같은 함수로 리액트 컴포넌트가 동적으로 root 요소에 결합되면서 전체 UI가 렌더링됩니다.

이로 인해 초기 로딩 속도가 느려질 수 있으며, 검색 엔진 크롤러가 빈 HTML을 탐색하기 때문에 SEO 최적화에도 불리합니다.

또한, 자바스크립트가 비활성화된 환경에서는 웹 애플리케이션이 동작하지 않으므로, CSR 방식은 SEO 및 접근성 측면에서 제약이 있을 수 있습니다.

SSG (Static Site Generation)

SSG (Static Site Generation) 은 빌드 시점에 HTML을 미리 생성해 서버에 배포하는 방식입니다.

페이지가 자주 변하지 않는 경우 유용하며, 브라우저에서 해당 페이지에 접속하면 사전 생성된 HTML 파일을 빠르게 로드할 수 있습니다.

- 장점

SSG는 미리 렌더링된 HTML 파일을 서버 또는 CDN에 캐시해 두기 때문에 페이지 로딩 속도가 매우 빠릅니다.

또한, 자바스크립트가 없어도 HTML 파일을 통해 기본적인 컨텐츠를 사용자에게 제공할 수 있어 SEO 최적화에도 유리합니다.

클라이언트 측에서 모든 코드를 다운로드하지 않기 때문에 보안성도 더 높습니다.

- 단점

사전에 생성된 HTML 파일이므로, 빌드 후 데이터를 실시간으로 갱신하는 것이 불가능합니다.

따라서 사용자가 요청할 때마다 최신 데이터를 제공해야 하는 동적 웹사이트에는 적합하지 않습니다.

모든 사용자에게 동일한 데이터를 제공하는 사이트에 적합하며, 개인 맞춤형 데이터를 제공하기에는 어려움이 있습니다.

ISR (Incremental Static Regeneration)

ISR은 SSG의 단점을 보완한 방식으로, SSG처럼 사전 렌더링을 하지만 일정 주기로 페이지를 갱신하여 최신 데이터를 반영합니다.

특정 주기에 따라 페이지를 다시 렌더링하고, 변경된 데이터를 반영합니다.

ISR은 동적인 데이터를 어느 정도 반영하면서도 SSG의 장점을 유지할 수 있는 방식입니다.

- 장점

SSG의 모든 장점을 유지하면서도 정해진 주기에 따라 데이터를 갱신할 수 있습니다.

따라서 자주 변경되지 않는 데이터에는 적합하며, 자바스크립트 의존성 없이도 SEO 최적화가 가능하고, 보안에도 유리합니다.

- 단점

SSG와 마찬가지로 실시간 데이터가 필요하거나 사용자 맞춤형 데이터를 제공해야 하는 경우에는 적합하지 않습니다.

설정된 주기 내에서만 데이터가 갱신되므로, 실시간 변경 사항을 반영하기 어렵습니다.

SSR (Server Side Rendering)

SSR은 사용자가 페이지에 접속할 때마다 서버에서 해당 페이지를 렌더링하여 HTML 파일을 제공하는 방식입니다.

즉, 페이지 요청 시 서버에서 즉시 HTML 파일을 생성해 사용자에게 제공하므로, 항상 최신 데이터를 반영할 수 있습니다.

- 장점

서버에서 즉시 렌더링하여 실시간으로 최신 데이터를 제공할 수 있습니다.

또한, 사용자 맞춤형 데이터를 처리하는 데 유리하며, SEO 최적화에 적합합니다.

- 단점

SSR은 요청이 있을 때마다 서버에서 페이지를 렌더링하므로 서버에 부하가 많이 걸릴 수 있습니다.

사용자 수가 많을수록 서버의 부담이 커질 수 있으며, 페이지 로딩 속도가 SSG나 ISR보다는 느릴 수 있습니다.

요청이 있을 때마다 서버에서 페이지를 렌더링하므로, 생성된 HTML 파일이 매번 다르게 생성됩니다.

이 때문에 정적 파일과 달리 동일한 HTML 파일을 재사용할 수 없어, CDN에 캐시하기가 어렵습니다.

하이브리드 렌더링

Next.js는 다양한 렌더링 방식을 혼합하여 사용할 수 있는 하이브리드 웹앱을 지원합니다.

각 페이지의 특성에 맞게 최적의 렌더링 방식을 적용할 수 있습니다.

예를 들어, 자주 변경되지 않는 정적인 콘텐츠는 SSG로 처리하고, 실시간 데이터가 필요한 페이지는 SSR을 사용하며, 주기적으로 업데이트되는 데이터는 ISR로 처리할 수 있습니다.

한 페이지 내에서도 특정 섹션은 SSR로, 다른 섹션은 CSR로 렌더링할 수 있습니다. 이를 통해 성능과 사용자 경험을 극대화하면서도 개발자는 각기 다른 페이지 요구에 맞는 최적의 솔루션을 제공할 수 있습니다.

Hydration (하이드레이션)

Next.js에서 페이지가 처음 로드될 때는 먼저 서버에서 생성된 HTML 파일이 클라이언트로 전송되어 UI를 즉시 표시합니다.

이후 자바스크립트 코드가 로드되면, HTML 위에 리액트 컴포넌트가 결합되어 동적인 기능이 활성화됩니다.

이 과정을 하이드레이션이라고 하며, 먼저 HTML을 보여주고 그 후에 리액트로 동적인 인터랙션을 처리할 수 있도록 하는 방식입니다.

TTV(Time To View)와 TTI(Time To Interact)는 웹 성능에서 중요한 지표로, 하이드레이션은 TTV를 줄여 페이지를 빠르게 표시할 수 있게 하고, 자바스크립트가 로드되는 대로 TTI를 최적화해 사용자 인터랙션을 가능하게 합니다.

어떤 렌더링 방식을 사용할지 결정하는 방법

사용자 맞춤 데이터가 필요한가: 사용자별로 달라지는 데이터를 제공해야 한다면 CSR 또는 SSR을 사용합니다. 사용자별로 민감한 데이터가 포함된 페이지는 보안을 고려해 서버에서 렌더링하는 SSR이 적합할 수 있습니다.
데이터가 자주 업데이트되는가: 데이터가 자주 업데이트되지 않는 경우에는 SSG 또는 ISR을 사용할 수 있습니다. 데이터가 주기적으로 변경된다면 ISR, 실시간 변경이 필요하다면 SSR을 사용하는 것이 좋습니다.
SEO가 중요한가: SEO 최적화가 필요하다면 CSR보다는 SSR, SSG 또는 ISR을 사용하는 것이 적합합니다.

Sticky 요소의 너비를 화면 꽉 채우기

Hyun Dev — Sun, 22 Sep 2024 17:12:54 +0900

포트폴리오 사이트 프로젝트에서 화면이 768px 이하로 줄어들면, 탭 메뉴가 최상단에서 레이아웃의 중앙으로 배치되도록 했고,position sticky로 변경되도록 구현했습니다.

그런데 탭 메뉴의 상위 부모 컨테이너에 padding: 10px이 적용되어 있어, fixed로 되어 있는 헤더와 통일감을 주기 위해 탭 메뉴의 너비를 화면 전체로 설정하고 싶었습니다.

이를 해결하기 위해 다음과 같은 CSS 코드를 사용했습니다.

@media screen and (max-width: 768px) {
    .list {
        position: sticky;
        top: var(--header-height);
        z-index: 10;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
    }
}

width: 100vw

100vw는 뷰포트 너비(Viewport Width) 전체를 차지하는 값입니다. 즉, 화면 전체의 너비만큼 요소를 확장시킵니다.
부모 요소에 패딩이 있더라도, 요소 자체는 화면 전체를 차지하게 설정할 수 있습니다.

margin-left: calc(-50vw + 50%):

-50vw: 요소를 화면의 절반만큼 왼쪽으로 이동시킵니다. 이 값은 100vw로 확장된 요소가 부모 컨테이너의 패딩을 무시하고, 화면 전체에 걸치도록 만드는 역할을 합니다.
+50%: 화면 너비에 맞추어 요소가 완전히 중앙에 오도록 조정합니다.

useNavigationType으로 탭 메뉴 클릭 시 스크롤 이동

Hyun Dev — Sun, 22 Sep 2024 17:08:53 +0900

포트폴리오 사이트를 768px 이하의 화면에서는 사이드바에 있던 프로필을 화면 상단으로 이동시키고, 탭 메뉴를 가운데로 배치했습니다. 그러나 탭을 전환할 때마다 탭 메뉴로 다시 스크롤해야 하는 불편함이 있었습니다.

이를 해결하기 위해 탭 메뉴를 고정(sticky)하고, 탭 클릭 시 자동으로 탭 메뉴 위치로 스크롤이 이동하도록 구현했습니다.

스크롤 로직 구현

React의 useRef와 useEffect를 활용해 스크롤 동작을 제어했고, useNavigationType을 사용하여 PUSH 방식의 네비게이션에서만 스크롤이 동작하도록 설정했습니다.

즉, 페이지 새로고침이나 첫 진입 시에는 스크롤이 발생하지 않도록 했습니다.

const navigationType = useNavigationType();
const ref = useRef<HTMLDivElement>(null);
const [paddingTop, setPaddingTop] = useState(0);

useEffect(() => {
    const root = document.querySelector("#root");
    if (root) {
        setPaddingTop(parseInt(window.getComputedStyle(root).paddingTop, 10));
    }
}, []);

useEffect(() => {
    if (window.innerWidth <= 768 && navigationType === 'PUSH' && ref.current) {
        const bottom = ref.current.getBoundingClientRect().bottom + window.scrollY - paddingTop;
        window.scrollTo({
            top: bottom,
            behavior: 'smooth',
        });
    }
}, [location.pathname, navigationType]);

useNavigationType은 세 가지 네비게이션 타입을 제공합니다.

POP: 브라우저 뒤로가기/앞으로가기 버튼 클릭 시 발생합니다.
REPLACE: 페이지 경로가 교체될 때 발생합니다.
PUSH: 새로운 경로로 이동할 때 발생합니다.

홈 화면에 텍스트 타이핑 효과 구현하기

Hyun Dev — Thu, 19 Sep 2024 22:19:37 +0900

포트폴리오의 레이아웃은 이제 마무리 단계인데, 아무래도 카드 형태의 디자인을 많이 사용하다 보니 사이트 디자인이 많이 단조로워 보였습니다.

그래서 사이트가 처음 열릴 때 제일 먼저 보여지는 Home 컴포넌트에 동적인 애니메이션을 주어, 조금이라도 인상을 주기로 했습니다.

타이핑 효과 구현 원리

먼저, 저는 주요 기술 스택인 Javascript, TypeScript, React, Next.js를 동적으로 표시하고자 했습니다.

아직 Next.js는 다루지 못하지만, 포트폴리오 작업이 끝난 후 배우고 학습 할 예정이기 때문에 일단 넣어뒀습니다.

이 기술 이름들이 화면에 타이핑되었다가, 다시 지워지고, 다시 타이핑되는 패턴을 반복하게 만들었습니다.

아래 코드를 통해 각 텍스트가 타이핑되고, 삭제되는 과정을 단계별로 관리했습니다.

const [displayText, setDisplayText] = useState(''); // 보여질 텍스트
const [isDeleting, setIsDeleting] = useState(false); // 삭제 중인지
const [loopNum, setLoopNum] = useState(0);
const [typingSpeed, setTypingSpeed] = useState(50);

const dynamicTexts = ["Javascript", "TypeScript", "React", "Next.js"];
const currentText = dynamicTexts[loopNum % dynamicTexts.length];

useEffect(() => {
    const handleTyping = () => {
        if (!isDeleting && displayText.length < currentText.length) {
            // 타이핑 중
            setDisplayText(currentText.substring(0, displayText.length + 1));
        } else if (isDeleting && displayText.length > 0) {
            // 삭제 중
            setDisplayText(currentText.substring(0, displayText.length - 1));
        } else if (!isDeleting && displayText.length === currentText.length) {
            // 타이핑 완료 후 대기
            setTimeout(() => setIsDeleting(true), 1500);
        } else if (isDeleting && displayText.length === 0) {
            // 삭제 완료 후 다음 텍스트로
            setIsDeleting(false);
            setLoopNum(loopNum + 1);
        }
    };

    const timer = setTimeout(handleTyping, typingSpeed);

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

useEffect를 사용하여 타이핑과 삭제 과정이 주기적으로 실행되도록 만듭니다.

현재 표시된 텍스트가 완전히 타이핑되면 일정 시간 후에 삭제되고, 그 후 다음 텍스트가 타이핑되는 순환 구조입니다.

loopNum을 사용하여 dynamicTexts 배열에서 현재 표시할 텍스트를 관리합니다.

UI 적용

                <div className={styles.heading}>
                    <p>I work with</p>
                    <div>
                        <span className={globals['text-primary']}>
                            {displayText}
                        </span>
                        <span className={styles.cursor}>|</span>
                    </div>
                </div>

CSS로 깜빡이는 커서 효과

keyframe을 이용하여 cursor 클래스에 1초 간격으로 커서가 사라졌다가 다시 나타나는 효과를 줬습니다.

.cursor {
    display: inline-block;
    width: 1px;
    color: var(--primary);
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

RSS를 이용해 티스토리 블로그 글 가져오기

Hyun Dev — Tue, 17 Sep 2024 21:43:02 +0900

현재까지 진행중인 화면

포트폴리오에 티스토리 블로그 글을 가져와서 Blog 컴포넌트를 꾸미려고 했습니다.

예전에 Tistory Open API를 사용해 구현한 사례를 본 적이 있어, 이를 활용하려고 했는데 검색해보니 Tistory Open API가 서비스 종료되었다는 소식을 접하게 됐습니다.

그래서 다른 방법을 찾아보다가 RSS를 통해 블로그 글을 가져오는 방법을 알게 되었습니다.

하지만 RSS를 사용하여 구현을 진행했을 때 RSSTOJSON의 제한으로 인해 한 번에 10개의 데이터만 가져올 수 있었습니다.

원래는 페이지네이션 기능도 넣으려 했으나, 이 제한 때문에 구현하지 못한 것이 아쉬웠습니다.

앞으로 Next.js를 학습하여 RSSTOJSON을 사용하지 않고, RSS를 직접 파싱해서 페이지네이션까지 완벽하게 구현해보고 싶습니다.

RSS란?

RSS(Really Simple Syndication)는 웹사이트의 콘텐츠를 자동으로 업데이트해주는 표준 XML 형식 파일입니다.

이를 통해 특정 웹사이트나 블로그의 최신 글이나 업데이트 정보를 확인할 수 있습니다.

예를 들어, 티스토리 블로그는 https://블로그이름.tistory.com/rss 형식의 URL로 RSS 피드를 제공합니다.

RSSToJson

https://rss2json.com/docs

API Documentation - rss2json.com

order_dir No String Order direction of feed items to return,Possible values : asc or desc,Default value : desc . (api_key is required to use this parameter)

rss2json.com

티스토리의 RSS 피드를 직접 호출하려고 시도하면 CORS에러가 발생합니다.

이러한 문제를 해결하기 위해 rssToJson API를 사용할 수 있습니다.

rssToJson은 RSS 피드를 JSON 형식으로 변환해주는 서비스로, 이를 통해 CORS 문제를 우회하고 데이터를 더 쉽게 처리할 수 있습니다.

다음은 useQuery를 사용하여 티스토리 블로그의 RSS 피드를 가져오는 코드입니다.

const {
    data: posts,
} = useQuery({
    queryKey: ['posts'],
    queryFn: async () => {
        const response = await axios.get(
            `https://api.rss2json.com/v1/api.json?rss_url=${rssUrl}&api_key=${apiKey}`
        );
        return response.data.items;
    },
});

RSS 피드 URL에는 가끔 특수문자나 공백이 포함될 수 있습니다.

이러한 특수문자로 인해 URL이 제대로 인식되지 않거나 오류가 발생할 수 있으므로, encodeURIComponent를 사용하여 URL을 인코딩해주는 것이 좋습니다.

문서에서도 이를 권장하고 있으므로 사전에 문제를 방지하기 위해 인코딩을 사용해야 됩니다.

const rssUrl = encodeURIComponent('https://hy-un.tistory.com/rss');

티스토리 블로그 데이터 처리하기

RSS 피드를 통해 티스토리 블로그 데이터를 가져오다 보니 몇 가지 처리해야 할 부분들이 있었습니다.

1. pubDate 시간 변환

티스토리에서 제공되는 pubDate 값은 UTC 시간으로 표시되기 때문에, 한국 시간과 다릅니다.

이를 적절히 변환해주는 처리가 필요하며, 이를 해결하기 위해 pubDate를 변환하는 함수를 구현했습니다.

const formattedDate = useCallback((dateString: string): string => {
    const date = new Date(new Date(dateString).getTime() - new Date().getTimezoneOffset() * 60000);

    return [
        date.getFullYear(),
        (date.getMonth() + 1).toString().padStart(2, "0"),
        date.getDate().toString().padStart(2, "0")
    ].join('.');
}, []);

getTimezoneOffset을 사용하여 시간을 변환하는 로직에 대한 자세한 설명은 아래 블로그 포스트를 참고해주시면 됩니다.

자바스크립트 Date 객체 정리 및 관련 함수

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date Date - JavaScript | MDNJavaScript Date 객체는 시간의 한 점을 플랫폼에 종속되지 않는 형태로 나타냅니다. Date 객체는 1970년 1월 1일 UTC(협

hy-un.tistory.com

2. description의 HTML 태그 처리

description 필드는 HTML 태그가 포함된 상태로 제공되기 때문에 이를 처리하기 위해 DOMParser를 사용했습니다.

const parser = new DOMParser();
const doc = parser.parseFromString(post.description, 'text/html');
const strText = doc.body.textContent || '';

여기서 parser.parseFromString(post.description, 'text/html'); 는 HTML 문자열을 파싱해서 DOM 객체로 변환해줍니다.

이 과정에서 description에 포함된 HTML 태그들이 DOM 구조로 파싱되며, 이후 textContent를 통해 순수한 텍스트만 추출할 수 있습니다.

3. 빈 문자열로 오는 thumbnail

티스토리 RSS 피드에서 thumbnail 필드가 빈 문자열로 옵니다. 빈 값이 오면 이미지가 표시되지 않기 때문에, 해결 방법을 찾아야 하지만, 아직 적절한 방법을 찾지 못했습니다.

React Router NavLink로 메뉴 활성 상태 간편하게 처리하기

Hyun Dev — Mon, 16 Sep 2024 13:13:27 +0900

포트폴리오를 만드는 중, 페이지 이동을 위한 탭 메뉴에서 현재 경로에 맞는 메뉴에만 다른 스타일을 적용하려고 했습니다.

처음에는 location.pathname을 사용해 각 경로에 맞춰 active 클래스를 추가하려 했었습니다.

그러나 이렇게 하면 경로를 추가하거나 변경할 때마다 해당 경로가 맞는지 일일이 확인해야 하는 번거로움이 있었습니다.

예를 들어 /home 경로로 이동할 때는 pathname에 'home'이 포함되어 있는지를 확인하는 조건문을 넣고, 또 다른 경로가 추가되면 그에 맞춰 코드를 수정해야 했습니다.

그러다가 React Router에서 제공하는 NavLink 컴포넌트를 알게 되었습니다.

이 컴포넌트를 사용하면 현재 경로에 맞는 메뉴에 자동으로 스타일을 적용할 수 있었습니다.

NavLink는 내부적으로 경로를 비교해 active 상태를 관리해 주기 때문에, 제가 일일이 pathname을 확인할 필요가 없어진 것입니다.

NavLink 사용법

NavLink의 기본 사용법은 매우 간단합니다. 아래처럼 to 속성에 원하는 경로를 지정해주고, className 속성에 함수를 전달하면 경로가 활성화되었을 때 해당 클래스가 적용됩니다.

import { NavLink, useLocation } from 'react-router-dom';

export default function TabList() {
    const location = useLocation();

    const isRoot = location.pathname === '/';

    return (
        <div className={styles.list}>
            <NavLink
                to="/home"
                className={({ isActive }) => 
                    `${styles.item} ${(isActive || isRoot) ? styles.active : ''}`
                }
            >
                <span>Home</span>
            </NavLink>
            <NavLink
                to="/projects"
                className={({ isActive }) => 
                    `${styles.item} ${isActive ? styles.active : ''}`
                }
            >
                <span>Projects</span>
            </NavLink>
            <NavLink
                to="/blog"
                className={({ isActive }) => 
                    `${styles.item} ${isActive ? styles.active : ''}`
                }
            >
                <span>Blog</span>
            </NavLink>
            <NavLink
                to="/temp"
                className={({ isActive }) => 
                    `${styles.item} ${isActive ? styles.active : ''}`
                }
            >
                <span>Temp</span>
            </NavLink>
        </div>
    );
}

URL 파라미터가 있는 경우 end 속성 사용

현재는 경로에 URL 파라미터가 없어서 isActive만을 사용했지만, URL 파라미터를 무시하고 경로의 정확한 일치만을 원할 경우 end 속성을 추가하여 사용하면 됩니다.

예를 들어 /projects/123처럼 URL 파라미터가 경로에 붙는 상황에서는 end 속성을 사용하여 정확한 경로 일치만 활성화할 수 있습니다.

<NavLink to="/projects" end>
    Projects
</NavLink>

이렇게 end 속성을 추가하면 /projects/123와 같은 경로는 활성화되지 않으며, /projects 경로에만 active 클래스가 적용됩니다.

OpenWeatherMap API로 날씨 Web 만들기 - 마무리

Hyun Dev — Fri, 13 Sep 2024 15:28:52 +0900

↓↓↓↓이 프로젝트의 전체 코드는 GitHub에서 확인하실 수 있습니다.↓↓↓↓

https://github.com/GangHyun95/weather

GitHub - GangHyun95/weather: OpenWeather Api

OpenWeather Api. Contribute to GangHyun95/weather development by creating an account on GitHub.

github.com

저번 포스팅에서 프로젝트를 마무리하려 했지만, Vercel로 배포한 후 이미지 관련 문제가 발생해서 이번에 추가로 작성하게 되었습니다.

프로젝트를 Vercel로 배포한 후, 데스크탑에서는 아이콘이 정상적으로 보였지만, 모바일 기기에서는 아이콘이 뜨지 않고 alt 텍스트만 출력되는 문제가 발생했습니다. OpenWeatherMap에서 제공하는 아이콘을 그대로 사용하고 있었으며, 경로는 다음과 같이 설정되어 있었습니다.

const iconUrl = `http://openweathermap.org/img/wn/${icon}.png`;
<img
  src={iconUrl}
  width="48"
  height="48"
  alt={description}
  className={styles.img}
  title={description}
/>

문제를 해결 해 보려고 휴대폰을 노트북에 연결해 개발자 도구로 확인해봤지만, 특별한 에러 메시지는 나타나지 않아서 문제가 뭔지는 사실 모르겠습니다.

OpenWeatherMap에서 제공하는 아이콘 중 night 테마의 아이콘들이 웹사이트 배경색과 겹쳐 보이기도 해서, 아이콘을 교체할지 고민하고 있었는데, 모바일에서 이미지가 제대로 뜨지 않는 상황까지 겹치면서 로컬 이미지를 사용하기로 결정했습니다.

로컬 이미지 경로 설정

OpenWeatherMap API에서는 위와 같은 형식으로 아이콘 파일을 제공합니다.

저는 로컬 프로젝트의 src 폴더에 동일한 파일명 형식을 유지하면서 새로운 아이콘으로 저장했습니다. 이렇게 함으로써 API에서 받아오는 아이콘 이름을 그대로 사용할 수 있도록 했습니다.

이미지를 로컬 src 폴더에 저장하고, 이미지 경로를 설정하는 방법에는 두 가지가 있습니다.

import : 이미지를 정적으로 불러올 때 사용하는 방식입니다. 예를 들어, 특정 아이콘을 직접 지정할 경우 아래와 같이 사용합니다.

import iconImage from '../../assets/images/icon.png';

<img src={iconImage} alt="Icon" />

하지만, 이 방식은 이미지 파일명이 고정되어 있을 때 적합합니다.

require : 이미지 경로가 동적으로 변경될 경우 사용합니다. 프로젝트에서 사용하는 아이콘 파일 이름이 동적으로 변경되기 때문에 require 방식을 선택했습니다. 예를 들어, 아이콘 파일 이름이 API에서 받아오는 icon 값에 따라 변경되는 경우 아래와 같이 설정할 수 있습니다.

const iconUrl = require(`../../assets/images/${icon}.png`);
<img src={iconUrl} alt={description} />

이렇게 로컬 이미지를 적용하여, 모바일 기기에서도 정상적으로 아이콘이 표시되도록 수정했습니다.

자바스크립트 Date 객체 정리 및 관련 함수

Hyun Dev — Fri, 13 Sep 2024 09:43:26 +0900

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date

Date - JavaScript | MDN

JavaScript Date 객체는 시간의 한 점을 플랫폼에 종속되지 않는 형태로 나타냅니다. Date 객체는 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값을 담습니다.

developer.mozilla.org

여러 개의 개인 프로젝트를 진행하면서 Date 객체를 자주 사용하였습니다.

자주 쓰이는 만큼, 이번 기회에 Date 객체를 정리하고, 이를 활용해 구현한 메서드들도 함께 정리해보려 합니다.

Date 객체란?

Date 객체는 자바스크립트에서 날짜와 시간을 표현하기 위한 기본 객체입니다.

이를 통해 날짜와 시간을 처리하며, Unix 시간을 기반으로 동작합니다. 1970년 1월 1일 자정 이후 경과된 밀리초를 기준으로 계산됩니다.

Date 객체 생성 방법

// 현재 날짜와 시간으로 생성
const now = new Date();

// 특정 날짜와 시간을 문자열로 지정하여 생성
const specificDate = new Date('2024-09-13T10:00:00');

// 연도, 월, 일, 시간, 분, 초를 인자로 전달하여 생성
const specificTime = new Date(2024, 8, 13, 10, 30, 45); // 2024년 9월 13일 10시 30분 45초

// 시간 정보 없이 연도, 월, 일만 지정하여 생성 (시간은 기본적으로 00:00:00으로 설정됨)
const onlyDate = new Date(2024, 8, 13); // 2024년 9월 13일

// 연도와 월만 지정하여 생성 (일은 기본적으로 1일로 설정됨, 시간은 00:00:00)
const onlyYearMonth = new Date(2024, 8); // 2024년 9월

// 밀리초 단위로 생성 (1970년 1월 1일 이후 경과된 밀리초 값 사용)
const dateFromMillis = new Date(1600000000000);

Date 객체의 주요 메서드들

날짜 및 시간 정보 가져오기

// 현재 연도를 가져옵니다.
const year = now.getFullYear();

// 현재 월을 가져옵니다 (0: 1월, 11: 12월).
const month = now.getMonth();

// 현재 일을 가져옵니다.
const date = now.getDate();

// 현재 요일을 가져옵니다 (0: 일요일, 6: 토요일).
const day = now.getDay();

// 현재 시간을 가져옵니다 (0~23).
const hours = now.getHours();

// 현재 분을 가져옵니다 (0~59).
const minutes = now.getMinutes();

// 현재 초를 가져옵니다 (0~59).
const seconds = now.getSeconds();

UTC 시간 정보 가져오기

로컬 시간은 사용자의 시스템이 설정된 시간대를 기준으로 값을 반환합니다. 각 국가나 지역의 시간대에 따라 다를 수 있습니다.

UTC 시간은 협정 세계시(UTC)를 기준으로, 사용자의 시스템 시간대와 상관없이 동일한 시간을 반환합니다.

const utcYear = now.getUTCFullYear();
const utcMonth = now.getUTCMonth();
const utcDate = now.getUTCDate();
const utcDay = now.getUTCDay();

날짜 및 시간 설정하기

const newDate = new Date();
newDate.setFullYear(2025); // 연도를 2025년으로 설정
newDate.setMonth(11); // 월을 12월로 설정 (0부터 시작하므로 11이 12월을 의미)
newDate.setDate(25); // 날짜를 25일로 설정
console.log(newDate);

getTimezoneOffset

getTimezoneOffset() 메서드는 현재 로컬 시간과 UTC 시간 간의 차이를 분 단위로 반환합니다.

이 값은 양수 또는 음수로 반환되며, 이를 이용해 로컬 시간에서 UTC 시간으로 변환하거나, 반대로 UTC 시간에서 로컬 시간으로 변환할 수 있습니다.

const now = new Date();
const timezoneOffset = now.getTimezoneOffset(); // 분 단위 반환
console.log(timezoneOffset); // 한국의 경우 UTC+9, -540 반환

getTimezoneOffset()으로 받은 값은 분 단위이기 때문에, 밀리초로 변환하려면 60000(1분 = 60000 밀리초)을 곱합니다.

이 값을 사용해 시간을 보정하면, UTC 기준의 시간을 현지 시간으로 변환할 수 있습니다.

function getLocalTime(date: Date) {
    return new Date(date.getTime() - date.getTimezoneOffset() * 60000);
}

프로젝트에서 사용한 Date 객체 관련 함수들

해당 년,월의 일자 얻기

달력을 구현할 때 사용한 메서드입니다.

전달된 연도와 월을 기반으로 해당 월의 모든 일자를 배열로 반환합니다.

첫 번째 주의 경우, 첫 번째 날이 시작되기 전에 빈 칸을 채워 달력의 정렬을 맞출 수 있도록 구현했습니다.

function getMonthDays(year: number, month: number) {
    const days: (number | null)[] = [];
    const date = new Date(year, month, 1);
    const firstDayOfWeek = date.getDay();

    // 첫 번째 날 이전의 빈 칸 채우기
    for (let i = 0; i < firstDayOfWeek; i++) {
        days.push(null);
    }

    // 해당 월의 날짜 추가
    while (date.getMonth() === month) {
        days.push(date.getDate());
        date.setDate(date.getDate() + 1);
    }
    return days;
}

주어진 시간과 현재 시간의 차이 계산 및 상대적 시간 표시

YouTube Data API에서 각 비디오의 생성 시기는 "2024-09-10T19:30:06Z"와 같은 문자열로 제공됩니다.

이 문자열을 사용해 새로운 Date 객체를 생성하고, 현재 시간과의 차이를 계산하는 로직입니다.

diffInSeconds는 getTime()으로 밀리초 단위로 반환되므로, 초 단위로 변환하기 위해 1000으로 나눴습니다.

secondsInMinute, secondsInHour, secondsInDay, secondsInWeek, secondsInMonth, secondsInYear는 각각 1분, 1시간, 1일, 1주, 1개월, 1년을 초 단위로 표현한 값입니다.

이 값들을 바탕으로 Math.floor를 사용해 정수로 반올림한 후, "몇 분 전", "몇 시간 전", "몇 일 전"과 같은 형식으로 시간 차이를 포맷합니다.

export function formatDateTime(dateString: string): string {
    const now = new Date();
    const targetDate = new Date(dateString);
    const diffInSeconds = Math.floor((now.getTime() - targetDate.getTime()) / 1000);

    const secondsInMinute = 60;
    const secondsInHour = 60 * secondsInMinute;
    const secondsInDay = 24 * secondsInHour;
    const secondsInWeek = 7 * secondsInDay;
    const secondsInMonth = 30 * secondsInDay;
    const secondsInYear = 365 * secondsInDay;

    if (diffInSeconds < secondsInHour) {
        const minutes = Math.floor(diffInSeconds / secondsInMinute);
        return `${minutes}분 전`;
    } else if (diffInSeconds < secondsInDay) {
        const hours = Math.floor(diffInSeconds / secondsInHour);
        return `${hours}시간 전`;
    } else if (diffInSeconds < secondsInWeek) {
        const days = Math.floor(diffInSeconds / secondsInDay);
        return `${days}일 전`;
    } else if (diffInSeconds < 14 * secondsInDay) {
        const weeks = Math.floor(diffInSeconds / secondsInWeek);
        return `${weeks}주 전`;
    } else if (diffInSeconds < secondsInMonth) {
        const days = Math.floor(diffInSeconds / secondsInDay);
        return `${days}일 전`;
    } else if (diffInSeconds < secondsInYear) {
        const months = Math.floor(diffInSeconds / secondsInMonth);
        return `${months}개월 전`;
    } else {
        const years = Math.floor(diffInSeconds / secondsInYear);
        return `${years}년 전`;
    }
}

"YYYY-MM-DD" 형태의 문자열로 포맷하기

export function formatISODate(date: Date) {
    return new Date(date.getTime() - date.getTimezoneOffset() * 60000)
        .toISOString()
        .split("T")[0];
}

"YYYY-MM-DD" 형식의 문자열로 날짜를 포맷하기 위해 formatISODate 함수를 작성했습니다.

getFullYear, getMonth, getDate를 사용하는 것이 더 직관적이지만, 학습을 위해 getTimezoneOffset()과 toISOString()을 사용해 변환해보았습니다.

getTimezoneOffset()은 로컬 시간과 UTC 시간의 차이를 분 단위로 반환하며, 이를 밀리초로 변환하기 위해 * 60000을 곱했습니다.

이렇게 로컬 시간과의 차이를 보정한 후 toISOString()을 사용하면, UTC 기준으로 "2024-09-24T15:00"과 같은 형식의 문자열을 반환합니다. 여기서 필요한 날짜 부분만 추출해 "YYYY-MM-DD" 형식으로 포맷했습니다.

OpenWeatherMap API로 날씨 Web 만들기 - 3

Hyun Dev — Wed, 11 Sep 2024 22:31:29 +0900

전체 레이아웃

검색어 입력시

검색 중일 때 로딩 스피너

프로젝트를 진행하면서 가장 고민했던 부분 중 하나는 검색어 입력을 어떻게 처리할지였습니다.

OpenWeatherMap API에는 도시 이름과 국가 코드를 함께 입력하거나, 위도와 경도 좌표, 도시 ID, 우편번호로 검색할 수 있는 방법이 있지만, 사용자는 이런 복잡한 방법으로 검색을 하지 않기 때문입니다.

그러다가 OpenWeatherMap의 Direct Geocoding API를 찾았고, 이 API에선 검색어가 포함된 여러 도시와 그 좌표가 함께 반환되었습니다.

이를 활용해 검색어에 맞는 도시 리스트를 보여주고, 선택된 도시의 위도와 경도로 Recoil에 저장된 location 값을 변경하는 방식으로 구현했습니다.

그리고 시간대별 날씨를 보여주는 HourlyForecast 컴포넌트를 추가했고, 기존에는 단일 온도만 표시되던 Forecast컴포넌트에서 최고온도와 최저온도를 함께 보여주도록 변경했습니다.

이번 포스팅에서는 위 내용들을 어떻게 구현했는지 작성하겠습니다.

weatherAPI

WeatherAPI에는 위에서 설명한 Direct Geocoding API 요청을 추가했습니다.

async getCityCoords(query: string) {
    const response = await axios.get("https://api.openweathermap.org/geo/1.0/direct", {
        params: {
            q: query,
            limit: 5,
            appid: process.env.REACT_APP_WEATHER_API_KEY,
        },
    });
    return response.data;
}

Header 컴포넌트

interface CityResult {
    name: string;
    country: string;
    lat: number;
    lon: number;
    local_names: {
        ko: string;
    };
}

export default function Header() {
    const [location, setLocation] = useRecoilState(locationState);
    const [text, setText] = useState("");
    const [isFocused, setIsFocused] = useState(false);
    const [isExpanded, setIsExpanded] = useState(false);
    const [searchResults, setSearchResults] = useState<CityResult[]>([]);
    const defaultLocation = { lat: 37.5145, lon: 127.0495 };
    const [debouncedText, setDebouncedText] = useState(text);
    const [isLoading, setIsLoading] = useState(false);

    const { mutate: searchCities } = useMutation({
        mutationFn: async (query: string) => {
            const response = await WeatherApi.getCityCoords(query);
            return response;
        },
        onSuccess: (data: CityResult[]) => {
            setSearchResults(data);
            setIsLoading(false);
        },
        onError: (error: Error) => {
            console.error("검색 중 오류 발생:", error);
            setIsLoading(false);
        },
    });

    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const value = e.target.value.trim();
        setText(e.target.value);
        setIsExpanded(value.length > 0);
        setIsLoading(value.length > 0);
    };

    useEffect(() => {
        if (debouncedText) {
            searchCities(debouncedText);
        }
    }, [debouncedText]);

    useEffect(() => {
        const handler = setTimeout(() => {
            setDebouncedText(text);
        }, 500);

        return () => {
            clearTimeout(handler);
        };
    }, [text]);

    const handleFocus = () => {
        setIsFocused(true);
    };

    const handleBlur = () => {
        setIsFocused(false);
    };

    // 기존에 있던 getLocation 함수 정의 생략

    const handleResultClick = (lat: number, lon: number) => {
        setLocation({ lat: lat, lon: lon });
        setText('');
        setIsExpanded(false);
    };

    return (
        <header className={styles.header}>
            <div className={styles.container}>
            	{/* 로고 생략 */}
                <form
                    className={`${styles.form} ${isLoading ? styles.searching : ""} ${(isFocused && isExpanded) ? styles.expanded : ''}`}
                    onSubmit={handleSubmit}
                >
                    <div>
                        <input
                            className={styles.input}
                            type="search"
                            name="search"
                            placeholder="검색"
                            autoComplete="off"
                            value={text}
                            onChange={handleInputChange}
                            onFocus={handleFocus}
                            onBlur={handleBlur}
                        />
                        <button className={`${styles["search-icon"]} ${styles.icon}`}>
                            <IoIosSearch />
                        </button>
                    </div>
                    <div className={`${styles.result} ${isFocused && isExpanded ? styles.active : ""}`}>
                        <ul className={styles.list}>
                            {searchResults.map((result, index) => {
                                const { lat, lon } = result;
                                const name = result?.local_names?.ko || result.name;
                                return (
                                    <li key={index} className={styles.item} onMouseDown={() => handleResultClick(lat, lon)}>
                                        <span className={styles.icon}>
                                            <CiLocationOn />
                                        </span>
                                        <div>
                                            <p className={styles.title}>{name}</p>
                                            <p className={styles.label}>{result.country}</p>
                                        </div>
                                    </li>
                                );
                            })}
                        </ul>
                    </div>
                </form>
                <div className={styles.right}>
                    {/* 생략 */}
                </div>
            </div>
        </header>
    );
}

디바운스(Debounce) 기능

처음에는 input의 onChange 이벤트가 발생할 때마다 서버에 요청을 보내는 방식으로 구현했었습니다.

하지만 이렇게 하면, 예를 들어 "부산"이라는 도시를 입력할 때 각 글자가 입력될 때마다 서버 요청이 발생하여, 총 5번의 요청이 이루어졌습니다.

이러한 불필요한 서버 요청을 줄이기 위해 디바운스 기능을 추가했습니다.

디바운스는 연속적으로 발생하는 이벤트를 하나로 묶어 처리하여, 중복된 요청을 방지하는 역할을 합니다.

이를 통해, 불필요한 서버 요청을 줄이고 사용자가 입력을 멈추고 500ms 동안 추가 입력이 없을 때에만 요청이 발생하도록 구현했습니다.

useEffect(() => {
    if (debouncedText) {
        searchCities(debouncedText); // debouncedText가 업데이트되면 서버 요청
    }
}, [debouncedText]);

useEffect(() => {
    const handler = setTimeout(() => {
        setDebouncedText(text); // 500ms 후에 debouncedText에 text 값 적용
    }, 500);

    return () => {
        clearTimeout(handler); // 새로운 입력이 있을 경우 이전 타이머를 취소
    };
}, [text]);

text가 변화할 때마다 바로 서버 요청을 보내는 대신, debouncedText가 일정 시간이 지난 후에만 서버 요청을 보내도록 구현했습니다.

useMutation 사용

처음에는 useQuery를 사용하려 했지만, useQuery는 주로 페이지 로드 시점이나 특정 시점에서 데이터를 가져오고 캐싱하는 데 적합합니다.

그러나 input의 onChange 이벤트처럼 연속적으로 서버 요청을 보내는 경우에는 적합하지 않았습니다.

그래서, 이런 경우에 더 적합한 useMutation을 선택했습니다.

useMutation은 주로 서버에 데이터를 보내는 작업(POST, PUT, DELETE)에 사용됩니다.

하지만 여기에서는 사용자가 입력할 때마다 서버에 데이터를 요청하고, 그에 따라 검색 결과를 리스트로 보여주기 위해 useMutation을 사용했습니다.

const { mutate: searchCities } = useMutation({
    mutationFn: async (query: string) => {
        const response = await WeatherApi.getCityCoords(query);
        return response;
    },
    onSuccess: (data: CityResult[]) => {
        setSearchResults(data); // 요청 성공 시 결과를 상태에 저장
        setIsLoading(false);    // 로딩 상태 해제
    },
    onError: (error: Error) => {
        console.error("검색 중 오류 발생:", error); // 요청 실패 시 에러 처리
        setIsLoading(false);    // 로딩 상태 해제
    },
});

mutate:

여기서 mutate는 useMutation에서 서버 요청을 트리거하는 함수입니다. mutate가 실행되면, mutationFn에 정의된 비동기 함수가 실행되어 서버로 도시 좌표 검색 요청이 전송됩니다.

mutationFn:

이 함수는 서버로 요청을 보내는 비동기 함수입니다.

여기서는 WeatherApi.getCityCoords(query)를 사용해 도시 이름으로 좌표를 검색하는 API 호출을 수행합니다.

onSuccess:

요청이 성공하면 실행되는 함수입니다. 여기서는 받아온 검색 결과 데이터를 setSearchResults를 통해 상태에 저장하고, 로딩 상태를 해제합니다.

onError:

요청이 실패하면 실행되는 함수입니다. 요청 중 에러가 발생할 경우 콘솔에 에러 메시지를 출력하고, 로딩 상태를 해제합니다.

handleResultClick

const handleResultClick = (lat: number, lon: number) => {
    setLocation({ lat: lat, lon: lon });
    setText('');
    setIsExpanded(false);
};

사용자가 리스트에서 항목을 클릭하면, Recoil의 locationState가 해당 도시의 위도와 경도로 변경됩니다.

이렇게 되면, MainContent 컴포넌트에서도 동일한 locationState를 사용하므로 리렌더링이 발생합니다.

onClick 대신 onMouseDown을 사용한 이유는, CSS로 리스트가 focus-within 상태가 아닐 때 보이지 않도록 설정했기 때문입니다. onClick을 사용하면 클릭 이벤트가 발생하기 전에 포커스가 먼저 사라지기 때문에, 클릭이 제대로 인식되지 않았습니다.

onMouseDown은 포커스가 풀리기 전에 이벤트가 발생하므로 문제를 해결할 수 있었습니다.

HourlyForecast 컴포넌트

export default function HourlyForecast({ forecastData }: { forecastData: IForeCast }) {
    const filteredData = forecastData.list.filter((_, index) => index < 8);

    return (
        <section className={styles.section}>
            <h2 className={styles.title}>시간대별 날씨</h2>
            <div className={styles.container}>
                <ul className={styles.list}>
                    {filteredData.map((forecast) => {
                        const {
                            dt,
                            main: { temp },
                            weather,
                        } = forecast;
                        const [{ icon, description }] = weather;
                        return (
                            <li key={dt} className={styles.item}>
                                <Card size="small" className={styles["forecast-card"]}>
                                    <p className={styles.text}>{getHours(dt)}</p>
                                    <img
                                        src={`http://openweathermap.org/img/wn/${icon}.png`}
                                        width="48"
                                        height="48"
                                        alt={description}
                                        className={styles.img}
                                        title={description}
                                    />
                                    <p className={styles.text}>{`${Math.round(temp)}°`}</p>
                                </Card>
                            </li>
                        );
                    })}
                </ul>
                <ul className={styles.list}>
                    {filteredData.map((forecast) => {
                        const {
                            dt,
                            weather,
                            wind: { deg, speed },
                        } = forecast;
                        const [{ description }] = weather;
                        return (
                            <li key={dt} className={styles.item}>
                                <Card size="small" className={styles["forecast-card"]}>
                                    <p className={styles.text}>{getHours(dt)}</p>
                                    <img
                                        src={directionImg}
                                        width="48"
                                        height="48"
                                        alt={description}
                                        className={styles.img}
                                        title={description}
                                        style={{ transform: `rotate(${deg - 180}deg)` }}
                                    />
                                    <p className={styles.text}>{Math.round(speed * 3600 / 1000)} km/h</p>
                                </Card>
                            </li>
                        );
                    })}
                </ul>
            </div>
        </section>
    );
}

getHours 함수

export const getHours = (timeUnix: number) => {
    const date = new Date(timeUnix * 1000);
    const hours = date.getHours();
    const period = hours >= 12 ? "PM" : "AM";
    const formattedHours = hours % 12 === 0 ? 12 : hours % 12;
    return `${formattedHours} ${period}`;
};

이전 포스팅, 전전 포스팅과 동일한 방식입니다.

timeUnix를 밀리초 단위로 변환하여 Date 객체로 만듭니다. 그 후, 이를 AM/PM 형식으로 시간만 추출해 포맷팅하여 반환합니다.

풍향 표시 및 풍속 계산

{filteredData.map((forecast) => {
    const {
        dt,
        weather,
        wind: { deg, speed },
    } = forecast;
    const [{ description }] = weather;
    return (
        <li key={dt} className={styles.item}>
            <Card size="small" className={styles["forecast-card"]}>
                <p className={styles.text}>{getHours(dt)}</p>
                <img
                    src={directionImg}
                    width="48"
                    height="48"
                    alt={description}
                    className={styles.img}
                    title={description}
                    style={{ transform: `rotate(${deg - 180}deg)` }}
                />
                <p className={styles.text}>{Math.round(speed * 3600 / 1000)} km/h</p>
            </Card>
        </li>
    );
})}

풍향 이미지 회전:

바람의 방향을 시각적으로 보여주기 위해 transform: rotate 속성을 사용해 바람의 각도에 따라 이미지를 회전시킵니다.

풍속 계산 :

풍속은 m/s 단위로 제공되는데, 이를 km/h로 변환하기 위해 아래와 같은 계산식을 사용합니다.

Math.round(speed * 3600 / 1000)

Forecast 컴포넌트 최고 온도 / 최저 온도 표시

forecastData 안에 temp_max와 temp_min이 이미 정의되어 있지만, 일정 인덱스 이후부터는 temp_max와 temp_min이 동일한 값으로 반환되는 문제가 있었습니다.

그래서 날짜별로 그날의 최고 온도와 최저 온도를 추출해 표시해 주었습니다.

const dailyForecast: Array<{
    date: string;
    temp_min: number;
    temp_max: number;
    weather: { icon: string; description: string };
}> = [];

const { city: { timezone } } = forecastData;

const now = new Date();
const today = new Date(now.getTime() - now.getTimezoneOffset() * 60000)
    .toISOString()
    .split("T")[0];

forecastData.list.forEach((forecast) => {
    const { dt } = forecast;
    
    const newDate = new Date((dt + timezone) * 1000);
    const localTime = new Date(newDate.getTime());

    const date = localTime.toISOString().split("T")[0];

    if (date === today) return;

    const existingDay = dailyForecast.find((item) => item.date === date);

    if (!existingDay) {
        dailyForecast.push({
            date,
            temp_min: forecast.main.temp_min,
            temp_max: forecast.main.temp_max,
            weather: forecast.weather[0],
        });
    } else {
        existingDay.temp_min = Math.min(existingDay.temp_min, forecast.main.temp_min);
        existingDay.temp_max = Math.max(existingDay.temp_max, forecast.main.temp_max);
    }
});

timezone은 API에서 제공하는 값으로, UTC와의 시간 차이를 초 단위로 나타냅니다.

단순히 toISOString을 사용하여 날짜를 "YYYY-MM-DD" 형식으로 출력하기 위해 사용했으며, timezone 사용 없이 getFullYear, getMonth, getDate 메서드를 활용해 동일한 결과를 얻을 수도 있습니다.

forecastData.list의 3시간 간격 데이터를 날짜별로 그룹화해, 각 날짜의 최고 및 최저 온도를 dailyForecast 배열에 저장합니다.

오늘을 제외한 이후 날짜만 처리하며, 각 날짜에 대해 온도가 갱신됩니다.

Math.max와 Math.min을 사용해 최고, 최저 온도를 업데이트하고, 이를 기반으로 날짜별 날씨 정보를 요약해 표시합니다.

OpenWeatherMap API로 날씨 Web 만들기 - 2

Hyun Dev — Tue, 10 Sep 2024 08:03:44 +0900

현재까지 진행된 화면

우선 이전 포스팅에서 사용자가 위치 동의를 거부하거나, 위도와 경도를 제대로 받아오지 못했을 때를 대비해서 recoil 기본값으로 서울 강남 좌표를 설정했었는데요.

// 개선 전 코드
import { atom } from "recoil";

export const locationState = atom({
    key: "locationState",
    default: { lat: 37.5145, lon: 127.0495 },
});

이렇게 하니 처음 페이지가 열릴 때 무조건 서울 강남 정보가 렌더링됐다가, 나중에 현재 위치로 바뀌는 상황이 있었습니다.

위도와 경도를 성공적으로 받아왔을 때도, 서울 강남이 먼저 표시되고 나서야 현재 위치로 변경되는 부분이 조금 부자연스러웠습니다.

그래서 이 부분을 위도와 경도를 먼저 불러온 후, 실패할 경우에만 서울 강남을 렌더링하도록 수정했습니다.
이 부분에 대해 구체적으로 어떻게 개선했는지는 포스팅에서 설명드릴 예정입니다.

그리고 오늘의 주요 정보를 보여주는 Highlights 컴포넌트도 추가했는데, 이 컴포넌트는 HTML 과 CSS의 비중이 더 크기 때문에, 특별히 다룰 내용은 많지 않습니다.

locationState default값 변경

위치 정보를 불러온 후에만 값이 설정되도록 하기 위해 초기 lat, lon 값을 null로 설정하였습니다.

import { atom } from "recoil";

export const locationState = atom<{ lat: number | null; lon: number | null }>({
    key: "locationState",
    default: { lat: null, lon: null },
});

Header 컴포넌트 수정

기존에는 Header 컴포넌트에서 Geolocation API를 통해 위도와 경도 정보를 성공적으로 받아오면 이를 locationState에 업데이트하는 역할만 했습니다.

이 기능은 그대로 유지하면서, 이제 위치 정보 불러오기에 실패했을 경우에는 기본값(defaultLocation)을 사용해 locationState를 업데이트하는 로직으로 변경했습니다.

const defaultLocation = { lat: 37.5145, lon: 127.0495 };

const getLocation = (showAlert = false) => {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            (position) => {
                const { latitude, longitude } = position.coords;
                setLocation({ lat: latitude, lon: longitude }); // 위치 정보를 받아오면 그대로 업데이트
            },
            (error) => {
                if (error.code === error.PERMISSION_DENIED && showAlert) {
                    alert("위치 정보 접근이 차단되었습니다. 브라우저 설정을 확인해주세요.");
                }
                console.error("위치 정보를 가져오는 데 실패했습니다.", error);
                setLocation(defaultLocation); // 실패 시 기본값 설정
            }
        );
    } else {
        console.error("이 브라우저는 Geolocation을 지원하지 않습니다.");
        setLocation(defaultLocation); // Geolocation을 지원하지 않으면 기본값 설정
    }
};

MainContent컴포넌트 수정

기존의 useQueries에 location.lat와 location.lon이 모두 있을 때만 쿼리가 활성화되도록 enabled 옵션을 추가했습니다.

enabled: !!location.lat && !!location.lon,

이렇게 하면 위도와 경도 값이 없을 경우 쿼리가 실행되지 않게 됩니다.

그러나 TypeScript에서는 여전히 location.lat와 location.lon이 null일 수 있다고 경고를 띄우기 때문에, 이를 해결하기 위해 queryFn 내부에서도 조건문을 추가했습니다.

queryFn: () =>
    location.lat && location.lon
        ? WeatherApi.getCurrentWeather(location.lat, location.lon)
        : Promise.reject(new Error("위치 정보 없음")),

const [location] = useRecoilState(locationState);

const results = useQueries({
    queries: [
        {
            queryKey: ["currentWeather", location.lat, location.lon],
            queryFn: () =>
                location.lat && location.lon
                    ? WeatherApi.getCurrentWeather(location.lat, location.lon)
                    : Promise.reject(new Error("위치 정보 없음")),
            staleTime: 60000,
            gcTime: 1000 * 60 * 10,
            refetchOnWindowFocus: false,
            refetchOnMount: false,
            refetchOnReconnect: false,
            enabled: !!location.lat && !!location.lon,
        },
        {/* 생략 */}
    ],
});

Weather Api

이번에 Highlights 컴포넌트를 구현하면서, 대기 오염 지수도 함께 표시하려고 Weather API에 새로운 메서드를 추가했습니다.

이 메서드는 위도와 경도를 받아서 대기 오염 데이터를 가져오는 역할을 합니다.

async getAirPollution(lat: number, lon: number) {
    const response = await this.httpClient.get("air_pollution", {
        params: {
            lat: lat,
            lon: lon,
        }
    });
    return response.data;
}

Highlight 컴포넌트

Highlights 컴포넌트에서는 이 API로 받아온 대기 오염 데이터를 활용해 미세먼지, 이산화황(SO₂), 이산화질소(NO₂), 오존(O₃) 등 주요 대기 오염 정보를 표시합니다.

기존의 날씨 정보도 함께 구성하여 오늘의 주요 정보 섹션을 만들었습니다.

interface HighlightsProps {
    airPollution: IAirPollution;
    currentWeather: ICurrentWeather;
}

export default function Highlights({airPollution, currentWeather}: HighlightsProps) {
    const {
        main: { aqi },
        components: { pm2_5, so2, no2, o3 },
    } = airPollution.list[0];

    const {
        main: { humidity, pressure, sea_level, feels_like },
        sys: { sunrise, sunset },
        visibility,
    } = currentWeather;

    console.log(pm2_5,so2, no2, o3 );
    return (
        <section className={styles.section}>
            <Card size="large">
                <h2 className={styles.title}>오늘의 주요 정보</h2>
                <div className={styles.grid}>
                    <Card size="small" className={`${styles["highlight-card"]} ${styles["one"]}`}>
                        <h3 className={styles.heading}>대기 오염 지수</h3>
                        <div className={styles.wrapper}>
                            <span className={styles.icon}>
                                <MdAir />
                            </span>
                            <ul className={styles.list}>
                                <li className={styles.item}>
                                    <p className={styles.label}>미세먼지</p>
                                    <p className={styles.title}>{pm2_5.toFixed(2)}</p>
                                </li>

                                <li className={styles.item}>
                                    <p className={styles.label}>이산화황</p>
                                    <p className={styles.title}>{so2.toFixed(2)}</p>
                                </li>

                                <li className={styles.item}>
                                    <p className={styles.label}>이산화질소</p>
                                    <p className={styles.title}>{no2.toFixed(2)}</p>
                                </li>

                                <li className={styles.item}>
                                    <p className={styles.label}>오존</p>
                                    <p className={styles.title}>{o3.toFixed(2)}</p>
                                </li>
                            </ul>
                        </div>
                    </Card>
                    <Card size="small" className={`${styles["highlight-card"]} ${styles["two"]}`}>
                        <h3 className={styles.heading}>일출 & 일몰</h3>
                        <div className={styles.list}>
                            <div className={styles.item}>
                                <span className={styles.icon}>
                                    <FiSunrise />
                                </span>
                                <div>
                                    <p className={styles.label}>일출</p>
                                    <p className={styles.title}>{getTime(sunrise)}</p>
                                </div>
                            </div>
                            <div className={styles.item}>
                                <span className={styles.icon}>
                                    <FiSunset />
                                </span>
                                <div>
                                    <p className={styles.label}>일몰</p>
                                    <p className={styles.title}>{getTime(sunset)}</p>
                                </div>
                            </div>
                        </div>
                    </Card>
                    {/* 나머지 카드 생략 */}
                </div>
            </Card>
        </section>
    );
}

일출 및 일몰 시간 처리

날씨 정보를 표시하는 Highlights 컴포넌트에서, 일출과 일몰 시간을 표시하기 위해 시간을 변환하는 getTime 함수를 추가했습니다.

이전 포스팅에서 작성한 getDate 함수와 원리는 비슷합니다.

timeUnix를 1000으로 나눠 밀리초 단위로 변환한 후, Date 객체를 생성하여 원하는 형태의 문자열로 출력하는 방식입니다

export const getTime = function (timeUnix: number): string {
    const date = new Date(timeUnix * 1000);
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const period = hours >= 12 ? "PM" : "AM";
    const formattedHours = hours % 12 === 0 ? 12 : hours % 12;
    return `${formattedHours}:${minutes} ${period}`;
};

OpenWeatherMap API로 날씨 Web 만들기 - 1

Hyun Dev — Mon, 9 Sep 2024 07:50:51 +0900

현재까지 진행된 화면

이번 프로젝트에서는 OpenWeatherMap API를 활용하여 날씨 정보를 확인할 수 있는 웹을 만들어보려고 합니다.

기본적으로 사용자의 현재 위치를 기반으로 해당 지역의 날씨 정보를 제공할 계획입니다.

날씨 정보를 얻기 위해서는 위도와 경도가 필요해서 Geolocation Web Api를 사용하여 위도와 경도를 받아왔고, 위도와 경도 정보는 프로젝트 내 여러 곳에서 활용될 거 같아서 Recoil을 사용해 전역으로 상태를 관리했습니다.

사실 Context API가 아닌 다른 상태 관리 라이브러리를 사용해 보고 싶어서 한 번 사용해 봤지만, 위도와 경도 저장은 너무 간단한 작업이라 그냥 Context API로 교체할지 고민 중입니다.

또 OpenWeatherMap API에서 한국 도시명이 제공되지 않았었는데, 다행히도 reverseGeoCoding 기능이 API에 포함되어 있어, 이를 이용해 위도와 경도로 한국 도시명을 받아와서 표시하였습니다.

Header 컴포넌트

Header컴포넌트에는 사용자가 검색을 통해 장소를 입력할 수 있는 input과 내 위치 찾기 버튼을 통해 사용자의 위도와 경도를 얻을 수 있는 버튼이 있습니다.

1. 검색을 통한 장소 입력 (현재 미구현)

검색을 통해 장소를 입력하는 기능은 아직 구현되지 않았습니다.

OpenWeatherMap API는 도시 이름을 q=Seoul,KR 형식으로 요청해야 하는데, 국가명을 어떻게 붙일지와 단순히 영단어로만 검색할 것이 아니라 한글 등 다양한 입력을 어떻게 처리할지에 대해 아직 고민 중입니다.

2. 내 위치 찾기 버튼

export default function Header() {
    const [location, setLocation] = useRecoilState(locationState);
    const [text, setText] = useState("");

    const getLocation = (showAlert = false) => {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                (position) => {
                    const { latitude, longitude } = position.coords;
                    setLocation({ lat: latitude, lon: longitude });
                },
                (error) => {
                    if (error.code === error.PERMISSION_DENIED && showAlert) {
                        alert("위치 정보 접근이 차단되었습니다. 브라우저 설정을 확인해주세요.");
                    } else {
                        console.error("위치 정보를 가져오는 데 실패했습니다.", error);
                    }
                }
            );
        } else {
            console.error("이 브라우저는 Geolocation을 지원하지 않습니다.");
        }
    };

    useEffect(() => {
        getLocation(false);
    }, []);

    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
    };

    const handleLocationClick = () => {
        getLocation(true);
    };

    return (
        <header className={styles.header}>
            <div className={styles.container}>
                <button className={styles.logo}>
                    <TiWeatherPartlySunny />
                    <span>weather</span>
                </button>
                <form className={styles.form} onSubmit={handleSubmit}>
                    <input
                        className={styles.input}
                        type="search"
                        name="search"
                        placeholder="검색"
                        autoComplete="off"
                        value={text}
                        onChange={(e) => setText(e.target.value)}
                    />
                    <button className={styles.icon}>
                        <IoIosSearch />
                    </button>
                </form>
                <div className={styles.right}>
                    <button className={styles.primary} onClick={handleLocationClick}>
                        <span className={styles.icon}>
                            <TbCurrentLocation />
                        </span>
                        <span className={styles.span}>내 위치 찾기</span>
                    </button>
                </div>
            </div>
        </header>
    );
}

내 위치 찾기 버튼을 누르면 Geolocation Api를 사용해 현재 위치를 기반으로 위도와 경도를 가져 올 수 있게 구현했습니다.

앞서 말한 대로, 위도와 경도는 프로젝트 내에서 자주 사용될 것 같아서 Recoil을 통해 전역으로 상태를 관리합니다.

import { atom } from "recoil";

export const locationState = atom({
    key: "locationState",
    default: { lat: 37.5145, lon: 127.0495 },
});

기본적으로 서울 강남의 위도, 경도를 default 값으로 지정했습니다. 사용자가 위치 정보 제공에 동의하지 않을 경우를 대비한 설정입니다.

WeatherApi

서버 요청하는 부분은 WeatherApi 모듈로 분리했습니다.

import axios from "axios";

const WeatherApi = {
    httpClient: axios.create({
        baseURL: "https://api.openweathermap.org/data/2.5",
        params: {
            appid: process.env.REACT_APP_WEATHER_API_KEY,
            units: "metric",
            lang: "kr",
        },
    }),

    async getCurrentWeather(lat: number, lon: number) {
        const response = await this.httpClient.get("weather", {
            params: {
                lat: lat,
                lon: lon,
            },
        });
        return response.data;
    },

    async getForecast(lat: number, lon: number) {
        const response = await this.httpClient.get("forecast", {
            params: {
                lat: lat,
                lon: lon,
            },
        });
        return response.data;
    },

    async getReverseGeo(lat: number, lon: number) {
        const response = await axios.get("https://api.openweathermap.org/geo/1.0/reverse", {
            params: {
                lat: lat,
                lon: lon,
                limit: 5,
                lang: "kr",
                appid: process.env.REACT_APP_WEATHER_API_KEY,
            },
        });
        return response.data[0].local_names['ko'];
    },
};

export default WeatherApi;

getCurrentWeather: 전달한 위도와 경도를 바탕으로 해당 위치의 현재 날씨 정보를 반환합니다.

getForecast: 해당 위치의 5일치 3시간 간격 날씨 예보를 반환하는 함수입니다.

getReverseGeo: 전달한 위도와 경도를 바탕으로 해당 위치의 도시명을 반환하는 함수입니다.

MainContent 컴포넌트

MainContent 컴포넌트는 useQueries를 사용하여 한 번에 여러 API 요청을 병렬로 처리하는 방식으로 구성되어 있습니다. OpenWeatherMap API를 통해 현재 위치의 날씨 정보, 5일간의 날씨 예보, 그리고 reverse geocoding을 이용한 도시 이름을 가져옵니다.

export default function MainContent() {
    const [location, setLocation] = useRecoilState(locationState);
    const results = useQueries({
        queries: [
            {
                queryKey: ["currentWeather", location.lat, location.lon],
                queryFn: () =>
                    WeatherApi.getCurrentWeather(location.lat, location.lon),
                staleTime: 60000,
                gcTime: 1000 * 60 * 10,
                refetchOnWindowFocus: false,
                refetchOnMount: false,
                refetchOnReconnect: false,
            },
            {
                queryKey: ["forecast", location.lat, location.lon],
                queryFn: () =>
                    WeatherApi.getForecast(location.lat, location.lon),
                staleTime: 60000,
                gcTime: 1000 * 60 * 10,
                refetchOnWindowFocus: false,
                refetchOnMount: false,
                refetchOnReconnect: false,
            },
            {
                queryKey: ["city", location.lat, location.lon],
                queryFn: () =>
                    WeatherApi.getReverseGeo(location.lat, location.lon),
                staleTime: 60000,
                gcTime: 1000 * 60 * 10,
                refetchOnWindowFocus: false,
                refetchOnMount: false,
                refetchOnReconnect: false,
            },
        ],
    });
    const [{ data: currentWeather }, { data: forecastData }, { data: city }] =
        results;

    const isLoading = results[0].isLoading || results[1].isLoading || results[2].isLoading;

    if (isLoading) {
        return <p>Loading...</p>;
    }

    return (
        <main>
            <article className={styles.container}>
                <div className={styles.left}>
                    <CurrentWeather
                        currentWeather={currentWeather}
                        city={city}
                    />
                    <Forecast forecastData={forecastData} />
                </div>
                <div className={styles.right}>right</div>
            </article>
        </main>
    );
}

CurrentWeather 컴포넌트

CurrentWeather 컴포넌트는 MainContent에서 전달받은 날씨 데이터와 도시명을 바탕으로 사용자에게 현재 날씨 정보를 표시합니다. 날씨 상태, 온도, 날짜, 그리고 도시명을 화면에 렌더링합니다.

export default function CurrentWeather({
    currentWeather,
    city,
}: {
    currentWeather: ICurrentWeather;
    city: string;
}) {
    const {
        weather,
        dt: dataUnix,
        sys: { country },
        main: { temp },
    } = currentWeather;

    const [{ icon, description }] = weather;
    const iconUrl = `http://openweathermap.org/img/wn/${icon}.png`;
    return (
        <section className={styles.section}>
            <Card size="large">
                <h2 className={styles.title}>현재</h2>
                <div className={styles.wrapper}>
                    <p className={styles.heading}>
                        {`${Math.round(temp)}°`}<sup>c</sup>
                    </p>
                    <img
                        src={iconUrl}
                        width="64"
                        height="64"
                        alt="clouds"
                        className={styles.img}
                    />
                </div>
                <p className={styles.desc}>{description}</p>
                <ul className={styles.list}>
                    <li className={styles.item}>
                        <span className={styles.icon}>
                            <IoCalendarClearOutline />
                        </span>
                        <p className={styles.text}>
                            {getDate(dataUnix)}
                        </p>
                    </li>
                    <li className={styles.item}>
                        <span className={styles.icon}>
                            <IoLocationOutline />
                        </span>
                        <p className={styles.text}>{city}, {country}</p>
                    </li>
                </ul>
            </Card>
        </section>
    );
}

getDate 메서드

API가 제공하는 dateUnix는 초 단위로 반환되지만, JavaScriptDate 객체는 밀리초 단위로 만들어야 하기 때문에 dateUnix에 *1000을 해주어 변환했습니다.

export const weekDayNames = [
    "일",
    "월",
    "화",
    "수",
    "목",
    "금",
    "토",
];

export const monthNames = [
    "1월",
    "2월",
    "3월",
    "4월",
    "5월",
    "6월",
    "7월",
    "8월",
    "9월",
    "10월",
    "11월",
    "12월",
];

export const getDate = function (dateUnix: number): string {
    const date = new Date(dateUnix * 1000);
    const weekDayName = weekDayNames[date.getDay()];
    const monthName = monthNames[date.getMonth()];
    return `${monthName} ${date.getDate()}일 ${weekDayName}요일`;
};

Forecast 컴포넌트

Forecast 컴포넌트는 OpenWeatherMap API에서 제공하는 5일간의 날씨 예보 데이터를 렌더링하는 역할을 합니다.

getForecast 요청 시, OpenWeatherMap API는 5일간의 날씨 데이터를 3시간 간격으로 총 40개의 항목을 제공합니다.

이를 5개로 줄이기 위해, 8번째마다 데이터를 선택하여 각 날의 예보를 표시하도록 filteredData로 필터링을 적용했습니다.

export default function Forecast({
    forecastData,
}: {
    forecastData: IForeCast;
}) {
    const filteredData = forecastData.list.filter((_, index) => index % 8 === 7);

    return (
        <section className={styles.section}>
            <h2 className={styles.title}>날씨예보</h2>
            <Card size="large">
                <ul className={styles.list}>
                    {filteredData.map((forecast, index) => {
                        const {
                            main: { temp_max },
                            weather,
                            dt_txt,
                        } = forecast;
                        const [{ icon, description }] = weather;
                        const date = new Date(dt_txt);

                        return (
                            <li key={index} className={styles.item}>
                                <div className={styles.wrapper}>
                                    <img
                                        src={`http://openweathermap.org/img/wn/${icon}.png`}
                                        width="36"
                                        height="36"
                                        alt={description}
                                        className={styles.img}
                                        title={description}
                                    />
                                    <span className={styles.span}>
                                        <p className={styles.temp}>
                                            {`${Math.round(temp_max)}°`}
                                        </p>
                                    </span>
                                </div>
                                <p className={styles.label}>
                                    {monthNames[date.getUTCMonth()]} {date.getDate()}일
                                </p>
                                <p className={styles.label}>
                                    {weekDayNames[date.getUTCDay()]}
                                </p>
                            </li>
                        );
                    })}
                </ul>
            </Card>
        </section>
    );
}

Card 컴포넌트

Card형태의 레이아웃이 많이 사용될 예정이라 다양한 레이아웃에서 사용할 수 있도록 크기(size)에 따라 클래스를 다르게 적용할 수 있도록 설계되었습니다.

large와 small 두 가지 크기 옵션을 제공하여 재사용성을 높였습니다.

export default function Card({
    children,
    size = "large",
}: {
    children: ReactNode;
    size?: "large" | "small";
}) {
    const sizeClassMap: { [key: string]: string } = {
        large: "card-lg",
        small: "card-sm",
    };

    const className = sizeClassMap[size] || "";
    return <div className={`${styles.card} ${styles[className]}`}>{children}</div>;
}

Geolocation API로 실시간 위치 정보 가져오기

Hyun Dev — Sun, 8 Sep 2024 18:58:46 +0900

https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API

Geolocation API - Web APIs | MDN

The Geolocation API allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information.

developer.mozilla.org

1. Geolocation API란?

Geolocation API는 웹사이트가 사용자의 기기에서 위치 정보를 요청할 수 있도록 해주는 기능입니다.

위치 정보는 사용자의 허락을 받아야만 가져올 수 있습니다.

2. 위치 정보 가져오기: getCurrentPosition()

위치 정보를 한 번만 가져오려면 getCurrentPosition() 메서드를 사용합니다.

이 메서드는 성공 시 실행될 함수(필수), 실패 시 실행될 함수(필수), 그리고 추가 설정 옵션(선택)을 인수로 받습니다.

navigator.geolocation.getCurrentPosition(
    (position) => {
        console.log("위도: " + position.coords.latitude);
        console.log("경도: " + position.coords.longitude);
    },
    (error) => {
        console.error("오류 발생: ", error);
    }
);

3. 위치 정보 객체 (position) 자세히 알아보기

성공적으로 위치 정보를 가져오면 position 객체가 반환됩니다.

이 객체에는 사용자 기기의 여러 위치 정보가 들어 있습니다.

coords.latitude: 위도 (ex: 37.5172)
coords.longitude: 경도 (ex: 127.0473)
coords.altitude: 고도, 미터 단위 (사용할 수 없으면 null).
coords.accuracy: 위치의 정확도, 미터 단위.
coords.altitudeAccuracy: 고도의 정확도 (사용할 수 없으면 null).
coords.heading: 기기가 가리키고 있는 방향 (정지 상태일 경우 null).
coords.speed: 기기의 이동 속도, m/s 단위 (정지 상태일 경우 null)

navigator.geolocation.getCurrentPosition(
    (position) => {
        const { latitude, longitude, accuracy, altitude, heading, speed } = position.coords;
        console.log(`위도: ${latitude}, 경도: ${longitude}`);
        console.log(`정확도: ${accuracy}m`);
        console.log(`고도: ${altitude !== null ? altitude + "m" : "정보 없음"}`);
        console.log(`방향: ${heading !== null ? heading + "°" : "정지 상태"}`);
        console.log(`속도: ${speed !== null ? speed + "m/s" : "정지 상태"}`);
    }
);

4. 오류 처리

위치 정보를 가져오는 중 발생하는 오류는 크게 세 가지로 나눌 수 있습니다.

PERMISSION_DENIED: 사용자가 위치 정보 접근을 거부한 경우.
POSITION_UNAVAILABLE: 기기의 위치 정보를 사용할 수 없는 경우.
TIMEOUT: 위치 정보를 가져오는 시간이 초과된 경우.

navigator.geolocation.getCurrentPosition(
    (position) => {
        // 위치 정보를 성공적으로 가져옴
    },
    (error) => {
        switch (error.code) {
            case error.PERMISSION_DENIED:
                alert("위치 정보 접근이 거부되었습니다.");
                break;
            case error.POSITION_UNAVAILABLE:
                alert("위치 정보를 사용할 수 없습니다.");
                break;
            case error.TIMEOUT:
                alert("위치 정보를 가져오는 데 시간이 너무 오래 걸렸습니다.");
                break;
            default:
                alert("알 수 없는 오류가 발생했습니다.");
        }
    }
);

5. 위치 요청 시 옵션 설정하기

getCurrentPosition() 메서드는 추가적인 옵션을 설정할 수 있습니다.

enableHighAccuracy: 위치 정보의 정확도를 높일지 여부(기본값 false)
true로 설정하면 더 정확한 위치 정보를 제공하지만, 배터리 소모량이 증가할 수 있습니다.
timeout: 위치 정보를 가져오는 데 걸리는 최대 시간 (밀리초 단위).
maximumAge: 이전 위치 정보를 얼마 동안 캐시할지 (밀리초 단위). 0으로 설정 시 항상 최신 정보를 요청합니다.

navigator.geolocation.getCurrentPosition(
    (position) => {
        console.log(`위도: ${position.coords.latitude}, 경도: ${position.coords.longitude}`);
    },
    (error) => {
        console.error("위치 정보를 가져오는 중 오류 발생: ", error);
    },
    {
        enableHighAccuracy: true,  // 고정밀도 위치 요청
        timeout: 5000,             // 5초 이내에 위치 정보를 가져오지 않으면 오류 처리
        maximumAge: 0              // 캐시된 위치 정보 사용 안 함
    }
);

YouTube Data API를 이용한 Youtube Clone - 7

Hyun Dev — Sat, 7 Sep 2024 05:41:14 +0900

↓↓↓↓이 프로젝트의 전체 코드는 GitHub에서 확인하실 수 있습니다.↓↓↓↓

https://github.com/GangHyun95/youtube

GitHub - GangHyun95/youtube: with typescript

with typescript. Contribute to GangHyun95/youtube development by creating an account on GitHub.

github.com

프로젝트에서 VideoDetail 페이지로 이동할 때 useNavigate를 통해 데이터를 전달하는 방식을 사용했 었는데요.

VideoCard와 RelatedVideoList에서 사용하는 데이터의 출처가 다르다 보니 문제가 발생했습니다.

이번 포스팅에서는 이 문제를 해결하는 과정과 VideoCard에 마우스를 올렸을 때 해당 비디오ID의 iframe을 생성하여 미리보기 영상이 재생되는 것처럼 보이도록 구현한 방법을 다루겠습니다.

VideoDetail 페이지 문제의 원인

1. VideoCard

YouTube의 video 엔드포인트를 사용해 데이터를 요청하고, 이때 statistics 정보를 포함했습니다. 또한, 요청한 데이터에 채널 정보를 추가하여 반환했습니다.

2. RelatedVideoList

YouTube의 playlists 엔드포인트를 사용했는데, 이 엔드포인트에서는 statistics 정보나 채널 정보가 포함되지 않았습니다.

이 차이로 인해 VideoDetail 페이지에서 필요한 데이터가 없어서 오류가 발생했습니다.

해결 과정

처음에는 useNavigate로 데이터를 전달하지 않고, VideoDetail 페이지가 마운트될 때마다 useQuery로 무조건 데이터를 요청하는 방식으로 수정하려고 했습니다.

그러다가 React Query의 enabled 속성을 알게 되었고 이걸 이용하면 특정 조건에서만 데이터를 요청할 수 있다는 걸 알았습니다.

그래서 useLocation을 통해 전달된 데이터가 없을 때만 useQuery가 활성화되도록 코드를 수정했습니다.

결과적으로 useNavigate로 전달된 데이터가 있으면 그걸 쓰고 없을 때만 API를 호출해서 비디오 데이터를 받아오게 처리할 수 있었습니다.

const { videoId } = useParams();
const location = useLocation();
const stateVideo = location.state?.video;

const { data: fetchedVideo, isLoading } = useQuery({
    queryKey: ["video", videoId],
    queryFn: () => YoutubeApi.getVideoById(videoId || ""),
    staleTime: 60000,
    gcTime: 1000 * 60 * 10,
    refetchOnWindowFocus: false,
    refetchOnMount: false,
    refetchOnReconnect: false,
    enabled: !stateVideo,
});

const video = stateVideo || fetchedVideo;

단일 비디오 ID로 데이터 요청 함수 추가

YouTube API에서 단일 비디오 ID로 비디오 데이터와 함께 채널 정보를 추가해서 반환하는 함수를 추가했습니다.

async getVideoById(videoId: string) {
    const response = await this.httpClient.get("videos", {
        params: {
            part: "snippet,statistics",
            id: videoId,
        },
    });

    const channelId = response.data.items[0].snippet.channelId;

    const channelResponse = await this.httpClient.get("channels", {
        params: {
            part: "snippet,contentDetails,statistics",
            id: channelId,
        },
    });

    return {
        ...response.data.items[0],
        channelDetails: channelResponse.data.items[0],
    };
}

VideoCard의 마우스 hover 미리보기 기능

VideoCard에 마우스를 올리면 해당 비디오ID의 iframe을 썸네일 위에 생성하고 재생시켜 마치 미리보기 영상이 재생되는 것처럼 구현하였습니다.

const [isHovered, setIsHovered] = useState(false);

const handleMouseEnter = () => {
    setIsHovered(true);
};

const handleMouseLeave = () => {
    setIsHovered(false);
};

return (
    <li
        className={cardClassName}
        ref={ref}
        onClick={() => navigate(`/videos/watch/${video.id}`, { state: { video } })}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
    >
        <section className={styles['img-container']}>
            <img
                className={styles.img}
                src={thumbnails?.maxres?.url || (keyword ? thumbnails.high.url : thumbnails.medium.url)}
                alt={title}
            />
            {isHovered && (
                <iframe
                    className={styles.video}
                    src={`https://www.youtube.com/embed/${video.id}?autoplay=1&mute=1&controls=0&playlist=${video.id}`}
                    frameBorder="0"
                    allow="autoplay; encrypted-media"
                    allowFullScreen
                    title={title}
                ></iframe>
            )}
        </section>
    </li>
);

YouTube Data API를 이용한 Youtube Clone - 6

Hyun Dev — Wed, 4 Sep 2024 20:19:16 +0900

저번 포스팅에서는 YoutubeApi의 getPopularVideos 나 getVideosByKeyword 메서드에서 channelsResponse 데이터를 모두 불러온 뒤 채널 썸네일만 따로 추출해 리턴하는 방식을 사용했지만, 구독자 수나 relatedPlaylist와 같은 정보도 필요해지면서 데이터를 따로 추출해서 리턴하기 보다는 불러온 채널에 관한 정보를 그대로 리턴하는 방식으로 변경했습니다.

이 방식이 어차피 데이터를 다 불러와야 하므로 성능 면에서도 별 차이가 없을 것 같고, 하루 할당량 소모량도 동일해서 더 나을 것이라고 판단했습니다.

그리고 VideoDetail 컴포넌트의 구현 과정에서 CommentList에 무한 스크롤 기능이 필요하여서 구현하였습니다.

구현하고 보니 Videos 컴포넌트에서 이미 구현했던 무한 스크롤 로직과 동일하여서 무한 스크롤 관련 로직을 커스텀 훅으로 분리하였습니다.

1. YoutubeApi 변경 및 추가

변경

앞서 설명한 대로, getVideosByKeyword 메서드에서 channelsResponse에 포함된 채널 정보를 그대로 반환하도록 변경했습니다.

getPopularVideos도 동일한 방식으로 변경했습니다.

    async getVideosByKeyword(keyword: string, pageToken: string) {
        const response = await this.httpClient.get("search", {
            params: {
                part: "snippet",
                maxResults: 10,
                q: keyword,
                pageToken: pageToken,
            },
        });

        const videoIds = response.data.items.map((item: any) => item.id.videoId).join(',');
        const channelIds = Array.from(new Set(response.data.items.map((item: Video) => item.snippet.channelId)));

        const videosResponse = await this.httpClient.get("videos", {
            params: {
                part: "snippet,statistics",
                id: videoIds,
            },
        });

        const channelsResponse = await this.httpClient.get("channels", {
            params: {
                part: "snippet,contentDetails,statistics",
                id: channelIds.join(','),
            },
        });

        const channelDetails: { [key: string]: ChannelDetail } = {};

        channelsResponse.data.items.forEach((channel: ChannelDetail) => {
            channelDetails[channel.id] = channel
        });

        return {
            items: videosResponse.data.items.map((item: any) => ({
                ...item,
                channelDetails: channelDetails[item.snippet.channelId],
            })),
            nextPageToken: response.data.nextPageToken,
        };
    },

추가

async getComments(videoId: string, pageToken: string | undefined) {
    const response = await this.httpClient.get("commentThreads", {
        params: {
            part: "snippet",
            videoId: videoId,
            maxResults: 10,
            pageToken: pageToken,
        },
    });
    return response.data;
}

VideoDetail 컴포넌트의 CommentList에서 필요한 댓글 정보를 불러오는 요청을 추가했습니다.

비디오 ID와 무한 스크롤을 위한 페이지 토큰을 매개변수로 받아 commentThreads API에서 댓글 데이터를 가져옵니다.

2. VideoDetail 컴포넌트

VideoDetail 컴포넌트에서는 비디오 상세 정보와 함께 댓글 목록과 관련 비디오를 보여줍니다.

비디오 설명이 길 경우 toggle 기능을 추가하여, 더보기 또는 간략히 버튼을 통해 설명을 펼치거나 접을 수 있도록 구현했습니다.

toggle 기능

const [expanded, setExpanded] = useState(false);
const [isTruncated, setIsTruncated] = useState(false);
const descRef = useRef<HTMLPreElement>(null);

useEffect(() => {
    if (descRef.current) {
        setIsTruncated(descRef.current.scrollHeight > descRef.current.clientHeight);
    }
}, [description]);

const toggleDesc = () => {
    setExpanded(!expanded);
};

설명이 긴 경우(isTruncated)와 설명이 펼쳐졌는지 여부(expanded)를 관리합니다.

useRef를 이용해 description 요소의 높이를 체크하여 scrollHeight와 clientHeight를 비교, 설명이 잘리는지를 판단합니다.

scrollHeight: 요소의 실제 콘텐츠가 차지하는 전체 높이로, 화면에 보이지 않는 부분도 포함됩니다.
clientHeight: 화면에 보이는 영역의 높이로, 스크롤 없이 보여지는 부분만 포함됩니다.

<div className={`${styles.desc} ${isTruncated ? styles.cursor : ''}`} onClick={isTruncated ? toggleDesc : undefined}>
    <div className={styles.count}>
        <span className={styles.bold}>조회수 {formatViewCount(viewCount)}</span>
        <span className={styles.bold}>{formatDateTime(publishedAt)}</span>
    </div>
    <pre ref={descRef} className={expanded ? styles.expanded : styles.collapsed}>
        {description}
    </pre>
    {isTruncated && (
        <span className={styles.toggle}>
            {expanded ? '간략히' : '더보기'}
        </span>
    )}
</div>

isTruncated 값에 따라 cursor클래스를 통해 cursor-pointer가 적용되며, 클릭 시 toggleDesc 함수가 실행되어 설명이 펼쳐지거나 축소됩니다.

그에 따라 더보기 와 간략히 버튼이 표시됩니다.

3. 무한스크롤 로직 분리

import { useInfiniteQuery } from "@tanstack/react-query";
import { useCallback, useRef } from "react";

interface InfiniteScrollOptions<T> {
    queryKey: string[];
    queryFn: (context: { pageParam?: string }) => Promise<T>;
    getNextPageParam: (lastPage: T) => string | undefined;
    staleTime?: number;
    gcTime?: number;
    refetchOnWindowFocus?: boolean;
    refetchOnMount?: boolean;
    refetchOnReconnect?: boolean;
    initialPageParam?: string;
}

export function useInfiniteScroll<T>({
    queryKey,
    queryFn,
    getNextPageParam,
    staleTime = 60000,
    gcTime = 1000 * 60 * 10,
    refetchOnWindowFocus = false,
    refetchOnMount = false,
    refetchOnReconnect = false,
    initialPageParam = "",
}: InfiniteScrollOptions<T>) {
    const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
        useInfiniteQuery({
            queryKey,
            queryFn,
            getNextPageParam,
            staleTime,
            gcTime,
            refetchOnWindowFocus,
            refetchOnMount,
            refetchOnReconnect,
            initialPageParam,
        });

    const observer = useRef<IntersectionObserver | null>(null);
    const lastElementRef = useCallback(
        (node: HTMLElement | null) => {
            if (isFetchingNextPage) return;
            if (observer.current) observer.current.disconnect();
            observer.current = new IntersectionObserver((entries) => {
                if (entries[0].isIntersecting && hasNextPage) {
                    fetchNextPage();
                }
            });
            if (node) observer.current.observe(node);
        },
        [isFetchingNextPage, fetchNextPage, hasNextPage]
    );

    return { data, lastElementRef, isFetchingNextPage };
}

무한 스크롤 관련 로직에 대한 설명은 유튜브 프로젝트 4번째 포스팅에서 다루었기 때문에, 이 글에서는 생략하겠습니다.

제네릭 타입 <T>

useInfiniteScroll<T>의 옆에 있는 <T>는 제네릭 타입을 의미합니다.

제네릭은 함수나 클래스에서 사용할 데이터 타입을 특정하지 않고 나중에 사용할 때 타입을 지정할 수 있게 합니다.

이 경우에는 API에서 반환된 데이터를 포함할 타입을 유연하게 정의하는 것입니다.
T는 API 호출 결과로 반환되는 데이터의 타입으로, 예를 들어 댓글 목록 또는 비디오 목록과 같은 데이터를 나타낼 수 있습니다.

이렇게 제네릭을 사용함으로써, 무한 스크롤을 다양한 데이터 타입에 대해 재사용할 수 있습니다.

InfiniteScrollOptions<T>

다음으로 InfiniteScrollOptions<T>의 제네릭 <T>도 위와 동일한 개념으로, 이 훅을 사용할 때 받을 데이터의 타입을 정의합니다.

예를 들어 댓글의 데이터를 받는다면 Comment[], 비디오의 데이터를 받는다면 Video[] 등의 타입을 전달하게 됩니다.

이 훅은 아래 3가지 값을 반환합니다.

data: API 호출을 통해 페칭한 데이터
lastElementRef: IntersectionObserver와 연결된 마지막 요소의 참조를 반환하는 함수
isFetchingNextPage: 다음 페이지 데이터를 가져오는 중인지 여부를 나타내는 상태

사용 예시

    const { data: comments, lastElementRef, isFetchingNextPage } = useInfiniteScroll<{
        items: Comment[],
        nextPageToken?: string
    }>({
        queryKey: ["comments", videoId],
        queryFn: async ({ pageParam }) => {
            return YoutubeApi.getComments(videoId, pageParam);
        },
        getNextPageParam: (lastPage) => lastPage.nextPageToken || undefined,
    });

    const { data: videos, lastElementRef, isFetchingNextPage } = useInfiniteScroll<{
        items: Video[],
        nextPageToken?: string,
    }>({
        queryKey: ["videos", keyword || ""],
        queryFn: async ({ pageParam }) => {
            return YoutubeApi.search(keyword || "", pageParam);
        },
        getNextPageParam: (lastPage) => lastPage.nextPageToken || undefined,
    });

YouTube Data API를 이용한 Youtube Clone - 5

Hyun Dev — Mon, 2 Sep 2024 14:20:55 +0900

기존에 Youtube Data API에서 비디오 데이터를 가져올 때, videos API를 통해 요청하면 채널 썸네일 URL이 제공되지 않았습니다.

그래서 비디오 데이터에서 채널 ID를 추출한 후 별도로 채널 정보를 요청하여 썸네일 URL을 가져오는 로직을 구현했습니다.

또한, VideoDetail 라우터를 설정하여 비디오 카드를 클릭했을 때 해당 상세 페이지로 이동하며, 데이터를 함께 전달하는 기능을 구현했습니다.

1. youtubeAPI 수정

Youtube Data API 하루 할당량을 조금이라도 아끼려고, new Set()을 사용하여 중복된 채널 ID를 제거 한 후 채널 정보를 요청했습니다.

import axios from "axios";

const YoutubeApi = {
    httpClient: axios.create({
        baseURL: "https://www.googleapis.com/youtube/v3",
        params: { key: process.env.REACT_APP_YOUTUBE_API_KEY },
    }),

    async getVideosByKeyword(keyword: string, pageToken: string) {
        const response = await this.httpClient.get("search", {
            params: {
                part: "snippet",
                maxResults: 20,
                q: keyword,
                pageToken: pageToken,
            },
        });

        const videoIds = response.data.items.map((item: any) => item.id.videoId).join(',');
        const channelIds = Array.from(new Set(response.data.items.map((item: any) => item.snippet.channelId)));

        const videosResponse = await this.httpClient.get("videos", {
            params: {
                part: "snippet,statistics",
                id: videoIds,
            },
        });

        // 채널 썸네일을 가져오기 위한 요청
        const channelsResponse = await this.httpClient.get("channels", {
            params: {
                part: "snippet",
                id: channelIds.join(','),
            },
        });

        // 채널 썸네일을 매핑
        const channelThumbnails: { [key: string]: string } = {};

        channelsResponse.data.items.forEach((channel: any) => {
            channelThumbnails[channel.id] = channel.snippet.thumbnails.default.url;
        });

        // 비디오 정보와 채널 썸네일을 결합하여 반환
        return {
            items: videosResponse.data.items.map((item: any) => ({
                ...item,
                id: item.id,
                channelThumbnail: channelThumbnails[item.snippet.channelId],
            })),
            nextPageToken: response.data.nextPageToken,
        };
    },
};

export default YoutubeApi;

생략했지만 getPopularVideos 함수에서도 동일하게 중복된 채널 ID를 제거한 후 채널 정보를 요청하도록 코드를 수정했습니다.

2. Videos 컴포넌트에서 스타일 적용

Videos 컴포넌트에서는 검색어(keyword)의 유무에 따라 리스트 또는 그리드 형식으로 비디오를 표시하도록 스타일을 다르게 적용했습니다.

현재 무한 스크롤이 구현되어 있어 그리드 형식에서는 조금만 내려도 무한 스크롤로 인해 다시 API 요청이 발생합니다.

검색 데이터는 할당량이 많이 소모되기 때문에 이를 보완하기 위해 리스트 형식으로 변경하여 스크롤을 더 많이 내려야 API 요청이 이루어지도록 하였습니다.

export default function Videos() {
    const listStyle = keyword ? styles.list : styles.grid;

    return (
        <ul className={listStyle}>
            ...
        </ul>
    );
}

3. VideoCard 컴포넌트의 스타일 및 기능 구현

VideoCard 컴포넌트에서도 마찬가지로 검색어 유무에 따라 다른 스타일을 적용하고, li 요소를 클릭했을 때 비디오 상세 페이지로 이동하도록 navigate 함수를 활용해 라우팅을 추가했습니다.

이때, 비디오 데이터를 함께 전달하여 상세 페이지에서 사용할 수 있게 했습니다.

const VideoCard = ({ video }, ref) => {
    const cardClassName = keyword ? styles['card-search'] : styles.card;
    const navigate = useNavigate();

    return (
        <li
            className={cardClassName}
            ref={ref}
            onClick={() => navigate(`videos/watch/${video.id}`, { state: { video } })}
        >
            ...
        </li>
    );
};

export default function VideoDetail() {
    const { state: { video } } = useLocation();
    console.log(video);
    return <div>VideoDetail</div>;
}

VideoDetail 페이지에서는 전달받은 비디오 데이터를 단순히 콘솔에 출력만 해두었습니다.

이후 이 데이터를 기반으로 UI를 추가할 예정입니다.

.img-container {
    position: relative;
    background-color: #f0f0f0;
    border-radius: 16px;
    overflow: hidden;
    transition: border-radius 0.5s, transform 0.3s;
}

.card .img-container {
    width: 100%;
    padding-top: 56.25%;
}

.card-search .img-container {
    width: 36%;
    padding-top: 20.25%;
}

/* ... */

.card-search {
    display: flex;
    gap: 22px;
    justify-content: center;
}

.card 클래스와 .card-search 클래스는 카드 레이아웃과 검색 시 적용되는 레이아웃을 다르게 적용했습니다.

YouTube Data API를 이용한 Youtube Clone - 4

Hyun Dev — Sun, 1 Sep 2024 13:07:34 +0900

프로젝트를 진행하면서, 페이지네이션 같은 기능이 필요하다고 생각했습니다.

유튜브 사이트에서도 무한 스크롤을 통해 데이터를 로드하고 있어, 저도 무한 스크롤을 적용해보기로 했습니다.

이를 위해 useInfiniteQuery와 IntersectionObserver를 사용하여 무한 스크롤 기능을 구현했습니다.

1. YoutubeApi 변경

YouTube Data API는 많은 데이터를 페이지 단위로 나눠서 제공하는데, 이 때 사용되는 것이 pageToken과 nextPageToken입니다.

이 매개변수들을 사용하면, API 요청 시 특정 페이지의 데이터를 가져올 수 있습니다.

import axios from "axios";

const YoutubeApi = {
    httpClient: axios.create({
        baseURL: "https://www.googleapis.com/youtube/v3",
        params: { key: process.env.REACT_APP_YOUTUBE_API_KEY },
    }),

    search(keyword: string | undefined, pageToken: string = "") {
        return keyword ? this.getVideosByKeyword(keyword, pageToken) : this.getPopularVideos(pageToken);
    },

    async getVideosByKeyword(keyword: string, pageToken: string) {
        const response = await this.httpClient.get("search", {
            params: {
                part: "snippet",
                maxResults: 25,
                q: keyword,
                pageToken: pageToken,
            },
        });

        const videoIds = response.data.items.map((item: any) => item.id.videoId).join(',');
        const videosResponse = await this.httpClient.get("videos", {
            params: {
                part: "snippet,statistics",
                id: videoIds,
            },
        });

        return {
            items: videosResponse.data.items.map((item: any) => ({
                ...item,
                id: item.id,
            })),
            nextPageToken: response.data.nextPageToken,
        }
    },

    async getPopularVideos(pageToken: string) {
        const response = await this.httpClient.get("videos", {
            params: {
                part: "snippet, statistics",
                maxResults: 25,
                chart: "mostPopular",
                regionCode: "KR",
                pageToken: pageToken,
            },
        });

        return {
            items: response.data.items,
            nextPageToken: response.data.nextPageToken,
        }
    },
};

export default YoutubeApi;

pageToken과 nextPageToken의 역할

pageToken: pageToken은 현재 요청하는 페이지를 지정하는 토큰입니다. API 요청 시 이 값을 포함하면, 해당 토큰에 맞는 페이지 데이터를 가져옵니다.
nextPageToken: nextPageToken은 API 응답에서 제공되며, 다음 페이지의 데이터를 요청할 때 사용할 수 있는 토큰입니다. 응답받은 데이터의 마지막에 위치한 토큰으로, 이를 통해 이어지는 페이지의 데이터를 가져올 수 있습니다.

2. Videos 컴포넌트에서 무한 스크롤 구현

이 컴포넌트에서는 useInfiniteQuery와 IntersectionObserver를 사용하여 무한 스크롤 기능을 구현했습니다.

현재는 데이터를 로드하는 과정에서 단순히 Loading 텍스트를 표시하고 있지만, 추후에는 로딩 스피너나 다른 스타일을 적용할 계획입니다.

import { useParams } from "react-router-dom";
import styles from "./Videos.module.css";
import { useInfiniteQuery } from "@tanstack/react-query";
import VideoCard from "../../components/VideoCard/VideoCard";
import { Video } from "../../../public/types";
import YoutubeApi from "../../api/youtubeApi";
import { useCallback, useRef } from "react";

export default function Videos() {
    const { keyword } = useParams();
    const {
        data: videos,
        fetchNextPage,
        hasNextPage,
        isFetchingNextPage,
    } = useInfiniteQuery({
        queryKey: ["videos", keyword],
        queryFn: async ({ pageParam = "" }) => {
            return YoutubeApi.search(keyword, pageParam);
        },
        getNextPageParam: (lastPage) => lastPage.nextPageToken || undefined,
        staleTime: 60000,
        gcTime: 1000 * 60 * 10,
        refetchOnWindowFocus: false,
        refetchOnMount: false,
        refetchOnReconnect: false,
        initialPageParam: "",
    });

    const observer = useRef<IntersectionObserver | null>(null);
    const lastVideoElementRef = useCallback(
        (node: HTMLElement | null) => {
            if (isFetchingNextPage) return;
            if (observer.current) observer.current.disconnect();
            observer.current = new IntersectionObserver((entries) => {
                if (entries[0].isIntersecting && hasNextPage) {
                    fetchNextPage();
                }
            });
            if (node) observer.current.observe(node);
        },
        [isFetchingNextPage, fetchNextPage, hasNextPage]
    );

    return (
        <>
            <ul className={styles.grid}>
                {videos?.pages.map((page, pageIndex) => 
                    page.items.map((video: Video, index: number) => {
                        if (pageIndex === videos.pages.length - 1 && index === page.items.length - 1) {
                            return (
                                <VideoCard ref={lastVideoElementRef} key={video.id} video={video}/>
                            );
                        } else {
                            return <VideoCard key={video.id} video={video}/>
                        }
                    })
                )}
                {isFetchingNextPage && <p>Loading...</p>}
            </ul>
        </>
    );
}

useInfiniteQuery의 사용

queryKey: 쿼리의 고유 키로, 검색어와 함께 설정되어 동일한 키워드로 검색된 데이터가 캐시될 수 있습니다.
queryFn: 데이터를 가져오는 함수로, YoutubeApi.search를 사용하여 keyword와 pageToken을 기반으로 결과를 가져옵니다.
getNextPageParam: nextPageToken을 추출하여 다음 페이지 데이터를 가져올 수 있게 합니다. lastPage는 가장 최근에 가져온 데이터의 페이지를 나타냅니다. nextPageToken이 존재하지 않으면 undefined를 반환하여 더 이상 가져올 페이지가 없다는 것을 나타냅니다.
initialPageParam: 초기 페이지의 요청을 위한 파라미터로, 빈 문자열로 설정하여 첫 페이지를 가져옵니다.

IntersectionObserver를 이용한 무한 스크롤

1. useRef를 통한 observer 저장

observer는 useRef를 통해 저장됩니다. useRef를 사용하면 컴포넌트가 리렌더링되더라도 동일한 observer 인스턴스를 유지할 수 있습니다. useRef는 .current 프로퍼티를 통해 값에 접근할 수 있습니다.

2. observe.disconnect()의 사용 이유

스크롤을 내리거나 데이터를 추가로 불러올 때, 기존에 관찰하던 요소들이 계속 관찰 상태로 남아 있으면, 스크롤을 올렸을 때 이 요소들이 다시 화면에 나타나면서 불필요한 데이터 요청이 발생합니다.

즉, 한 번 관찰된 요소가 화면에 다시 나타날 때마다 데이터가 중복으로 로드될 수 있습니다.

이를 방지하기 위해 disconnect()를 사용하여 기존에 관찰하던 요소들의 관찰을 중지시키고, 새로운 마지막 요소만을 관찰하게 합니다.

3. useCallback의 사용 이유

disconnect()가 제대로 작동하려면, lastVideoElementRef 함수가 컴포넌트가 리렌더링될 때마다 새로 생성되지 않도록 해야 합니다. 만약 useCallback을 사용하지 않으면, 컴포넌트가 리렌더링될 때마다 lastVideoElementRef 함수가 새로 생성되고, 이로 인해 ref가 변경되면서 IntersectionObserver가 새로운 함수에 연결된 요소를 관찰하게 됩니다. 이 과정에서 disconnect()가 제대로 작동하지 않게 되어, 무한 스크롤이 정상적으로 동작하지 않습니다.

4. 마지막 요소에만 ref를 전달하는 이유

무한 스크롤에서 중요한 점은 마지막 요소가 화면에 나타났을 때 다음 페이지의 데이터를 불러오는 것입니다.

이 때문에 페이지의 마지막 인덱스에 해당하는 요소에만 ref를 전달하여, 그 요소가 화면에 나타날 때만 IntersectionObserver가 동작하도록 합니다. 이를 통해 효율적으로 데이터를 불러올 수 있습니다.

3. VideoCard 컴포넌트에서 forwardRef 사용

VideoCard 컴포넌트는 각 동영상의 정보를 표시합니다. 여기서 중요한 점은 forwardRef를 사용하여 부모 컴포넌트에서 ref를 전달받아 DOM 요소에 접근할 수 있도록 하는 것입니다.

import React, { forwardRef } from "react";
import { Video } from "../../../public/types";
import styles from "./VideoCard.module.css";
import { formatDateTime, formatViewCount } from "../../util";

const VideoCard = forwardRef<HTMLLIElement, { video: Video }>(({ video }, ref) => {
    const { title, channelTitle, thumbnails, publishedAt } = video.snippet;
    const viewCount = parseInt(video.statistics?.viewCount || "0", 10);

    return (
        <li className={styles.card} ref={ref}>
            <div className={styles['img-container']}>
                <img
                    className={styles.img}
                    src={thumbnails.medium.url}
                    alt={title}
                />
            </div>
            <h3 className={styles.title}>{title}</h3>
            <p className={styles.text}>{channelTitle}</p>
            <div className={styles.flex}>
                <p className={styles.text}>
                    조회수 {formatViewCount(viewCount)}
                </p>
                <p className={styles.text}>{formatDateTime(publishedAt)}</p>
            </div>
        </li>
    );
});

export default VideoCard;

forwardRef : 부모 컴포넌트에서 ref를 전달받아 자식 컴포넌트에서 DOM 요소에 접근하려면 forwardRef가 필요합니다. 만약 forwardRef를 사용하지 않고 일반 함수형 컴포넌트로 작성할 경우, ref를 직접 받을 수 없기 때문에 오류가 발생합니다.

HTMLLIElement 타입 : <li> 요소의 타입을 명확히 지정하기 위해 HTMLLIElement를 사용합니다. HTMLElement로 설정하면 <li> 요소와 관련된 특정 속성을 활용할 수 없기 때문에 오류가 발생할 수 있습니다.

React Query로 페이징된 데이터 로드 구현하기

Hyun Dev — Sat, 31 Aug 2024 23:21:48 +0900

https://tanstack.com/query/v4/docs/framework/react/reference/useInfiniteQuery

useInfiniteQuery | TanStack Query React Docs

This ad helps to keep us from burning out and rage-quitting OSS just *that* much more, so chill.

tanstack.com

useInfiniteQuery는 React Query에서 제공하는 훅 중 하나로, 페이징된 데이터를 손쉽게 가져오고 관리할 수 있게 해줍니다.

일반적인 useQuery와 유사하지만, 여러 페이지의 데이터를 관리할 수 있는 추가 기능을 제공합니다.

이를 활용하면 무한 스크롤과 같은 기능을 쉽게 구현할 수 있습니다.

1. 기본 사용법

useInfiniteQuery를 사용하면 데이터를 페이지 단위로 나누어 불러오고, 사용자가 요청할 때마다 새로운 페이지의 데이터를 가져올 수 있습니다.

주요 옵션

queryFn: 데이터를 가져오는 함수로, 반드시 Promise를 반환해야 합니다. 이 함수는 pageParam이라는 인자를 받아 특정 페이지의 데이터를 가져옵니다.
getNextPageParam: 다음 페이지의 파라미터를 결정하는 함수입니다. lastPage와 allPages를 인자로 받아 다음 페이지의 파라미터를 반환합니다.
getPreviousPageParam: 이전 페이지의 파라미터를 결정하는 함수입니다. firstPage와 allPages를 인자로 받아 이전 페이지의 파라미터를 반환합니다.

반환 값

data.pages: 불러온 모든 페이지의 데이터 배열입니다.
fetchNextPage: 다음 페이지를 가져오는 함수입니다.
fetchPreviousPage: 이전 페이지를 가져오는 함수입니다.
hasNextPage: 다음 페이지가 있는지 여부를 나타내는 boolean 값입니다.
hasPreviousPage: 이전 페이지가 있는지 여부를 나타내는 boolean 값입니다.
isFetchingNextPage: 다음 페이지를 가져오는 중인지 여부를 나타내는 boolean 값입니다.
isFetchingPreviousPage: 이전 페이지를 가져오는 중인지 여부를 나타내는 boolean 값입니다.

2. 예제 코드

현재는 JSON 데이터를 이용해 pageSize와 같은 페이지 처리를 프론트엔드에서 구현했습니다.

모든 데이터를 한 번에 클라이언트로 가져온 후, 프론트엔드에서 페이지 단위로 슬라이스하여 표시하는 방식입니다.

실제 환경에서는 서버가 페이지 번호와 pageSize를 받아 필요한 데이터만 응답으로 보내는 것이 일반적입니다.

이 예제는 프론트엔드에서 페이지네이션의 기본 개념과 React Query의 useInfiniteQuery 훅 사용법을 익히기 위한 것입니다.

실제 데이터를 사용한 무한 스크롤 예제는 현재 진행 중인 개인 유튜브 클론 프로젝트에서 YouTube Data API를 활용해 구현할 예정입니다.

import React from "react";
import { useInfiniteQuery } from "@tanstack/react-query";

// 현재 페이지 번호를 기반으로 데이터를 가져오는 비동기 함수
const fetchVideos = async ({ pageParam = 1 }) => {
  const response = await fetch('/data/videos.json');
  
  if (!response.ok) {
    throw new Error('네트워크 오류');
  }
  
  // 전체 데이터
  const allData = await response.json();

  // pageSize -> 한 페이지에 표시할 데이터의 수
  // start, end -> 데이터의 시작 인덱스와 끝 인덱스를 계산
  const pageSize = 5;
  const start = (pageParam - 1) * pageSize;
  const end = start + pageSize;

  const videoData = allData.flatMap(page => page.videos);
  
  // 현재 페이지에 해당하는 데이터를 잘라냄
  const pageData = videoData.slice(start, end);
  
  // nextCursor -> 다음 페이지가 있는지 여부
  const nextCursor = end < videoData.length ? pageParam + 1 : null;

  // 현재 페이지에 해당하는 데이터와 다음 페이지의 커서를 반환
  return {
    videos: pageData,
    nextCursor,
  };
};

const VideoList = () => {
  const {
    data,                 // 페칭된 데이터
    fetchNextPage,        // 다음 페이지를 가져오는 함수
    hasNextPage,          // 다음 페이지가 있는지 여부
    isFetchingNextPage,   // 다음 페이지를 가져오는 중인지 여부
    isLoading,            // 초기 데이터 로딩 중인지 여부
    isError,              // 에러 발생 여부
    error,                // 발생한 에러 객체
  } = useInfiniteQuery({
    queryKey: ['videos'],
    queryFn: fetchVideos,
    // lastPage는 직전의 로드된 페이지 데이터
    // 다음 페이지의 파라미터를 반환하여, 다음 데이터를 로드할 수 있도록 돕는 함수
    getNextPageParam: (lastPage) => lastPage.nextCursor,
  });

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (isError) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      {data.pages.map((page, pageIndex) => (
        <div key={pageIndex}>
          {page.videos.map((video, videoIndex) => (
            <div key={video.id || videoIndex} style={{ marginBottom: '20px' }}>
              <h3>{video.title}</h3>
              <p>{video.description}</p>
              <p><strong>업로드 날짜:</strong> {video.uploadDate}</p>
            </div>
          ))}
        </div>
      ))}
      <button
        onClick={() => fetchNextPage()}
        disabled={!hasNextPage || isFetchingNextPage}
      >
        {isFetchingNextPage ? '비디오 로딩 중...' : hasNextPage ? '더 많은 비디오 로드' : '더 이상 비디오 없음'}
      </button>
    </div>
  );
};

export default VideoList;

아래는 예제에서 사용한 json 데이터 입니다.

[
    {
        "videos": [
            {
                "id": 1,
                "title": "HTML 소개",
                "description": "HTML 기본 개념",
                "uploadDate": "2024-08-30"
            },
            {
                "id": 2,
                "title": "CSS 기초",
                "description": "CSS 기본 사용법",
                "uploadDate": "2024-08-25"
            },
            {
                "id": 3,
                "title": "JavaScript 기초",
                "description": "JavaScript 기본 개념",
                "uploadDate": "2024-08-20"
            },
            {
                "id": 4,
                "title": "React 소개",
                "description": "React 개요",
                "uploadDate": "2024-08-15"
            },
            {
                "id": 5,
                "title": "useState & useEffect",
                "description": "React 훅 사용법",
                "uploadDate": "2024-08-10"
            }
        ],
        "nextCursor": 2
    },
    {
        "videos": [
            {
                "id": 6,
                "title": "Flexbox",
                "description": "CSS Flexbox 레이아웃",
                "uploadDate": "2024-08-05"
            },
            {
                "id": 7,
                "title": "Grid",
                "description": "CSS Grid 레이아웃",
                "uploadDate": "2024-08-01"
            },
            {
                "id": 8,
                "title": "JavaScript ES6+",
                "description": "최신 JavaScript 문법",
                "uploadDate": "2024-07-28"
            },
            {
                "id": 9,
                "title": "React 컴포넌트",
                "description": "React 컴포넌트 사용법",
                "uploadDate": "2024-07-24"
            },
            {
                "id": 10,
                "title": "useReducer",
                "description": "복잡한 상태 관리",
                "uploadDate": "2024-07-20"
            }
        ],
        "nextCursor": 3
    },
    {
        "videos": [
            {
                "id": 11,
                "title": "HTML5 기능",
                "description": "HTML5 새로운 기능",
                "uploadDate": "2024-07-15"
            },
            {
                "id": 12,
                "title": "CSS 애니메이션",
                "description": "CSS 애니메이션 사용법",
                "uploadDate": "2024-07-10"
            },
            {
                "id": 13,
                "title": "비동기 처리",
                "description": "JavaScript 비동기 처리",
                "uploadDate": "2024-07-05"
            },
            {
                "id": 14,
                "title": "Context API",
                "description": "React 전역 상태 관리",
                "uploadDate": "2024-07-01"
            },
            {
                "id": 15,
                "title": "React Router",
                "description": "React 라우팅",
                "uploadDate": "2024-06-25"
            }
        ],
        "nextCursor": null
    }
]

Web API IntersectionObserver를 활용한 스크롤 관리 방법

Hyun Dev — Sat, 31 Aug 2024 21:28:51 +0900

https://developer.mozilla.org/ko/docs/Web/API/IntersectionObserver

IntersectionObserver - Web API | MDN

Intersection Observer API의 IntersectionObserver 인터페이스는 대상 요소와 상위 요소, 또는 대상 요소와 최상위 문서의 뷰포트가 서로 교차하는 영역이 달라지는 경우 이를 비동기적으로 감지할 수 있는

developer.mozilla.org

1. IntersectionObserver란?

IntersectionObserver는 웹 API로, 특정 요소가 뷰포트(화면 영역) 안에 들어오거나 나가는 시점을 감지하고, 이에 따라 콜백 함수를 실행할 수 있는 기능을 제공합니다.

무한 스크롤, 레이지 로딩, 애니메이션 트리거 등 다양한 상황에서 활용할 수 있습니다.

2. IntersectionObserver 사용하기

IntersectionObserver를 사용하기 위해서는 먼저 observer 인스턴스를 생성해야 합니다. 이 인스턴스를 통해 특정 요소를 관찰할 수 있습니다.

2.1 Observer 인스턴스 생성

IntersectionObserver 인스턴스를 생성할 때, 첫 번째 인자는 콜백 함수이며, 두 번째 인자는 옵션 객체입니다. 옵션 객체는 필수는 아니며, 필요에 따라 전달할 수 있습니다.

const observer = new IntersectionObserver(callbackFunction, options);

콜백 함수(callbackFunction): 요소가 화면에 들어오거나 나갈 때 호출됩니다.
옵션 객체(options): 관찰에 대한 설정을 정의할 수 있으며, 이는 생략할 수 있습니다.

2.2 요소 관찰하기

observer 인스턴스를 생성한 후, 특정 요소를 관찰하도록 명령할 수 있습니다. 이를 위해 observe 메소드를 사용합니다.

observer.observe(element); // element는 관찰할 DOM 요소

이렇게 설정하면, element가 화면에 진입하거나 사라질 때마다 지정한 콜백 함수가 호출됩니다.

3. 콜백 함수와 entries

콜백 함수는 entries와 observer 두 가지 인자를 받습니다. entries는 관찰 중인 각 요소에 대한 정보를 담은 배열이며, 배열의 각 항목을 entry라고 합니다. entry는 다양한 속성을 통해 관찰 대상 요소의 상태를 설명합니다.

const callbackFunction = (entries, observer) => {
  entries.forEach(entry => {
    console.log(entry); // entry의 다양한 속성을 확인 가능
  });
};

3.1 entry의 주요 속성들

boundingClientRect: 관찰 대상 요소의 경계 사각형 정보입니다. 요소의 크기와 위치를 나타내는 DOMRect 객체를 반환합니다.
intersectionRatio: 관찰 대상 요소가 뷰포트와 얼마나 겹치는지를 비율로 나타냅니다. 0은 겹치지 않음을, 1.0은 완전히 겹침을 의미합니다.
intersectionRect: 관찰 대상 요소와 뷰포트가 겹치는 부분의 DOMRect 객체를 반환합니다.
isIntersecting: 요소가 뷰포트에 들어오고 있는 중인지, 나가고 있는 중인지를 나타냅니다. 이 값이 true이면 요소가 현재 뷰포트에 들어오고 있는 중이라는 의미이고, false이면 요소가 뷰포트에서 나가고 있는 중이라는 뜻입니다.
rootBounds: 뷰포트의 경계를 나타내는 DOMRect 객체를 반환합니다. 관찰자가 특정 요소에 대해 root 옵션을 설정했을 경우, 그 root 요소의 경계를 나타냅니다.

4. threshold와 isIntersecting를 이용한 예제

다음은 isIntersecting과 threshold를 활용한 간단한 예제입니다. 이 예제는 요소가 화면에 50% 이상 보일 때 텍스트를 변경합니다.

const callbackFunction = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
      entry.target.textContent = "화면에 50% 이상 보이고 있습니다!";
      entry.target.style.backgroundColor = "#000";
      entry.target.style.color = "#fff";
    } else {
      entry.target.textContent = "50% 이하만 보이고 있습니다.";
      entry.target.style.backgroundColor = "#fff";
      entry.target.style.color = "#000";
    }
  });
};

const options = {
  threshold: [0.5] // 요소가 50% 이상 보일 때 콜백이 실행됨
};

const observer = new IntersectionObserver(callbackFunction, options);
const targetElement = document.querySelector('#targetElement');

observer.observe(targetElement);

5. 옵션 객체의 세부 설명

옵션 객체는 IntersectionObserver의 동작 방식을 세밀하게 설정할 수 있습니다.

root: 교차할 뷰포트의 기준 요소를 설정합니다. 기본값은 null이며, 이는 브라우저의 뷰포트가 기준이 됨을 의미합니다. 특정 요소를 기준으로 설정할 수도 있습니다.
rootMargin: 뷰포트의 크기를 조정할 수 있는 여백을 설정합니다. CSS와 유사한 형식으로 작성하며, 예를 들어 rootMargin: '0px 0px -50px 0px'는 뷰포트 아래쪽에 50픽셀의 여유를 둡니다. 이 경우, 요소가 실제 화면에 보이기 50픽셀 전에 콜백이 실행될 수 있습니다.
threshold: 요소가 얼마나 보일 때 콜백을 실행할지를 설정합니다. threshold: 0은 요소가 1%라도 보이면 실행되며, threshold: 1.0은 요소가 완전히 보여야 실행됩니다. 배열로 여러 개의 값을 설정할 수도 있습니다.

const options = {
  threshold: [0, 0.5, 1.0] // 요소가 0%, 50%, 100% 보일 때마다 콜백 실행
};

6. 관찰 중지: unobserve

unobserve 메서드는 IntersectionObserver가 특정 요소에 대한 관찰을 중지하도록 하는 기능을 제공합니다.

예를 들어, 한 번 로드된 콘텐츠에 대해서는 추가적인 감지가 필요 없을 때 unobserve를 사용하여 관찰을 중지할 수 있습니다.

observer.unobserve(targetElement);

useRef로 DOM 요소 참조 및 관리하기

Hyun Dev — Sat, 31 Aug 2024 18:18:03 +0900

최근에 개인 프로젝트로 유튜브 클론 코딩을 진행하면서 무한 스크롤 기능을 추가하고 싶었습니다.

검색을 통해 다양한 무한 스크롤을 구현한 코드를 살펴본 결과, 대부분의 코드에서 IntersectionObserver와 useRef를 활용한 방식을 사용하고 있었습니다.

이번 포스팅에서는 useRef에 대해 작성해보도록 하겠습니다.

1. useRef란?

useRef는 리액트(React)에서 제공하는 훅으로, 다음과 같은 역할을 합니다

DOM 요소 참조: useRef를 사용하면 특정 DOM 요소를 직접 참조할 수 있습니다.
값 유지: 컴포넌트가 리렌더링되더라도 useRef로 저장한 값은 초기화되지 않고 유지됩니다. 이는 state와 달리 값이 변경되더라도 컴포넌트를 리렌더링하지 않기 때문에 불필요한 렌더링을 방지할 수 있습니다.
값 변경 추적: useRef는 state처럼 변경을 추적하지 않으므로, 값이 즉시 업데이트되더라도 리렌더링이 발생하지 않습니다. 이는 특정 값의 변경을 컴포넌트의 렌더링에 영향을 주지 않고 관리할 때 유용합니다.

2. useRef 기본 사용법

다음은 useRef의 간단한 사용 예시입니다. 이 예제는 버튼을 클릭하면 input 요소에 포커스를 맞추는 동작을 보여줍니다.

import React, { useRef } from 'react';

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

  const handleFocus = () => {
    inputRef.current.focus();
  };

  const handleBlur = () => {
    inputRef.current.blur();
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="포커스를 맞추세요" />
      <button onClick={handleFocus}>포커스 맞추기</button>
      <button onClick={handleBlur}>포커스 해제</button>
    </div>
  );
}

export default FocusInput;

useRef(null): useRef를 호출할 때 null을 초기값으로 전달합니다. 이는 해당 참조가 아직 DOM 요소에 연결되지 않았음을 의미합니다.
inputRef.current: useRef로 생성된 inputRef 객체의 current 속성은 현재 참조하고 있는 DOM 요소를 나타냅니다. 이 current 속성을 통해 우리는 DOM 요소에 접근할 수 있습니다.

3. 자식 컴포넌트에서 ref를 전달받아 사용하기 (forwardRef)

리액트에서 ref를 자식 컴포넌트에 전달하여 그 컴포넌트 내부의 DOM 요소에 접근하고자 할 때, forwardRef가 필요합니다.

forwardRef는 부모 컴포넌트로부터 전달된 ref를 자식 컴포넌트의 특정 DOM 요소에 연결할 수 있도록 해줍니다.

import React, { forwardRef } from 'react';

const Example = forwardRef((props, ref) => (
  <input ref={ref} type="text" placeholder="포커스를 맞추세요" />
));

export default Example;

4. 무한 스크롤에 사용될 useRef

무한 스크롤을 구현할 때, 로딩 지점이 되는 특정 DOM 요소(예: 페이지의 하단)를 useRef로 참조하게 됩니다.

그런 다음, 이 참조된 요소를 IntersectionObserver와 결합하여, 해당 요소가 화면에 나타날 때마다 새로운 데이터를 불러오는 방식으로 무한 스크롤을 구현할 수 있습니다.

이 과정에서 useRef는 관찰 대상인 DOM 요소를 정확히 참조하는 데 중요한 역할을 합니다.

IntersectionObserver는 useRef.current로 참조된 요소가 뷰포트에 들어오거나 나가는 시점을 감지하여, 그에 맞춰 데이터를 로드하는 트리거로 설정할 수 있게 됩니다.

CSS로 텍스트 줄 수 제한하기 -webkit-line-clamp

Hyun Dev — Thu, 29 Aug 2024 07:07:28 +0900

개인 프로젝트를 진행하면서, 텍스트가 일정한 줄 수를 초과할 경우 깔끔한 레이아웃을 유지하기 위해 자동으로 생략(...) 처리해야 하는 상황이 발생했습니다.

텍스트를 제한된 줄 수 안에 표시하기 위해 CSS의 -webkit-line-clamp 속성을 사용합니다.

이 속성은 주로 WebKit 기반의 브라우저(예: Chrome, Safari)에서 지원되며, 여러 줄에 걸친 텍스트를 클램핑하는 데 사용됩니다.

.title {
    font-size: 16px;
    font-weight: bold;
    color: var(--color-title);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

1. -webkit-line-clamp 속성

-webkit-line-clamp 속성은 텍스트가 몇 줄까지만 표시될지를 지정합니다.

위 코드에서는 -webkit-line-clamp: 2;로 설정되어 있어, 텍스트가 최대 두 줄까지만 표시됩니다.

만약 텍스트가 두 줄을 초과하면, 나머지 텍스트는 자동으로 생략되고 끝에 ...이 추가됩니다.

2. -webkit-box-orient 속성

-webkit-box-orient는 텍스트의 방향을 설정하는 속성입니다. vertical로 설정하면 텍스트가 수직 방향으로 표시되며, 여러 줄의 텍스트를 구성할 수 있습니다.

이 속성은 -webkit-line-clamp와 함께 사용되어 텍스트가 지정된 줄 수를 초과하지 않도록 제어합니다.

3. overflow: hidden 및 text-overflow: ellipsis 속성

overflow: hidden: 텍스트가 지정된 영역을 넘어서지 않도록 숨깁니다.
text-overflow: ellipsis: 숨겨진 텍스트의 끝에 ...을 표시하여, 텍스트가 잘렸음을 시각적으로 나타냅니다.

CSS로 이미지 비율 유지하기

Hyun Dev — Thu, 29 Aug 2024 06:37:16 +0900

개인 프로젝트를 진행하는 도중, 이미지가 완전히 로드되기 전에 이미지 영역이 빈 상태로 남아 있어 레이아웃이 잠시 동안 무너지는 문제가 발생하였습니다.

이를 방지하기 위해, 단순히 <img> 태그에 이미지만 넣는 것이 아니라, 이미지가 로드되기 전에도 일정한 영역을 차지하도록 설정하여 레이아웃을 안정 적으로 유지할 수 있도록 하였습니다.

<div className={styles['img-container']}>
    <img
        className={styles.img}
        src={thumbnails.medium.url}
        alt={title}
    />
</div>

.img-container {
    width: 100%;
    padding-top: 56.25%; /* 16:9 비율을 유지 */
    position: relative;
    background-color: #f0f0f0;
    overflow: hidden;
}

.img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
}

img-container 클래스는 이미지가 로드되기 전에 영역을 확보하기 위해 설정되었습니다.

padding-top: 56.25%는 16:9 비율을 유지하면서 컨테이너의 높이를 설정해 줍니다.

background-color 속성으로 배경색을 설정해, 이미지가 로드되기 전에도 일정한 색상으로 영역을 표시합니다.

img 클래스는 이미지를 컨테이너에 맞추어 렌더링하기 위한 설정입니다.

position: absolute와 object-fit: cover를 사용해 이미지가 컨테이너를 가득 채우도록 했습니다.

이렇게 하면 이미지가 로드되기 전에도 컨테이너의 모양이 유지되면서, 로드 후 자연스럽게 이미지를 표시할 수 있습니다.

비율을 계산할 때 16:9 비율을 적용하고 싶다면, 9를 16으로 나눈 값을 너비에 곱하면 됩니다.

예를 들어, 너비가 50%일 때 9:16 비율을 적용하려면 9 / 16 * 50을 계산하여 28.125가 됩니다. 다른 비율도 동일한 방식으로 계산할 수 있습니다.

YouTube Data API를 이용한 Youtube Clone - 3

Hyun Dev — Thu, 29 Aug 2024 06:13:50 +0900

이번 포스팅에서는 React Query와 Axios를 활용해 유튜브 API로부터 데이터를 받아와 비디오 리스트와 비디오 카드를 구현하는 과정을 작성하였습니다.

1. React Query 설정 및 클라이언트 구성

React Query를 사용하기 위해서 QueryClient를 생성하고, QueryClientProvider로 애플리케이션을 감싸서 클라이언트를 전역에서 사용할 수 있도록 설정하였습니다.

import { Outlet } from "react-router-dom";
import SearchHeader from "./components/SearchHeader/SearchHeader";
import { DarkModeProvider } from "./context/DarkModeContext";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

function App() {
    return (
        <DarkModeProvider>
            <SearchHeader />
            <QueryClientProvider client={queryClient}>
                <Outlet />
            </QueryClientProvider>
        </DarkModeProvider>
    );
}

export default App;

2. Youtube API 요청 모듈화

YouTube API와 상호작용하기 위해 Axios를 사용하여 API 요청을 처리하는 모듈을 작성했습니다.

API 요청 관련 로직을 하나의 객체로 모듈화함으로써, 코드의 재사용성과 관리 용이성을 높였습니다.

import axios from "axios";

const YoutubeApi = {
    httpClient: axios.create({
        baseURL: "https://www.googleapis.com/youtube/v3",
        params: { key: process.env.REACT_APP_YOUTUBE_API_KEY },
    }),

    search(keyword: string | undefined) {
        return keyword ? this.getVideosByKeyword(keyword) : this.getPopularVideos();
    },

    async getVideosByKeyword(keyword: string) {
        const response = await this.httpClient.get("search", {
            params: {
                part: "snippet",
                maxResults: 25,
                q: keyword,
            },
        });

        const videoIds = response.data.items.map((item: any) => item.id.videoId).join(',');
        const videosResponse = await this.httpClient.get("videos", {
            params: {
                part: "snippet,statistics",
                id: videoIds,
            },
        });

        return videosResponse.data.items.map((item: any) => ({
            ...item,
            id: item.id,
        }));
    },

    async getPopularVideos() {
        const response = await this.httpClient.get("videos", {
            params: {
                part: "snippet, statistics",
                maxResults: 25,
                chart: "mostPopular",
                regionCode: "KR",
            },
        });
        return response.data.items;
    },
};

export default YoutubeApi;

YouTube API에서 조회수, 좋아요 수, 댓글 수 등의 통계를 가져오기 위해서는 statistics 정보를 요청해야 합니다.

videos 엔드포인트에서는 part에 statistics를 추가하기만 하면 해당 정보를 얻을 수 있었습니다.

하지만 search 엔드포인트에서는 동일한 방식으로 part에 statistics를 추가하면 Bad Request가 발생하여서, 두 단계에 걸쳐 API를 호출하였습니다.

먼저, search 엔드포인트를 사용해 키워드로 비디오를 검색하면, 비디오의 snippet 정보(제목, 설명, 썸네일 등)만 반환됩니다.

그래서 비디오의 통계 정보를 가져오기 위해서 각 비디오의 ID를 추출한 후, 그 ID들을 사용해 videos 엔드포인트에서 추가로 요청을 하였습니다.

const videoIds = response.data.items.map((item: any) => item.id.videoId).join(',');

이 코드에서 videoIds를 추출한 이유는 videos 엔드포인트에 여러 비디오 ID를 한 번에 전달하기 위해서입니다.

YouTube API는 비디오 ID를 쉼표로 구분된 문자열로 전달할 수 있으며, 이 방식으로 여러 비디오의 정보를 한 번에 요청할 수 있습니다.

3. 비디오 리스트 및 비디오 카드 컴포넌트 구현

React Query를 활용해 유튜브 API로부터 데이터를 받아와 비디오 리스트와 비디오 카드 컴포넌트를 구현하였습니다.

import { useParams } from "react-router-dom";
import styles from "./Videos.module.css";
import { useQuery } from "@tanstack/react-query";
import VideoCard from "../../components/VideoCard/VideoCard";
import { Video } from "../../../public/types";
import YoutubeApi from "../../api/youtubeApi";

export default function Videos() {
    const { keyword } = useParams();
    const {
        isLoading,
        error,
        data: videos,
    } = useQuery<Video[]>({
        queryKey: ["videos", keyword],
        queryFn: () => YoutubeApi.search(keyword),
        staleTime: 60000,
        gcTime: 1000 * 60 * 10,
        refetchOnWindowFocus: false,
        refetchOnMount: false,
        refetchOnReconnect: false,
    });

    return (
        <>
            {videos && (
                <ul className={styles.grid}>
                    {videos.map((video: Video) => (
                        <VideoCard key={video.id} video={video} />
                    ))}
                </ul>
            )}
        </>
    );
}

import React from "react";
import { Video } from "../../../public/types";
import styles from "./VideoCard.module.css";
import { formatDateTime, formatViewCount } from "../../util";

export default function VideoCard({ video }: { video: Video }) {
    const { title, channelTitle, thumbnails, publishedAt } = video.snippet;
    const viewCount = parseInt(video.statistics?.viewCount || "0", 10);

    return (
        <li className={styles.card}>
            <div className={styles['img-container']}>
                <img
                    className={styles.img}
                    src={thumbnails.medium.url}
                    alt={title}
                />
            </div>
            <h3 className={styles.title}>{title}</h3>
            <p className={styles.text}>{channelTitle}</p>
            <div className={styles.flex}>
                <p className={styles.text}>
                    조회수 {formatViewCount(viewCount)}
                </p>
                <p className={styles.text}>{formatDateTime(publishedAt)}</p>
            </div>
        </li>
    );
}

4. 유틸리티 함수 구현

export function formatViewCount(viewCount: number): string {
    if (viewCount >= 100000000) {
        return `${(viewCount / 100000000).toFixed(1)}억회`;
    } else if (viewCount >= 10000) {
        return `${(viewCount / 10000).toFixed(0)}만회`;
    } else if (viewCount >= 1000) {
        return `${(viewCount / 1000).toFixed(1)}천회`;
    } else {
        return `${viewCount}회`;
    }
}

export function formatDateTime(dateString: string): string {
    const now = new Date();
    const targetDate = new Date(dateString);
    const diffInSeconds = Math.floor((now.getTime() - targetDate.getTime()) / 1000);

    const secondsInMinute = 60;
    const secondsInHour = 60 * secondsInMinute;
    const secondsInDay = 24 * secondsInHour;
    const secondsInWeek = 7 * secondsInDay;
    const secondsInMonth = 30 * secondsInDay;
    const secondsInYear = 365 * secondsInDay;

    if (diffInSeconds < secondsInHour) {
        const minutes = Math.floor(diffInSeconds / secondsInMinute);
        return `${minutes}분 전`;
    } else if (diffInSeconds < secondsInDay) {
        const hours = Math.floor(diffInSeconds / secondsInHour);
        return `${hours}시간 전`;
    } else if (diffInSeconds < secondsInWeek) {
        const days = Math.floor(diffInSeconds / secondsInDay);
        return `${days}일 전`;
    } else if (diffInSeconds < 14 * secondsInDay) {
        const weeks = Math.floor(diffInSeconds / secondsInWeek);
        return `${weeks}주 전`;
    } else if (diffInSeconds < secondsInMonth) {
        const days = Math.floor(diffInSeconds / secondsInDay);
        return `${days}일 전`;
    } else if (diffInSeconds < secondsInYear) {
        const months = Math.floor(diffInSeconds / secondsInMonth);
        return `${months}개월 전`;
    } else {
        const years = Math.floor(diffInSeconds / secondsInYear);
        return `${years}년 전`;
    }
}

- formatViewCount 함수

export function formatViewCount(viewCount: number): string {
    if (viewCount >= 100000000) {
        return `${(viewCount / 100000000).toFixed(1)}억회`;
    } else if (viewCount >= 10000) {
        return `${(viewCount / 10000).toFixed(0)}만회`;
    } else if (viewCount >= 1000) {
        return `${(viewCount / 1000).toFixed(1)}천회`;
    } else {
        return `${viewCount}회`;
    }
}

이 함수는 조회수를 한국어로 원하는 문자열 형태로 변환하는 유틸리티 함수입니다.

- formatDateTime 함수

export function formatDateTime(dateString: string): string {
    const now = new Date();
    const targetDate = new Date(dateString);
    const diffInSeconds = Math.floor((now.getTime() - targetDate.getTime()) / 1000);

    const secondsInMinute = 60;
    const secondsInHour = 60 * secondsInMinute;
    const secondsInDay = 24 * secondsInHour;
    const secondsInWeek = 7 * secondsInDay;
    const secondsInMonth = 30 * secondsInDay;
    const secondsInYear = 365 * secondsInDay;

    if (diffInSeconds < secondsInHour) {
        const minutes = Math.floor(diffInSeconds / secondsInMinute);
        return `${minutes}분 전`;
    } else if (diffInSeconds < secondsInDay) {
        const hours = Math.floor(diffInSeconds / secondsInHour);
        return `${hours}시간 전`;
    } else if (diffInSeconds < secondsInWeek) {
        const days = Math.floor(diffInSeconds / secondsInDay);
        return `${days}일 전`;
    } else if (diffInSeconds < 14 * secondsInDay) {
        const weeks = Math.floor(diffInSeconds / secondsInWeek);
        return `${weeks}주 전`;
    } else if (diffInSeconds < secondsInMonth) {
        const days = Math.floor(diffInSeconds / secondsInDay);
        return `${days}일 전`;
    } else if (diffInSeconds < secondsInYear) {
        const months = Math.floor(diffInSeconds / secondsInMonth);
        return `${months}개월 전`;
    } else {
        const years = Math.floor(diffInSeconds / secondsInYear);
        return `${years}년 전`;
    }
}

diffInSeconds는 now와 targetDate 사이의 시간 차이를 밀리초로 계산한 후, 초 단위로 변환한 값입니다.

각 시간 단위를 초 단위로 변환하여 변수로 정의합니다.

secondsInMinute, secondsInHour, secondsInDay, secondsInWeek, secondsInMonth, secondsInYear는 각각 1분, 1시간, 1일, 1주, 1개월, 1년을 초 단위로 표현한 것입니다.

5. 타입 정의

API로부터 받아온 데이터의 타입을 정의했습니다.

현재는 필요할 것 같은 데이터에만 타입을 지정했으며, 추후에 필요에 따라 타입을 추가하거나 불필요한 타입은 줄일 계획입니다.

interface VideoSnippet {
    publishedAt: string;
    title: string;
    description: string;
    thumbnails: {
        default: {
            url: string;
            width: number;
            height: number;
        };
        medium: {
            url: string;
            width: number;
            height: number;
        };
        high: {
            url: string;
            width: number;
            height: number;
        };
    };
    channelTitle: string;
}

interface VideoStatistics {
    viewCount: string;
    likeCount: string;
    favoriteCount: string;
    commentCount: string;
}

export interface Video {
    id: string;
    snippet: VideoSnippet;
    statistics: VideoStatistics;
}

YouTube Data API를 이용한 Youtube Clone - 2

Hyun Dev — Wed, 28 Aug 2024 15:55:39 +0900

이번 포스팅에서는 searchHeader에서 음성을 통한 검색 기능을 추가한 내용을 작성하겠습니다.

사용자가 음성 버튼을 누르면 모달이 뜨고, 음성 인식이 활성화되어 입력된 음성을 검색어로 처리합니다.

음성 인식 모달

음성 인식 실패 시 모달 내용 변경

1. SearchHeader의 음성 명령 처리 함수

searchHeader 컴포넌트에서는 음성 명령을 처리하는 handleVoiceCommand 함수를 추가했습니다.

이 함수는 사용자가 음성으로 입력한 명령을 받아 검색 결과 페이지로 이동시킵니다.

const handleVoiceCommand = (command: string) => {
    setText(command);
    navigate(`/videos/${command}`);
};

2. Modal 컴포넌트에서 음성 인식 처리

Modal 컴포넌트는 사용자가 음성 인식 버튼을 눌렀을 때 뜨는 모달 창입니다.

모달이 열리면 음성 인식이 시작되고, 사용자가 말을 멈추면 인식된 명령어를 handleVoiceCommand 함수에 전달합니다.

useEffect(() => {
    if (isOpen) {
        startListening();
    } else {
        stopListening();
    }

    return () => {
        stopListening();
    };
}, [isOpen]);

useEffect를 통해 모달이 열리면 음성 인식을 시작하고 모달이 닫히면 음성 인식을 중지하게 했습니다.

3. startListening

const startListening = () => {
    const SpeechRecognition =
        (window as any).SpeechRecognition ||
        (window as any).webkitSpeechRecognition;
    if (SpeechRecognition) {
        const recognition = new SpeechRecognition();
        recognition.lang = "ko-KR";
        recognition.interimResults = false;
        recognition.maxAlternatives = 1;

        recognition.onstart = () => setListening(true);
        recognition.onend = () => setListening(false);
        recognition.onerror = (event: any) => {
            console.error("Speech recognition error", event.error);
        };
        recognition.onresult = (event: any) => {
            const command = event.results[0][0].transcript;
            onVoiceCommand(command);
            onClose();
        };

        recognition.start();
    } else {
        console.warn("이 브라우저에서는 음성 인식이 지원되지 않습니다.");
    }
};

SpeechRecognition 객체:

window as any를 사용하여 SpeechRecognition API를 가져옵니다.
여기서 any 타입을 사용한 이유는, 해당 API의 타입을 지정하려 하니 TypeScript에서 오류가 발생했기 때문입니다.
(Window & typeof globalThis 형식에 'SpeechRecognition' 속성이 없습니다) 따라서 우선 any로 처리해뒀습니다.
recognition.lang = "ko-KR": 음성 인식 언어를 한국어로 설정합니다.
recognition.onresult: 음성 인식 결과를 처리하여 command에 저장하고, handleVoiceCommand 함수를 호출합니다.

https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition

SpeechRecognition - Web APIs | MDN

The SpeechRecognition interface of the Web Speech API is the controller interface for the recognition service; this also handles the SpeechRecognitionEvent sent from the recognition service.

developer.mozilla.org

4. stopListening

const stopListening = () => {
    const SpeechRecognition =
        (window as any).SpeechRecognition ||
        (window as any).webkitSpeechRecognition;
    if (SpeechRecognition) {
        const recognition = new SpeechRecognition();
        recognition.stop();
    }
};

stopListening: 현재 진행 중인 음성 인식을 중단합니다. 이 함수는 모달이 닫히거나 음성 인식을 중단해야 할 때 호출됩니다.