쇼핑몰등에서 마우스 그래그를 하다보면 상품이 계속 생겨나는 것을 볼 수 있다.이를 무한스크롤이라 하는데 일종의 페이징이다.- 아래 소스코드를 JSFIDDLE 에서 돌려보자 HTML 영역에 모두 집어넣고 RUN 시키면 동작한다. 심지어 가짜JSON API까지 사용하여 상품이 있는 것 처럼 테스트 가능하다 상품 목록 (0/0) Loading... 우선 위 코드는 이해하는것 보다 복사해서 쓰려고 만들어 둔 것이다.1., HTML 내 이 부분을 자신의 영역에 복사한다 Loading... 2. 그, 다음 스크립트 코드를 모두 복사한다...

jQuery로 작성된 바이트 체크 샘플SMS 발송 관련 페이지에서 주로 사용된다.소스코드의 자바스크립트 영역에서 2가지 방식을 지정해서 사용하면 된다.1. const MAX_BYTES = 100; - 허용가능한 최대 byte 수 2. const useUtf8Calculation = true; - UTF8 형태로 byte를 계산할지 여부 (영문2, 한글3, 이모지4) 3. const textInput = $('#text-input'); - 입력 영역 지정 (textarea 를 지정한다. 이 부분은 키입력 이벤트와 이모지 등에서 사용된다) 실시간 바이트 체크 ..

html 영역안에 동적으로 을 생성한 후 값을 다른 페이지로 넘기는 방법인데이를 함수로 처리 하였으며마라미터를 JSON 형태로 받아 가독성을 좋게 만들었다.반드시 내장된 함수중 queryToJSON() 을 함께 구현하여야 한다.- 간단하게 아래와 같은 방법으로 사용할 수 있다. var p = {}; p.userid = 'kim09'; p.classCode = 'S000000001'; postSubmit('/home/index', p); 이 함수는 몇년전에 개발해놓고 많이 사용하는 편 이다.매개변수를 하나 더 주어 함수를 1개로 만들수 있지만, 그냥 이름이 다른 2개 만들어놓고사용하는게 개인적으로는 더 편했다./** Post방식으로 동적폼을 생성하여 Submit*..

js 파일로 빼내지 않고, 서버 뷰 페이지를 사용하여 분할뷰나 include 를 사용하여 페이지 구성을 하고 있을 때 사용하기 적합하다.모듈화는 주로 이런 용도가 아니라 객체를 대신하여, 하나의 유틸리티 같은 모듈을 만들때 사용되지만서버뷰 페이지 jsp, asp.net, php 등의 경우 index라는 페이지 속을 영역별로 각각의 페이지로 쪼갰을 떄index 페이지에 스크립트를 몰아 넣을때 용이하다.-- 아래의 사용자는 가짜  사용자 데이터다 koreanjson 의 fake json 데이터를 가져다 사용하였다 아래의 예시가 Spring 에서 index.jsp안에 페이지를 분할했을 때의 예시다. User Section Todo Section Blog Section   위..

프로젝트가 바뀔때 마다 유효성 검사 코드를 매번 외우고 있는 것이 아니라서기존에 작성했던 코드를 찾게 되는일이 발생하여 포스팅으로 백업해 두려고 함예제 코드에만 jQuery 를 사용하고 실제 코드는 일반 스크립트를 사용하며각 메소드에 매개변수를 enum 값을 받지 않도록 수정해여 사용하는 것도 방법이다. 예제는 HS란 객체로 구현함- jsFiddle 의  html 영역에 코드를 넣고 테스트 가능합니다. 유효성 검사 테스트 검사

https://craftpip.github.io/jquery-confirm/  jquery-confirm.js | The multipurpose alert & confirmA multipurpose alert & confirm plugin, alternative to the native alert() and confirm() functions. Supports features like auto-close, themes, animations, and more.craftpip.github.io    설명보다는 사이트에 한번 가서 직접 보는것이 빠르다.위 사이트에는 여러가지 기능들에 대한 도움말이 있지만, 샘플로 Alert 과 Confirm 을 작성 하였다.아래 코드를 jsfiddle 의 html 영역에 복사..

c# 에서 매우 많이 사용하는 String 확장메소드를 JavaScript에 구현하여 사용해 보았다.아래는 문자열 확장메소드에 대한 설명1. String.prototype.format C#의 String.Format 메서드와 유사한 기능을 제공합니다. 문자열 내의 자리 표시자(예: {0}, {1} 등)를 매개변수로 전달된 값들로 대체합니다. 예를 들어, "Hello, {0}!".format("World")는 "Hello, World!"로 변환됩니다. 2. String.isNullOrEmpty 이 메서드는 주어진 문자열이 null, undefined, 또는 빈 문자열인지 여부를 검사합니다. C#의 string.IsNullOrEmpty 메서드와 동일한 역할을 합니다. 이 메서드를 사용하면 문자열이 유효한지 ..

https://jsonplaceholder.typicode.com/guide/ JSONPlaceholder - GuideGuide Below you'll find examples using Fetch API but you can JSONPlaceholder with any other language. You can copy paste the code in your browser console to quickly test JSONPlaceholder. Getting a resource fetch('https://jsonplaceholder.typicode.com/posts/jsonplaceholder.typicode.com JSONPlaceholderJSONPlaceholder는 프론트엔드 개발자들이 비동..