MUI 프레임워크를 활용한 무한 스크롤 페이징 구현
MUI의 pullRefresh 컴포넌트를 활용하면 모바일 웹 앱에서 상단 당기기 새로고침과 하단 끝까지 스크롤 시 추가 데이터를 로드하는 무한 스크롤 기능을 구현할 수 있다. 이 글에서는 하단 스크롤 시 서버에서 페이지 단위로 데이터를 가져와 화면에 렌더링하는 방법을 다룬다.
1. 필수 리소스 로드
MUI의 CSS와 JavaScript 파일, 그리고 데이터 조작을 위한 jQuery를 문 ...
9월 8일 09:58에 게시됨
jQuery EasyUI 기반 관리 시스템 사용자 관리 모 구현
1. 사용자 관리 모듈의 역할
관리 시스(MIS)에서 사용자 관리는 권한 기반 접근 제어(RBAC)의 출발점이다. 이 모듈은 시스템 로그인 계정의 등록, 수정, 삭제, 비밀번호 재설정, 활성/비활성 처리 등을 담당하며, 이후 역할(Role) 배정, 메뉴 한, 업무 권한 등 모든 권한 설정의 기준 데이터가 된다.
보안상 다음 사항을 수한다.
최고 관리자(Administrator) 계정은 수 ...
9월 7일 19:43에 게시됨
ASP.NET MVC 환경에서 jQuery 연동을 위한 프로젝트 구조 및 뷰 설정
프로젝트 초기 설정 및 뷰 모델 정의
jQuery 의 핵심 기능을 실습하기 위해 산봉우리 데이터와 높이를 관리하는 MVC 애플리케이션을 구축했습니다. jQuery 는 클라이언트 측 기술이므로, 본 예제에서는 Razor 뷰 엔진이 생성하는 HTML 마크업 구조에 주목합니다. 아래 코드는 해당 애플리케이션의 주요 뷰 파일을 나타냅니다.
@using MvcApp.Models;
@model IEnumerable ...
8월 30일 16:51에 게시됨
jQuery의 Deferred 객체 설명
jQuery의 deferred 객체는 jQuery 1.5.0부터 도입된 중요한 기능으로, AJAX 요청 처리 방식을 크게 바꾸었습니다. 이 객체는 비동기 작업과 동기 작업 모두에서 콜백 함수를 관리하는 데 유용합니다.
Deferred 객체란?
웹 개발에서 종종 시간이 오래 걸리는 JavaScript 작업을 만나게 됩니다. 이러한 작업에는 AJAX 요청이나 대규모 배열 순회 등이 포함됩니다. 일반적으 ...
8월 30일 15:31에 게시됨
jQuery 요소 제거 메서드 비교: empty(), remove(), detach()의 동작 차이점 이해하기
메서드별 기능概述
empty() 메서드
empty() 메서드는 선택된 요소의 모든 자식 노드와 텍스트 노드를 제거합니다. 이 메서드는 요소 자체를 삭제하지 않으며, 해당 요소의 내용물만 비웁니다. DOM 명세에 따르면 요소 내부의 텍스트 문자열도 자식 노드로 취급되므로, empty()는 텍스트 노드까지 모두 제거합니다.
remove([selector]) 메서드
remove() 메서드는 선택된 ...
8월 24일 18:08에 게시됨
jQuery 이벤트 제어 심화 및 Bootstrap v3 기반 반응형 레이아웃 구축 가이드
jQuery 이벤트 흐름 제어 및 고급 활용
웹 인터랙션 개발 시 이벤트의 기본 동작을 차단하거나 상위로 전파되는 것을 막는 것은 필수적입니다. 또한 동적으로 생성된 요소를 효율적으로 관리하기 위한 이벤트 위임과 페이지 로딩 시점 제어, 내장 유틸리티 함수를 활용하면 코드의 안정성을 크게 높일 수 있습니다.
기본 동작 차단 및 이벤트 버블링 방지
폼 제출이나 링 ...
8월 19일 18:34에 게시됨
프론트엔드 개발 시 발생하는 주요 문제 해결 기술
1. 속성 기반 요소 선택특정 속성 값을 기반으로 DOM 요소를 선택하는 방법입니다.// jQuery 사용
$('input[data-type="user-category"]');
// 원생 JavaScript 사용
document.querySelectorAll('input[data-type="user-category"]');2. 동적 생성 요소 이벤트 처리페이지 로딩 후 동적으로 생성된 요소에 이벤트를 바인딩할 때는 document 레벨에서 처리해야 합니다.// j ...
8월 15일 00:05에 게시됨
jQuery wPaint 플러그인을 활용한 웹 기반 드로잉 및 이미지 어노테이션 구현
웹 애플리케이션에서 이미지 위에 직접 마킹을 하거나 자유롭게 그림을 그려야 하는 경우, jQuery 기반의 wPaint 플러그인은 매우 효율적인 선택지입니다. 실시간 드로잉 기능을 제공할 뿐만 아니라, 생성된 결과물을 서버로 전송하여 저장하는 일련의 과정을 간결하게 구현할 수 있습니다.
1. 드로잉 컨테이너 및 리소스 설정
먼저 그림이 그려질 영역을 HTML로 정의하고 ...
7월 24일 04:40에 게시됨
zTree 비동기 로드 환경에서 전체 노드 검색 기능 구현하기
zTree는 방대한 양의 계층형 데이터를 렌더링할 때 뛰어난 성능과 유연성을 제공하는 JavaScript 트리 플러그인입니다. 데이터의 크기가 수만 개 이상으로 커질 경우, 초기 렌더링 부하를 줄이기 위해 점진적 비동기 로드(Async Load) 방식을 사용하는 것이 일반적입니다.
그러나 비동기 로드 방식을 적용하면 내장된 검색 기능인 getNodesByParamFuzzy 또는 getNodesByPar ...
7월 13일 02:46에 게시됨
jQuery의 $(document).ready()와 window.onload 차이점 분석
자바스크립트 기반 웹 개발에서 특정 시점에 함수를 실행하기 위해 이벤트 훅(hook)을 사용한다. 대표적인 두 가지 방식으로는 순수 JavaScript의 window.onload와 jQuery의 $(document).ready()가 있다. 두 방법 모두 페이지 로딩과 관련되지만, 동작 타이밍과 사용성 측면에서 중요한 차이가 존재한다.
1. 실행 시점의 차이
window.onload는 문서 내 모든 리소스 — HTML ...
7월 10일 18:11에 게시됨