프론트엔드/React

src / components / KakaoAdFit.tsx// KakaoAdfit.jsximport {useEffect, useRef} from "react";// any 타입 대신 명시적 타입 정의interface KakaoAdFitProps { unit: string; width: number; height: number; disabled?: boolean;}// window 타입 확장declare global { interface Window { adfit?: { destroy: (unit: string) => void; }; }}function KakaoAdFit({unit, width, height, disabled}..

기술 스택 : React, TS, MUI, styled-componentsimport { useState, useRef } from "react";import { IconButton } from "@mui/material";import { Fullscreen, FullscreenExit } from "@mui/icons-material";import styled from "styled-components";const Container = styled.div` position: relative; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #1a1a..

들어가며바야흐로, 한 기업의 '칸반보드 구현과제'를 수행하던 중이었습니다.해당 과제는 여러 개의 작업 카드를 DnD(드래그앤드랍) 기능을 통해 컬럼(작업 단위)별로 관리할 수 있는 칸반보드를 구현하는 과제였습니다.기본적인 기능 구현을 완료한 후, 기능 테스트 도중 DnD를 통한 작업 카드의 컬럼(작업 단위) 변경 시 칸반보드의 카드가 랜덤하게 뒤섞이는 버그를 발견하였습니다. (ex : 할 일 -> 진행 중으로 변경 시 카드가 뒤죽박죽됨)결론부터 말씀드리자면 배열 렌더링 시 항상 일정하게 고유하지 않은 값을 카드 컴포넌트의 key값으로 전달하여 발생한 것이었습니다.이 글에서는 리액트에서 key가 무엇인지, 왜 해당 버그가 발생했는 지에 대해 살펴봅니다. 기본 개념리액트는 배열렌더링 시 컴포넌트에 전달하는 ..

메모리와 브라우저의 관계리액트를 활용해 애플리케이션을 개발하면서, 상태 관리의 메커니즘을 정확히 이해하는 것은 매우 중요합니다.이번 글에서는 React의 useState와 Zustand의 상태 데이터가 어디에 저장되는지, 그리고 브라우저와 어떤 관계가 있는지 알아보겠습니다. 브라우저와 자바스크립트의 역할브라우저는 HTML, CSS, JavaScript를 해석하고 실행하는 도구입니다.브라우저 내부에는 자바스크립트 코드를 실행하기 위해 JavaScript 엔진(V8, SpiderMonkey 등)이 포함되어 있습니다.이 엔진은 콜스택(Stack), 힙 메모리(Heap), 이벤트 루프(Event Loop) 등의 런타임 환경을 통해 자바스크립트를 실행합니다.React와 Zustand의 상태 데이터는 브라우저의 J..

문제 : React에서 배열 렌더링 도중 key 속성을 부여했음에도 불구하고 오류가 발생하였다.//오류 코드 { responseData?.map((el, idx)=>{ return( ) }) }원인 : React에서는 리스트를 렌더링할 때, key 속성은 각 요소의 최상위 부모에 부여해야합니다.결론 : fragment element()를 삭제하여 을 최상위로 올려야한다.//해결 코드 { ..

useEffect`는 **렌더링 후에 실행**되고, `useMemo`는 **렌더링 중에 실행**됩니다. 이 차이는 여러 가지 중요한 결과를 가져오는데, 구체적으로 살펴보겠습니다. ### 1. **렌더링 중 실행 (`useMemo`)** - **의미**: 컴포넌트가 렌더링되는 동안(`render phase`)에 값을 계산하고, 해당 계산을 메모이제이션합니다. - **결과**: 렌더링이 끝나기 전에 `useMemo`에 의해 계산된 값이 즉시 컴포넌트의 렌더링 결과에 반영됩니다. 즉, **화면이 그려지기 전에** 미리 계산된 값을 얻을 수 있습니다. - **영향**:   - 렌더링 과정에서 값을 계산하고 그 값을 바로 렌더링에 사용합니다. 따라서 UI가 렌더링되기 전에 모든 값을 준비할 수 있습니다.   - ..

커스텀 훅이란?커스텀 훅(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..