최연탄 DOM은 HTML 문서의 계층 구조를 트리 형태로 표현하고 각 요소를 DOM 노드(DOM Node)로 다룹니다. DOM(Document Object Model)은 웹 페이지의 구조를 표현하는 객체 모델입니다. HTML 문서의 요소들을 자바스크립트에서 객체 형태로 다룰 수 있으며 웹 페이지와 상호작용할 수 있습니다. DOM Node 기본 개념 위의 예시와 같이 HTML 문서는 노드로 구성됩니다. DOM Node 접근 방법 자바스크립트로 HTML 요소에 … Read more
HTML에서 구조화된 데이터를 표현하려면 ul 같은 목록을 사용해야합니다. 목록 태그 중 대표적인 것은 ul (Unordered List)과 ol (Ordered List)입니다. 이 두 태그의 관련 속성, 스타일링 등을 자세히 알아보겠습니다. ul (Unordered List) – 순서 없는 목록 목록에 순서를 지정하지 않으려면 이 태그를 사용해야 합니다. 태그를 사용하면 각각의 항목 앞에 기본적으로 점(bullet)이 표시됩니다. 위의 예제를 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
HTML의 img 태그는 웹 페이지에 이미지를 삽입할 때 사용하는 태그입니다. 이는 자체적으로 닫히는 태그이며, 이미지를 페이지에 표시할 때 필요한 여러 속성들 설정할 수 있습니다. 기본적으로 이미지의 경로, 대체 텍스트(alt 속성), 너비와 높이 등을 지정할 수 있습니다. img 기본 사용 img 주요 속성 src (source) 이미지를 불러올 경로를 지정합니다. alt (alternative text) 이미지가 로드되지 않거나 접근성 … Read more
브라우저에서 클립보드 기능을 사용하려면 자바스크립트의 Clipboard API를 사용하여 복사, 붙여넣기 등의 작업을 수행할 수 있습니다. Clipboard API를 사용하면 텍스트를 복사하거나 붙여넣는 기능을 웹 애플리케이션에 추가할 수 있습니다. 이는 Clipboard 객체를 통해 클립보드 기능과 상호작용하며, 사용자가 데이터를 복사하거나 붙여넣을 수 있게합니다. 클립보드 복사 navigator.clipboard.writeText() 메소드를 사용하여 텍스트를 복사할 수 있습니다. writeText() 메소드는 Promise 객체를 리턴하며, 성공적으로 … Read more
CSS 미디어 쿼리(Media Query)는 웹 페이지를 다양한 화면 크기와 해상도에 맞게 조정하는 CSS 기술입니다. 즉, 사용자의 디바이스나 화면 환경에 따라 스타일을 다르게 적용할 수 있습니다. 이를 통해 HTML 요소의 레이아웃을 반응형으로 만들 수 있습니다. 미디어 쿼리 기본 구조 이는 @media 규칙을 사용하여 정의합니다. 이 규칙은 특정 조건(화면의 너비, 높이, 해상도 등)에 따라 스타일을 적용할 수 … Read more
CSS의 Flexbox 레이아웃은 웹 페이지를 구성할 때 자주 사용하는 모델입니다. Flexbox 레이아웃을 사용하면 HTML 요소가 일정한 공간에 배치되며, 다양한 화면 크기와 조건에서 적절하게 배치합니다. 이는 주로 수평, 수직 레이아웃을 쉽게 처리할 수 있게 해 줍니다. 기본 개념 이 레이아웃은 두 가지 주요 개념으로 구성됩니다: Flexbox 기본 속성 Flex Container 속성: Flex Item 속성: 예제 1: … 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
원본: What is a GIF? GIF 포맷은 Graphics Interchange Format의 약자로, 애니메이션을 허용하는 래스터 이미지 파일 형식의 한 종류입니다. 이는 연속적으로 표시되는 일련의 이미지(또는 프레임)로 구성되어 이미지가 움직이는 것 처럼 보이게 합니다. 종종 볼 수 있는 짧게 반복되는 비디오(밈)를 만드는 데 사용됩니다. 가장 일반적으로 Twitter 및 Instagram과 같은 소셜 미디어 플랫폼에서 애니메이션 이미지를 만들 때 … Read more