JavaScript (4) 썸네일형 리스트형 JavaScript this 바인딩 이해하기 핵심 개념JavaScript에서 this는 함수가 어떻게 호출되느냐에 따라 결정됩니다. 함수를 작성할 때가 아니라, 실행될 때 결정된다는 게 핵심입니다.1. 기본 바인딩 (Default Binding)함수를 그냥 호출하면 this는 undefined가 됩니다 (strict mode/모듈 환경).function sayName() { console.log(this.name);}sayName(); // TypeError: Cannot read properties of undefined2. 암시적 바인딩 (Implicit Binding)객체의 메서드로 호출하면 this는 .앞의 객체를 가리킵니다.const person = { name: '철수', sayName: function() { console... JavaScript 이벤트 루프: Task Queue vs Microtask Queue JavaScript는 싱글 스레드 언어입니다.그런데 어떻게 비동기 작업을 처리할 수 있을까요?**이벤트 루프(Event Loop)**를 사용할 수 있습니다.이벤트 루프란?이벤트 루프는 JavaScript 엔진이 비동기 작업을 처리하는 메커니즘입니다. 코드 실행을 관리하고, 대기 중인 작업들을 순서대로 처리합니다.핵심 구성 요소┌─────────────┐│ Call Stack │ ← 현재 실행 중인 코드└─────────────┘ ↓┌─────────────────┐│ Microtask Queue │ ← Promise, queueMicrotask (우선순위 높음)└─────────────────┘ ↓┌─────────────────┐│ Task Queue │ ← setTim.. 웹 빌드 도구 비교: Webpack vs Vite vs Rollup 그리고 etc 모던 웹 개발에서 빌드 도구는 필수적입니다. 수많은 JavaScript 파일과 CSS, 이미지 등의 에셋을 최적화하고 번들링하여 브라우저가 효율적으로 로드할 수 있도록 만들어주죠. 하지만 선택지가 너무 많아서 어떤 도구를 써야 할지 고민되시나요? 이 글에서 주요 빌드 도구들을 비교하고, 여러분의 프로젝트에 가장 적합한 도구를 찾는 방법을 알려드리겠습니다.1. Webpack - 검증된 강자특징Webpack은 2012년부터 시작된 가장 성숙한 번들러입니다. 모든 것을 모듈로 취급하며, JavaScript뿐만 아니라 CSS, 이미지, 폰트 등 모든 에셋을 번들링할 수 있습니다.장점강력한 생태계: 수천 개의 플러그인과 로더 보유높은 커스터마이징: 복잡한 요구사항도 세밀하게 설정 가능코드 스플리팅: 동적 impo.. Vite: 차세대 프론트엔드 개발 도구 Vite란 무엇인가?Vite(프랑스어로 "빠르다"는 뜻)는 Evan You(Vue.js 창시자)가 만든 차세대 프론트엔드 빌드 도구입니다. 기존의 Webpack이나 Parcel 같은 번들러들이 가진 느린 개발 서버 시작 속도와 느린 HMR(Hot Module Replacement) 문제를 해결하기 위해 탄생했습니다.왜 Vite가 필요할까?기존 번들러 기반 개발 환경의 문제점을 이해하면 Vite의 필요성이 명확해집니다.전통적인 번들러의 한계느린 서버 구동: 프로젝트가 커질수록 개발 서버를 시작하는 데 수 분이 걸리기도 함느린 업데이트: 파일 하나를 수정해도 전체 번들을 다시 빌드해야 하는 경우가 많음비효율적인 리소스 사용: 필요하지 않은 모듈까지 번들링하여 메모리 낭비Vite의 핵심 원리1. ESM(ES .. 이전 1 다음
