hyonie's Stack 👩🏻‍💻

📂 목차 시간 조건에 따라 버튼활성화 or 비활성화 커스텀 훅 예제 코드import {useState, useEffect} from "react";export const useTimeRestrictedToggle = () => { const [isEnabled, setIsEnabled] = useState(false);useEffect(()=>{ const checkIsHoliday = (date: Date) => { const month = date.getMonth() + 1; const day = date.getDate(); // 공휴일 (신정, 설날, 추석, 등) const isNewYear = month === 1 && day === ..

리액트를 쓰다 보면 리렌더링 될 때마다 함수나 계산이 다시 실행되는 현상 때문에 성능 이슈가 생기는 경우가 있습니다. 특히 .filter() 나 .map(), .sort()처럼 반복 계산이 많은 연산은 불필요하게 반복되면 리액트의 퍼포먼스를 갉아먹습니다.그래서 등장하는 게 바로 ⭐useMemo 입니다.실무에서 자주 쓰이는 useMemo의 개념과 예제에 대해 어떻게 쓰이는지 정리하였습니다.📂 목차 useMemo란?const memoizedValue = useMemo(() => { return 계산식;}, [의존성])💡 한마디로 말하면?"의존성 값이 바뀔때만 다시 계산되는 값" 을 만들어서, 불필요한 계산을 막아주는 훅 🔍 왜써야할까?리액트는 컴포넌트가 리렌더링될 때마다 내부 코드를 다시 실행하는데,..

📂 목차 yarn berry 활성화1. 프로젝트 생성yarn create vite my-app --template react-ts 2. yarn berry 초기화yarn set version berry 3. pnp 방식 사용하여 의존성 관리.yarnrc.yml 파일에서 nodeLinker: pnp 내용을 추가이 설정을 통해 node_modules 폴더 없이도 패키지를 관리할수 있다. 4. yarn install 패키지 설치yarn install # .yarn/cache 설정 5. ZipFS 플러그인 설치 주의해야 할 이슈 & 해결책1. 타입스크립트 경로 인식 문제yarn dlx @yarnpkg/sdks vscode #Vs Code SDK 설치이 명령어를 실행하면 .vscode/settings.json ..

리액트 프로젝트를 구성한 후 npm run start 를 실행했을 때 예상치 못한 에러가 발생했습니다. 문제의 내용을 다음과 같습니다: ERROR in ./src/reportWebVitals.js  위 에러의 원인과 그 해결 방안에 대해 기록하려고 합니다.web-vitals 모듈 설치개발 중에 reportWebVitals.js 파일에서 web-vitals 모듈을 찾을 수 없다는 에러 메시지가 발생했습니다. 이는 web-vitals 패키지가 설치되어 있지 않기 때문에 나타나는 문제입니다.  web-vitals는 웹사이트의 성능 지표를 측정하는 데 사용되는 모듈입니다. 다음 단계를 따라 web-vitals 패키지를 설치합니다:터미널을 열어 프로젝트 폴더로 이동다음 명령어를 실행하여 web-vitals 패키지..

리액트 개발 시작하기에 앞서, 리액트 프레임워크의 개념을 이해하는 것이 중요하다. 이를 위해 먼저 웹 서버와 웹 브라우저 간의 통신 과정과 싱글페이지 애플리케이션(SPA)의 개념을 알아야한다. 웹 브라우저가 서버로부터 데이터를 요청하고 응답받는 과정과 SPA가 페이지를 동적으로 업데이트하여 사용자 경험을 향상시키는 방식을 이해하면, 리액트의 핵심 동작 원리를 쉽게 파악할수 있다. 이 글에서는 이러한 내용을 간략하게 정리 하였다.리액트 프레임워크 이해하기리액트(React)는 2013년 페이스북에서 발표한 오픈소스 자바스크립트 라이브러리주로 사용자 인터페이스(UI)를 효율적으로 구축하기 위해 사용가상 DOM(Virtual DOM)과 JSX 라는 새로운 방식으로 효율적인 렌더링 지원프론트엔드는 웹 브라우저에서..