다음은 JavaScript를 사용하여 웹 페이지에 있는 모든 링크의 좌표(가로·세로 크기)를 찾는 방법을 보여주는 예제 코드입니다. 이 기법은 링크 위치 분석, 자동화 테스트, UI 디버깅 등 다양한 상황에서 유용하게 활용할 수 있습니다. 예제 코드 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 />
사용자가 입력 도중 실수로 페이지를 새로고침하거나 다른 곳으로 이동하면 작성한 내용이 모두 사라져 불편을 겪게 됩니다. 이런 상황을 방지하려면 onbeforeunload 이벤트를 활용하여 사용자에게 확인 경고창을 띄워줄 수 있습니다.beforeunload 이벤트란?beforeunload 이벤트는 사용자가 페이지를 떠나기 직전에 발생합니다. 이 이벤트 핸들러에서 문자열을 반환하면 브라우저가 자동으로 페이지를 나가시겠습니까?와 같은 확인 대화상자를 표시하고, 사용자가 취소를 선택하면 페이지 이동이 중단됩니다. 주의할 점은 최신 브라우저
이 글에서는 JavaScript를 사용하여 문자열에서 따옴표( )로 묶인 단어를 추출하는 방법을 알아봅니다. 핵심은 정규식(Regular Expression)을 활용하는 것으로, 간단한 패턴 하나만으로 원하는 텍스트를 손쉽게 가져올 수 있습니다. 예제 코드 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0
JavaScript에서 async/await와 Promise를 활용하면 반복문 내에서도 비동기 작업을 순차적으로 처리할 수 있습니다. 일반적인 for 루프 안에 await 키워드를 사용하면 각 반복이 완료될 때까지 기다린 후 다음 반복으로 넘어가는 비동기 루프를 손쉽게 구현할 수 있습니다.예제 코드아래 예제는 버튼을 클릭하면 비동기 루프가 시작되어, 2초마다 숫자를 하나씩 화면에 출력하는 코드입니다.<!DOCTYPE html> <html lang="ko"> <head> <met
JavaScript 개발을 하다 보면 기존 배열의 모든 요소를 제거하고 배열을 초기화해야 하는 상황이 자주 발생합니다. JavaScript에서 배열을 비우는 방법은 크게 네 가지가 있으며, 각각의 특징과 동작 방식이 다릅니다.배열을 비우는 4가지 방법새로운 빈 배열 할당 − 배열 변수에 새로운 빈 배열([])을 재할당하는 방식입니다. 가장 직관적이지만, 원본 배열을 참조하던 다른 변수에는 영향을 주지 않습니다.length 속성 활용 − 배열의 length 속성을 0으로 설정하는 방식입니다. 원본 배열 자체를 수
JavaScript 콜백 함수에 매개변수 전달하기 콜백 함수(callback function)는 다른 함수의 인자로 전달되어 특정 시점에 호출되는 함수를 의미합니다. 콜백 함수에 매개변수를 전달하려면, 콜백 함수 자체와 함께 필요한 값을 외부(상위) 함수의 인자로 넘겨주고, 외부 함수 내부에서 그 값을 이용해 콜백을 실행하면 됩니다. 다음은 JavaScript에서 콜백 함수에 매개변수를 전달하는 방법을 보여주는 예제 코드입니다. 예제 <!DOCTYPE html> <html lang=en> <head>
JavaScript의 화살표 함수(fat arrow function)는 ES6(ES2015)에서 도입된 간결한 함수 표현 방식입니다. 기존의 function 키워드 없이 기호만으로 함수를 정의할 수 있어 코드가 훨씬 짧고 읽기 쉬워집니다.화살표 함수의 기본 문법 { }화살표 함수는 function 키워드가 필요 없으며, 매개변수와 함수 본문 사이에 (fat arrow)만 존재합니다. 이러한 특징 덕분에 콜백 함수나 짧은 유틸리티 함수를 작성할 때 특히 유용합니다.JavaScript 화살표 함수 예제다음은 두 숫자를 더하는 add(
화살표 함수란?JavaScript의 화살표 함수(Arrow Function)는 ES6(ES2015)에서 도입된 문법으로, 기존의 function 키워드를 사용하는 함수보다 훨씬 짧고 간결하게 함수를 선언할 수 있습니다. 특히 간단한 연산이나 콜백 함수를 작성할 때 코드의 가독성을 크게 높여줍니다.간결한 화살표 함수의 기본 문법간결한(concise) 형태의 화살표 함수 문법은 다음과 같습니다.(param1, param2) => param1 + param2이 문법에는 function 키워드가 없고, 중괄호로 감싸는 별도의 함수 본
간결형 화살표 함수(concise arrow function)는 한 줄짜리 함수를 더 깔끔하게 표현하기 위해 팻 애로우(fat arrow) 함수를 축약한 형태입니다. 함수 본문이 단 한 줄이라면 중괄호 {}를 생략할 수 있으며, 이때는 결과값이 자동으로 반환되는 암시적 반환(implicit return)이 적용됩니다. 또한 매개변수가 하나뿐이라면 소괄호 ()도 생략할 수 있지만, 매개변수가 아예 없는 경우에는 빈 소괄호를 반드시 작성해야 합니다. 기본 문법 비교 1. 팻 애로우 함수 let add = (a, b) => { re
자바스크립트에서 함수를 호출할 때 필요한 인수를 전달하지 않으면 해당 매개변수에는 undefined가 할당됩니다. 이 경우 산술 연산 결과가 NaN이 되거나 프로그램이 비정상적으로 동작할 수 있습니다. 이러한 문제를 방지하기 위해 매개변수에 기본값을 미리 지정해 두는 기법을 의사 필수(pseudo mandatory) 매개변수라고 합니다. 인수가 생략되더라도 함수가 안전하게 동작하도록 만드는 것이 핵심입니다. 구현 방법 의사 필수 매개변수는 크게 두 가지 방식으로 구현할 수 있습니다. ES6 기본 매개변수(Default Para
JavaScript에서 객체에 특정 속성(property)이 존재하는지 확인해야 하는 경우가 자주 있습니다. 이럴 때 가장 널리 사용되는 방법은 hasOwnProperty() 메서드를 활용하는 것입니다.hasOwnProperty() 메서드란?hasOwnProperty()는 객체가 특정 속성을 자신의 직접적인 속성으로 가지고 있는지를 확인하는 메서드입니다. 상속받은 속성은 제외하고 오직 해당 객체 자체에 정의된 속성만 검사하므로, 정확한 속성 존재 여부 확인에 적합합니다.예제 코드다음은 버튼을 클릭하면 객체에 firstName 속성이
JavaScript에서 document.querySelectorAll() 메서드를 호출하면 선택된 요소들이 NodeList 형태로 반환됩니다. NodeList는 배열처럼 인덱스로 접근할 수 있고 length 속성도 가지고 있지만, 엄밀히 말해 배열이 아니기 때문에 map(), filter(), reduce() 같은 배열 메서드를 직접 사용할 수 없습니다. 따라서 배열의 다양한 메서드를 활용하려면 먼저 NodeList를 실제 배열로 변환해야 합니다. 방법 1 – Array.from() 사용하기 Array.from()은 유사 배열 객
TypeError: undefined는 객체가 아닙니다 오류는 값이 정의되지 않은(undefined) 객체의 속성에 접근하거나 해당 객체의 메서드를 호출하려고 할 때 발생합니다. 특히 이 오류 메시지는 Safari 브라우저에서만 이러한 형태로 표시됩니다. Chrome이나 Firefox에서는 동일한 상황에서 Cannot read properties of undefined처럼 약간 다른 문구가 출력되기 때문에, Safari에서 개발 중이라면 이 문구를 익혀두는 것이 도움이 됩니다. 아래는 이 오류가 실제로 어떻게 발생하는지 보여주는 J
자바스크립트(JavaScript)에서 switch 문은 함수 내부에 위치할 때 return 문을 포함할 수 있습니다. 이 경우 함수는 switch 문에서 일치하는 case를 만나는 즉시 해당 값을 반환하며, switch 문 뒤에 작성된 나머지 코드는 실행되지 않습니다.return 문 사용 시 주요 특징return 문이 실행되면 함수가 즉시 종료되므로, 각 case 뒤에 break 문을 따로 작성할 필요가 없습니다.switch 문이 함수 외부에 있다면 return 문을 사용할 수 없으며, 이 경우 SyntaxError가 발생합니다.일
웹 개발을 하다 보면 키보드 입력에 반응하여 값을 조작해야 하는 경우가 종종 있습니다. 예를 들어 게임이나 슬ider 컨트롤, 카운터 UI 등에서 방향키를 이용해 숫자를 늘리거나 줄이는 기능이 필요하죠.핵심 원리JavaScript에서는 keydown 이벤트를 활용하면 사용자가 키보드의 특정 키를 눌렀을 때 원하는 동작을 실행할 수 있습니다. 위쪽 방향키(↑)의 keyCode는 38, 아래쪽 방향키(↓)의 keyCode는 40입니다. 이 두 값을 비교하여 변수를 증가(++) 또는 감소(--)시키면 됩니다.전체 예제 코드다음은 키보드
JavaScript는 Python처럼 함수 호출 시 명명된 인수(named arguments)를 기본적으로 지원하지 않습니다. 하지만 객체 구조 분해 할당(destructuring)을 활용하면 명명된 인수와 동일한 효과를 손쉽게 구현할 수 있습니다. 명명된 인수의 장점 인수의 순서를 신경 쓰지 않고 이름으로 값을 전달할 수 있습니다. 필요한 값만 선택적으로 전달할 수 있으며, 누락된 속성은 기본값으로 처리됩니다. 함수 호출부만 봐도 어떤 값이 무엇을 의미하는지 알 수 있어 가독성이 크게 향상됩니다. 예제 코드 다음은 JavaSc
웹 페이지의 성능을 최적화하거나 특정 조건에서만 스크립트를 실행하고 싶을 때, JavaScript 파일을 동적으로 로드하는 기술이 매우 유용합니다. 이 글에서는 버튼 클릭 시 외부 JavaScript 파일을 불러오는 실전 예제를 통해 그 원리를 쉽게 설명해 드리겠습니다.동적 로딩이란 무엇인가?일반적으로 스크립트는 HTML 문서가 로드될 때 함께 읽히지만, 동적 로딩은 사용자의 행동(예: 버튼 클릭)이나 특정 조건에 따라 필요한 순간에 스크립트 파일을 추가로 불러오는 방식입니다. 이를 통해 초기 페이지 로딩 속도를 개선하고 리소스를
JavaScript에서 DOM 요소의 자식 노드를 제거하려면 removeChild() 메서드를 사용하면 됩니다. 이 메서드는 부모 노드에서 지정한 자식 노드를 삭제하며, 제거된 노드를 반환합니다. 아래는 버튼을 클릭하면 목록의 첫 번째 항목을 삭제하는 간단한 예제입니다.예제<!DOCTYPE html><html lang=ko><head><meta charset=UTF-8 /><meta name=viewport content=width=device-width, initial-scale=1
JavaScript에서는 사용자가 입력한 값이 올바른 소수(십진수)인지 확인해야 하는 경우가 종종 있습니다. 이럴 때 정규 표현식(Regular Expression)을 활용하면 간단하고 효율적으로 검증할 수 있습니다.정규 표현식 패턴 설명이 예제에서 사용된 정규 표현식은 다음과 같습니다./^[-+]?[0-9]+\.[0-9]+$/^ : 문자열의 시작을 의미합니다.[-+]? : 선택적으로 붙을 수 있는 부호(+ 또는 -)를 나타냅니다.[0-9]+ : 소수점 앞에 위치한 한 개 이상의 숫자를 의미합니다.\. : 소수점(.) 문자 그 자체
JavaScript의 정규식(Regular Expression)을 활용하면 사용자가 입력한 문자열이 숫자, 영문자, 밑줄(_)로만 구성되어 있는지 간단하게 검증할 수 있습니다. 핵심 패턴은 /^\w+$/이며, 각 요소는 다음과 같은 의미를 가집니다.^ : 문자열의 시작\w : 숫자, 영문자, 밑줄([A-Za-z0-9_])과 일치+ : 앞의 패턴이 한 번 이상 반복됨$ : 문자열의 끝즉, 공백이나 특수문자가 포함되면 패턴이 일치하지 않아 유효성 검사에 실패합니다. 다음은 이 원리를 적용한 전체 예제 코드입니다.예제 코드<!DOC