jQuery + Ajax 무한 스크롤 (페이징)
·
Web/JS & jQuery
쇼핑몰등에서 마우스 그래그를 하다보면 상품이 계속 생겨나는 것을 볼 수 있다.이를 무한스크롤이라 하는데 일종의 페이징이다.- 아래 소스코드를 JSFIDDLE 에서 돌려보자 HTML 영역에 모두 집어넣고 RUN 시키면 동작한다. 심지어 가짜JSON API까지 사용하여 상품이 있는 것 처럼 테스트 가능하다 상품 목록 (0/0) Loading... 우선 위 코드는 이해하는것 보다 복사해서 쓰려고 만들어 둔 것이다.1., HTML 내 이 부분을 자신의 영역에 복사한다 Loading... 2. 그, 다음 스크립트 코드를 모두 복사한다...
글자 Byte 계산 (SMS발송 등...)
·
Web/JS & jQuery
jQuery로 작성된 바이트 체크 샘플SMS 발송 관련 페이지에서 주로 사용된다.소스코드의 자바스크립트 영역에서 2가지 방식을 지정해서 사용하면 된다.1. const MAX_BYTES = 100; - 허용가능한 최대 byte 수 2. const useUtf8Calculation = true; - UTF8 형태로 byte를 계산할지 여부 (영문2, 한글3, 이모지4) 3. const textInput = $('#text-input'); - 입력 영역 지정 (textarea 를 지정한다. 이 부분은 키입력 이벤트와 이모지 등에서 사용된다) 실시간 바이트 체크 ..
동적 form 전송
·
Web/JS & jQuery
html 영역안에 동적으로 을 생성한 후 값을 다른 페이지로 넘기는 방법인데이를 함수로 처리 하였으며마라미터를 JSON 형태로 받아 가독성을 좋게 만들었다.반드시 내장된 함수중 queryToJSON() 을 함께 구현하여야 한다.- 간단하게 아래와 같은 방법으로 사용할 수 있다. var p = {}; p.userid = 'kim09'; p.classCode = 'S000000001'; postSubmit('/home/index', p); 이 함수는 몇년전에 개발해놓고 많이 사용하는 편 이다.매개변수를 하나 더 주어 함수를 1개로 만들수 있지만, 그냥 이름이 다른 2개 만들어놓고사용하는게 개인적으로는 더 편했다./** Post방식으로 동적폼을 생성하여 Submit*..
.gitIgnore 를 개발언어에 맞도록 무시될 확장자나 폴더 생성
·
Web/Web개발 관련사이트
Git 사용시 특정 확장자나 폴더를 Git 관리에서 무시할수 있도록 .gitignore 을 생성해야 한다.이를 자신의 언어에 맞도록 생성해 주는 사이트가 있어, 메모해둔다https://www.toptal.com/developers/gitignore/ gitignore.ioCreate useful .gitignore files for your projectwww.toptal.com- gitignore.io 라는 도메인도 동일하다 (리다이렉트 됨)- 자동완성이 지원되는 textbox에서 언어를 고른다음 생성 버튼을 누르면 ignore 파일의 탬플릿이 생성되고이를 복사해서 파일에 붙여넣기 하면 끝
TechEmpower Web Framework Benchmarks (2023-10)
·
Web/Web개발 관련사이트
2023년 10월 ROUND22가 가장 최종 버전인 듯하다. 아래 사이트에서 웹 개발에 어떤 프레임워크가 성능적으로 좋은지 참고해볼 만하다. 프레임워크를 선택할 때는 이름을 알 수 없는 듣보잡 프레임워크들은 단순히 참고만 하고, 많이 사용되고 잘 알려진 프레임워크들을 비교하여 사용하자. 개인적인 생각으로는 ASP.NET Core가 성능, 안정성, MS 제품이라는 면에서 독보적이지만, 과거 NET의 심한 삽질로 국내에서 유독 약한 경향이 있다. Spring Boot는 매우 훌륭하지만, 구닥다리 무료 JDK 1.8을 사용한다면 30년 된 구축 아파트에 리모델링해 사는 느낌이기에 유료라도 최신 JDK를 사용해야 할 것으로 보여진다. PHP 할배는 여전히 건재하다. 2024년 현재 국내의 웹 프레임워크를 보면 ..
JS와 jQuery 를 사용한 모듈화
·
Web/JS & jQuery
js 파일로 빼내지 않고, 서버 뷰 페이지를 사용하여 분할뷰나 include 를 사용하여 페이지 구성을 하고 있을 때 사용하기 적합하다.모듈화는 주로 이런 용도가 아니라 객체를 대신하여, 하나의 유틸리티 같은 모듈을 만들때 사용되지만서버뷰 페이지 jsp, asp.net, php 등의 경우 index라는 페이지 속을 영역별로 각각의 페이지로 쪼갰을 떄index 페이지에 스크립트를 몰아 넣을때 용이하다.-- 아래의 사용자는 가짜  사용자 데이터다 koreanjson 의 fake json 데이터를 가져다 사용하였다 아래의 예시가 Spring 에서 index.jsp안에 페이지를 분할했을 때의 예시다. User Section Todo Section Blog Section   위..
유효성 검사
·
Web/JS & jQuery
프로젝트가 바뀔때 마다 유효성 검사 코드를 매번 외우고 있는 것이 아니라서기존에 작성했던 코드를 찾게 되는일이 발생하여 포스팅으로 백업해 두려고 함예제 코드에만 jQuery 를 사용하고 실제 코드는 일반 스크립트를 사용하며각 메소드에 매개변수를 enum 값을 받지 않도록 수정해여 사용하는 것도 방법이다. 예제는 HS란 객체로 구현함- jsFiddle 의  html 영역에 코드를 넣고 테스트 가능합니다. 유효성 검사 테스트 검사
jQuery-Confirm 플러그인
·
Web/JS & jQuery
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 영역에 복사..