TypeScript

프론트엔드와 백엔드 간 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): ..

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..

회원가입 폼 쉽게 만들기 : 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..

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..

[Next.js 실전] Image 컴포넌트로 웹 성능 최적화하기

소개웹 성능에서 이미지 최적화는 매우 중요한 요소입니다. Next.js의 Image 컴포넌트는 자동 이미지 최적화, 지연 로딩, 올바른 크기 조정 등 다양한 최적화 기능을 제공합니다. 이번 글에서는 Image 컴포넌트의 모든 기능과 최적화 방법을 자세히 알아보겠습니다.Next.js Image 컴포넌트 기본 사용법Image 컴포넌트의 기본적인 사용 방법입니다.import Image from 'next/image';function MyComponent() { return ( );}반응형 이미지 처리다양한 화면 크기에 대응하는 반응형 이미지 설정 방법입니다.// 가변 너비 이미지function ResponsiveImage() { return ( );}// fill 속성을..

[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..

데이터베이스 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..

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의 장점빠른 ..