console.log()와 console.dir(), 무엇이 다른가?JavaScript 개발 중 콘솔에 객체를 출력할 때 console.log()와 console.dir()은 비슷해 보이지만, 실제 출력 방식에는 명확한 차이가 있습니다.console.log(): toString 표현을 출력console.log() 메서드는 전달된 객체의 toString() 표현을 화면에 표시합니다. 즉, 객체가 문자열로 변환된 형태 그대로 출력되기 때문에, DOM 요소나 복잡한 객체의 경우 내부 구조를 자세히 확인하기 어려울 수 있습니다.consol

JavaScript의 forEach() 메서드는 배열의 각 요소를 순회할 때 매우 유용하지만, 한 가지 큰 제약이 있습니다. 바로 break 문이나 continue 문을 사용할 수 없다는 점입니다. 일반적인 for 반복문과 달리 forEach()는 조기에 루프를 탈출하는 기능을 기본적으로 제공하지 않습니다.forEach()에서 break를 사용할 수 없는 이유forEach()는 각 배열 요소에 대해 콜백 함수를 실행하는 고차 함수(Higher-Order Function)입니다. 콜백 함수 내부에서 break를 사용하면 문법 오류가

JavaScript에서 객체 속성을 생성하거나 접근할 때 사용할 수 있는 표기법은 두 가지입니다. 바로 점 표기법(dot notation)과 대괄호 표기법(bracket notation)입니다.점 표기법은 속성 이름이 미리 정해져 있을 때 편리하지만, 변수에 저장된 문자열 값을 속성 이름으로 사용할 수는 없습니다. 따라서 변수 값을 기반으로 객체 속성을 동적으로 만들려면 반드시 대괄호 표기법을 사용해야 합니다. 아래 예제를 살펴보겠습니다.예제 1: 대괄호 표기법 사용하기const obj = {a: foo} const prop = b

Sinon.js란?Sinon.js는 단위 테스트(Unit Testing)를 위해 독립형 테스트 스파이(Spy), 스텁(Stub), 목(Mock)을 제공하는 자바스크립트 라이브러리입니다. 이 라이브러리를 활용하면 실제 객체 대신 가짜 객체(Mock Object)를 생성하여 코드를 테스트할 수 있어, 외부 의존성 없이 안정적인 테스트 환경을 구축할 수 있습니다.Sinon.js의 핵심 기능1. Spies(스파이)함수의 실행 여부와 호출 과정을 추적할 수 있는 가짜 함수입니다. 특정 함수가 몇 번 호출되었는지, 어떤 인자(arguments

웹 개발을 하다 보면 현재 페이지의 URL에서 호스트명(hostname)과 경로(path)를 분리해야 하는 경우가 자주 있습니다. 자바스크립트에서는 Window.location 객체를 사용하면 이를 아주 간단하게 처리할 수 있습니다.Window.location이란?Window.location은 읽기 전용 속성으로, 현재 문서의 위치 정보를 담고 있는 Location 객체를 반환합니다. 이 객체가 제공하는 다양한 속성을 활용하면 URL의 각 구성 요소를 손쉽게 추출할 수 있습니다.Location 객체의 주요 속성Location.hre

Future는 Promise의 옛 이름Future(선물)는 오래전부터 사용되던 용어로, 사실상 Promise(프라미스)와 같은 개념을 가리킵니다. 두 용어는 비동기 연산의 결과를 나타낸다는 점에서 동일한 의미를 지니며, 시대에 따라 명칭만 달라진 것입니다.Promise와 Deferred의 차이Promise(프라미스)는 아직 알 수 없는 값을 대표하는 객체입니다. 쉽게 말해, 프라미스가 생성되는 시점에는 그 값이 확정되어 있지 않을 수 있으며, 프라미스는 미래에 결정될 값의 대리자(proxy) 역할을 합니다.Deferred(디퍼드)는

History API의 replaceState() 메서드 활용하기웹 개발을 하다 보면 URL 끝에 붙어 있는 해시(#section 같은 앵커)를 제거해야 하는 경우가 종종 있습니다. 이때 window.location.hash = ;처럼 단순히 값을 비우는 방식도 있지만, 더 깔끔하고 권장되는 방법은 History API의 replaceState() 메서드를 사용하는 것입니다.replaceState()란 무엇인가?replaceState() 메서드는 현재 히스토리 엔트리(history entry)를 수정하는 기능을 합니다. 메서드에 전

JavaScript에서 객체의 속성에 접근할 때, 해당 경로가 존재하지 않으면 undefined가 반환되거나 에러가 발생할 수 있습니다. 이럴 때 Lodash의 get 메서드를 사용하면 어떤 깊이의 속성이든 안전하게 조회할 수 있습니다.첫 번째 레벨의 속성에 접근하는 것은 비교적 간단하지만, 중첩된 속성 접근은 훨씬 까다롭습니다. 중간 단계의 속성이 null 또는 undefined일 경우 에러가 발생하기 때문에, lodash와 같이 검증된 라이브러리를 사용하는 것이 안전합니다.Lodash의 get 메서드 사용하기lodash를 설치한

JavaScript에서 객체의 깊은 곳에 있는 속성에 값을 설정할 때는 lodash의 set 메서드를 활용하면 안전하게 처리할 수 있습니다. 최상위 레벨의 속성 설정은 비교적 간단하지만, 중첩된(nested) 속성에 접근하는 작업은 오류가 발생하기 쉽습니다. 따라서 검증된 라이브러리인 lodash를 사용하는 것이 가장 좋은 방법입니다.lodash set 메서드로 깊은 중첩 객체 설정하기lodash를 사용하면 다음과 같이 깊게 중첩된 객체의 속성도 간단히 설정할 수 있습니다.예제let _ = require(lodash); let ob

객체 지향 프로그래밍 언어(Java, C++ 등)는 private 필드를 통해 클래스의 내부 동작을 외부로부터 숨기는 데이터 은닉(data hiding) 기능을 기본적으로 제공합니다. 하지만 전통적인 JavaScript에는 이러한 캡슐화를 위한 내장 문법이 없었습니다.다행히 익명 함수(Anonymous Function)와 IIFE(즉시 실행 함수 표현식)를 활용하면 JavaScript에서도 변수와 함수를 효과적으로 숨길 수 있습니다. 이번 글에서는 그 방법을 예제와 함께 살펴보겠습니다.문제 상황: 전역 네임스페이스 오염먼저 아래처럼

웹 개발을 하다 보면 선택 상자(select box)의 값을 JavaScript 코드로 직접 변경해야 하는 경우가 자주 있습니다. 예를 들어 폼을 초기화하거나, 사용자의 이전 선택을 복원하거나, 다른 입력값에 따라 특정 옵션을 자동으로 선택해야 할 때가 그렇습니다.기본 선택 상자 예제먼저 다음과 같은 select 요소가 있다고 가정해 보겠습니다.<select id="my-select">    <option value="1">Select</opt

자바스크립트에서 특정 날짜에 하루 또는 여러 날을 더하고 싶을 때, 별도의 외부 라이브러리(moment.js, date-fns 등)를 설치하지 않아도 setDate() 메서드만으로 충분히 처리할 수 있습니다. Date 객체의 프로토타입에 함수를 추가해 두면, 프로젝트 어디서든 간편하게 재사용할 수 있습니다.구현 예제Date.prototype.addDays = function(days) {    let d = new Date(this.valueOf());    d.setDate(d.getDate()

MEAN 스택이란?MEAN은 MongoDB, Express, Angular, Node.js의 앞 글자를 딴 약자입니다. 이 네 가지 기술을 조합하면 자바스크립트 하나만으로 프런트엔드부터 백엔드, 데이터베이스까지 전체 웹 애플리케이션을 개발할 수 있습니다.MEAN.js와 MEAN.io는 본질적으로 같은 개념MEAN.js와 MEAN.io는 사실상 같은 것이라고 볼 수 있습니다. 두 프로젝트 모두 위에서 언급한 네 가지 기술(MongoDB, Express, Angular, Node.js)을 손쉽게 사용할 수 있도록 미리 구성해 둔 스캐폴

브라우저 창이나 탭이 닫히는 시점에 localStorage 데이터를 자동으로 삭제하고 싶다면, window.onunload 이벤트를 활용하면 됩니다. 이 이벤트는 페이지가 언로드될 때, 즉 사용자가 탭이나 브라우저 창을 닫거나 다른 페이지로 이동할 때 발생합니다.기본 구현 예제예를 들어, 전역 범위에 MyStorage라는 이름의 localStorage 객체가 선언되어 있다고 가정해 보겠습니다. 이 경우 다음과 같이 이벤트 핸들러를 작성할 수 있습니다. { // localStorage 데이터 삭제 window.MySto

dispatchEvent 메서드로 change 이벤트 직접 실행하기 JavaScript에서는 dispatchEvent 메서드를 사용하면 개별 DOM 요소에 이벤트를 코드로 직접 발생시킬 수 있습니다. 예를 들어, change 이벤트가 연결된 input 요소가 있다고 가정해 보겠습니다. <input id=test type=text /> 1. 이벤트 핸들러 등록 먼저 해당 요소에 change 이벤트 리스너를 등록합니다. document.querySelector(#test).addEventListener(change, () =

자바스크립트에서 객체 배열을 특정 키를 기준으로 그룹화할 때 가장 효율적인 방법은 reduce() 함수를 활용하는 것입니다.reduce() 메서드는 배열의 각 요소에 대해 개발자가 직접 정의한 리듀서(reducer) 함수를 실행하며, 그 결과를 하나의 출력값으로 누적합니다. 이 특성을 활용하면 반복문 없이도 깔끔하게 데이터를 그룹별로 묶을 수 있습니다.예제 코드아래 예제는 사람 객체 배열을 나이(age)를 기준으로 그룹화하는 과정을 보여줍니다. { const key = obj[property]; if (

데이터 URI란 무엇인가?웹 개발을 하다 보면 HTML 페이지에 있는 이미지를 데이터 URI(Data URI) 형태로 변환해야 하는 경우가 종종 있습니다. 데이터 URI는 이미지 파일을 base64로 인코딩하여 문자열 형태로 표현한 것으로, 별도의 HTTP 요청 없이 이미지를 HTML이나 CSS에 직접 삽입할 수 있게 해주는 유용한 기술입니다.변환 과정JavaScript를 사용해 이미지 태그를 데이터 URI로 변환하는 절차는 다음과 같습니다.<canvas> 요소를 생성합니다.캔버스의 너비와 높이를 대상 이미지와 동일하게

JavaScript에서 함수 표현식(Function Expression)은 함수 선언문과 문법이 거의 동일하지만, 이름을 붙일 수도 있고 붙이지 않을 수도 있다는 점에서 차이가 있습니다. 이름이 있는 함수 표현식은 호출 스택(call stack)에서 함수 이름을 확인할 수 있어 디버깅에 유리하고, 이름이 없는 표현식을 바로 익명 함수(Anonymous Function)라고 부릅니다.익명 함수의 기본 예제익명 함수는 말 그대로 함수에 이름을 지정하지 않고, 변수에 할당하는 방식으로 정의합니다. 아래 예제를 살펴보겠습니다.var myF

MDN에 따르면, 화살표 함수(Arrow Function)는 일반 함수 표현식보다 문법적으로 간결한 대안입니다. 다만 this, arguments, super, new.target 키워드에 대한 자체 바인딩을 가지지 않는다는 점이 특징입니다. 이러한 이유로 화살표 함수는 메서드로 사용하기에는 적합하지 않으며, 생성자(Constructor)로도 활용할 수 없습니다.그렇다면 자바스크립트에서 일반 함수와 화살표 함수는 구체적으로 어떤 차이가 있을까요? 크게 세 가지 미묘하지만 중요한 차이점이 존재합니다.1. 자체 this 바인딩이 없다화

Lodash에서 객체를 다룰 때 _.assign()(별칭 _.extend())와 _.merge()는 비슷해 보이지만 동작 방식에 중요한 차이가 있습니다. 얕은 복사 vs 깊은 병합 assign과 extend는 소스(source) 객체의 각 속성을 순회하며 그 값을 있는 그대로 대상(destination) 객체에 복사합니다. 만약 속성 값 자체가 객체라 하더라도 내부 속성까지 재귀적으로 탐색하지 않습니다. 이러한 방식을 얕은 복사(shallow copy)라고 부르며, 객체 전체가 소스로부터 통째로 대상에 덮어써지게 됩니다. 반면 m