코딩

useCallback이란? : 컴포넌트가 리렌더링될 때마다 새로 함수를 만들지 않고, 이전에 생성한 동일한 함수 인스턴스를 재사용할 수 있게 해줍니다 memoizedCallback은 의존성 배열 [a, b]에 명시된 값이 바뀔 때만 새로 생성됩니다. a와 b가 변경되지 않으면, 이전에 만들어진 함수 인스턴스를 계속 재사용합니다const memoizedCallback = useCallback( () => { doComething(a,b); }, [a,b],); useCallback의 두 번째 인자인 의존성 배열(dependency array)에 포함된 값이 변경될 때만 새로운 콜백 함수가 생성됩니다const memoizedCallback = useCallback( () => { d..

타입스크립트란?자바스크립트를 기반으로 한 강력한 정적 타입 지정 언어입니다. 이는 자바스크립트의 모든 기능을 포함하면서도, 추가적인 타입 시스템과 도구를 제공하여 코드의 안정성과 생산성을 높이는 데 도움을 줍니다. 정적 타입 검사 컴파일 단계에서 코드의 타입 오류를 발견할 수 있어 런타임 오류를 줄입니다.let age: number = 25;age = "twenty-five"; // 오류 발생: 문자열을 숫자에 할당할 수 없음 자동 완성 및 코드 탐색타입 정보를 기반으로 IDE에서 자동 완성과 코드 탐색 기능을 제공합니다.const user = { name: "Alice", age: 30 };console.log(user.name); // 자동 완성 지원 자바스크립트로 컴파일 타입스크립트는 브라우저나 N..

Redux 애플리케이션의 상태(state)를 하나의 중앙 저장소(store)에 관리합니다. 이를 통해 상태를 보다 체계적으로 관리하고, 애플리케이션의 동작을 예측 가능하게 만듭니다. 주요 특징 1) 단일 저장소: 애플리케이션의 모든 상태는 하나의 저장소 안에 있는 객체 트리에 저장됩니다. 2) 불변성: 상태는 직접 수정되지 않고, 새로운 상태를 생성하여 변경됩니다. 3) 액션(Action): 상태를 변경하기 위해 "무엇이 일어날지"를 서술하는 객체를 보냅니다. 4) 리듀서(Reducer): 액션을 받아 상태 트리를 어떻게 변경할지 명시하는 순수 함수입니다 개념1) Store (저장소) 애플리케이션의 상태를 저장하는 객체입니다. createStore() 함수를 사용하여 생성합니다.imp..

컴포넌트는 자신의 state가 변경되거나 부모에게서 받는 props가 변경되었을 때마다 다시 랜더링됩니다.심지어 자식 컴포넌트에서 렌더링 최적화를 위한 별도의 코드를 추가하지 않으면, 부모에데거 받는 props가 변경되지 않았더라도 다시 리렌더링 됩니다. 함수 컴포넌트는 그냥 함수입니다. 함수컴포넌트가 헨더링 된다는 것은 부모컴포넌트가 그 함수를 호출하여 실행되는 것입니다.함수가 실행될 때마다 내부에 선언되어 있던 표현식들도 매번 다시 계산이 됩니다. useMemo란? 복잡한 계산(예: 큰 배열 정렬, 데이터 변환)의 결과를 캐싱합니다. 동일한 입력값에 대해 동일한 출력을 반환하는 순수 함수에 적합합니다. info.js아래코드는 색값만 변경되어도 colorKor과 movieGenreKor이 실행되고..

Query란? Query는 비동기 데이터 소스에 대한 선언적 의존성을 의미하며, React Query에서 데이터를 가져오고 관리하기 위해 사용됩니다. 각 Query는 고유한 키(queryKey)와 데이터를 가져오는 함수(queryFn)를 필요로 합니다. 핵심 역할 데이터를 서버에서 가져오고(fetching)캐싱하여 재사용하며데이터의 상태를 관리합니다(예: 로딩, 성공, 실패) useQuery 사용법queryKey: 쿼리를 고유하게 식별하는 키 (문자열 또는 배열 형태). queryFn: 데이터를 가져오는 비동기 함수. api.jsexport const getUser = () => { return axios.get("/user").then((res) => res.data);}; Edit.js리액트 쿼리와..

context 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다.전역에서 사용할 수 있는 함수를 만들어 줍니다.  Context API란?React의 Context API는 컴포넌트 트리에서 데이터를 전역적으로 공유할 수 있도록 지원합니다. 이를 사용하면 props 드릴링(부모에서 자식으로 데이터를 전달하는 과정)을 제거하고, 애플리케이션의 상태를 효율적으로 관리할 수 있습니다. React.createContextconst MyContext = React.createContext(defaultValue);//defaultValue: Context를 구독하는 컴포넌트가 트리 상에서 적절한 Provider를 찾지 못했을 때 사용되는 기본값입니다. createCon..

비동기(Asynchronous) - 일반적으로 프로그램 코드는 한 번에 한 가지씩 순차적으로 진행합니다. 만약에 어떤 함수의 결과가 다른 함수에 영향을 받는 다면, 그 함수는 다른 함수가 끝나고 값을 산출할 떄까지 기다려야 합니다.setTimeout(() => { console.log("첫 번째 메시지");}, 5000);setTimeout(() => { console.log("두 번째 메시지");}, 3000);setTimeout(() => { console.log("세 번째 메시지");}, 1000);// 콘솔 출력:// 세 번째 메시지// 두 번째 메시지// 첫 번째 메시지  Promise비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과값을 나타냅니다.프로미스가 생성된 시점에는 알려지지 ..

싱글 페이지 애플리케이션(SPA: Single-page application)   SPA는 하나의 HTML 페이지와 애플리케이션 실행에 필요한 모든 자산(자바스크립트, CSS 등)을 한 번에 로드하여 동작하는 웹 애플리케이션입니다. 이후 사용자의 상호작용에 따라 페이지를 다시 로드하지 않고, 현재 페이지를 동적으로 업데이트합니다.    => 새로운 페이지 요청 없이 DOM을 동적으로 변경하여 콘텐츠를 업데이트.        초기 로딩 속도가 느릴 수 있지만 이후 사용자 경험이 향상됨.         라우팅을 통해 URL에 따라 적절한 화면을 제공. 클라이언트 사이드 렌더링(CSR: Client-Side Rendering)   CSR은 클라이언트 측에서 데이터와 자바스크립트를 사용해 화면을 렌더링하는 방식..

아래 이미지를 보면 동일한 틀 즉, 컴포넌트가 반복되는 걸 확인할 수 있습니다.   map를 사용하면 list를 하나씩 만들 필요없이 갯수만큼 previeCard가 반복되어 렌더링을 하며 코드가 간편해지는 걸 확인 할 수 있습니다. export default function PrevieCard() { const cardInfos = [ { imgSrc:"", title:"", subTitle:"", suthor:"", }, { imgSrc:"", title:"", subTitle:"", suthor:""..

해시함수 - 임의의 길이의 데이터를 고정된 길이의 데이터로 매필하는 함수 해시함수 특성 1) 압축성 : 다양한 기변 길이의 입력에 대해 고정된 크기의 결과값을 반환하는성질 2) 효율성 : 어떤 입력 값에 대해서도 많은 자원과 시간이 소요되지 않고 처리되는 성질 3) 저항성 : 결과값을 바탕으로 입력 값을 찾는 것이 불가능한 성질 예를 들면, 비밀번호를 데이터베이스에 저장된지 않습니다라는 말은 "비밀번호를 입력하고  -> 해시로 통해 압축되고  -> DB instert"로 통해서 많이 사용되고 있습니다. 해시 테이블 Hash 함수를 사용하여 평균 O (1) 시간 복잡도로 특정갓을 신속하게 찾는 자료구조 -> key value가 있기 때문에 index를 찾기가 쉽습니다. 동일한 해시 값을 가지고 있으면  하..