작은기린우리

영화 데이터를 가져와서 표시하는 전체 과정 단계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. 테마 토글..

각각 반응형으로 크기 조절 하는 그리드 아이템 포함 비디오 생성 컴포넌트에 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..

await/async를 통해 fetch로 강아지의 이미지를 받아오고 이미지가 변경되도록 했다.async 구문이 아닐 경우 내부 작업이 프로미스 처리가 되지 않기 때문에 중간에 기다리를 과정이 없어진다. const response = await fetch()즉 fetch가 이미지를 받아오기 전에 다음 단계로 넘어가서 undefined인 상태로 json으로 넘어가게 된다. const data = await response.json()결과적으로 강아지 이미지가 반영되지 않고 오류가 난다.이용 사이트 dog api Dog APIDog CEO's Dog API. Over 20,000 images of dogs programmaticaly accessible by over 120 breeds. Image suppl..

// App.jsximport React, { useState } from 'react';import './App.css';import Modal from './Modal';function App() { const [showModal, setShowModal] = useState(false); return ( 모달 테스트 setShowModal(true)}> 모달 열기 {showModal && ( setShowModal(false)} /> )} );}export default App;/* App.css */.app { padding: 20px; text-align: center;}button { paddi..