웹 페이지에서 이미지를 표시할 때 가장 먼저 떠오르는 태그는 img 태그다.이미지를 화면에 보여주는 것만 생각한다면 이것으로 충분해 보인다.하지만 문득 이런 궁금증이 들었다.화면에는 200px 크기로 보이는데, 브라우저는 정말 200px 크기의 이미지만 다운로드하고 있

면접과 실무에서 빈도 높은 세 가지. 특히 마지막 unknown과 API 에러 처리는 실전에서 가장 자주 마주치는 주제다.이 글에서 다루는 것:제네릭 + 제약(extends)함수 오버로드 vs 유니온unknown vs any — 그리고 API 응답/에러 타입 정의언제

기존 타입/값에서 새 타입을 파생하는 도구들. 타입의 단일 출처(single source of truth)를 만드는 데 핵심. 상수 하나만 고치면 관련 타입이 전부 따라오게 만드는 게 목표다.이 글에서 다루는 것:as constkeyof typeof내장 유틸리티 타입템

useEffect의 cleanup에서 AbortController.abort()를 호출하도록 짰는데, 요청이 취소되지 않았다. 디버깅해보니 cleanup 안에서 컨트롤러가 계속 null로 찍혔다. 분명히 setAbortController로 값을 넣어줬는데도. 이 글은

넓은 타입(string, unknown, 유니온)을 특정 타입으로 안전하게 좁히는 방법들. 공통 목표는 as로 우기지 않고, 런타임 검증을 타입에 연결하는 것.왜 as를 피하나?as(타입 단언)는 컴파일러에게 "내가 책임질 테니 이 타입이라고 쳐"라고 우기는 것이다.

리뷰 코멘트 "React에서 key는 어떤 역할일까요?"에서 파생면접 단골 주제 — 배경(Virtual DOM, Reconciliation)까지 함께 정리"반복문 쓸 때 key 안 쓰면 에러난다" → 정확히는 에러가 아니라 경고(warning).동작은 하지만, key를

React로 무한스크롤을 직접 구현하다가 버그 하나를 고쳤더니 다음 버그가 드러나고, 그걸 고쳤더니 또 다음 문제가 나타났던 3연속 디버깅 기록.쇼핑몰 프로젝트에서 상품 목록 페이지를 만들고 있었다. 커서 기반 페이지네이션 + IntersectionObserver로 무

ProductCard 리뷰 코멘트에서 나온 개념 3가지 — 관심사 분리 / props 네이밍 / 함수 분리 예외(useNavigate → onNavigate prop 위임 리뷰에서 파생)컴포넌트는 자기 일에만 집중하고, 다른 관심사는 부모에게 넘긴다.ProductCar

비제어 (Uncontrolled) > 리액트의 state가 아닌, 브라우저 DOM 자체가 입력값을 들고 있다. 데이터의 주인은 브라우저(DOM) 동작: 사용자가 글자를 칠 때마다 리액트한테 알려주지 않음. 브라우저 DOM 자체( HTML )이 조용히 자기 값을 업데이트함. 리액트는 ref를 통해 나중에 값을 가져옴 장점: 키 입력마다 컴포넌트가 다시...

React Hook Form - useForm

CORS는 기본적으로 SOP(Same-Origin Policy, 동일 출처 정책) 때문에 발생합니다. 아래 3가지 요소 중 하나라도 다르면 브라우저는 이를 다른 출처로 간주하고 차단합니다.프로토콜(Protocol)이 다를 때: http와 https는 서로 다른 출처도메

자바스크립트 엔진은 코드를 실행하기 전 '컴파일 단계'를 거치며 변수 선언을 메모리에 미리 등록합니다. 실제 코드 위치와 상관없이 선언부만 최상단으로 끌어올려진 것처럼 보이는 현상을 말합니다.호이스팅은 모든 변수(var, let, const)에 발생하지만, 그 결과는

call by value, call by reference 란?함수 호출 시 값을 전달하는 방식을 의미합니다. Call by Value는 값의 복사본이 전달되므로, 함수 내부에서 값을 변경해도 원본에는 영향이 없습니다.Call by Reference는 변수의 참조값(메

불변성이란 기존 데이터를 직접 변경하지 않고, 새로운 값을 생성하여 상태 변화를 표현하는 성질을 의미합니다.자바스크립트에서 원시 타입은 한 번 생성된 값을 수정할 수 없기 때문에 자연스럽게 불변성을 가지며, 객체와 배열 같은 참조 타입은 내부 값을 변경할 수 있어 가변

얕은 복사는 객체의 최상위 프로퍼티만 새로 복사하고(1단계 프로퍼티),내부에 있는 중첩 객체나 배열은 기존 참조를 그대로 공유하는 복사 방식입니다.따라서 복사본에서 중첩 데이터를 수정하면 원본에도 영향이 발생할 수 있습니다.대표적으로 스프레드 연산자나 Object.as

자바스크립트의 데이터 타입은 크게 원시 타입과 참조 타입으로 구분됩니다.NumberBigIntStringBooleannullundefinedSymbol원시 타입의 값은 변경 불가능한 값이며,변수에 값을 할당하거나 복사할 때 값 자체가 복사되어 전달됩니다.원시 값은 불변