위챗 미니프로그램에서 사진의 EXIF 메타데이터 추출하는 방법
위챗 미니프로그램 환경에서는 브라우저의 전역 객체인 window나 document가 존재하지 않기 때문에, 일반적인 EXIF 라이브러리를 그대로 사용하면 런타임 에러가 발생합니다. 가장 널리 쓰이는 exif-js 라이브러리를 미니프로그램에 맞게 수정하여 이미지의 촬영 정보를 읽어오는 방법을 살펴봅니다.
1. 라이브러리 설치
먼저 프로젝트 경로에서 npm을 통해 라이브러리를 ...
6월 23일 23:59에 게시됨
Bootstrap 날짜 선택기 최종 사용 가이드: 입문부터 전문가까지
Bootstrap 날짜 선택기 최종 사용 가이드: 입문부터 전문가까지
【무료 다운로드 링크】bootstrap-datepicker Twitter bootstrap용 날짜 선택기 (@twbs) 프로젝트 주소: https://gitcode.com/gh_mirrors/bo/bootstrap-datepicker
Bootstrap 날짜 선택기는 기능이 풍부하고 사용하기 쉬운 날짜 선택 컴포넌트로, Twitter Bootstrap 프레임워크를 위해 설계되었습니다. 이 날 ...
6월 23일 20:02에 게시됨
백그라운드 스타일을 적용한 로그인 폼 구현
HTML 구조 설계
기본적인 로그인 폼은 중앙에 위치한 컨테이너로 구성되며, 사용자 이름과 비밀번호 입력 필드, 자동 로그인 체크박스, 제출 버튼 및 추가 링크 요소를 포함합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1 ...
6월 23일 18:05에 게시됨
Vue.js 개발 환경 설정 및 핵심 문법 정리
let과 변수 선언의 스코프 주의사항
JavaScript에서 let은 블록 스코프를 가지며, 호이스팅(hoisting)이 발생하지 않습니다. 따라서 초기화 없이 변수를 참조하면 ReferenceError가 발생합니다.
// 오류 발생: Cannot access 'x' before initialization
console.log(x);
let x = 10;
반면 var는 호이스팅되어 undefined로 초기화되므로 에러 없이 실행됩니다.
Vue 인스턴 ...
6월 22일 02:46에 게시됨
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에 게시됨