React에서 전역 상태를 관리하는 방법은 여러 가지가 있다.Context API, Redux, Recoil 등 다양한 선택지가 있지만, 최근에는 Zustand가 주목받고 있다. Zustand는 용량이 가볍고 사용법이 직관적이며, 보일러플레이트 코드가 적다는 장점이 있다.이 글에서는 Zustand의 기본 사용법부터 실무에서 유용한 최적화 기법과 미들웨어 활용법까지 정리해봤다. Zustand를 사용하는 이유Context API의 한계Context API는 Props drilling 문제를 해결할 수 있지만, 범용적인 전역 상태 관리보다는 국소적인 데이터 공유에 더 적합하다.Context 값이 변경되면 해당 Context를 구독하는 모든 컴포넌트가 리렌더링되는 문제도 있다.Zustand의 장점매우 가벼운 용..

Next.js의 App Router에서는 컴포넌트를 서버 컴포넌트와 클라이언트 컴포넌트로 구분한다.이 구분은 상호작용 유무와 렌더링 위치에 따라 이루어진다.Client Component클라이언트 컴포넌트는 브라우저에서 실행되며, 사용자와의 상호작용을 처리할 수 있다.'use client' // 파일 최상단에 지시어 선언import { useState } from 'react'export default function Counter() { const [count, setCount] = useState(0) return setCount(count + 1)}>{count}}사전 렌더링 시 한 번, 하이드레이션 시 한 번, 총 두 번 실행useState, useEffect 등의 React 훅 사용 가능브라..

원-달러 환율 변환기를 구현했다.사용자가 한 화폐 단위의 금액을 입력하면, 사전에 정의된 환율을 사용해 다른 화폐 단위로 변환된 금액을 동시에 보여준다.구현 과정컴포넌트 분리입력 필드를 재사용 가능한 CurrencyInput 컴포넌트로 분리한다.const CurrencyInput = ({ value, onChange, currencyUnit }) => { return ( {currencyUnit} onChange(currencyUnit, e.target.value)} /> );};currencyUnit: 화폐 단위(krw 또는 usd)를 받아 라벨과 id로 사용한다.value: 현재 입력값을 props로 받아 표시한다.onChange: 입력값이 변경될 때 화..

이전 글에서 다뤘던 배달 음식 주문 폼을 개선해봤다.여러 개로 분리된 state를 하나로 통합하고, useRef를 활용해 입력 유효성 검사 기능을 추가했다.구현 과정State 통합하기기존에 분리되어 있던 3개의 state를 객체 형태의 하나의 state로 합친다.기존 코드const [menu, setMenu] = useState("");const [address, setAddress] = useState("");const [request, setRequest] = useState(""); 변경 후const [state, setState] = useState({ menu: "", address: "", request: "",}); 이에 맞춰 JSX의 value 속성도 수정한다.return ( ..

React로 간단한 배달 음식 주문 페이지를 구현했다.메뉴, 배달 주소, 요청사항을 입력받고 주문 완료 시 입력값을 확인할 수 있도록 만들었다.구현 과정마크업 구조먼저 주문에 필요한 입력 폼들을 구성한다. 메뉴 선택을 위한 select,주소 입력을 위한 input, 요청사항 입력을 위한 textarea, 그리고 주문 완료 button을 배치한다.export default function OrderEditor() { return ( 배달의민족 주문 아이스크림 젤리 초콜릿 배달 주소 배달 요청사항 주문 완료 );} state 관리각 입력 필드의 값을 관리하기 위한 state를..

문제 상황Firebase의 GoogleAuthProvider와 GithubAuthProvider를 사용하여 소셜 로그인 기능을 구현하던 중, 하나의 함수에서 버튼의 name 속성에 따라 다른 provider를 호출하도록 구현했다. Sign up with Google Sign up with Githubconst onClickSocialLogin = async (e: React.MouseEvent) => { const { target: { name }, } = e; let provider; const auth = getAuth(app); if (name === "google") { provider = new GoogleAuthProvider(); } if (name === "git..

PeaNutter는 만화 Peanuts를 테마로 한 소셜미디어 프로젝트다.노마드코더 트위터 클론코딩 컨테스트에 참여하여 만들었으며, 사용자들이 자신의 소소한 일상과 생각을 'nut'으로 공유하고 소통하는 플랫폼을 구상했다. Peanuts는 땅콩이라는 뜻 외에도 '별 볼 일 없는 것들'이라는 의미로 쓰인다. 이 의미에서 착안하여 누구나 일상의 소소한 순간들을 가볍게 나누는 공간을 상징하고자 PeaNutter라는 이름을 붙였다.마이그레이션 배경컨테스트 당시 2주 동안 매주 제공되는 미션을 진행하며 기획안부터 필수 기능 3가지까지 구현해야 했다. 개인적으로 추가하고 싶었던 부가 기능까지 욕심내다 보니, 결과적으로 만족스러운 완성도에 도달하지 못했다. 이러한 아쉬움으로 PeaNutter는 리팩토링 및 마이그레이..

로컬 스토리지를 활용하여 사용자의 다크모드 설정, 일기 데이터, AI 답장을 저장하고 관리하는 기능을 구현했다.페이지를 새로고침하거나 재방문해도 사용자의 데이터가 유지된다.다크모드 설정 저장설정 불러오기애플리케이션 로드 시 로컬 스토리지에서 사용자의 마지막 다크모드 설정을 불러온다.const ThemeProvider = ({ children }: ThemeProviderProps) => { const loadDarkModeSetting = () => { const storedDarkModeSetting = localStorage.getItem("darkMode"); return storedDarkModeSetting ? JSON.parse(storedDarkModeSetting) : fals..

사용자가 작성한 일기에 대해 GPT API를 활용하여 상담 전문가 관점의 답장을 받을 수 있는 기능을 구현했다.GPT API 연동프롬프트 설정GPT API에 전달할 메시지 구조를 정의했다.const messages = [ // 역할 정의 { role: "system", content: "You are a Counseling Expert, specializing in personal development through diary writing.", }, // 사용자 일기 입력 { role: "user", content: ` """ ${prompt} """`, }, // AI 지시 사항 { role: "user", conten..

Tailwind CSS의 다크모드 기능과 React Context API를 활용하여 애플리케이션 전체에서 일관된 다크모드 전환 기능을 구현했다.Tailwind 설정tailwind.config.ts에서 다크모드를 클래스 기반으로 설정했다.darkMode: "class", // .dark 클래스 존재 여부에 따라 다크모드 활성화theme: { extend: { colors: { // 색상 스키마 }, },},이를 통해 HTML 요소에 .dark 클래스가 추가되면 다크모드 스타일이 적용되도록 했다. 다크모드 상태 관리ThemeContext 생성Context API를 사용해 다크모드 상태를 전역으로 관리했다.const ThemeContext = createContext({ isDark..