나디아 성장 일기

📌 disabled 속성 : HTML 및 React 컴포넌트에서 요소의 상호작용을 제어하는데 사용 요소가 사용자 상호작용을 받을 수 없도록 만든다.주로 버튼, 입력 필드, 선택 상자 등과 같은 사용자 인터페이스(UI) 요소에 적용한다.기능상호작용 비활성화disabled 속성이 설정된 요소는 사용자가 클릭하거나 입력할 수 없게 된다. ex) 버튼이 disabled 상태일 때, 사용자는 그 버튼을 클릭할 수 없다.스타일링브라우저는 disabled 상태인 요소에 대해 기본적으로 시각적으로 구분되도록 스타일을 적용한다.일반적으로 disabled 상태인 버튼은 흐릿해지거나 회색으로 표시된다.폼 제출 방지disabled 속성이 설정된 입력 필드는 폼이 제출될 때 해당 데이터가 전송되지 않도록 한다.➡︎ 비활성화된..

📌 react-icons: React에서 아이콘을 쉽게 사용할 수 있게 해주는 라이브러리react-icons는 여러 아이콘 라이브러리에서 제공하는 아이콘들을 React 컴포넌트 형태로 제공한다.➡︎ JSX에서 직접 사용할 수 있다.➡︎ 아이콘의 크기, 색상, 스타일 등을 CSS로 제어할 수 있다.필요한 아이콘만 임포트하여 사용할 수 있어서 전체 라이브러리를 임포트하는 것보다 경량화된 애플리케이션을 만들 수 있다. React Icons react-icons.github.io  ⏩ 설치 npm install react-icons --save   ✅ 사용1. 원하는 아이콘 컴포넌트 불러오기 import { FaBeer } from 'react-icons/fa'; // FontAwesome 아이콘 임포트  ..

📌 React Router 라이브러리프로덕션용으로 사용 가능한 싱글 페이지 앱을 구현(SPA)하기 위한 React Router 라이브러리URL이 변경돼도 싱글페이지로 렌더링 하는 기능을 지원  ☑️ 데이터 가져오기 (Loader)⏩ loader() 함수: 특정 라우트가 렌더링되기 전에 데이터를 비동기적으로 로드하는 데 사용 서버에서 데이터를 가져오거나 비동기 작업을 처리한 후 페이지를 렌더링할 수 있도록 한다loader()는 특정 라우트가 활성화되기 전에 필요한 데이터를 미리 로드한다.➡︎ 페이지가 로드될 때 필요한 데이터가 이미 준비되어 있어 사용자에게 빠르게 콘텐츠를 제공한다. 특징비동기 데이터 로딩: loader()는 비동기 함수를 지원하여, 데이터를 비동기적으로 가져올 수 있다.라우트 기반 데이..

📌 React Router 라이브러리프로덕션용으로 사용 가능한 싱글 페이지 앱을 구현(SPA)하기 위한 React Router 라이브러리URL이 변경돼도 싱글페이지로 렌더링 하는 기능을 지원  ☑️ 검색엔진최적화(SEO) 설정 ⏩ react-helmet-async 활용: React 애플리케이션에서 동적으로 HTML 를 관리할 수 있게 해주는 라이브러리 리액트의 단점 ➡︎  React는 하나의 index.html을 두고 있기 때문에 페이지 마다 페이지를 설명하는 메타태그를 설정하기 어렵다. ➡︎ SEO가 어렵다. SEO(검색 엔진 최적화)와 소셜 미디어 공유를 위해 메타 태그, 타이틀, 링크 태그 등을 관리할 때 사용 기존의 react-helmet 라이브러리를 비동기적으로 사용할 수 있도록 개선한 버전..

📌 Tailwind CSS : 유틸리티 기반의 CSS 프레임워크 미리 정의된 클래스를 활용해 빠르고 쉽게 스타일링할 수 있다. tailwindcss가 정해놓은 클래스 이름을 가져다가 쓰면 되기 때문에 네이밍에 대한 고민을 하지 않아도 된다. 컴포넌트마다 CSS 파일을 생성하지 않아도 된다.   ⏩ 설치 크로스 브라우징을 대응 해주는 postcss autoprefixer를 함께 설치 npm install -D tailwindcss postcss autoprefixer Tailwind CSS 패키지를 함께 설치할 경우https://tailwindcss.com/docs/guides/vitepnpm add postcss autoprefixer tailwindcss postcss-import -D   ✅ 사용 ..

📌 react-hot-toast: React에서 사용하는 토스트 메시지 라이브러리  react-hot-toast - The Best React Notifications in Town - react-hot-toastAdd beautiful notifications to your React app with react-hot-toast. Lightweight. Smoking hot by default.react-hot-toast.com   ✨ 토스트 메시지(Toast Message): 사용자에게 간단한 정보를 잠깐 보여주는 UI 요소토스트처럼 화면의 특정 위치에서 떠오르고, 일정 시간이 지나면 자동으로 사라진다. 보통 정보나 작업 결과를 사용자에게 간단하게 알려줄 때 사용한다.    ⏩ 설치pnpm add ..

📌 useReducer(): 복잡한 상태(state) 로직을 처리하는 상태 관리 훅 useState와 유사하지만, 상태(state) 업데이트 로직을 더 명확하게 분리하고 다양한 상태(state) 변화를 처리한다. 현재 상태와 액션을 받아 새로운 상태를 반환하는 리듀서 함수를 사용한다.➡︎ 상태 변화는 액션에 의해 일어나며, 이 액션은 리듀서 함수에 전달된다. useReducer에서 사용하는 리듀서 함수는 순수해야 한다. ➡︎ 사이드 이펙트 코드가 들어가면 안된다. 사용상태(state) 변화가 복잡하고, 여러 가지 액션에 따라 다양한 상태 변경이 필요할 때상태(state)와 관련된 로직을 분리하여 관리하고 싶을 때리덕스(Redux)와 같은 상태 관리 패턴을 작은 컴포넌트 내에서 구현하고 싶을 때  ⏩ ..

📌 AbortController : 웹 요청을 취소할 수 있는 기능 비동기 작업을 취소할 수 있도록 돕는 기능다양한 비동기 작업을 중단할 때 사용한다.(ex. Fetch API, 네트워크 요청 취소, 타이머 중단, 이벤트 리스너 제거 등)사용: 사용자가 취소하거나 중단할 수 있는 작업 ex 1) 사용자가 파일 다운로드를 시작했지만, 중간에 취소 버튼을 클릭하면 다운로드 요청을 중단 ex 2) 컴포넌트가 사라지거나 페이지가 이동되면 이전에 실행 중이던 네트워크 요청이 더 이상 필요하지 않으므로 중단ex 3) 네트워크 상태가 좋지 않아서 요청이 너무 오래 걸리는 경우, 일정 시간이 지나면 요청을 자동으로 중단  ⏩ 작동 방식 AbortController()는 signal 객체를 생성 ➡︎ 이 signal ..

📌 useContext(): 상위 컴포넌트에서 제공한 Context 값을 하위 컴포넌트에서 접근할 수 있는 훅상위 컴포넌트에서 ⬇️ 하위 컴포넌트로 데이터를 전달하는 데 사용 prop drilling(여러 단계의 prop 전달)을 피할 수 있다. 사용Context 생성: createContext를 사용하여 Context 객체를 생성Context 제공: Provider를 사용하여 하위 컴포넌트에 값을 제공Context 사용: useContext를 사용하여 Context의 값을 읽어옴   ✅ 사용  1️⃣ createContext(): 새로운 Context 객체를 생성컨텍스트는 기본적으로 데이터를 저장할 수 있는 공간을 만들고, 이 공간을 통해 데이터(상태, 함수 등)를 하위 컴포넌트들에게 전달한다. 상위..

📌 useDebugValue(): React 개발자 도구에 커스텀 훅에 라벨(디버깅 정보)을 추가할 수 있는 훅커스텀 훅에서 훅 내부 상태를 디버깅하는 목적으로 사용 개발 모드에서만 작동하며, 해당 훅을 사용하는 컴포넌트의 상태를 쉽게 파악할 수 있다.➡︎ 개발자 도구에서 해당 훅을 사용하는 컴포넌트를 선택하면, 디버깅 정보를 확인할 수 있다.앱의 성능에 영향을 미치지 않는다.  useDebugValue(value, formatFunction?)매개변수value: React 개발자 도구에 표시하고 싶은 디버깅 정보어떤 타입이든 될 수 있다. formatFunction : value를 인자로 받아 포맷팅된 문자열이나 객체를 반환하는 함수컴포넌트가 검사될 때, React DevTools는 value를 인자..