나디아 성장 일기

📌 Zustand : React에서 상태를 관리하기 위한 경량의 상태 관리 라이브러리 상태 스토어(store)를 쉽게 만들 수 있다.상태 스토어(store): 애플리케이션의 상태를 저장하고 관리하는 중앙 저장소상태 스토어를 사용하면 애플리케이션의 여러 컴포넌트에서 동일한 상태를 공유하고 관리할 수 있다.글로벌 상태를 내부에서 관리할 수 있다.장점독선적이지 않고, 특정 작업 방식을 강요하지 않는다.사전에 작성해야 할 예열(boilerplate) 코드가 적다.컨텍스트 프로바이더(provider)에 의존하지 않는다.컨텍스트(context)를 사용하는 것보다 더 빠르다.기본적으로 상태를 병합(merge)해 구문 작성이 편리하다.미들웨어(middleware)를 사용해 확장(extendable)할 수 있다.  ✨..

📌 crypto.randomUUID(): JavaScript에서 고유한 식별자(UUID, Universally Unique Identifier)를 생성하는 메서드 crypto 모듈에서 제공되며, UUID v4 형식으로 랜덤하게 생성된 문자열을 반환하여 식별자로 사용한다. 생성된 UUID는 128비트 길이의 8-4-4-4-12 형식의 32자리 16진수 문자열로 구성된다.ex) 123e4567-e89b-12d3-a456-426614174000cryptographically secure(암호학적으로 안전한)한 방식으로 난수를 생성하여 고유성을 보장한다.사용하는 상황데이터베이스에서 각 레코드에 고유한 ID를 부여할 때 사용된다.파일 이름을 중복되지 않도록 고유하게 생성할 때 사용된다.세션 ID, 토큰 등을 ..

📌 FormData: 웹 브라우저에서 HTML form(폼) 데이터를 쉽게 다루기 위해 제공되는 API폼 데이터를 JavaScript에서 읽거나 서버로 전송할 때 유용하다.기능폼 데이터 수집HTML 폼 요소의 데이터를 JavaScript 객체로 변환해서 수집할 수 있다.폼 데이터 전송AJAX 요청 등을 통해 서버에 폼 데이터를 전송할 때 편리하다.   ☑️ 메서드append(name, value): FormData 객체에 새 키-값 쌍을 추가하거나, 기존 키에 새로운 값을 추가한다.- 키가 없으면 새로 추가하고, 있으면 값이 추가된다.set(name, value): FormData 객체 내에서 주어진 키에 새 값을 설정하거나, 키가 없으면 새로 추가한다.delete(name): FormData 객체에서..

📌 collection(컬렉션): 특정 라이브러리/데이터베이스에서 데이터를 저장 & 관리하는 컨테이너 객체보통 데이터베이스 클라이언트 라이브러리에서 사용되며, 컬렉션(데이터베이스 테이블과 유사한 개념)과 상호작용할 수 있는 인터페이스를 제공한다.동일한 구조의 문서(Document)들을 저장하는 컨테이너 역할특정 라이브러리에서는 collection 객체를 사용하여 데이터를 생성, 조회, 업데이트, 삭제 등의 작업을 수행할 수 있다. 각 문서는 일반적으로 JSON 형식으로 저장되며, 고유의 ID를 가진다. 예시PocketBase: pb.collection('users') 같은 구문에서 collection은 PocketBase에서 특정 컬렉션을 참조MongoDB: db.collection('users') 같..

📌 lazy(): 컴포넌트를 지연 로딩(lazy loading)하기 위해 사용 로딩 중인 컴포넌트 코드가 처음으로 렌더링 될 때까지 연기할 수 있다. 기본적으로 리액트 애플리케이션은 컴포넌트를 한꺼번에 모두 로드한다. ➡︎ 이로 인해 초기 로딩 시간이 길어질 수 있다. ➡︎ 이를 해결하기 위해 React.lazy를 사용한다.👉 React.lazy는 동적으로 컴포넌트를 로드할 수 있다. 👉 해당 컴포넌트가 실제로 필요할 때(렌더링할 때)까지 로드되지 않는다.반드시 Suspense와 함께 사용된다. ✨ Suspense: 컴포넌트의 로딩 상태를 처리하기 위한 컴포넌트비동기 작업이 완료될 때까지 기다리는 동안 사용자에게 보여줄 UI를 결정하는 역할React.lazy를 사용해 동적으로 로딩되는 컴포넌트를 ..

📌 clsx(): 자바스크립트에서 조건부로 클래스 이름을 결합하고 관리하는 데 사용되는 유틸리티 함수 여러 개의 클래스를 조건에 따라 동적으로 쉽게 결합할 수 있도록 도와준다. 불필요한 빈 문자열이나 null, undefined 같은 값들을 자동으로 걸러준다. 조건부 UI를 만들 때 매우 유용하다. 주로 React 프로젝트에서 많이 사용한다.  ⏩ 설치 npm install --save clsx   ✅ 사용 clsx 불러오기 import clsx from 'clsx';// orimport { clsx } from 'clsx';   ☑️ 기능 여러 개의 문자열 결합 clsx('foo', 'bar'); // 'foo bar' 배열 형태로 클래스 이름 결합clsx(['foo', 'bar']); // 'foo..

📌 컴포넌트 external 속성 : 부모 컴포넌트가 자식 컴포넌트에 전달하는 속성(props) 주로 링크 컴포넌트에 `isExternal` 속성 부여외부 링크와 내부 링크를 구분하기 위해 사용외부 링크isExternal 속성이 true로 설정된 경우 ➡︎ 외부 링크👉 target="_blank" 속성을 설정하여 링크가 새 탭에서 열리도록 할 수 있다.내부 링크isExternal 속성이 설정되지 않은 경우 ➡︎ 내부 링크👉 target="_self" 속성을 설정하여 현재 탭에서 열리도록 할 수 있다.   ✅ 사용 1. 상위 컴포넌트에서 해당 컴포넌트에 isExternal 속성 설정 Zustand {' '}   2. 설정 지정 noopener : 새 탭에서 열린 페이지가 원래 페이지의 wi..

📌 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()는 비동기 함수를 지원하여, 데이터를 비동기적으로 가져올 수 있다.라우트 기반 데이..