전체 글175 함수 선언 vs 표현식, this 바인딩 완벽 정리 (call, apply, bind 포함) 들어가며JavaScript의 함수는 선언 방식에 따라 동작 방식이 다르고, this 바인딩도 호출 방식에 따라 동적으로 결정됩니다.이러한 차이를 정확히 이해하면 콜백, 메서드, 이벤트 핸들러 등에서 발생하는 this 관련 버그를 방지할 수 있습니다.이 글에서는 함수 선언 vs 표현식 차이부터 this의 동적 바인딩 원리, 그리고 call, apply, bind를 활용한 명시적 바인딩까지 완벽 정리합니다. 1. 함수 선언 vs 함수 표현식✅ 함수 선언 (Function Declaration)function greet() { console.log("Hello");}호이스팅 O: 선언 전에도 사용 가능스코프 최상단으로 끌어올려짐✅ 함수 표현식 (Function Expression)const greet = f.. 2025. 4. 21. 자바스크립트 콜백 함수 완전 정리 – 기초 개념부터 깊이 있는 이해까지 들어가며자바스크립트에서 콜백 함수(callback function)는 너무 자주 등장하는 개념이라,처음에는 당연하게 사용하지만 정확히 어떻게 동작하고 어떤 상황에서 쓰는지 깊이 있게 이해하는 게 중요합니다.이 글에서는:콜백 함수의 기본 개념함수 인자로서의 역할중첩 호출 (콜백 지옥)return, 실행 시점, 흐름의 이해실무에서 콜백을 대체하는 구조 (Promise, async/await) 까지 전체 흐름을 쉽게 정리합니다.1. 콜백 함수란?**“다른 함수에 인자로 전달되는 함수”**를 콜백 함수라고 부릅니다.function greet(name, callback) { //콜백함수를 쓰는 함수 greet를 정의 const message = `안녕하세요, ${name}`; .. 2025. 4. 21. 실행 컨텍스트와 호이스팅 – JavaScript 실행 구조의 핵심 이해하기 들어가며JavaScript 코드를 정확히 이해하고 디버깅하려면,브라우저가 코드를 어떤 순서로 해석하고 실행하는지, 변수/함수가 어디서 어떻게 인식되는지를 이해해야 합니다.이 글에서는 JS의 런타임 동작 원리인 실행 컨텍스트(Execution Context) 와 호이스팅(Hoisting) 개념을 예제와 함께 정리합니다. 1. 실행 컨텍스트란?JavaScript 코드가 실행될 때, 각 실행 환경을 추적하고 관리하기 위한 내부 구조, 실행 환경(작업 공간)입니다. 코드가 실행되면 브라우저는 다음을 기억하고 관리해야 해요 (각 컨텍스트는 아래 구성 요소를 포함):어떤 변수와 함수가 있는지 - Variable Environment (변수 선언 정보)그 변수의 값이 뭔지 - Lexical Environment (스.. 2025. 4. 21. 브라우저 렌더링 구조와 성능 최적화 – 웹페이지가 그려지는 과정을 이해하고 빠르게 만들기 들어가며웹페이지를 최적화하기 위해서는 브라우저가 HTML/CSS/JS를 어떻게 해석하고 화면에 출력하는지 정확히 이해해야 합니다.렌더링 파이프라인의 각 단계를 알면, 불필요한 렌더링/리플로우/리페인트를 방지해 웹 성능을 높일 수 있습니다.이 글에서는 브라우저 렌더링 과정과, 이를 기반으로 한 실전 성능 최적화 전략을 함께 정리합니다. 1. 브라우저 렌더링 파이프라인HTML 파싱 → DOM 트리 생성CSS 파싱 → CSSOM 생성DOM + CSSOM → 렌더 트리 생성Layout (Reflow) → Paint → Composite① 파싱 단계HTML → DOM(Document Object Model)CSS → CSSOM(CSS Object Model)② 렌더 트리 생성DOM과 CSSOM을 조합해 실제 화면.. 2025. 4. 20. 프레임워크 없이 바닐라 JS로 SPA 만들기 – 라우팅, 렌더링, 상태관리 직접 구현해보기 들어가며Vue, React, Svelte 등 SPA 프레임워크는 이미 많은 기능을 추상화해 제공하지만,그 근본 원리를 이해하기 위해서는 프레임워크 없이 직접 SPA(Single Page Application)를 구현해보는 것이 큰 도움이 됩니다.이 글에서는 바닐라 JavaScript만을 사용해:기본 라우팅 처리동적 렌더링 구조간단한 상태 관리 구조 을 직접 구성해보는 실전 예제를 소개합니다. 1. SPA란?페이지 전체를 새로고침하지 않고, JavaScript로 동적으로 콘텐츠를 교체하는 방식의 웹 앱특징브라우저가 최초에 HTML/CSS/JS를 모두 받고 이후에는 JS가 동작 주도URL 변화는 pushState/popState로 관리됨 2. HTML 기본 구조 Home About d.. 2025. 4. 20. JavaScript 모듈 시스템 완전 이해하기 – CommonJS vs ESModules 들어가며JavaScript는 과거에는 별도의 모듈 시스템 없이 전역 스코프에서만 코드를 관리했지만,대형 프로젝트가 늘어나면서 코드 분리와 재사용을 위한 모듈 시스템이 필수가 되었습니다.대표적인 모듈 시스템으로는 CommonJS(Node.js 중심)와 ESModules(ESM)(브라우저 표준)이 있으며,각각의 동작 방식과 문법 차이를 정확히 이해해야 환경에 맞게 코드를 구성할 수 있습니다. 1. CommonJS란?Node.js에서 사용되는 대표적인 모듈 시스템 (동기 방식)문법// math.jsfunction add(x, y) { return x + y;}module.exports = { add };// app.jsconst math = require("./math");console.log(math.ad.. 2025. 4. 20. 이전 1 2 3 4 ··· 30 다음
