반응형 JavaScript42 [DateTimePicker] 캘린더 형식 input DateTimePicker 기본 사용법jquery.datetimepicker.full.js는 input 요소를 캘린더 형식으로 변환하여 사용자가 날짜와 시간을 쉽게 선택할 수 있도록 한다.기본적으로는 datetimepicker() 메서드를 호출하면 된다.위와 같이 작성하면 기본 달력이 팝업 형태로 표시된다. 한국어(KR) 표출 설정한국어 표출을 위해서는 i18n 옵션을 사용한다.한국어 locale 설정을 추가한 뒤 lang: 'kr'를 지정한다.이렇게 하면 요일, 월, 버튼 등이 한국어로 표출된다. 연, 월, 일, 시간 등등 다양한 입력 형식을 다루는 예시가 아래 링크에 나와있으니 필요한 내용을 참고하면 좋을 듯 하다.https://xdsoft.net/jqplugins/.. 2025. 9. 26. [지도 lib] Leaflet, 기본 컨트롤 위에 Custom Legend 배치하기 Leaflet을 사용하다 보면 기본 컨트롤(줌 컨트롤, 범례 등)의 DOM 순서 때문에 원하는 위치에 커스텀 범례를 배치하기 어려운 경우가 있다.예를 들어, 기본 zoomControl은 leaflet-top leaflet-left 영역에 추가되고, 이후에 legendFactory.custom()으로 만든 커스텀 범례를 붙이면 항상 줌 컨트롤 아래쪽에 배치되게 된다. 이번 포스팅에서는 커스텀 범례를 줌 컨트롤보다 위쪽에 표시하기 위한 방법을 정리해보았다. 목차 기본구조Leaflet은 컨트롤을 추가하면 아래와 같이 DOM 구조를 만든다. ... ... 여기서는 zoomControl이 먼저 생성되었기 때문에 커스텀 범례가 항상 그 아래에 위치하게 된다. 해결방법나는 이 문제를 .. 2025. 9. 24. 이미지 지연로딩 구현(Lazy Loading) 웹 페이지에 이미지가 많아지면 가장 먼저 체감되는 것은 로딩 속도 저하와 느린 사용자 경험이다.특히 모바일 환경에서는 초기 로딩이 길어질수록 이탈률도 크게 높아진다.이런 문제를 해결하기 위해 흔히 사용하는 기법이 바로 이미지 Lazy Loading이다. 나는 프로젝트에서 vue-lazyload@1.3.3 라이브러리를 도입하려 했지만,당시 구조적 제약 때문에 기본 디렉티브(v-lazy)를 그대로 사용할 수 없었다.그래서 결국 IntersectionObserver를 활용해 직접 Lazy Loading 디렉티브를 구현하게 되었고,오늘은 그 과정을 공유하려 한다. vue-lazyload의 기본 사용법일반적으로 지연 로딩은 vue-lazyload를 설치하면 간단히 사용할 수 있다.npm install vue-.. 2025. 9. 23. [TS] TypeScript 활용해보기 이번 포스팅에서는 TypeScript를 활용하여 스크립트 코드를 작성 및 활용하는 방법에 대해 정리해보았다.목차 TypeScript란?코드 안정성 확보, 개발 경험 개선을 목적으로 하며, “자바스크립트 + 타입 시스템”이라고 볼 수 있다.JS 코드에 **타입(type)**을 붙여서 에러를 미리 잡아내고, IDE 자동완성을 강화해준다. 효과내용버그 예방런타임 전, 잘못된 타입/데이터를 잡음협업 효율함수 시그니처만으로도 어떤 데이터 구조인지 확인 명확IDE 자동완성 강화TS 타입 정보 기반으로 하여 개발속도 향상리팩토링 안전성함수/객체 구조를 변경해도 타입 검사로 문제 확인 용이 JavaScript예시function add(a, b) { return a + b;}console.log(add("1", 2.. 2025. 9. 19. [지도 lib] 바람 자료 GIS상 애니메이션 표출(ol-wind.js) 오픈소스 윈드스트림 라이브러리인 ol-wind.js를 활용하여 OpenLayers 기반 지도에 바람 애니메이션을 표출해보았다. leaflet.js지도 기반의 표출 방법이 궁금하다면 아래 포스팅 참고 가능하다.https://gkawjdgml.tistory.com/entry/%EC%A7%80%EB%8F%84-lib-%EB%B0%94%EB%9E%8C-%EC%9E%90%EB%A3%8C-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%ED%91%9C%EC%B6%9Cleaflet-velocityjs [지도 lib] 바람 자료 GIS상 애니메이션 표출(leaflet-velocity.js)오픈소스 leaflet(지도 라이브러리), leaflet-velocity.js를 활용하여 바람자.. 2025. 9. 19. [Slider] 이미지 슬라이더 구현 JQuery-ui를 활용하여 상단 첨부된 이미지와 같은 형태의 이미지 슬라이더를 구현해보았다.기능은 아래와 같다. - 버튼을 활용한 이미지 전환(이전, 다음, 재생, 일시정지)- 슬라이더 스크롤 및 클릭을 통한 이미지 전환- 키보드(좌, 우, 스페이스바) 이벤트를 통한 이미지 전환 코드가 복잡하지 않으므로 하단에 첨부된 codePen 소스를 통해 기능 테스트와 js, css, html별 코드 분석이 가능하다. See the Pen image-player(sample) by HamJeong (@HamJeong) on CodePen.">See the Pen image-player(sample) by HamJeong (@HamJeong) on CodePen. 실제 서버에서 이미지 파일을 불러.. 2025. 8. 19. 이전 1 2 3 4 ··· 7 다음 반응형
