벼락치기 블로그

HMR(Hot Module Replacement)은 코드 변경 시 전체 페이지를 새로고침하지 않고 변경된 모듈만 즉시 업데이트하는 기능임주로 React, Vite, Webpack 같은 개발 환경에서 사용됨. - 빠른 개발 속도- 상태 유지 (새로고침 없이 UI만 갱신)- 효율적인 리소스 관리

useEffect(effect) → 매 렌더링마다 실행됨useEffect(effect, []) → 마운트될 때 한 번만 실행됨useEffect(effect, [value]) → value 값이 변경될 때만 실행됨

React Recoil을 사용하는 주요 이유간단한 전역 상태 관리: 기존 React에서는 여러 컴포넌트 간에 상태를 공유하려면 상위 컴포넌트로 상태를 끌어올리는 등의 복잡한 작업이 필요. Recoil은 로컬 상태처럼 간단한 get/set 인터페이스로 전역 상태를 관리할 수 있도록 도와줌.불필요한 렌더링 최소화: 상위 컴포넌트에서 상태를 관리하면 트리 전체에 걸쳐 불필요한 리렌더링이 발생할 수 있는데, Recoil은 상태 변화가 필요한 부분만 업데이트하여 성능을 향상.코드 분할과 모듈화: 상태 정의가 분산되어 있어, 필요한 시점에만 로드할 수 있으므로 코드 분할이 용이하고 애플리케이션 유지보수가 쉬워짐.최신 React 기능과의 호환: React의 동시성 모드(Concurrent Mode) 등 최신 기능과도..

Unsplash Image API를 활용한 이미지 검색 사이트 구축 ### 개발환경1.  프로젝트 환경설정(vite를 활용한 React 설치): `npm install vite@latest`2.  React 중앙집중식 상태관리 라이브러리 Recoil 설치: `npm install recoil`3.  외부 오픈 API 통신을 위한 라이브러리 Axios 설치: `npm install axios` 4.  CSS 스타일링을 위한 SASS/SCSS 설치: `npm install -D sass`5.  React Router 설치: `npm install react-router-dom localforage match-sorter sort-by`6.  TypeScript에서 Node.js 모듈을 쓸 수 있는 환경 구축..

1. 연동 확인방법VSCode의 터미널(Terminal)에서 아래 명령어를 실행 git remote -vorigin https://github.com/사용자이름/레포지토리이름.git(fetch)origin https://github.com/사용자이름/레포지토리이름.git (push) 위와 같이 GitHub URL이 보이면, 현재 폴더가 GitHub 원격 저장소와 연결된 상태 2. 연동 해제방법터미널에서 아래 명령어 실행 git remote remove origin git remote -v 로 확인 3. 폴더 git 해제 방법아래 명령어로 git 해제 rm -rf .git git status 로 git 연동 확인

1. homebrew 설치home brew 홈페이지에서 설치 명령어 터미널에 입력하여 설치brew help 입력하여  설치 확인zsh: command not found: brew 오류시eval $(/opt/homebrew/bin/brew shellenv) 입력한 후brew help 입력하여 설치 확인 2. git 설치터미널에서 brew install git 으로 git설치git --version 입력하여 설치 확인

사용import toast, { toastConfig } from 'react-simple-toasts';import 'react-simple-toasts/dist/style.css';import 'react-simple-toasts/dist/theme/dark.css';toastConfig({ theme: 'dark' });function MyComponent() { return toast('Your toast is ready! 🍞')}>Show Toast;}

// ✅ 객체 구조 분해 할당const person = { name: 'Alice', age: 25 };const { name, age } = person;console.log(name); // 'Alice'console.log(age); // 25// ✅ 배열 구조 분해 할당const numbers = [1, 2, 3];const [first, second, third] = numbers;console.log(first); // 1console.log(second); // 2console.log(third); // 3 📌 차이점구조 문법 특징객체 구조 분해 할당 { name, age } = person 변수명은 반드시 객체 속성과 동일해야 함배열 구조 분해 할당 [first, second] = ..

- recoil : React 애플리케이션에서 전역 상태 관리를 쉽게 할 수 있도록 도와주는 라이브러리- atoms : 기본 상태관리 대상(상태저장), 여러 컴포넌트에서 공유 가능 useRecoilState(atom): atom의 값을 읽고 업데이트할 수 있도록 [value, setValue] 형태의 배열을 반환useRecoilValue(atom): 읽기 전용으로 atom의 값을 가져올 때 사용]useSetRecoilState(atom): setter 함수만 필요할 때 사용useResetRecoilState(atom): atom의 값을 초기값으로 리셋할 때 사용 - selectors : atom을 기반으로 중복되는 계산 로직을 관리해주는 "파생상태"useRecoilValue(selector): selec..

useState를 이용하여 상태 변경시- 리액트가 자동적으로 UI에 업데이트 해준다.- virtual dom을 사용해 변경된 부분만 렌더링