자바스크립트의 다양한 빌트인 메소드와 기능을 설명하는 튜토리얼을 다룹니다.
또한 다양한 상황에 사용할 수 있는 예제와 설명을 통해 바로 실제 상황에 적용할 수 있는 스크립트를 제공합니다.
DOM은 HTML 문서의 계층 구조를 트리 형태로 표현하고 각 요소를 DOM 노드(DOM Node)로 다룹니다. DOM(Document Object Model)은 웹 페이지의 구조를 표현하는 객체 모델입니다. HTML 문서의 요소들을 자바스크립트에서 객체 형태로 다룰 수 있으며 웹 페이지와 상호작용할 수 있습니다. DOM Node 기본 개념 위의 예시와 같이 HTML 문서는 노드로 구성됩니다. DOM Node 접근 방법 자바스크립트로 HTML 요소에 … Read more
자바스크립트의 canvas 요소와 drawImage() 메소드를 사용하여 이미지를 그리는 방법은 쉽습니다. 또한 이를 통해 다양한 그래픽을 동적으로 생성할 수 있습니다. canvas는 HTML5에서 도입된 요소로, 자바스크립트로 그림을 그리거나 이미지를 삽입하는 데 사용됩니다. drawImage 기본 canvas 요소는 HTML에 정의하며, 자바스크립트를 사용하여 그림을 그립니다. 이미지를 삽입하려면 CanvasRenderingContext2D.drawImage() 메서드를 사용해야합니다. 이 메소드는 이미지 객체를 캔버스에 그리는 기능을 제공합니다. drawImage 크기 … Read more
requestAnimationFrame() 메소드는 자바스크립트에서 최적화된 성능으로 애니메이션을 구현하게해주는 중요한 메소드입니다. 이 메소드는 브라우저의 렌더링 주기(fps)에 맞춰 애니메이션을 부드럽게 실행하도록 도와줍니다. 특히 CPU와 GPU 자원을 효율적으로 사용할 수 있도록 해줍니다. requestAnimationFrame 기본 개념 메소드의 주요 기능은 화면을 새로 고칠 때마다 애니메이션을 한 프레임씩 실행해줍니다. 화면을 갱신하는 주기는 보통 60Hz, 즉 1초에 60번(16.7ms 간격)으로 설정되어 있습니다. 이 메서드는 … Read more
브라우저에서 클립보드 기능을 사용하려면 자바스크립트의 Clipboard API를 사용하여 복사, 붙여넣기 등의 작업을 수행할 수 있습니다. Clipboard API를 사용하면 텍스트를 복사하거나 붙여넣는 기능을 웹 애플리케이션에 추가할 수 있습니다. 이는 Clipboard 객체를 통해 클립보드 기능과 상호작용하며, 사용자가 데이터를 복사하거나 붙여넣을 수 있게합니다. 클립보드 복사 navigator.clipboard.writeText() 메소드를 사용하여 텍스트를 복사할 수 있습니다. writeText() 메소드는 Promise 객체를 리턴하며, 성공적으로 … Read more
async await 명령어는 자바스크립트에서 비동기 코드를 더 직관적이고 동기적인 방식으로 작성할 수 있게 해주는 문법입니다. 이 두 가지는 Promise 객체를 기반으로 동작하며, 비동기 작업을 보다 쉽게 처리할 수 있도록 도와줍니다. async await 기본 개념 예제 1: 기본적인 사용 위의 예제를 개발자 도구에서 실행하면 이미지와 같은 결과를 얻을 수 있습니다. 먼저 getData() 함수가 async로 정의되어 있고, … Read more
Promise 객체는 비동기 작업의 완료 또는 실패를 처리해줍니다. 이는 비동기 작업이 끝날 때 결과를 처리하여 콜백 지옥을 피하게 해주고 코드의 가독성과 유지보수성을 높여줍니다. Promise 기본 개념 이 객체는 세 가지 상태를 가집니다: 객체가 생성되자마자 비동기 작업을 실행하고, then 또는 catch 메소드를 통해 작업의 성공 실패 결과를 처리할 수 있습니다. Promise 생성자 객체 생성 시 executor … Read more
canvas 요소는 2D 그래픽을 그릴 수 있게 하는 매우 강력한 도구입니다. 이를 활용하면 다양한 시각 효과나 인터랙티브한 그래픽을 구현할 수 있습니다. 또한 Pointer Events는 마우스, 터치, 스타일러스 등 다양한 입력 장치를 효율적으로 처리할 수 있게 해 주는 API입니다. 이 포스트에서는 Pointer Events와 canvas를 사용해 그림판을 만드는 방법을 알아보겠습니다. Pointer Events 란? Pointer Events는 마우스 이벤트(Mouse … Read more
HTML5의 canvas 요소는 그림 그리기, 애니메이션 렌더링 등에 사용할 수 있는 요소입니다. 이는 비트맵 이미지를 처리할 수 있는 렌더링 화면을 제공하며, 자바스크립트로 직접 제어하여 다양한 형태의 그래픽을 그릴 수 있게 해줍니다. 이번 포스트에서는 자바스크립트로 canvas에 도형을 그리는 방법을 알아보고, 여러 가지 예제를 통해 그 사용법을 익혀보겠습니다. 그리기 기본 설정 그림을 그리려면 먼저 HTML에 <canvas> 요소를 … Read more
자바스크립트에서 Pointer Events를 사용한 드래그 앤 드롭 예제를 알아보겠습니다. Pointer Events는 Mouse Events, Touch Events 등을 하나의 API로 통합하여 다양한 입력 장치에서 더 일관성 있는 이벤트 처리를 할 수 있도록 해줍니다. 드래그 앤 드롭 HTML 구조 먼저, 간단한 HTML 구조를 만들어 드래그 앤 드롭할 요소를 설정합니다. 자바스크립트로 드래그 앤 드롭 기능 구현 이제 Pointer Events를 … Read more
Pointer Events는 마우스나 터치, 펜 등 다양한 입력 장치에서 발생하는 이벤트를 하나의 API로 통합하여 처리하도록 만들어진 W3C의 표준입니다. 이 API는 Mouse Events, Touch Events와 같은 개별 이벤트들을 하나로 통합하여 다양한 입력 장치를 일관성 있게 다룰 수 있도록 해줍니다. Pointer Events는 HTML5에서 처음 도입되었으며 주로 터치와 마우스 이벤트를 통합하여 모바일과 데스크탑 환경에서 모두 잘 작동하도록 도와줍니다. … Read more
재귀함수(Recursive Function)는 여러가지 문제해결 방법론 중의 하나로, 함수가 자기 자신을 반복적으로 호출하여 문제를 해결합니다. 이는 기본적으로 종료 조건과 재귀 조건을 가지고 있어야 합니다. 재귀함수 기본 구조 Base Case: 재귀 호출을 종료할 조건을 말합니다. 이 조건을 만나면 더 이상 재귀 호출을 하지 않고 결과 값을 리턴합니다. Recursive Case: 자기 자신을 호출하는 부분으로 문제를 더 작은 단위로 … Read more
Math.PI는 자바스크립트에서 원주율(π)의 값, 약 3.141592를 나타내는 상수입니다. 원주율은 원의 둘레와 지름의 비율이며, 자바스크립트에서는 Math.PI를 사용하면 이 값을 바로 참조할 수 있습니다. 예제 1: 원의 둘레 구하기 원의 둘레는 “2 x π x 반지름”으로 계산할 수 있습니다. 여기서 Math.PI를 사용하여 원의 둘레를 계산할 수 있습니다. 개발자 도구에서 예제 코드를 실행하면 위의 이미지와 같은 결과를 얻을 … Read more
시간 측정 시 performance.now() 메소드를 사용해 고정밀 측정 결과를 얻을 수 있습니다. 이 메소드는 밀리초 단위로 현재 시간을 리턴하여 매우 정확한 시간 측정 작업이 가능합니다. 함수 실행 시간 측정 예시 개발자 도구를 통해 위의 코드를 실행하면 이미지와 같은 결과를 확인할 수 있습니다. 위의 예제 코드에서는 실행에 시간이 조금 걸리는 test() 함수를 먼저 작성했습니다. 다음으로 performance.now() … Read more
원본: 자바스크립트 함수 실행에 걸리는 시간 알아내기 다음의 기능을 사용하면 함수 실행 시간 측정을 할 수 있습니다. Date.now()로 실행 시간 측정 이 메소드를 사용하면 현재 시간을 밀리초 단위로 가져올 수 있습니다. 이러한 기능을 활용해 함수가 실행되기 전과 후의 시간을 알아볼 수 있습니다. 함수 실행 후의 시간에서 함수 실행 전의 시간을 빼면 함수가 실행되는데 얼마만큼의 시간이 … Read more
원본: 자바스크립트 타이머 함수: setTimeout, setInterval 스크립트 작성 시 타이밍 이벤트를 사용하여 특정 코드의 실행을 지연시키거나 특정 간격으로 반복할 수 있습니다. 자바스크립트에서는 이러한 작업을 수행하기 위해 setTimeout()과 setInterval() 두 가지 기본 메소드를 제공합니다. setTimeout 타이머 함수 이 메소드는 전달된 함수의 실행을 지정된 시간만큼 지연시킵니다. 메소드에서 받는 매개변수는 호출하려는 함수와 함수 실행을 지연할 시간(밀리초) 두 가지입니다. … Read more
원본: 자바스크립트에서 퍼센트 백분율 계산하기 백분율 계산은 수학, 금융, 교육 등의 분야에서 중요한 자리를 차지하고 있습니다. 웹 개발 및 자바스크립트 개발에서 백분율 계산은 보다 동적이고 사용자 친화적인 애플리케이션을 구축하게 하고 데이터를 명확하고 의미 있게 표현할 수 있도록 하기 때문에 중요한 면을 가집니다. 이 포스트에서는 자바스크립트를 통해 백분율 계산하는 과정을 알아보겠습니다. 백분율 계산하는 방법 자바스크립트에서 퍼센트를 … Read more
원본: JavaScript: Number toFixed() method 이 포스트에서는 자바스크립트 Number 객체의 toFixed() 메소드 사용 방법을 문법 구문과 예제를 통해 알아보겠습니다. toFixed 설명 자바스크립트에서 toFixed() 메소드는 숫자를 고정 소수점 표기법으로 변환(필요한 경우 반올림)하고 해당 값을 문자열로 리턴하는 Number 객체의 메소드 입니다. 이 메소드는 Number 객체의 메소드이기 때문에 Number 클래스의 특정 인스턴스를 통해 호출해야 합니다. 문법 구문 메소드의 … Read more
원본: Quick Tip: 자바스크립트에서 문자열 숫자 변환 방법 스크립트를 작성하다 보면 폼 양식 같은 요소에서 받은 값은 항상 문자열입니다. 이처럼 숫자가 문자열 형식으로 저장되는 다양한 상황있습니다. 자바스크립트는 일반적으로 숫자만 들어있는 문자열을 자동으로 변환해 처리해 줍니다. 하지만 문자열에서 특정 숫자를 추출하거나 복잡하게 변환해야 하는 경우도 있습니다. 이 포스트에서는 문자열 숫자 변환 방법 세 가지를 알아보겠습니다. Number … Read more
원본: 자바스크립트 절대값 – Math.abs() 이 포스트에서는 자바스크립트의 절대값 Math.abs() 메소드를 살펴보고 실제 사용 사례를 통해 구문 사용 방법을 알아보겠습니다. 절대값 구하는 방법 Math.abs() 메소드는 자바스크립트에서 숫자의 절대값 변환 결과를 리턴해 줍니다. 다시 말해, 숫자의 기본 부호를 제거하고 양수 값을 리턴합니다. 개발자 도구에서 위의 예제 코드를 확인해 보면 결과로 2를 리턴하는 것을 확인할 수 있습니다. … Read more
원본: 자바스크립트 문자열 길이 String 객체의 length 속성은 문자열의 문자 수를 리턴합니다. 문자열 길이 length 문법 length 속성의 문법 구문은 다음과 같습니다: 여기서 str은 String 객체입니다. 문자열 길이 length 리턴 값 length 속성의 리턴 값은 문자열의 문자 수를 리턴합니다. String.length 속성은 UTF-16 문자열 포맷에 따라 문자 수를 계산합니다. 일부 희귀한 문자는 두 개의 코드 단위로 … Read more