getBoundingClientRect와 IntersectionObserver의 차이점 및 활용 방법
getBoundingClientRect 메서드
getBoundingClientRect는 DOM API의 한 부분으로, 특정 요소의 뷰포트에 대한 위치와 크기 정보를 얻는 데 사용됩니다. 이 메서드는 DOMRect 객체를 반환하며, 이 객체에는 요소의 좌측 상단과 우측 하단이 뷰포트에 대한 좌표가 포함됩니다.
전통적인 이미지 지연 로딩 구현 방식에서는 scroll 이벤트를 감시하고, img 요소의 뷰포트 상단 ...
6월 22일 02:35에 게시됨
HTML5 Canvas API 및 데이터 저장 기능 개요
캔버스(Canvas) API
캔버스는 픽셀 기반의 비트맵 이미지와 벡터 그래픽(svg)을 처리하는 기능
캔버스 태그 사용 시 필수 속성: id, width, height
스타일에서 너비/높이 설정의 한계
CSS로 크기 지정 시 위치 오차 발생
위치 오차: 캔버스 내 요소가 이동한 후 위치 불일치
// 캔버스 환경 설정 및 작업 수행
const canvasElement = document.getElementById("myCa ...
6월 22일 01:47에 게시됨
웹 기반 데이터 시각화 기초: Canvas, SVG 및 ECharts 활용
Canvas를 사용한 그래픽 그리기
HTML5의 <canvas> 요소는 자바스크립트를 통해 그래픽을 동적으로 생성할 수 있는 도구입니다. 기본 크기는 300×150픽셀이며, 스타일 속성이 아닌 width와 height 속성으로 크기를 지정해야 합니다. 캔버스 내부에 텍스트나 HTML 요소를 직접 삽입해도 렌더링되지 않으며, 모든 그리기는 JavaScript를 통해 수행되어야 합니다.
<c ...
6월 22일 01:21에 게시됨
자바스크립트 정규표현식을 활용한 다국어 문자 및 특수문자 필터링과 키워드 중복 검증
프로젝트 요구사항 및 접근 방식
웹 프로젝트에서 체크박스(Checkbox) 목록의 텍스트를 기반으로 사용자가 입력한 키워드의 중복을 방지해야 하는 상황이 발생할 수 있습니다. 이를 해결하기 위해 클라이언트 단에서 자바스크립트를 활용한 다음과 같은 로직을 구성할 수 있습니다.
페이지 내 특정 체크박스 그룹의 라벨 텍스트를 추출하여 배열에 저장합니다.
사 ...
6월 21일 20:44에 게시됨
고양이 블로그 만들기
내용 목록
시작 동기
구현 방법
주요 기능 및 구현
향후 개선 사항
시작 동기
우리 집에 있는 작은 주황색 고양이는 성격이 좋아서, 그 고양이의 일상을 기록하는 간단한 블로그를 만들어 보기로 했습니다. 이를 통해 고양이와 함께하는 생활과 느낌을 기록하고자 합니다.
데모: https://unuliha.github.io/zhongqiu/index.html
소스코드: https://gitee.com/unuliha/b ...
6월 21일 18:29에 게시됨
Ramda로 객체 다루기: 불변성과 선언적 접근
Ramda를 활용한 함수형 프로그래밍에서 객체를 다루는 핵심 원칙은 불변성입니다. 이 글에서는 객체의 속성을 읽고, 수정하고, 병합하는 다양한 방법을 살펴봅니다.
속성 읽기: prop과 친구들
객체에서 특정 속성을 추출할 때 prop을 사용합니다. 예를 들어 사용자의 출생 국가를 확인하는 함수를 만들어봅시다.
const 국가_일치 = 국가 => equals(국가);
const 출생국 ...
6월 21일 16:14에 게시됨
다중 iframe 사용 시 발생하는 메모리 누수 문제와 해결 방안
메모리 누수란 무엇인가?
애플리케이션이 실행되기 위해서는 시스템 메모리 자원이 필요합니다. 운영체제나 런타임 환경은 프로그램의 요청에 따라 메모리를 할당하게 되며, 특히 장시간 실행되는 백그라운드 프로세스의 경우 사용하지 않는 메모리를 적절히 해제하지 않으면 점점 리소스를 소모하게 됩니다. 이렇게 더 이상 사용되지 않아야 할 메모리가 해제되지 않고 계 ...
6월 21일 16:10에 게시됨
JavaScript에서의 다양한 유틸리티 함수 구현
배열 내포함 여부 확인
하나의 배열이 다른 배열을 완전히 포함하는지 확인하는 방법입니다.
const isSubset = (arr1, arr2) => arr2.every(item => arr1.includes(item));
이벤트 버스 활용
이벤트를 전송하고 수신하는 방법입니다.
// 이벤트 발송
this.$bus.$emit('data-change', { field: 'value', key: 'uniqueKey' });
// 이벤트 수신
this.$bus.$on('data-rec ...
6월 20일 21:09에 게시됨
브라우저의 동일 출처 정책 문제 해결 방법
현대 웹 애플리케이션에서 프론트엔드와 백엔드가 별도의 도메인으로 운영되는 경우, 클라이언트가 다른 도메인으로 요청을 보낼 때 브라우저는 기본적으로 보안상의 이유로 요청을 차단합니다. 이 현상을 '크로스 오리진 문제'라고 하며, 이를 해결하기 위해 CORS (Cross-Origin Resource Sharing) 표준이 도입되었습니다.
CORS는 브라우저와 서버 모두가 지원 ...
6월 19일 17:01에 게시됨
의존성 관리: peerDependencies, devDependencies 그리고 dependencies
devDependencies
개발 단계에서 필요한 패키지를 지정하는 섹션으로, 이는 배포 환경에서는 포함되지 않습니다.
dependencies
이 섹션은 실제 서비스 운영에 필요한 패키지를 나타냅니다. 이러한 의존성이 없으면 프로젝트의 안정적인 동작에 문제가 생길 수 있습니다.
peerDependencies
주로 라이브러리를 개발할 때 사용되며, 호스트 환경에서 이미 설치된 특정 버전의 ...
6월 19일 01:00에 게시됨