JavaScript 날짜 메서드란?JavaScript의 Date 객체는 현재 날짜와 시간을 손쉽게 조회하고 조작할 수 있도록 다양한 getter 메서드를 제공합니다. 연도, 월, 일뿐만 아니라 시, 분, 초, 밀리초까지 세밀하게 가져올 수 있어 달력, 타이머, 로그 기록 등 다양한 기능을 구현할 때 유용하게 활용됩니다.다음은 자주 사용되는 대표적인 날짜 메서드 목록입니다.메서드설명getFullYear()연도를 4자리 숫자로 반환합니다. (예: 2024)getMonth()월을 숫자로 반환합니다. 단, 0이 1월이므로 실제 월보다 1
웹 개발을 하다 보면 span 요소에 담긴 텍스트를 읽어와야 하는 경우가 자주 발생합니다. JavaScript에서는 querySelector 메서드로 해당 요소를 선택한 뒤, innerHTML 속성을 사용하면 간단하게 텍스트를 가져올 수 있습니다.아래 예제를 통해 실제 동작 방식을 살펴보겠습니다.코드 예제<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-
symbol.description 속성은 심볼(Symbol) 객체에 선택적으로 부여된 설명(description)을 반환하며, 읽기 전용(read-only) 속성입니다.심볼은 ES6에서 도입된 원시 타입으로, 주로 객체의 고유한 프로퍼티 키를 만들 때 사용됩니다. 이때 description 속성을 활용하면 디버깅이나 로깅 시 해당 심볼이 어떤 용도로 생성되었는지 쉽게 파악할 수 있습니다.주요 특징심볼 생성 시 전달한 문자열 인자가 그대로 설명으로 저장됩니다.설명 없이 생성된 심볼의 경우 undefined를 반환합니다.Symbol.i
CSS와 JavaScript를 활용하면 별도의 라이브러리 없이도 화면 하단에 잠시 나타났다가 자동으로 사라지는 스낵바(Snackbar) 또는 토스트(Toast) 알림 메시지를 손쉽게 구현할 수 있습니다. 아래 예제 코드를 통해 그 과정을 단계별로 살펴보겠습니다.전체 예제 코드<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> &
JavaScript를 사용하면 버튼 클릭 한 번으로 동영상이나 특정 요소를 전체 화면 모드로 손쉽게 전환할 수 있습니다. 이 글에서는 Fullscreen API를 활용해 동영상을 전체 화면으로 여는 방법을 예제 코드와 함께 자세히 알아보겠습니다.전체 화면 API란?Fullscreen API는 웹 페이지의 특정 요소(동영상, 이미지, div 등)를 브라우저 창 전체에 표시할 수 있도록 지원하는 표준 JavaScript 인터페이스입니다. 핵심 메서드는 requestFullscreen()이며, 브라우저 호환성을 위해 벤더 접두사가 붙은
JavaScript와 SVG를 활용하면 사용자가 페이지를 스크롤할 때마다 SVG 경로(path)가 점진적으로 그려지는 시각적 효과를 쉽게 구현할 수 있습니다. 핵심 원리는 SVG의 stroke-dasharray와 stroke-dashoffset 속성을 이용하는 것입니다. 동작 원리 getTotalLength(): SVG 경로의 전체 길이를 픽셀 단위로 반환합니다. stroke-dasharray: 선을 점선 형태로 만들어, 경로 전체 길이만큼 설정하면 선 하나가 통째로 하나의 대시가 됩니다. stroke-dashoffset: 대시
CSS와 JavaScript를 활용하면 페이지를 스크롤할 때 화면 상단에 고정되는 스티키(sticky) 헤더를 쉽게 구현할 수 있습니다. 핵심 원리는 JavaScript의 scroll 이벤트를 감지하여, 스크롤 위치가 헤더의 원래 위치를 넘어서면 CSS 클래스를 추가해 position: fixed 속성을 적용하는 것입니다.동작 원리이 기능은 다음 세 가지 요소로 구성됩니다.CSS: .sticky 클래스에 position: fixed와 top: 0을 지정하여 요소를 뷰포트 최상단에 고정합니다.JavaScript: window.onsc
CSS와 JavaScript를 함께 사용하면 클릭 한 번으로 좋아요(👍) 버튼과 싫어요(👎) 버튼을 자유롭게 전환할 수 있습니다. 이 기능은 Font Awesome 아이콘의 클래스를 동적으로 변경하는 방식으로 간단하게 구현할 수 있으며, SNS나 블로그 같은 웹 서비스에서 자주 활용되는 UI 패턴입니다.구현 원리핵심 원리는 다음과 같습니다.1. Font Awesome의 fa-thumbs-up(좋아요)과 fa-thumbs-down(싫어요) 아이콘 클래스를 활용합니다.2. JavaScript의 classList.toggle() 메서
웹 개발에서 버튼 클릭 한 번으로 특정 요소를 숨겼다가 다시 보여주는 토글(Toggle) 기능은 매우 자주 사용됩니다. JavaScript에서는 요소의 style.display 속성 값을 확인하고 변경하는 방식으로 이 기능을 간단하게 구현할 수 있습니다.요소의 display 값이 none이면 화면에서 숨겨진 상태이므로 block으로 변경해 표시하고, 그렇지 않으면 none으로 설정해 숨기는 조건문을 활용하면 됩니다.예제 코드<!DOCTYPE html> <html> <head> <meta name
웹 페이지에서 버튼을 클릭할 때마다 특정 텍스트의 내용이 서로 다른 문구로 바뀌도록 만들고 싶다면 텍스트 전환(toggle) 기능을 활용하면 됩니다. JavaScript에서는 innerHTML 속성과 간단한 조건문만으로 이 기능을 손쉽게 구현할 수 있습니다.아래는 버튼을 클릭할 때마다 Old Text와 New Text가 번갈아 나타나도록 처리하는 전체 예제 코드입니다. 예제 코드 <!DOCTYPE html> <html> <head> <meta name="viewport" con
웹 개발을 하다 보면 버튼을 클릭할 때마다 특정 요소에 클래스를 추가했다가 다시 제거하는 동작, 즉 토글(toggle) 기능이 필요한 경우가 자주 있습니다. 예를 들어 다크 모드 전환, 메뉴 열기/닫기, 아코디언 펼치기 같은 UI 인터랙션이 대표적입니다.JavaScript에서는 classList.toggle() 메서드 하나만으로 이 기능을 손쉽게 구현할 수 있습니다. 이 메서드는 해당 클래스가 요소에 없으면 추가하고, 이미 있으면 제거해 주기 때문에 별도의 조건문 없이 깔끔한 코드를 작성할 수 있습니다.예제 코드아래 예제는 버튼을
JavaScript를 사용하면 classList.add() 메서드를 통해 HTML 요소에 클래스 이름을 손쉽게 추가할 수 있습니다. 이 방법은 기존에 적용된 클래스를 덮어쓰지 않고 새로운 클래스만 추가하기 때문에 매우 안전하고 널리 사용됩니다.아래는 버튼을 클릭했을 때 특정 div 요소에 새로운 스타일 클래스를 적용하는 예제입니다.예제<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-wi
JavaScript의 Array reverse() 메서드는 배열에 담긴 요소들의 순서를 반대로 뒤집는 기능을 합니다. 즉, 첫 번째 요소는 맨 뒤로 이동하고 마지막 요소는 맨 앞으로 이동합니다.참고로 reverse() 메서드는 새로운 배열을 반환하는 것이 아니라 원본 배열 자체를 직접 변경한다는 점을 기억해 두면 좋습니다. 원본 배열을 유지하고 싶다면 먼저 복사본을 만든 후 사용하는 것이 안전합니다.다음은 배열 reverse() 메서드를 활용한 예제 코드입니다.예제<!DOCTYPE html> <html lang=en
자바스크립트 join() 메서드란?자바스크립트의 Array.join() 메서드는 배열에 담긴 개별 요소들을 하나의 문자열로 합쳐 변환할 때 사용하는 대표적인 배열 메서드입니다.join() 메서드는 인자로 구분자(separator)를 받을 수 있으며, 구분자를 지정하지 않으면 기본적으로 쉼표(,)로 요소들이 연결됩니다. 빈 문자열()을 전달하면 요소 사이에 아무 문자 없이 그대로 이어 붙일 수 있습니다.다음은 Array.join() 메서드의 동작을 확인할 수 있는 예제 코드입니다.예제 코드<!DOCTYPE html> <
Symbol.isConcatSpreadable 심볼이란? Symbol.isConcatSpreadable은 자바스크립트의 잘 알려진 심볼(well-known symbol) 중 하나로, Array.prototype.concat() 메서드로 배열을 병합할 때 중첩된 배열을 개별 요소로 펼칠지(flatten) 여부를 지정하는 데 사용됩니다. 기본적으로 concat() 메서드는 배열 인수를 만나면 해당 배열의 요소들을 하나씩 꺼내 새 배열에 추가합니다. 하지만 대상 객체의 Symbol.isConcatSpreadable 속성을 false로 설
Symbol.keyFor() 함수란?JavaScript의 Symbol.keyFor() 함수는 주어진 심볼(symbol)과 연결된 키(key)를 찾아 반환하는 메서드입니다. 이때 키는 전역 심볼 레지스트리(global symbol registry)에서 검색됩니다.참고로 Symbol.keyFor()는 Symbol.for() 메서드를 통해 전역 레지스트리에 등록된 심볼에만 정상적으로 작동합니다. 만약 등록되지 않은 심볼을 인자로 전달하면 undefined가 반환되므로, 두 메서드는 항상 짝을 이루어 사용하는 것이 좋습니다.다음은 Symb
Symbol.toString() 메서드란?자바스크립트의 Symbol.toString() 메서드는 지정된 심볼(Symbol) 객체의 문자열 표현을 반환합니다. 심볼은 ES6(ECMAScript 2015)에서 도입된 원시 타입으로, 이름 충돌 없이 고유한 객체 프로퍼티 키를 생성할 때 주로 사용됩니다.심볼 값은 문자열 연결 연산자(+)로 직접 변환할 수 없기 때문에, 화면이나 콘솔에 출력하려면 반드시 toString() 메서드를 호출해야 합니다. 반환되는 문자열은 항상 Symbol(설명) 형태를 따릅니다.예제 코드다음은 Symbol.t
JavaScript에서 shift() 메서드는 배열의 첫 번째 요소를 제거하고, 제거된 요소를 반환하는 함수입니다. 이 메서드는 원본 배열 자체를 변경(mutate)하며, 배열이 비어 있으면 undefined를 반환합니다.아래 예제를 통해 shift() 메서드가 실제로 어떻게 동작하는지 확인해 보겠습니다.예제 코드<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta name=&
JavaScript 배열 slice() 메서드란? JavaScript의 Array slice() 메서드는 기존(더 큰) 배열에서 선택한 요소들만 추출하여 새로운 배열을 반환하는 메서드입니다. 가장 중요한 특징은 원본 배열을 전혀 변경하지 않고(non-destructive) 그대로 유지한다는 점입니다. 기본 문법 arr.slice(start, end) start (선택 사항): 추출을 시작할 인덱스입니다. 음수 값을 넣으면 배열 끝에서부터 계산됩니다. end (선택 사항): 추출을 종료할 인덱스이며, 이 인덱스의 요소는 포함되지 않
JavaScript의 some() 메서드는 배열의 요소 중 단 하나라도 주어진 조건(테스트 함수)을 통과하는지 확인하는 기능입니다. 이 테스트는 배열의 각 요소에 대해 실행되는 콜백 함수로 구현되며, 하나라도 통하면 즉시 true를 반환하고 더 이상 순회하지 않습니다. 모든 요소가 조건을 만족하지 않으면 false를 반환합니다.즉, some()은 배열 안에 조건을 충족하는 요소가 최소한 하나 있는가?라는 질문에 답하는 메서드라고 할 수 있습니다.some() 메서드의 동작 원리콜백 함수가 배열의 각 요소에 대해 순서대로 호출됩니다.콜