전체 글

`디바운스(Debounce)`와 `쓰로틀(Throttle)`은 연속되는 이벤트나 함수의 호출을 제어하여 최적화하는 기법입니다.`디바운스(Debounce)`는 연속적으로 이벤트가 발생했을 때, 마지막 이벤트가 발생한 후 일정 시간이 지난 후에 이벤트 핸들러가 실행되는 방식입니다. 이를 통해 불필요하게 많은 이벤트 호출을 방지할 수 있습니다. 예를 들어, 검색창에 사용자가 키를 입력할 때마다 검색 요청을 보내면 부하가 지나치게 커지기 때문에, 사용자가 입력을 멈춘 후 일정 시간이 지나면 요청을 보내는 방식으로 디바운스를 적용할 수 있습니다. `쓰로틀(Throttle)`은 일정 시간 간격동안 발생한 이벤트 중 첫 번째 또는 마지막 이벤트만 처리하는 방식입니다. 즉, 이벤트가 계속해서 발생하더라도 설정된 시간 ..

`제어문`은 코드의 실행 흐름을 제어하는 문입니다. 조건에 따라 코드 블록을 실행하거나 반복 실행할 때 사용합니다. 1. 블록문 (Block Statement)0개 이상의 문을 `중괄호`로 묶은 코드 블록자바스크립트는 블록문을 하나의 실행 단위로 취급{ var foo = 10; console.log(foo);}2. 조건문 (Conditional Statement)2.1 if...else 문주어진 `조건식`의 평가 결과에 따라 실행할 코드 블록 결정if (조건식) { // 조건식이 true일 때 실행} else { // 조건식이 false일 때 실행}2.2 switch 문주어진 표현식의 평가 결과와 일치하는 case 문으로 실행 흐름 이동switch (표현식) { case 값1: // 표현식..

`Virtual DOM(Document Object Model)`은 실제 DOM을 JavaScript 객체로 메모리 상에 복제한 가상 DOM입니다. 실제 DOM 조작은 브라우저의 `리플로우`와 `리페인트` 과정을 거치기 때문에 비용이 많이 드는 작업입니다. React와 같은 프레임워크는 이 Virtual DOM을 활용하여 UI를 효율적으로 관리합니다. Virtual DOM은 실제 DOM 요소의 가벼운 복사본으로, 상태 변경 시 전체 UI를 Virtual DOM에 먼저 렌더링합니다. 컴포넌트의 `상태(State)`가 변경될 때마다 새로운 Virtual DOM을 생성하고, 이전 Virtual DOM과 `비교(Reconciliation)`하여 변경된 부분만 실제 DOM에 한 번에 `반영(Batch Update..

1. 코드 스플리팅2. 레이지 로딩3. 파일 포맷 변환4. 캐싱5. 비동기, 지연 로딩1. 코드 스플리팅자바스크립트 파일을 필요한 부분만 나누어 로드할 수 있습니다. 이렇게 하면 모든 코드를 한꺼번에 불러오는 대신, 사용자가 즉시 필요한 부분만 먼저 로드하여 페이지 로딩 속도를 개선할 수 있습니다.const MyComponent = React.lazy(() => import('./MyComponent')); 2. 레이지 로딩페이지에 있는 이미지나 비디오 같은 무거운 리소스를 사용자가 실제로 볼 때만 로드하는 방식을 적용할 수 있습니다. 예를 들어, 사용자가 페이지를 스크롤할 때 하단의 이미지가 필요해지면 그 때 비로소 이미지를 불러오는 것입니다. 이렇게 하면 불필요한 리소스 로딩을 줄여 성능을 높일 수 ..

`이벤트 전파`에는 DOM(Document Object Model)에서 이벤트가 발생했을 때, 그 이벤트가 어떠한 방식으로 전파되는지를 설명하는 개념입니다.이벤트 전파에는 크게 세 단계로 나눌 수 있습니다.캡처링(Capturing)타겟(Target)버블링(Bubbling) 클릭! 1. 캡처링(Capturing)`캡처링`은 이벤트가 DOM 트리의 최상위 요소(document 또는 window)에서 시작해, 이벤트가 발생한 요소(타깃 요소)로 향해 내려가는 단계입니다. 즉, 부모에서 자식으로 아래로 내려가며 이벤트가 전파되는 단계를 `캡처링`이라고 합니다.// 캡처링 예시element.addEventListener('..

`CommonJS`와 `ES Module(ESM)`은 자바스크립트에서 모듈을 관리하는 로드하는 방식입니다. CommonJS`CommonJS`는 Node.js 환경에서 사용되며, 모듈을 동기적으로 로드하는 역할을 합니다. 모듈이 전부 로드될 때까지 다음 코드가 실행되지 않는 방식입니다. `require`키워드를 사용해 모듈을 가져오고, `module.exports`를 통해 모듈을 내보냅니다.주로 서버 측에서 사용됐지만, 클라이언트 환경에서도 번들러를 통해 사용할 수 있습니다.// CommonJS 방식// 모듈 내보내기module.exports = { add: function(a, b) { return a + b; }};// 모듈 가져오기const math = require('./ma..

단위 테스트(Unit Test)특정 조건에서 어떻게 작동해야 할지 정의한 것 (기능을 테스트)Input에 따라 계산한 결과를 Output으로 반환하는 것 (`함수`)단위 테스트 3단계1. 준비(arrange) : Input을 준비하는 단계2. 실행(act) : Input을 전달받아 함수를 실행하는 단계3. 단언(assert) : 결과를 검증하는 단계이러한 단위 테스트를 통해 `테스트 주도 개발(TDD)`을 할 수 있다. 테스트 주도 개발(Test Driven Development)적색(Red), 녹색(Green), 리팩터(Refactor) 순환테스트하기 쉬운 코드관심사의 분리🔍 적색(Red), 녹색(Green), 리팩터(Refactor) 순환적색(Red) : 실패하는 테스트 작성녹색(Green) : 테..