JavaScript82 Zustand(persist, Zukeeper, Redux DevTools 등) 1. Zustand를 왜 쓰는가?Zustand는 이런 상황에서 유용:컴포넌트 간 상태 공유가 필요할 때 (예: 로그인 상태, 장바구니)Redux처럼 복잡한 설정 없이 바로 쓰고 싶을 때상태가 많아지고 컴포넌트에 prop drilling이 많아졌을 때2. 기본 개념Zustand는 다음 3가지를 중심:store전역 상태 저장소setState상태를 변경하는 함수getState상태를 조회하는 함수 (일반적으로 내부에서만 사용)Zustand는 store를 만들고, 그 상태를 사용하는 것.3. 기본 사용법// store.tsimport { create } from 'zustand'type BearState = { bears: number increase: () => void}export const useBear.. 2025. 4. 2. React에서 화면 사이즈 감지하기(반응형 설정하기, window.innerWidth, matchMedia, react-responsive, tailwind) 1. window.innerWidth 직접 사용 (기본 방식 / 비추천)import { useEffect, useState } from 'react';const useWindowWidth = () => { const [width, setWidth] = useState(window.innerWidth); useEffect(() => { const handleResize = () => setWidth(window.innerWidth); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); return width;};이걸 사.. 2025. 3. 31. .env 파일과 실행 모드 import.meta.env.DEV는 Vite에서 자동으로 설정해줍니다.따라서 직접 설정할 필요는 없습니다.환경 변수 | 의미 | 설정 필요 여부import.meta.env.DEV개발 서버(vite dev)에서 실행 중이면 true❌ 자동 설정됨import.meta.env.PROD프로덕션 빌드(vite build)된 결과물이 실행 중이면 true❌ 자동 설정됨import.meta.env.MODE현재 모드 ('development', 'production', 'test' 등)❌ 자동 설정됨import.meta.env.VITE_XXX는 직접 설정해야 함위에 소개한 기본 환경 변수들과 다르게,VITE_로 시작하는 커스텀 환경 변수는 .env 파일 등에 직접 작성해야 합니다.예:# .envVITE_API_URL.. 2025. 3. 28. Jest와 React Test Library(RTL) Jest는 테스트 실행기 + 검증 도구 JestBy ensuring your tests have unique global state, Jest can reliably run tests in parallel. To make things quick, Jest runs previously failed tests first and re-organizes runs based on how long test files take.jestjs.ioReact Testing Library (RTL)는 React 컴포넌트 렌더링 & DOM 쿼리 도구 Testing Library | Testing LibrarySimple and complete testing utilities that encourage good testing .. 2025. 3. 25. JavaScript의 Object 객체와 주요 메서드 1️⃣ Object 생성 방법// 1. 객체 리터럴 방식const person = { name: "John", age: 30, greet: function () { return `Hello, my name is ${this.name}`; },};console.log(person.greet()); // Hello, my name is John// 2. Object 생성자 함수 사용const user = new Object();user.name = "Alice";user.age = 25;console.log(user.name); // Alice// 3. Object.create() 사용const proto = { type: "human" };const person2 = Object.create(.. 2025. 3. 21. React 고급 Hook React 고급 Hook (React 18+) 1. useId (서버와 클라이언트에서 동일한 ID 생성)React 18+에서 추가된 고유한 ID를 생성하는 Hook.클라이언트와 서버에서 같은 ID를 유지하도록 설계됨.SSR(서버 사이드 렌더링) 환경에서 ID 충돌 방지.폼 라벨 연결import { useId } from "react";const Example = () => { const id = useId(); // 고유한 ID 생성 return ( 이름: );};export default Example;id가 자동으로 생성되므로, 여러 개의 요소를 사용해도 충돌이 발생하지 않음.SSR(Next.js 등)에서 클라이언트와 서버의 ID가 일치하도록 보장함.2. u.. 2025. 3. 21. useRef, useImperativeHandle useRef1. useRef란?React의 상태(useState)와는 다르게 리렌더링 없이 값을 저장할 수 있는 Hook.DOM 요소에 직접 접근하거나, 이전 값을 저장할 때 사용됨.값이 변경되어도 컴포넌트가 리렌더링되지 않음.2. useRef 기본 문법import { useRef } from "react";const Example = () => { const inputRef = useRef(null); // 초기값 설정 const focusInput = () => { inputRef.current.focus(); // input에 포커스 적용 }; return ( 포커스 );};export default Example;useRef를 사용하면 input 요.. 2025. 3. 21. useEffect, useLayoutEffect, useInsertionEffect useEffectuseEffect는 React에서 컴포넌트의 생명주기를 다룰 수 있는 Hook으로, 사이드 이펙트(Side Effects)를 처리하는 역할을 합니다.1. useEffect의 역할비동기 API 요청 (데이터 패칭)이벤트 리스너 등록 및 해제DOM 조작 (클래스 추가, 애니메이션 등)타이머 설정 및 정리 (setTimeout, setInterval)컴포넌트가 마운트/언마운트될 때 특정 로직 실행2. useEffect 기본 문법1) 기본적인 사용 (마운트 시 실행)import { useEffect } from "react";const Example = () => { useEffect(() => { console.log("✅ 컴포넌트가 마운트됨!"); }, []); // 빈 배열 [] .. 2025. 3. 21. React Router DOM React에서 페이지 이동 방법페이지 전환이 필요한 경우 react-router-dom을 사용하는 것이 가장 좋습니다.1. React Router (react-router-dom)React에서 페이지 이동을 구현하는 표준 라이브러리.설치npm install react-router-dom기본 사용법import { BrowserRouter, Routes, Route, Link } from "react-router-dom";const Home = () => 홈 페이지;const About = () => 소개 페이지;const App = () => { return ( 홈 | 소개 } /> } /> );};expor.. 2025. 3. 21. 이전 1 2 3 4 5 6 7 ··· 10 다음
