🌱 𝐣𝐣𝐢𝐧𝐠𝐥𝐞 𝐝𝐞𝐕𝐥𝐨𝐠

기존 코드 비동기적으로 getMovie 함수가 실행되고 완료 후, getVideo 함수 실행 => 데이터 양이 많을 경우 비효율적 async function getMovie(id: string) { const response = await fetch(`${API_URL}/${id}`); return response.json(); } async function getVideos(id: string) { const response = await fetch(`${API_URL}/${id}/videos`); return response.json(); } //dynamic route export default async function MovieDetail({ params: { id } }: { params: {..

Node.js 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Node.js 설치 확인 node -v Vite : 개발환경 구성 Vite Vite, 차세대 프런트엔드 개발 툴 ko.vitejs.dev npm create vite@latest - Projet name - framework : React - variat : TypeScript + SWC ( SWC: Rust typescript 컴파일러) 기본설정 주입 npm i - react, react dom, typescript, vite...etc (package.json) 정상 작동 확인 npm run dev git 연결 git ..

useState : React의 가장 기본이 되는 Hook으로 컴포넌트를 리렌더(re-render) 시킬 수 있다. setState를 호출하여 state의 값을 변경하면, 변경된 값을 보여주기 위해 컴포넌트가 리렌더된다. - setState는 동기적으로 동작한다. -> 연속으로 여러번 실행할 경우, 업데이트된 state를 보장받지 못한다. - state가 변할 경우, 컴포넌트 전체가 리렌더된다. -> 컴포넌트 내부에 정의된 모든 변수와 함수가 재선언, 재실행된다. -> 성능저하 이슈 useEffect : 함수와 변수를 받아, 변수의 값이 변경될 시 함수를 실행시킨다. 변수는 의존성 배열(dependency array)로 여러 값을 포함시킬 수 있다. 의존성 배열이 비어있을 경우, 최초 렌더링 시 한번만 ..