lazy란? 정의 React에서 lazy란 코드 스플리팅(Code Splitting)을 지원하기 위한 기능 중 하나이며, 코드 스플리팅은 애플리케이션의 번들 크기를 줄이고 초기 로딩 속도를 개선하는 데 사용되는 기술입니다. 장점 초기 로딩 속도 개선: 사용자가 애플리케이션을 처음 방문할 때 필요한 컴포넌트만 로드되므로 초기...

react-query 사용하기 react-query는 React 애플리케이션에서 데이터 관리를 간편하게 해주는 라이브러리이며, 주로 서버로부터 데이터를 가져오거나 데이터를 업데이트하는 작업을 처리하는데 사용되고, 비동기 데이터 요청과 캐싱을 처리하며, 서버와의 상호작용을 간소화하여 데이터 관리를 용이하게 합니다. 특징, 기능 ...

Recoil 사용하기 Recoil은 Facebook에서 개발한 오픈소스 상태 관리 라이브러리로, React 애플리케이션에서 상태를 효율적으로 관리할 수 있도록 도와줍니다. 설치 //npm npm install recoil //yarn yarn add recoil RecoilRoot Recoil에서 상태를 관리하기 위해 사용되는 ...

쿼리 스트링(Query String)이란? 정의 쿼리 스트링은 URL의 끝에 물음표(?)를 사용하여 URL에 매개변수를 추가하는 방법입니다. 특징 URL에 매개변수를 쉽게 추가하거나 변경할 수 있어 유연하게 데이터를 전달할 수 있습니다. URL이 더 길어지고 읽기에 어려워질 수 있으며, SEO에는 적합하지 않을 수 있습니...

패스 파라미터(path parameter)란? 정의 패스 파라미터(Path Parameter)는 URL 경로에 변수를 포함하여 주로 동적인 데이터를 전달하는 방법입니다. 특징 URL 경로에 데이터를 포함하기 때문에 직관적이고 읽기 쉬운 URL을 제공합니다. URL이 더 의미 있고 SEO(Search Engine Optim...

?. 문법 const user = { name: "kim", }; console.log(user?.age) user가 null,undefined라면 .age가 아닌 바로 undefined를 반환한다 활용 예시로 TypeScript를 사용한다면 {list.data.map((value)=>( <ListItem></...

호이스팅(Hoisting)이란? 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말하며, JS의 독특한 특징이다 실제로 코드가 끌어올려지는 것은 아니다. //눈에 보이는 실제 코드 console.log(a); // undefined var a = "A"; // var 변수 //호이스팅 된 코...

async & await이란? 자바스크립트는 비동기 처리가 기반인 언어이다. async와 await는 JavaScript에서 비동기 프로그래밍을 할 때 사용되는 키워드이다. 이 키워드를 사용하면 비동기 작업을 동기적으로 처리할 수 있어 코드의 가독성과 유지보수성을 높일 수 있습니다. async async 키워드는 함수를 비동기 함수로 ...

Warning: You provided a value prop to a form field without an onChange handler. 발생 해결 기존 코드 import React, { useEffect, useState } from "react"; const Info = () => { const [id, setId]...

~~ is not a function 발생 부모 컴포넌트에서 생성한 useState를 자식 컴포넌트로 넘기려는데 state는 잘 전달됬지만 setState에서 아래와 같은 error가 발생했다…. 평소 같았다면 문제 없었을 코드인데…. 달라진건 이번엔 TypeScript를 쓴다는 것 ~~ is not a function 해결 기...