자바스크립트를 배우다 보면 선언되지 않음(Undeclared)과 정의되지 않음(Undefined)이라는 두 가지 개념을 자주 접하게 됩니다. 이름이 비슷해 혼동하기 쉽지만, 두 개념은 발생 원인과 의미가 완전히 다릅니다.선언되지 않음(Undeclared)이란?Undeclared는 var, let, const 키워드로 선언된 적이 없는 변수에 접근하려고 할 때 발생하는 상태입니다. 이 경우 자바스크립트는 ReferenceError를 발생시키며 프로그램 실행이 중단될 수 있습니다.정의되지 않음(Undefined)이란?Undefined는
JavaScript로 DOM을 조작하다 보면 요소의 내용을 가져오거나 변경할 때 innerHTML과 innerText 중 어떤 것을 사용해야 할지 고민하게 됩니다. 두 속성은 이름은 비슷하지만 동작 방식이 완전히 다르므로, 차이를 정확히 이해하는 것이 중요합니다. innerHTML이란? innerHTML 속성은 요소 내부의 텍스트뿐만 아니라 모든 공백과 하위 HTML 태그까지 그대로 반환합니다. 즉, 원본 마크업의 형식을 완전히 보존하며 <b>, <i> 등의 태그도 문자열에 포함됩니다. 예를 들어 Hello &
웹 개발에서 쿠키(cookie)는 사용자 정보나 설정값을 브라우저에 저장하고 필요할 때 다시 불러오는 데 사용되는 핵심 기술입니다. JavaScript에서는 document.cookie 속성 하나만으로 쿠키를 간단하게 읽고 쓸 수 있습니다. JavaScript로 쿠키 읽기 예제 다음은 버튼을 클릭하면 현재 저장된 쿠키 값을 화면에 출력하는 전체 코드입니다. 참고: 이 예제를 정상적으로 실행하려면 로컬 서버 환경이 필요합니다. 예제 코드 <!DOCTYPE html> <html lang=en> <head>
JavaScript에서 스크롤(scroll) 이벤트는 사용자가 스크롤바를 위아래로 움직이거나, 마우스 휠·터치·키보드 방향키 등으로 화면을 스크롤할 때마다 발생하는 이벤트입니다. 이 이벤트를 활용하면 무한 스크롤, 헤더 고정·숨김, 스크롤 진행률 표시 등 다양한 인터랙티브 기능을 구현할 수 있습니다. JavaScript 스크롤 이벤트 예제 코드 다음은 window 객체에 addEventListener()로 스크롤 이벤트 리스너를 등록하고, 스크롤이 발생하면 화면에 메시지를 출력하는 기본 예제입니다. <!DOCTYPE html&
JavaScript의 페이지 로드 이벤트는 웹 페이지가 로드되거나 언로드될 때 발생하는 이벤트입니다. 이러한 이벤트를 활용하면 문서의 생명주기(lifecycle)에 맞춰 적절한 시점에 스크립트를 실행할 수 있습니다. JavaScript의 주요 로드 이벤트 JavaScript에서 사용할 수 있는 대표적인 로드 관련 이벤트는 다음과 같습니다. 이벤트설명 DOMContentLoadedDOM 트리 구성이 완료된 시점에 발생합니다. 단, 스타일시트나 이미지 같은 외부 리소스는 아직 로드되지 않았을 수 있습니다. DOM 조작이 필요한
JavaScript 포커스 이벤트란?포커스(focus) 이벤트는 웹 문서 내 요소가 포커스를 받거나 잃는 시점에 발생하는 이벤트입니다. 주로 로그인 폼, 검색창 등 입력 요소에서 사용자의 상호작용을 감지하여 시각적 피드백을 제공하거나 유효성 검사를 수행할 때 널리 활용됩니다.포커스 관련 이벤트 종류이벤트설명blur요소가 포커스를 잃었을 때 발생합니다.focus요소가 포커스를 받았을 때 발생합니다.focusin요소가 포커스를 받기 직전에 발생하며, focus와 달리 이벤트 버블링이 일어납니다.focusout요소가 포커스를 잃기 직전에
preventDefault()란 무엇인가?preventDefault()는 이벤트가 발생했을 때 브라우저의 기본 동작을 중단시키는 메서드입니다. 예를 들어, 링크(URL)를 클릭했을 때 페이지가 이동하지 않도록 막는 등의 기능을 수행합니다.return false란 무엇인가?return false 역시 이벤트 발생 시 브라우저의 기본 동작을 중단시키지만, 여기에 더해 이벤트 전파(event propagation)까지 차단합니다. 또한 호출되는 즉시 콜백 함수의 실행이 중단된다는 점이 특징입니다.즉, 두 방식의 핵심적인 차이는 다음과 같
JavaScript의 location.protocol 속성은 현재 페이지 URL의 프로토콜(protocol)을 가져오거나 설정하는 데 사용되는 Location 객체의 속성입니다.이 속성을 읽으면 http:, https:, file:처럼 콜론(:)까지 포함된 문자열이 반환되며, 값을 할당하면 해당 프로토콜로 URL을 변경할 수 있습니다. 보안 검사나 HTTP/HTTPS 여부 판별 등에 유용하게 활용됩니다.location.protocol 기본 문법// 프로토콜 가져오기 let proto = location.protocol; // 프로
JavaScript를 활용하면 한 입력 필드에 입력된 값을 다른 필드에 그대로 자동으로 채워 넣을 수 있습니다. 예를 들어 배송지 주소와 수령지 주소가 동일한 경우, 버튼 클릭 한 번으로 두 번째 필드를 첫 번째 필드의 값과 똑같이 맞출 수 있어 사용자 편의성이 크게 향상됩니다.핵심 원리이 기능은 querySelector로 요소를 선택하고, addEventListener로 클릭 이벤트를 감지한 뒤, 첫 번째 입력 필드의 value 속성 값을 두 번째 필드에 대입하는 방식으로 구현합니다.예제 코드<!DOCTYPE html>
웹 폼을 만들다 보면 사용자가 입력하는 내용의 길이에 따라 텍스트 영역(textarea)의 높이가 자동으로 늘어나거나 줄어들도록 구현해야 하는 경우가 많습니다. 이번 글에서는 외부 라이브러리 없이 순수 JavaScript만을 사용하여 자동 크기 조절(auto-resize) 텍스트 영역을 만드는 방법을 알아보겠습니다. 핵심 원리 자동 크기 조절의 동작 원리는 매우 간단합니다. 사용자가 텍스트를 입력할 때마다 발생하는 input 이벤트를 감지합니다. 먼저 요소의 높이를 auto로 초기화하여 현재 내용에 맞는 기본 높이를 다시 계산합니
JavaScript에서 Boolean(불리언) 값을 전환(toggle)하는 것은 true를 false로, false를 true로 바꾸는 작업을 의미합니다. UI 상태 관리, 체크박스 처리, 모달 창 열기/닫기 등 다양한 상황에서 자주 사용되는 기본적인 기법입니다.Boolean 전환의 기본 원리가장 간단하고 널리 사용되는 방법은 논리 NOT 연산자(!)를 활용하는 것입니다. NOT 연산자는 현재 값의 반대 값을 반환하기 때문에, 변수에 자신의 반대 값을 다시 할당하면 손쉽게 전환이 이루어집니다.let boolVal = true; bo
JavaScript를 활용하면 버튼 클릭 한 번으로 iframe을 브라우저 화면 전체 크기로 확장할 수 있습니다. 핵심 원리는 CSS의 뷰포트 단위인 100vw(너비)와 100vh(높이)를 사용해 iframe이 화면 전체를 차지하도록 스타일을 정의한 뒤, JavaScript로 해당 클래스를 동적으로 적용하는 것입니다.예제 코드<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=w
웹 개발을 하다 보면 텍스트 영역(textarea)에서 화살표 키를 사용한 커서 이동이나 스크롤을 막아야 하는 경우가 있습니다. 예를 들어 게임 조작 키와 충돌을 방지하거나, 특정 입력 환경에서 사용자의 실수로 인한 커서 이동을 제어하고 싶을 때 유용합니다. JavaScript의 keydown 이벤트와 preventDefault() 메서드를 활용하면 이를 손쉽게 구현할 수 있습니다.핵심 원리키보드의 각 키는 고유한 키 코드(keyCode) 값을 가집니다. 화살표 키와 관련된 주요 키 코드는 다음과 같습니다.37 ← 왼쪽 화살표38
<div> 요소에는 value 속성이 없습니다. 따라서 input 요소처럼 .value로 접근하면 undefined가 반환됩니다. div의 내용을 읽거나 설정하려면 document.getElementById().innerHTML을 사용하는 것이 올바른 방법입니다. 다음은 이를 보여주는 JavaScript 예제 코드입니다. 예제 코드 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
JavaScript에서 파생 속성이란?JavaScript에서 파생 속성(derived properties)은 객체 자신에게 직접 정의된 것이 아니라, 프로토타입 체인을 통해 부모 객체로부터 상속받은 속성을 의미합니다. 대표적인 방법은 Object.create() 메서드를 사용하여 특정 객체를 프로토타입으로 지정하는 것입니다.상속받은 속성을 재정의(override)하려면 해당 객체에 같은 이름의 속성을 직접 할당하면 됩니다. 이렇게 하면 원본 프로토타입 객체는 그대로 유지되면서, 해당 인스턴스에만 새로운 값이 저장됩니다.예제 코드다음
심볼(Symbol)은 JavaScript의 원시 데이터 타입(primitive data type) 중 하나로, ES6(ECMAScript 2015)에서 처음 도입되었습니다. 심볼의 가장 큰 특징은 완전히 고유하다는 것입니다. 즉, 아무리 같은 설명 문자를 넣어도 생성된 심볼은 서로 절대 같지 않습니다. 심볼(Symbol)의 핵심 특징 고유성 보장: Symbol() 팩토리 함수가 호출될 때마다 항상 새롭고 유일한 값을 반환합니다. 원시 데이터 타입: string, number, boolean처럼 원시 타입에 속하며, typeof 연
JavaScript는 프로토타입(prototype) 기반의 객체 지향 언어입니다. Java나 C++ 같은 클래스 기반 언어와 달리, JavaScript에서는 prototype 객체를 활용하여 상속을 구현합니다.프로토타입 상속의 기본 개념생성자 함수로 객체를 생성하면, 해당 객체는 생성자 함수의 prototype 속성에 정의된 메서드와 속성을 그대로 물려받습니다. 즉, 여러 객체가 동일한 메서드를 공유할 수 있어 메모리를 효율적으로 사용할 수 있습니다.JavaScript 상속 구현 예제다음은 생성자 함수와 prototype 객체를 사
JavaScript의 lastIndex 속성은 정규식(RegExp) 객체에서 매우 유용한 기능을 제공합니다. 이 속성은 정규식이 문자열에서 일치(match)하는 지점의 인덱스 위치를 반환하며, 다음 검색은 해당 위치부터 이어서 진행됩니다.주의할 점은 lastIndex 속성은 반드시 g(global) 플래그가 설정되어 있을 때만 동작한다는 것입니다. g 플래그가 없으면 매번 문자열 처음부터 검색이 수행되기 때문에 lastIndex 값이 의미 없게 됩니다.lastIndex 속성의 동작 원리g 플래그가 설정된 정규식에 test()나 ex
JavaScript에서는 match() 메서드와 정규 표현식을 조합하면 문자열 안에서 원하는 패턴과 일치하는 항목들을 손쉽게 찾아낼 수 있습니다. 특히 정규 표현식 끝에 전역(global) 플래그인 /g를 붙이면 첫 번째 일치 항목만 반환하는 것이 아니라, 문자열 전체에서 일치하는 모든 항목이 배열 형태로 반환됩니다. 이 배열을 forEach() 같은 반복문과 함께 사용하면 각 일치 항목을 순서대로 순회하며 처리할 수 있습니다.예제 코드다음은 주어진 문장에서 at이라는 패턴과 일치하는 모든 단어를 찾아, 일치 항목 개수만큼 결과를
모듈(Module)은 ES 2015(ES6)에서 도입된 기능으로, 하나의 큰 코드를 재사용 가능한 작은 단위로 나누어 관리할 수 있게 해줍니다. 모듈 안에는 클래스나 함수 등을 포함시킬 수 있으며, export와 import 키워드를 사용해 변수, 함수, 객체를 다른 파일로 내보내거나 가져올 수 있습니다.JavaScript 모듈의 핵심 개념모듈을 사용하면 코드의 응집도를 높이고 의존성을 명확하게 관리할 수 있습니다. 대표적인 특징은 다음과 같습니다.코드 분리: 기능별로 파일을 나누어 유지보수가 쉬워집니다.재사용성: 한 번 작성한 함