프론트엔드

질문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 > 방금 생성한 리액트 프로젝트 > 열기

리액트 렌더링 동작은 3가지 과정으로 나뉜다1. 렌더링 트리거 2. 컴포넌트 렌더링3. DOM 커밋 렌더링이 일어나는 이유리액트에서 컴포넌트 렌더링이 일어나는 이유는 2가지가 있습니다.1. 컴포넌트의 초기 렌더링2. 컴포넌트의 state가 없데이트 된 경우 1. 렌더링 트리거렌더링 트리거란 리액트에 렌더링을 요청하는 과정을 의미합니다.컴포넌트 초기 렌더링이란 아래 코드와 같이 앱을 시작할 때의 초기 렌더링을 의미합니다.따라서 리액트는 앱을 시작할 때 초기 렌더링을 트리거 합니다.import Image from './Image.js';import { createRoot } from 'react-dom/client';const root = createRoot(document.getElementById('ro..

useState를 사용해야 하는 이유지역 변수는 렌더링 간에 유지되지 않는다 => 재렌더링 시 지역변수는 초기화된다. 리액트는 지역 변수를 변경되어도 렌더링을 일으키지 않는다.  => 지역변수가 변경되어도 컴포넌트를 다시 렌더링해야 한다는 것을 인식하지 못한다.따라서 컴포넌트를 새로운 데이터로 업데이트하기 위해선 다음 두 가지가 필요합니다. 1. 렌더링 사이에 데이터를 유지해야 한다. 2. 리액트가 데이터 변화를 감지하고 컴포넌트를 다시 렌더링하도록 유발한다. 위 두 가지를 useState 훅이 제공하기 때문에 리액트에서는 let대신 useState를 사용해야 한다. 사용방법const [index, setIndex] = useState(0);

이벤트 전파export default function Toolbar() { return ( { alert('You clicked on the toolbar!'); }}> alert('Playing!')}> Play Movie alert('Uploading!')}> Upload Image );}위 코드에서 버튼을 클릭하면 해당 버튼 이벤트 핸들러의 함수가 먼저 실행되고 이후 div 태그의 이벤트 핸들러 함수가 실행된다.하지만 버튼이 아닌 툴바만을 클릭하면 div의 이벤트 핸들러 함수만 실행된다. 이벤트 전파를 방지하는 방법function Button({ onClick, children }) { return..

이벤트 핸들러에 함수 전달&호출하기// 함수를 전달하기 (올바른 예시) // 함수를 호출하기 (잘못된 예시)올바른 예시에서는 handleClick 함수가 onClick 이벤트 핸들러에 전달된다면 리액트는 해당 함수를 사용자가 버튼을 클릭했을 때만 호출합니다.그러나 잘못된 예시에서는  handleClick 함수가 onClick 이벤트 핸들러에서 호출된다면 리액트는 해당 함수를 사용자가 버튼을 클릭하지 않아도 렌더링 과정에서 호출합니다.이는 리액트가 렌더링 과정에서 JSX 와 {  } 내의 자바스크립트가 즉시 실행되도록 구현되어 있기 때문입니다.매개변수가 필요한 함수를 이벤트 핸들러에 전달하고 싶다면?그렇다면 매개변수가 필요한 함수를 이벤트 핸들러에 전달하고 싶으면 어떻게 코드를 작성해야할까요?이는 익명함..

JavaScript에서 객체 자료형, 이터러블 객체, 유사 배열은 모두 다양한 형태의 데이터 구조를 나타내지만, 각기 다른 특징과 사용 방법을 가지고 있습니다.이 세 가지 개념의 관계를 이해하면 JavaScript의 데이터 구조를 더 잘 활용할 수 있습니다. 객체 자료형 (Object)객체는 JavaScript의 기본 데이터 구조 중 하나로, 키-값 쌍의 집합을 나타냅니다.모든 JavaScript 객체는 프로토타입 체인(prototype chain)을 통해 속성(property)과 메서드(method)를 상속받습니다.javascriptconst obj = { name: 'Alice', age: 30, greet: function() { console.log('Hello!'); }};  특징 ..