문제 상황React-Sortablejs 사용 시 드래그하는 동안 요소가 반투명해지는 현상 발생기본적으로 HTML5 Drag & Drop API의 기본 동작으로 인해 발생하는 문제원인 분석기술적 원인HTML5 Drag & Drop API는 드래그 중인 요소에 자동으로 투명도를 적용브라우저의 기본 동작으로, 사용자에게 드래그 상태를 시각적으로 표시하기 위한 것React-Sortablejs가 기본적으로 HTML5 Drag & Drop API를 사용하기 때문에 발생때문에 결과적으로 2개의 스타일이 중첩 적용됨스타일 중첩 문제// forceFallback이 false일 때 (기본값)const StyledSortable = styled(ReactSortable)` display: flex; flex-direct..

Q1. 만약에 내가 전달하려는 데이터를 매개변수로 설정하지 않으면 일방적으로 값을 전달하는 컴포넌트도 만들수 있긴하겠네? 그렇게도 쓰여?네, 맞습니다! 그런 패턴을 "제어되지 않는 컴포넌트(Uncontrolled Component)" 또는 "단방향 데이터 흐름"이라고 할 수 있어요.예시를 보여드릴게요:// 일방적으로 데이터를 제공하는 컴포넌트function DataProvider() { const staticData = { title: "고정된 제목", items: ["항목1", "항목2", "항목3"] }; return ( {/* 여기서는 외부에서 데이터를 받지 않고 내부에서 정의된 값만 사용 */} ..

React Context는 컴포넌트 트리를 통해 데이터를 직접 전달할 수 있는 시스템이다. props drilling 문제를 해결하기 위한 React의 내장 기능이다.택배 시스템에 비유하면 다음과 같다.createContext = 택배 회사 설립Provider = 물품을 포장하고 배송을 시작하는 지점useContext = 택배 물품을 수령하는 곳주요 구성 요소1. createContext()Context 객체를 생성하는 함수const MessageContext = React.createContext();2. Context.Provider생성된 Context를 통해 데이터를 제공하는 컴포넌트function App() { return ( );}3. useContext()Conte..

영화 데이터를 가져와서 표시하는 전체 과정 단계API 통신 설정 (movieApi.ts)API 키와 기본 URL 설정axios를 사용한 데이터 요청 함수 정의영화 데이터 타입 정의데이터 요청 및 받아오기 (movieApi.ts) getPopularMovies 함수 호출API로부터 영화 데이터 배열 수신response.data.results 형태로 데이터 반환상태 관리 설정 (MovieList.tsx)useState로 상태 변수 설정 (movies, loading, error)useEffect로 컴포넌트 마운트 시 데이터 요청받아온 데이터를 setMovies로 상태에 저장데이터 매핑 및 전달movies 배열을 map 함수로 순회각 영화 데이터를 MovieCard 컴포넌트에 props로 전달key 속성 부여..

try catch error문을 통한 에러 관리 구현해보기 기본 구조try { // 에러가 발생할 수 있는 코드 const response = await fetch(`http://localhost:3001/videos?page=${currentPage}&limit=${limit}`); // HTTP 에러 체크 if (!response.ok) { throw new Error(/* 에러 메시지 */); } // 정상적인 데이터 처리 const result = await response.json();} catch (error) { // 에러 발생시 실행되는 코드 setError(error.message); console.error('비디오 데..

다크 모드 구현을 위한 ThemeProvider1. 초기 상태 설정 (State Initialization)const [isDarkMode, setIsDarkMode] = useState(() => { return localStorage.getItem('theme') === 'dark';});2. 테마 변경 효과 적용 (Theme Effect)useEffect(() => { document.documentElement.toggleAttribute('dark', isDarkMode);}, [isDarkMode]);isDarkMode 상태가 변경될 때마다 실행HTML root 요소(documentElement)에 'dark' 속성을 토글CSS에서 이 속성을 기반으로 스타일 변경 가능3. 테마 토글..

핵심은 테마 상태와 로직을 관리하는 부분과 사용자 인터랙션(버튼 클릭)을 통해 상태 변경을 시작하는 부분이 서로 다른 컴포넌트에 위치하는 경우가 일반적이기 때문에 Provider(Context API)가 유용하다는 것이다.조금 더 풀어서 설명하면:상태와 로직의 위치:테마 상태(isDarkMode)상태 변경 함수(toggleTheme)localStorage 동기화 로직document.body 클래스 변경 로직 (useEffect)이 모든 것들은 ThemeProvider 컴포넌트 안에 중앙 집중화되어 있다. 이 컴포넌트는 앱의 최상단 근처에 위치하여 하위 모든 컴포넌트에 영향을 줄 수 있도록 한다.사용자 인터랙션 위치:사용자가 실제로 테마를 변경하기 위해 누르는 버튼이나 스위치는 보통 UI의 특정 위치(예:..

1. Context 기본 구조// contexts/NavContext.jsximport { createContext, useState } from 'react';export const NavContext = createContext();export const NavProvider = ({ children }) => { const [isNavExpanded, setIsNavExpanded] = useState(false); return ( {children} );};2. Context Provider 설정import { NavProvider } from './contexts/NavContext';ReactDOM.createRoot(docume..

각각 반응형으로 크기 조절 하는 그리드 아이템 포함 비디오 생성 컴포넌트에 map 사용해서 배열을 할당하고 해당 배열을 SQL.db 파일을 가져와서 json으로 할당이미지 경로는 public\assets\imagespageConfig 파일로 공동 변수 관리 app.jsx무한 스크롤 로딩child 호출로 동영상 아이템 만들기 포함더보기import React, { useState, useEffect, useCallback, useRef } from 'react'; // useCallback 추가import './App.css'import VideoContainer from './VideoContainer'import { PAGE_CONFIG } from '../config/pageConfig';functio..

useEffect를 활용하여 컴포넌트가 마운트되었을 때와 언마운트될 때의 동작을 구현합니다.예를 들어, API 데이터를 불러와서 컴포넌트에 표시하는 작업을 수행합니다.이 경우엔 자동 새로고침으로 특정 시간마다 계속해서 강아지의 이미지를  새로고침하는 방식으로 구현됐습니다. useEffect를 통해서 토글 버튼의 동작(isLoading) 감지 후 딜레이를 확인하고 무한 새로고침을 실시하며토글 버튼을 다시 누를 경우 false를 반영해서 클린업으로 setinterval을 삭제합니다.useEffect(() => { const value = Math.min(10, Math.max(1, parseInt(delay) || 1)) let inter; if(isLoading){ fetchD..