![]()
커스텀 훅이란?커스텀 훅(Custom Hooks)은 React의 훅(Hooks) 기능을 사용하여 여러 컴포넌트에서 공통으로 사용되는 로직을 재사용할 수 있도록 해주는 함수입니다.React의 내장 훅(`useState`, `useEffect`, `useContext` 등)을 결합하여 새로운 훅을 만들 수 있습니다.이러한 커스텀 훅은 일반 함수와 비슷하게 동작하지만, React 훅의 규칙을 준수합니다. 커스텀 훅의 목적은 복잡한 로직을 하나의 컴포넌트에 집중시키지 않고, 독립된 함수로 분리함으로써 코드의 가독성과 유지보수성을 높이는 것입니다. 커스텀 훅 사용 이유1. 코드 재사용성 : 여러 컴포넌트에서 공통으로 사용하는 로직을 하나의 커스텀 훅으로 만들면, 중복 코드를 줄이고 재사용성을 높일 수 있습니다. ..
![]()
질문REACT_APP_FIREBASE_API_KEY에 API 키 값을 대입하면 별도의 import 과정 없이 process.env.REACT_APP_FIREBASE_API_KEY로 해당 변수를 호출할 수 있다.어떻게 이럴 수 있는지 설명해주고 해당 환경변수가 정확히 컴퓨터 어느 경로에 저장되는 지 알려줘. 답변(GPT-4o)React 애플리케이션에서 환경 변수를 사용하면 `process.env.REACT_APP_*` 형태로 접근할 수 있습니다. 이는 Create React App (CRA)에서 제공하는 환경 변수 관리 방식 덕분입니다. 환경 변수가 작동하는 방식과 저장 위치를 설명하겠습니다. ### 어떻게 `process.env.REACT_APP_*` 형태로 접근할 수 있는가? 1. **Create Re..
![]()
기본 개념1. 비동기 함수는 항상 Promise 객체를 반환한다.2. 비동기 함수의 return 문은 해당 Promise 객체가 해결되거나 거부될 때 반환할 값을 결정한다.const fetchData = async () => { const data = await getDocs(collection(db, "users")); return data;};const data = fetchData();console.log(data); // >> 프로미스 객체가 출력된다. 예시 상황FE개발자 A가 Firestore(DB)를 사용하고 있다.A는 DB에서 모든 유저 데이터를 가져와 1차원 배열로 반환하는 커스텀훅(또는 모듈)을 개발한다. const useGetAllUser = async () => { const..
![]()
리액트란?리액트는 페이스북에서 개발한 오픈 소스 자바스크립트 라이브러리로, 사용자 인터페이스(UI)를 구축하는 데 사용됩니다. 설치방법1. Node.js 및 npm 설치 https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 2. 리액트 프로젝트 생성// 프로젝트명이 my-first-react-app인 리액트 프로젝트를 생성합니다.npx create-react-app my-first-react-app 3. VSCode로 리액트 프로젝트 열기file > open folder > 방금 생성한 리액트 프로젝트 > 열기
