FrontEnd6 테스트 커버리지란? 테스트 커버리지란?내가 작성한 테스트 코드가 실제 애플리케이션 코드 중에서 얼마나 많은 부분을 실행(검증)했는지를 측정하는 지표.하지만 의미없는 테스트 시나리오로 테스트 커버리지가 100%나오는거보다 커버리지가 낮더라도 중요한 시나리오를 잘 검증하고 있다면 그게 효율적인 테스트테스트 커버리지가 테스트 시나리오 개수랑 헷갈렸다. → 테스트 커버리지가 낮다는건 무었을 의미할까?이런 로직이 있다고 치자.function getDiscount(price, isVip) { if (isVip) { return price * 0.9; } else { return price; }} 하지만 테스트 코드에 이런 테스트만 있다면?expect(getDiscount(10000, true)).toBe(9000); .. 2025. 6. 24. 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는 몇 가지 가.. 2025. 6. 24. Vite는 왜 빠를까? 톺아보기 Vite는 빠른것을 뜻하는 프랑스어에서 유래되었다고 한다.Vite는 vue.js의 창시자인 Evan Tou가 만든 차세대 프론트엔드 빌드 툴이다.기존의 Webpack, Parcel등이 번들링을 중심으로 개발 서버를 구성했다면, Vite는 ESM(ECMAScript Module) 기반으로 번들 없이도 작동 가능한 개발 환경을 제공한다.핵심은 매우 단순하다.필요한 모듈만, 필요한 순간에, 번들 없이 브라우저에게 제공한다.개발 서버에서의 vite1. 매우 빠른 시작 속도Webpack은 모든 파일을 번들링한 후 개발 서버를 시작하는 반면, Vite는 필요한 파일만 즉시 로딩하여 시작 속도가 매우 빠르다.2. ES 모듈 지원Vite는 개발 서버에서 번들링 없이 ES 모듈 기반으로 브라우저에 직접 JS 파일을 제공.. 2025. 5. 29. requestAnimationFrame에 대해 알아보기 requsetAnimationFrame이란? requestAnimationFrame()은 브라우저에서 애니메이션을 최적화하여 실행할 수 있도록 제공하는 JavaScript API이다.주로 CSS 애니메이션이나 setTimeout(), setInterval()을 사용하는 것 보다 성능이 뛰어나기 때문에 웹 애니메이션을 구현할 때 많이 사용된다. requestAnimationFrame()의 목적은 애니메이션을 위한 프레임 렌더링을 브라우저의 화면 갱신속도(리페인팅)에 맞추는 것이다.이 API를 사용하면 브라우저의 리프레시 속도(초당 60프레임, 60FPS)를 고려하는데 이 갱신 주기를 맞추어 콜백을 실행해 부드럽고 효율적인 애니메이션을 만들 수 있다. 이를 통해 브라우저가 최적의 시점에 프레임을 렌더링하도록.. 2025. 3. 18. 자바스크립트 함수의 특징 자바스크립트 함수에는 여러가지 특징들이 있다. 1.일급 객체일급 객체(First-Class Object)는 프로그래밍 언어에서 특정 타입의 데이터가 아래 조건을 만족할 때 사용하는 용어이다.변수에 할당할 수 있다.함수의 인자로 전달할 수 있다.함수의 반환값으로 사용할 수 있다. 자바스크립트에서 함수는 값처럼 취급될 수 있으며, 변수에 할당하거나, 다른 함수의 인자로 전달하거나, 함수의 반환값으로도 사용할 수 있다.const sayHello = function() { return 'Hello'; };console.log(sayHello()); // 'Hello'const executeFunction = function(fn) { return fn();};console.log(executeFunction.. 2024. 12. 3. 이전 1 2 다음
