FE

리액트의 렌더링이란❓ 리액트의 렌더링은 브라우저가 렌더링에 필요한 DOM 트리를 만드는 과정을 의미한다. 리액트 애플리케이션 트리 안에 있는 모든 컴포넌트들이 현재 자신들이 가지고 있는 props와 state의 값을 기반으로 어떻게 UI를 구성하고 이를 바탕으로 어떤

메모이제이션 최적화는 리액트 커뮤니티에서 오랜 논쟁 주제 중 하나로, 메모이제이션에 대한 이야기가 나올 때마다 갑론을박이 이어지고 있다. 각 주장을 살펴보고, 현명하고 효율적으로 리액트에서 메모이제이션하는 법에 대해 알아보자 주장 1️⃣: 섣부른 최적화는 독이다. 꼭

싱글 페이지 애플리케이션의 세상 싱글 페이지 애플리케이션(SPA)이란? 싱글 페이지 애플리케이션(Single Page Application: SPA)이란 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 자바스크립트에 의존하는 방식을 의미한다. 최초에 첫 페이지

useState : 컴포넌트에 state 변수를 추가할 수 있는 React Hook 레퍼런스 useState(initaialState) 배열 구조 분해를 사용하여 [something, setSomething]과 같은 state의 변수의 이름 지정 매개변수: initi

* Warning: A component is changing an uncontrolled input to be controlled. * This is likely caused by the value changing from undefined to a defined

💡 React Query라는 이름으로 시작했지만, v4부터 Vue, Svelte 등의 다른 프레임워크에서도 활용할 수 있도록 기능이 확장되며 TanStack Query로 변경되었다.React 애플리케이션에서 데이터를 가져오고(fetch), 캐싱하고(cashe), 동기

npm create vite@latest 프로젝트명 --template react-tshttps://ui.shadcn.com/docs/installation/vitetailwindCSS 선 설치 후 Shadcn/ui 설치npm install tailwindcs

웹 애플리케이션의 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리리액트는 UI를 작은 재사용 가능한 구성 요소인 컴포넌트로 나누어 개발함재사용 가능: 여러 곳에서 동일한 컴포넌트를 사용할 수 있음독립적: 내부 상태와 동작을 자체적으로 가질 수 있

Props > 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터 자식 컴포넌트는 Props를 통해 전달된 값을 받아서 활용할 수 있음 하지만 props는 읽기 전용(read only)이기 때문에 값을 수정할 수는 없음 값을 바꾸고 싶다면 부모에게 콜백함수를 전달받아서

Youtube, Facebook 등 외부 영상 소스를 iframe으로 렌더링할 때 화면에 노출되는 것만으로도 내부적으로 수십~수백개의 네트워크 요청이 발생함실제 영상 재생 여부와 상관없이 iframe이 렌더링되기만 해도 썸네일, 광고, 추적, API, 권한 등 다양한

대량의 데이터를 한 번에 모두 가져와 화면에 렌더링하면,불필요한 네트워크 사용량 증가초기 렌더링 속도 저하브라우저 성능 저하 및 사용자 경험 악화와 같은 문제가 발생한다.특히 피드, 커뮤니티, 상품 목록 등 리스트가 길어질수록 이슈가 커진다.이를 해결하기 위해 무한스크

가장 오래되고 가장 많은 훅을 제공하는 React 커스텀 훅 라이브러리 중 하나'React 훅의 lodash'라고 불릴 만큼, 개발 중에 필요할 수 있는 거의 모든 종류의 유틸리티 훅을 방대하게 포함하고 있다.압도적인 훅의 개수: 160개가 넘는 방대한 양의 훅을 제공

React 버전 업그레이드를 진행하면서 그에 맞는 빌드 도구(Vite), 타입스크립트, Linter 등 주요 의존성을 함께 최신화하는 가이드 ❗️본 마이그레이션 가이드는 pnpm 패키지 매니저를 사용하며, React + Vite로 구성된 프로젝트 환경을 기준으로 한다

eslint-plugin-react-hooks 설치 React 컴파일러는 ESLint 플러그인도 제공합니다. eslint-plugin-react-hooks@^6.0.0-rc.1을 설치해서 시도해보세요. 적용 확인 useMemo, useCallback 제거 pnpm

웹 페이지를 보여주기 전에 필요한 데이터를 미리 준비하는 아주 편리한 방법이 있다.React Router에서는 이 역할을 loader라는 함수에게 맡기는 것이다.loader는 우리가 설정한 각 라우트(경로)에 붙어있는 '데이터 준비 담당자'와 같다.사용자가 특정 페이지

호이스팅(Hoisting) 은 변수와 함수의 선언이 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 자바스크립트의 특성이다.var로 선언된 변수는 호이스팅이 된다.초기화(할당)는 호이스팅되지 않는다.변수 a는 선언만 호이스팅되었고, 초기화(값 할당)는 호이스팅되지 않았

간단히 정의하자면 객체가 아닌 다른 모든 타입을 의미한다.객체가 아니므로 이러한 타입들은 메서드를 갖지 않는다.총 7가지의 원시타입이 있다.undefinednullBooleanNumberBigintStringSymbol정의되지 않은 값을 의미함선언한 후 값을 할당하지

1. 함수란 무엇인가? 함수란 작업을 수행하거나 값을 계산하는 등의 과정을 표현하고, 이를 하나의 블록으로 감싸서 실행 단위로 만들어 놓은 것을 의미한다. 리액트에서 컴포넌트를 만드는 함수도 이러한 기초적인 형태를 따르는 것을 알 수 있다. Component라고 하

1. 싱글 스레드 자바스크립트 2. 이벤트 루프란? 3. 태스크 큐와 마이크로 태스크 큐

1. 구조 분해 할당 구조 분해 할당(Destructuring assignment)이란 배열 또는 객체의 값을 말 그대로 분해해 개별 변수에 즉시 할당하는 것을 의미한다. 배열과 객체에서 사용하며, 주로 어떠한 객체나 배열에서 선언문 없이 즉시 분해해 변수를 선언하고

Axios에서 params 객체를 URL의 쿼리 스트링으로 변환하는 방법을 정의하는 옵션기본적으로 Axios는 qs.stringify 또는 JSON.stringify 등을 사용하여 변환하지만 배열이나 중첩된 객체를 다룰 때는 기본 방식이 적절하지 않을 수 있음.이때,

🐢 레이지 로딩(Lazy Loading) 레이지 로딩은 말 그대로 '게으르게 로딩하는 것'이다. 웹 페이지를 처음 불러올 때 모든 리소스를 한 번에 불러오지 않고, 사용자가 실제로 필요할 때(예: 스크롤로 화면에 나타날 때) 불러오는 방법이다. 특히 이미지, 비디

성능 최적화가 필요한 이유 출처: Google / SOASTA Research, 2017 위 이미지는 페이지 표시 시간 증가에 따른 이탈률이다 구글이 주장하는 핵심은 '성능이 저하되면 사용자가 떠나고 매출이 감소한다'이다. 반대로 말하면 성능이 향상되면 그만큼 사용

Axios Interceptors 인터셉터(Interceptors)는 요청(request)을 보내거나 응답(response)을 받기 전에 코드를 가로채서 원하는 작업을 수행하는 기능 모든 API 요청과 응답의 중간 관문 역할을 하는 함수라고 이해 인터셉터는 크게

1. MSW 설치 msw 라이브러리 프로젝트 설치 -D 옵션은 이 패키지가 개발 환경에서만 필요한 의존성임을 명시한다. 실제 프로덕션 빌드에는 포함되지 않아 앱의 최종 번들 크기에 영향을 주지 않는다. https://mswjs.io/docs/quick-start

메모이제이션은 성능을 최적화하기 위한 핵심 기술 중 하나이다.동일한 입력 값으로 함수를 호출 했을 때, 이전에 계산했던 결과를 기억해뒀다가 다시 계산하지 않고 즉시 반환하는 방식이다.함수의 입력 값을 키(key)로, 계산된 결과를 값(value)으로 하는 캐시(Cach