티스토리

끄적끄적 코딩 공방

검색하기

블로그 홈

끄적끄적 코딩 공방

coding-shop.tistory.com/m

나의 코딩 일기장

구독자: 7

방명록 방문하기

주요 글 목록

[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', { .. 공감수 0 댓글수 0 2025. 1. 24.
[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", .. 공감수 2 댓글수 2 2025. 1. 21.
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.. 공감수 0 댓글수 0 2025. 1. 8.
[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는.. 공감수 1 댓글수 2 2024. 12. 26.
[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. 큰 리스트.. 공감수 0 댓글수 0 2024. 12. 25.
[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.. 공감수 0 댓글수 0 2024. 12. 24.
[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) => (.. 공감수 0 댓글수 0 2024. 12. 20.
[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.. 공감수 0 댓글수 0 2024. 12. 19.
프론트엔드와 백엔드 간 Enum 동기화 소개프론트엔드와 백엔드에서 동일한 Enum을 사용해야 할 때, 이를 효과적으로 관리하고 동기화하는 것은 중요한 과제입니다. 이번 글에서는 FastAPI와 React 환경에서 Enum을 일관성 있게 관리하는 다양한 방법을 알아보겠습니다.1. OpenAPI Specification을 활용한 방법FastAPI 백엔드 설정# backend/enums.pyfrom enum import Enumclass UserRole(str, Enum): ADMIN = "ADMIN" USER = "USER" GUEST = "GUEST"# backend/models.pyfrom pydantic import BaseModelfrom .enums import UserRoleclass User(BaseModel): .. 공감수 0 댓글수 0 2024. 12. 7.
React 환경 변수 : .env 소개React 애플리케이션을 개발할 때 API 키, 서버 URL 등의 민감한 정보나 환경별 설정을 관리해야 할 때가 있습니다. 이럴 때 .env 파일을 사용하면 효과적으로 환경 변수를 관리할 수 있습니다.환경 변수 기본 설정.env 파일 생성# .env 파일은 프로젝트 루트 디렉토리에 생성합니다.REACT_APP_API_URL=https://api.example.comREACT_APP_API_KEY=your_api_key_hereREACT_APP_ENV=development주의사항모든 환경 변수는 REACT_APP_ 접두사로 시작해야 합니다..env 파일은 .gitignore에 추가하여 버전 관리에서 제외해야 합니다.변수 값에 따옴표를 사용하지 않습니다.환경별 .env 파일 관리# .env.develop.. 공감수 1 댓글수 1 2024. 12. 5.
회원가입 폼 쉽게 만들기 : react-hook-form 소개폼(Form) 관리는 웹 개발에서 매우 중요한 부분입니다. React에서 react-hook-form을 사용하면 복잡한 폼 상태 관리와 유효성 검사를 쉽게 구현할 수 있습니다. 이번 글에서는 회원가입 폼을 예제로 react-hook-form의 사용법을 자세히 알아보겠습니다.react-hook-form 설치npm install react-hook-form// oryarn add react-hook-form기본 회원가입 폼 구현import { useForm } from 'react-hook-form';import { useState } from 'react';// 폼 데이터 타입 정의interface SignUpFormData { email: string; password: string; passw.. 공감수 1 댓글수 1 2024. 11. 22.
3D 카드 플립 효과로 배우는 실전 Tailwind 활용법 소개Tailwind CSS는 유틸리티 우선 접근방식의 CSS 프레임워크입니다. 이번 글에서는 볼링공 카드의 3D 플립 효과 구현을 통해 Tailwind CSS의 실전 활용법을 자세히 알아보겠습니다.기본 레이아웃 구성기본적인 카드 레이아웃을 구성하는 클래스들입니다.// 카드 컨테이너className="group h-full"// 기본 스타일링className="w-full h-full" // 너비와 높이 100%className="relative" // 자식 요소의 위치 기준점className="absolute" // 부모 요소 기준 절대 위치3D 트랜스폼 효과3D 카드 플립 효과를 구현하는 클래스들입니다.// 3D 효과 기본 설정className="transform-style-pr.. 공감수 0 댓글수 0 2024. 11. 20.
[Next.js 실전] Image 컴포넌트로 웹 성능 최적화하기 소개웹 성능에서 이미지 최적화는 매우 중요한 요소입니다. Next.js의 Image 컴포넌트는 자동 이미지 최적화, 지연 로딩, 올바른 크기 조정 등 다양한 최적화 기능을 제공합니다. 이번 글에서는 Image 컴포넌트의 모든 기능과 최적화 방법을 자세히 알아보겠습니다.Next.js Image 컴포넌트 기본 사용법Image 컴포넌트의 기본적인 사용 방법입니다.import Image from 'next/image';function MyComponent() { return ( );}반응형 이미지 처리다양한 화면 크기에 대응하는 반응형 이미지 설정 방법입니다.// 가변 너비 이미지function ResponsiveImage() { return ( );}// fill 속성을.. 공감수 0 댓글수 0 2024. 11. 18.
[React 최적화] 메모이제이션 완벽 가이드 - useMemo, useCallback, React.memo 실전 활용법 소개React 애플리케이션의 성능을 최적화하는 방법 중 가장 중요한 것이 메모이제이션(Memoization)입니다. 메모이제이션은 이전에 계산한 값을 재사용하여 불필요한 렌더링과 계산을 방지하는 기술입니다. 이번 글에서는 React의 메모이제이션 도구들을 자세히 살펴보겠습니다.React.memoReact.memo는 컴포넌트 자체를 메모이제이션하는 고차 컴포넌트(HOC)입니다.// 기본 사용법const MemoizedComponent = React.memo(function MyComponent(props) { return ( {props.name} {props.description} );});// 커스텀 비교 함수 사용const MemoizedWithCustomCompa.. 공감수 0 댓글수 0 2024. 11. 17.
데이터베이스 API 구현하기 : SQLite와 타입 안전성 소개Next.js에서 데이터베이스 API를 구현할 때는 타입 안전성과 효율적인 쿼리 작성이 중요합니다. 이번 글에서는 SQLite 데이터베이스를 사용하여 볼링공 정보를 제공하는 API를 TypeScript로 구현하는 방법을 알아보겠습니다. API 라우트 구현Next.js의 API 라우트는 pages/api 디렉토리에 위치합니다.// src/pages/api/bowling-balls.tsimport { NextApiRequest, NextApiResponse } from 'next';import sqlite3 from 'sqlite3';import { open } from 'sqlite';export default async function handler(req: NextApiRequest, res: Ne.. 공감수 3 댓글수 7 2024. 11. 17.
React에서 Tailwind CSS 활용하기 CSS는 웹 개발에서 항상 까다로운 부분이었습니다. 클래스 네이밍과 CSS 파일 관리에 많은 시간이 소요되는 것이 가장 큰 문제였죠. 그런데 최근 Tailwind CSS라는 새로운 접근법이 등장하면서 이 문제를 해결할 수 있게 되었습니다.Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크입니다. 기존의 CSS 프레임워크와 달리, Tailwind CSS는 미리 정의된 유틸리티 클래스들을 HTML 태그에 직접 적용하는 방식으로 작동합니다. 예를 들어, text-blue-500 hover:text-blue-700 font-bold py-2 px-4 rounded 와 같은 클래스를 사용하면 원하는 스타일을 쉽게 적용할 수 있습니다. Click meTailwind CSS의 장점빠른 .. 공감수 1 댓글수 1 2024. 11. 15.
React 프로젝트 구조 및 VSCode 확장 프로그램 추천 React는 UI 개발에 있어 매우 강력한 JavaScript 라이브러리입니다. React 프로젝트를 효과적으로 관리하기 위해서는 적절한 폴더 구조를 설정하는 것이 중요합니다. 또한 VSCode(Visual Studio Code)에서 React 개발을 돕는 다양한 확장 프로그램을 활용하면 생산성을 크게 높일 수 있습니다.React 프로젝트 폴더 구조React 프로젝트의 일반적인 폴더 구조는 다음과 같습니다:my-react-app/├── node_modules/├── public/│ ├── index.html│ ├── manifest.json│ └── robots.txt├── src/│ ├── components/│ │ ├── Header.js│ │ ├── Footer.js│ .. 공감수 2 댓글수 4 2024. 11. 14.
tsconfig.json : compilerOptions 살펴보기 TypeScript 프로젝트를 구성할 때 가장 중요한 파일은 tsconfig.json입니다. 이 파일에는 TypeScript 컴파일러의 동작을 제어하는 다양한 설정 옵션이 정의되어 있습니다. 이번 포스팅에서는 tsconfig.json의 compilerOptions 섹션을 자세히 살펴보도록 하겠습니다.compilerOptions 설정 옵션compilerOptions 섹션에는 TypeScript 컴파일러의 동작을 제어하는 다양한 설정 옵션이 포함되어 있습니다. 주요 옵션들은 다음과 같습니다:target: 생성할 JavaScript 코드의 ECMAScript 버전을 지정합니다. 일반적으로 es5, es6, es2015, es2016, es2017, es2018, es2019, es2020, es2021 등의 .. 공감수 1 댓글수 2 2024. 11. 10.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.