웹 애플리케이션을 개발하다 보면 사용자가 이미지를 서버에 업로드하기 전에 선택한 이미지를 화면에 바로 확인할 수 있도록 하는 기능이 필요할 때가 많습니다. 이럴 때 JavaScript의 FileReader() 객체를 사용하면 별도의 서버 통신 없이 클라이언트 측에서 손쉽게 이미지 미리보기를 구현할 수 있습니다. 예제 코드 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta nam
특정 텍스트가 포함된 div 요소를 화면에서 숨기려면 먼저 getElementsByClassName() 메서드를 사용해 같은 클래스명을 가진 div 요소들을 모두 가져와야 합니다. 이후 for 반복문으로 각 요소를 하나씩 순회하면서 OR(||) 조건을 활용해 원하는 텍스트와 일치하는지 확인합니다.조건이 일치하는 div에는 yourDiv.style.display = none 값을 설정하면 해당 요소가 화면에서 사라지게 됩니다.다음은 실제로 동작하는 전체 예제 코드입니다.예제 코드<!DOCTYPE html> <html
자바스크립트에서 상수를 선언하려면 const 키워드를 사용합니다. const로 선언된 변수는 최초 할당 이후 값을 다시 재할당할 수 없으며, 재할당을 시도하면 TypeError가 발생합니다. 아래 예제를 통해 실제 동작 과정을 확인해 보겠습니다. 예제 코드 <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif; } </styl
JavaScript에는 두 가지 중요한 특수 숫자 값이 있습니다. 하나는 유효한 숫자가 아님을 나타내는 NaN(Not a Number)이고, 다른 하나는 무한대를 의미하는 Infinity입니다. 예를 들어 어떤 수를 0으로 나누면 Infinity가 반환되고, 숫자로 변환할 수 없는 문자열에 Number() 함수를 적용하면 NaN이 반환됩니다.다음 코드는 JavaScript에서 NaN과 Infinity가 어떻게 동작하는지 확인할 수 있는 간단한 예제입니다.예제 코드<!DOCTYPE html> <html lang=en&
JavaScript에서 문자열 안에 특정 단어나 패턴이 포함되어 있는지 확인하고 그 위치를 찾으려면 문자열 객체의 search() 메서드를 사용할 수 있습니다. 이 메서드는 일치하는 문자열이 처음 발견된 인덱스를 반환하며, 찾지 못한 경우 -1을 반환합니다. 예제 다음은 JavaScript에서 문자열을 검색하는 전체 코드입니다. <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8" /> <m
JavaScript에서 숫자가 표현 가능한 최대 범위(Number.MAX_VALUE, 약 1.79 × 10308)를 초과하면 Infinity(양의 무한대) 또는 -Infinity(음의 무한대)로 자동 변환됩니다. 다음은 이러한 양수 및 음수 무한대 값을 출력하는 예제 코드입니다.예제 코드<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, ini
JavaScript에서 배열 스플라이싱(Splicing)의 의미배열 스플라이싱(Splicing)이란 Array.splice() 메서드를 사용하여 기존 배열에 새로운 요소를 추가하거나, 특정 위치의 요소를 제거하는 작업을 의미합니다. 이때 제거된 요소들은 하나의 배열 형태로 반환됩니다.splice() 메서드의 기본 문법은 다음과 같습니다.arr.splice(startIndex, deleteCount, item1, item2, ...);startIndex: 변경을 시작할 인덱스 위치deleteCount: 제거할 요소의 개수 (0이면 아
JavaScript에서 배열을 생성하는 방법 중 하나는 new 키워드와 함께 Array() 생성자를 사용하는 것입니다. 이 방식은 배열 요소를 인수로 전달하여 새로운 배열 객체를 만들 수 있습니다.new 키워드를 사용한 배열 생성 예제다음은 new 키워드를 사용하여 JavaScript 배열을 만드는 전체 코드입니다.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name=
JavaScript에서 연관 배열(Associative Array)은 인덱스 번호 대신 사용자가 직접 정의한 키(key)를 사용하는 객체를 의미합니다. 쉽게 말해, 일반 배열처럼 0, 1, 2 같은 숫자 인덱스로 접근하는 것이 아니라 Name, Age와 같은 문자열 키로 값을 저장하고 조회할 수 있는 자료구조입니다.연관 배열의 특징JavaScript에서 연관 배열은 사실상 객체(Object)와 동일하게 동작합니다.일반 배열과 달리 length 속성을 제공하지 않습니다.일반적인 for 루프로는 순회할 수 없으며, for...in 문이
JavaScript에서 날짜와 시간을 다루려면 Date 객체를 사용해야 합니다. Date 객체는 new Date() 생성자를 통해 손쉽게 만들 수 있으며, 현재 날짜와 시간뿐만 아니라 특정 날짜를 지정하여 생성할 수도 있습니다.Date 객체 생성 방법Date 객체는 다양한 방식으로 생성할 수 있습니다.new Date() : 현재 날짜와 시간으로 객체를 생성합니다.new Date(milliseconds) : 1970년 1월 1일 이후 경과한 밀리초를 기준으로 객체를 생성합니다.new Date(dateString) : 날짜 문자열(예:
JavaScript에서는 setDate() 메서드를 사용하여 Date 객체의 일(day) 값을 손쉽게 변경할 수 있습니다. 이 메서드는 1~31 범위의 정수를 인자로 받으며, 지정한 값이 해당 월의 마지막 날짜를 초과하면 자동으로 다음 달로 넘어가 처리됩니다. 예제 다음은 JavaScript에서 날짜의 일(day)을 설정하는 전체 코드입니다 − <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8&qu
클로저란 무엇인가? 자바스크립트에서 클로저(Closure)는 외부 함수가 이미 실행을 마치고 반환된 이후에도, 내부 함수가 외부 함수의 스코프(변수 환경)에 계속 접근할 수 있도록 해주는 개념입니다. 쉽게 말해, 내부 함수는 자신이 생성된 시점의 외부 함수 변수를 언제든 참조할 수 있습니다. 클로저는 데이터 은닉, 콜백 함수 처리, 커링(currying) 등 다양한 프로그래밍 패턴에서 핵심적인 역할을 하기 때문에 자바스크립트 개발자라면 반드시 이해하고 넘어가야 할 개념입니다. 예제 코드 다음은 클로저를 활용해 두 숫자를 더하는 간
JavaScript로 개발하다 보면 특정 값이 진짜 배열인지 아닌지를 판별해야 하는 상황이 자주 발생합니다. 이때 가장 확실하고 널리 권장되는 방법은 바로 Array.isArray() 메서드를 사용하는 것입니다.Array.isArray()란?Array.isArray() 메서드는 인자로 전달된 값이 배열이면 true, 그렇지 않으면 false라는 불리언(Boolean) 값을 반환합니다. 이 반환값을 기준으로 객체가 배열인지 여부를 간단하게 검증할 수 있습니다.참고로 typeof []는 배열임에도 불구하고 object를 반환하기 때문에
ES6에서 도입된 Rest 연산자(...)와 Spread 연산자(...)는 동일한 기호(...)를 사용하지만, 사용되는 위치와 역할이 완전히 다릅니다. 이 글에서는 두 연산자의 개념과 차이점, 그리고 실제 동작 예제를 살펴보겠습니다. Rest 연산자(...) Rest 연산자는 함수를 호출할 때 인수의 개수를 제한하지 않고, 전달된 초과 인수들을 하나의 배열로 묶어 접근할 수 있게 해줍니다. 또한 배열이나 객체를 구조 분해(destructuring)할 때 나머지 요소를 한꺼번에 담는 용도로도 활용됩니다. Spread 연산자(...)
유니코드 속성 이스케이프(Unicode Property Escapes)는 ES2018에서 도입된 자바스크립트 정규식 기능입니다. u(유니코드) 플래그와 함께 사용하면 문자가 가진 유니코드 속성을 기준으로 원하는 문자를 손쉽게 매칭할 수 있습니다.기본 문법\p{속성명} 또는 \p{속성명=속성값} 형태로 작성합니다. 반대로 해당 속성을 가지지 않은 문자를 찾으려면 대문자인 \P를 사용하면 됩니다. 이 기능은 반드시 u 플래그와 함께 사용해야 하며, 그렇지 않으면 에러가 발생합니다.자주 사용되는 유니코드 속성Emoji_Presentati
후방탐색(Lookbehind)이란?정규식에서 후방탐색 어서션(Lookbehind Assertion)은 특정 패턴 앞에 다른 패턴이 존재하는 경우에만 해당 패턴을 매칭하도록 하는 기능입니다. 즉, 매칭 대상 문자열의 앞부분을 조건으로 검사하되, 그 앞부분 자체는 결과에 포함하지 않습니다.예를 들어, $50, $99처럼 달러 기호($) 뒤에 오는 숫자만 추출하고 싶다면, 후방탐색을 사용해 달러 기호는 결과에서 제외하고 숫자만 깔끔하게 가져올 수 있습니다.기본 문법긍정형 후방탐색: (?<=패턴) — 앞에 해당 패턴이 있을 때만 매칭
자바스크립트에서는 정규 표현식의 특정 부분을 하나의 그룹으로 묶어 다룰 수 있습니다. 이는 해당 문자들을 괄호 ()로 감싸는 방식으로 구현되며, ES2018(ES9)부터는 각 그룹에 고유한 이름을 부여할 수 있는 명명된 캡처 그룹(Named Capture Groups) 기능이 추가되었습니다.명명된 캡처 그룹은 (?<이름>패턴) 형식으로 작성합니다. 단순히 위치 번호로 그룹을 참조하는 기존 방식과 달리, 의미 있는 이름으로 값을 직접 가져올 수 있어 코드의 가독성과 유지보수성이 크게 향상됩니다.기본 문법예를 들어 네 자리
JavaScript의 Promise.finally() 메서드는 프로미스가 이행(fulfilled)되었든 거부(rejected)되었든 상관없이 항상 콜백 함수를 호출합니다. 즉, 프로미스가 성공했는지 실패했는지와 무관하게 마지막에 반드시 실행해야 하는 작업을 처리할 때 매우 유용합니다.예를 들어 로딩 스피너 숨기기, 서버 연결 종료, 임시 리소스 정리처럼 성공·실패 여부와 관계없이 공통으로 수행해야 하는 후처리 작업을 finally() 블록에 작성하면 then()과 catch()에 동일한 코드를 중복해서 넣을 필요가 없어 코드가 훨씬
JavaScript 정규 표현식의 dotAll 플래그란?JavaScript에서 dotAll은 정규 표현식 객체가 갖는 읽기 전용 속성으로, 해당 정규 표현식에 s 플래그가 설정되어 있는지 여부에 따라 true 또는 false를 반환합니다.s 플래그(dotAll 모드)를 사용하면 점(.) 메타 문자가 줄바꿈 문자(\n, \r 등)까지도 매칭할 수 있게 됩니다. 기본적으로 점은 줄바꿈 문자를 제외한 모든 문자와 일치하지만, s 플래그가 설정되면 이러한 제한이 해제됩니다.다음은 JavaScript에서 정규 표현식에 dotAll 플래그를
JavaScript에서 모듈을 가져오고 내보내는 방법은 코드를 체계적으로 관리하고 재사용성을 높이는 핵심 기능입니다. 이 글에서는 ES6 모듈 시스템을 활용하여 import와 export를 실제 예제와 함께 살펴보겠습니다.참고: 아래 예제를 실행하기 위해서는 반드시 localhost 서버를 실행해야 합니다. 브라우저의 보안 정책상 file:// 프로토콜로는 ES6 모듈이 동작하지 않기 때문입니다.예제 코드1. index.html<!DOCTYPE html> <html lang=en> <head> <