TypeScript

[Next.js] HTTP 요청 구현하기 : fetch vs axios

기본적인 fetch 사용법브라우저 내장 fetch API는 별도의 설치 없이 HTTP 요청을 처리할 수 있는 가장 기본적인 방법입니다. Next.js 13 이상에서는 서버 컴포넌트에서도 fetch를 기본적으로 지원합니다.// 기본적인 GET 요청async function fetchUsers() { const response = await fetch('https://api.example.com/users'); const data = await response.json(); return data;}// POST 요청 예제async function createUser(userData) { const response = await fetch('https://api.example.com/users', { ..

[Chrome Extension] Manifest V3 가이드

소개크롬 확장프로그램 개발을 시작하기 위한 첫 걸음은 manifest.json 파일을 이해하는 것입니다. Manifest V3의 모든 설정과 사용법을 자세히 알아보겠습니다.manifest.json 기본 구조{ "manifest_version": 3, "name": "My Extension", "description": "A simple Chrome extension", "version": "1.0.0", "permissions": [], "action": {}, "background": {}, "content_scripts": []}필수 필드 설명기본 정보{ "manifest_version": 3, // Manifest 버전 (V3 필수) "name": "My Extension", ..

next.config.js 커스터마이징

소개Next.js 애플리케이션의 동작을 세부적으로 제어하고 싶으신가요? next.config.js 파일을 통해 애플리케이션을 원하는 대로 커스터마이징하는 방법을 알아보겠습니다.next.config.js 기본 구조// next.config.js/** @type {import('next').NextConfig} */const nextConfig = { // 기본 설정 reactStrictMode: true, // 여기에 추가 설정}module.exports = nextConfig런타임 구성 설정하기런타임 구성에는 두 가지 유형이 있습니다:서버 런타임 구성const nextConfig = { serverRuntimeConfig: { userEndpoint: 'https://api.example.c..

[React] React.lazy와 Suspense

소개웹 애플리케이션이 커질수록 초기 로딩 시간도 늘어납니다. React.lazy와 Suspense를 사용하면 필요한 시점에 코드를 로드하여 초기 로딩 시간을 줄일 수 있습니다. 쉽게 말해, 처음부터 모든 것을 로드하지 않고 필요할 때 필요한 부분만 가져오는 것입니다.React.lazy란?React.lazy는 컴포넌트를 동적으로 불러올 수 있게 해주는 기능입니다. 쉽게 말해, 필요한 순간에 컴포넌트를 로드하는 것입니다.기본 사용법// 기존 방식import HeavyComponent from './HeavyComponent';// React.lazy 사용const HeavyComponent = React.lazy(() => import('./HeavyComponent'));Suspense란?Suspense는..

[React] memo를 사용한 컴포넌트 최적화

소개React의 memo 함수는 컴포넌트의 불필요한 리렌더링을 방지하여 성능을 최적화하는 데 사용됩니다. 이번 글에서는 memo의 올바른 사용법과 실제 사례를 살펴보겠습니다.기본 사용법import { memo } from 'react';interface UserProfileProps { name: string; email: string;}const UserProfile = memo(function UserProfile({ name, email }: UserProfileProps) { return ( {name} {email} );});export default UserProfile;memo가 필요한 경우와 필요하지 않은 경우memo가 유용한 경우// 1. 큰 리스트..

[React Query] useMutation과 useQuery

소개React Query의 useQuery와 useMutation은 서버 상태 관리를 위한 핵심 훅입니다. 이번 글에서는 두 훅의 상세한 사용법과 실전 예제를 알아보겠습니다.설치# npmnpm install @tanstack/react-query# yarnyarn add @tanstack/react-query# pnpmpnpm add @tanstack/react-queryuseQuery 기본 사용법간단한 데이터 조회import { useQuery } from '@tanstack/react-query';// 사용자 조회 훅function useUser(userId: string) { return useQuery({ queryKey: ['user', userId], queryFn: () => f..

[React] Zustand로 배우는 간단하고 강력한 상태 관리

소개Zustand는 React를 위한 작고 빠른 상태 관리 라이브러리입니다. Redux의 복잡성을 줄이면서도 강력한 기능을 제공하는 Zustand의 사용법을 알아보겠습니다.설치# npmnpm install zustand# yarnyarn add zustand# pnpmpnpm add zustand기본적인 스토어 생성과 사용스토어 생성// stores/useCounterStore.tsimport { create } from 'zustand';interface CounterState { count: number; increment: () => void; decrement: () => void; reset: () => void;}const useCounterStore = create((set) => (..

[React Query] QueryClient : 효율적인 상태관리와 데이터 캐싱

소개React Query는 React 애플리케이션에서 서버 상태를 관리하기 위한 강력한 도구입니다. 이번 글에서는 QueryClient의 핵심 기능과 활용 방법을 자세히 알아보겠습니다.설치# npm을 사용하는 경우npm install @tanstack/react-query# yarn을 사용하는 경우yarn add @tanstack/react-query# pnpm을 사용하는 경우pnpm add @tanstack/react-queryQueryClient 기본 설정import { QueryClient } from '@tanstack/react-query';// 기본 QueryClient 생성const queryClient = new QueryClient({ defaultOptions: { queries..