나디아 성장 일기

📌 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를 사용해 동적으로 로딩되는 컴포넌트를 ..