분류 전체보기 (24) 썸네일형 리스트형 infer란? 타입스크립트 infer는 조건부 타입에서 미리 정의되지 않은 타입을 유연하게 정의할 수 있도록 도와주는 문법이다.항상 조건부 타입 문법과 같이 사용되며 복잡한 타입 코드를 줄여준다.infer의 예시infer의 역할을 이해하기 위해서 간단한 코드를 살펴보자.type ElementType = T extends (infer ArrayElement)[] ? ArrayElement : T위 코드는 ElementType 타입에 제네릭으로 넘긴 배열 타입의 요소를 반환한다. 예를들어서 제네릭에 string[] 타입을 넘기면 string을 반환하고 number[]를 넘기면 number 를 반환한다.// 배열 타입을 넘긴 경우type Result = ElementType; // stringtype Result = Ele.. 맵드 타입(Mapped Type)이란 맵드 타입이란 기존에 정의되어 있는 타입을 새로운 타입으로 변환해주는 문법이다. 마치 자바스크립트의 for...in 문법처럼 **타입ㄹ 레벨에서 키를 순회**하며 새로운 타입을 만들어내는 강력한 매커니즘이다.맵드타입의 기본 문법{ [ P in K ] : T }{ [ P in K ]? : T }{ readonly [ P in K ] : T }{ readonly [ P in K ]? : T }위와 같이 [P in K] : string 형태가 인덱스 시그니쳐를 의미한다. 인덱스 시그니쳐는 미리 정해지지 않은 객체의 속성 타입을 정의할 때 사용하면 좋다.예를들어 아래와 같이.interface Heroes { [key: string]: string}const hero: Heroes = { hulk: '헐크', .. CommonJs와 ESModule의 차이점 자바스크립트가 브라우저 환경을 넘어 서버와 데스크톱까지 확장되면서 모듈 시스템의 필요성이 대두되었다. CommonJs는 이런 시대적 요구에 맞추어 Node.js와 함께 발전하였고 이후 ESModule(ESM) 은 JavaScript의 공식 표준으로 자리잡게 되었다. 이 글에서는 이 두 모듈 시스템의 차이를 단순한 문법 비교를 넘어서 런타임 동작 방식, 번들러와의 상호작용, 호환성 등 다양한 관점에서 깊이있게 정리한다.모듈 시스템의 등장 배경초기의 JS: 모든 스크립트는 전역 스코프에서 작성되었고, 스크립트 간 의존성 관리가 어려웠다.CommonJS: Node.js에서 모듈화를 지원하기 위해 등장. 동기적 로딩 기반.ESModule: JavaScript의 공식 사양(ECMAScript 2015)으로 추가된.. Zustand로 전역 상태 관리 하기 ZustandZustand는 독일어로 ‘상태(state)’를 의미합니다. 작고 빠르며 확장 가능한 React 프로젝트에서 사용하는 상태 관리(Store) 라이브러리입니다.Store란?스토어(Store)는 애플리케이션의 여러 상태를 중앙에서 관리하는 패턴을 말합니다.(상태는 관리하는 데이터를 의미합니다)이를 통해 컴포넌트 간 데이터를 쉽게 공유하고 상태를 업데이트할 수 있습니다.이 스토어는 Zustand가 제공하는 create 함수를 사용해 생성됩니다.스토어 생성 예시import { create } from 'zustand'const useCounterStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state... 테스트 커버리지란? 테스트 커버리지란?내가 작성한 테스트 코드가 실제 애플리케이션 코드 중에서 얼마나 많은 부분을 실행(검증)했는지를 측정하는 지표.하지만 의미없는 테스트 시나리오로 테스트 커버리지가 100%나오는거보다 커버리지가 낮더라도 중요한 시나리오를 잘 검증하고 있다면 그게 효율적인 테스트테스트 커버리지가 테스트 시나리오 개수랑 헷갈렸다. → 테스트 커버리지가 낮다는건 무었을 의미할까?이런 로직이 있다고 치자.function getDiscount(price, isVip) { if (isVip) { return price * 0.9; } else { return price; }} 하지만 테스트 코드에 이런 테스트만 있다면?expect(getDiscount(10000, true)).toBe(9000); .. Virture Dom Diffing 알고리즘이란? 1. Virtual DOM이란?브라우저의 DOM(Document Object Model)은 조작 비용이 비싸고 느립니다. 그래서 React는 렌더링 성능을 높이기 위해 실제 DOM의 가벼운 사본(Virtual DOM) 을 메모리에 유지합니다. 2. Diffing 알고리즘이란? 실제 UI에 변화가 생기면 React는 다음 단계를 수행합니다.새로운 Virtual DOM을 생성이전 Virtual DOM과 비교(diff) 해서 바뀐 부분 찾기최소한의 실제 DOM 업데이트 수행이 “2번 단계”, 즉 두 트리 구조를 비교하는 알고리즘이 바로 Diffing 알고리즘입니다. 3. 어떻게 작동할까? (React 기준)DOM 트리 노드를 가장 효율적으로 교체하는 방법은 어떻게 알 수 있을까요?React는 몇 가지 가.. Vite는 왜 빠를까? 톺아보기 Vite는 빠른것을 뜻하는 프랑스어에서 유래되었다고 한다.Vite는 vue.js의 창시자인 Evan Tou가 만든 차세대 프론트엔드 빌드 툴이다.기존의 Webpack, Parcel등이 번들링을 중심으로 개발 서버를 구성했다면, Vite는 ESM(ECMAScript Module) 기반으로 번들 없이도 작동 가능한 개발 환경을 제공한다.핵심은 매우 단순하다.필요한 모듈만, 필요한 순간에, 번들 없이 브라우저에게 제공한다.개발 서버에서의 vite1. 매우 빠른 시작 속도Webpack은 모든 파일을 번들링한 후 개발 서버를 시작하는 반면, Vite는 필요한 파일만 즉시 로딩하여 시작 속도가 매우 빠르다.2. ES 모듈 지원Vite는 개발 서버에서 번들링 없이 ES 모듈 기반으로 브라우저에 직접 JS 파일을 제공.. requestAnimationFrame에 대해 알아보기 requsetAnimationFrame이란? requestAnimationFrame()은 브라우저에서 애니메이션을 최적화하여 실행할 수 있도록 제공하는 JavaScript API이다.주로 CSS 애니메이션이나 setTimeout(), setInterval()을 사용하는 것 보다 성능이 뛰어나기 때문에 웹 애니메이션을 구현할 때 많이 사용된다. requestAnimationFrame()의 목적은 애니메이션을 위한 프레임 렌더링을 브라우저의 화면 갱신속도(리페인팅)에 맞추는 것이다.이 API를 사용하면 브라우저의 리프레시 속도(초당 60프레임, 60FPS)를 고려하는데 이 갱신 주기를 맞추어 콜백을 실행해 부드럽고 효율적인 애니메이션을 만들 수 있다. 이를 통해 브라우저가 최적의 시점에 프레임을 렌더링하도록.. 이전 1 2 3 다음 목록 더보기
