validation 처리 관련 마지막으로 살펴볼 것은 validation 메서드 중 하나인 remote이다. remote는 이름 대로 서버를 호출해서 원격에서 validation을 확인 받는다. 쉽게 접할 수 있는 예는 아이디가 중복되었는지를 확인하는 경우가 일반적이다. 아이디 * remote는 서버를 ajax 형태로 호출해서 결과를 전달받는다. 따라서 remote의 속성으로는 ajax를 호출하기 위한 options 객체가 설정된다. $("#myform").validate({ rules : { id : { required : true, remote : { url : "../ValidateionMock", type : "post data : { id : function(){ return $("#id").v..

앞 포스트에서 validation plugin의 기본 사용법에 대해 알아보았다. 이번 포스트에서는 validation plugin 을 사용하면서 필요한 customization에 대해 살펴보자. 1. 사용자 정의 메서드의 추가 앞서 validation plugin이 다양한 validation 체크 메서드를 제공한다고 소개한바 있다. 하지만 우리는 여전히 배고프다.(적절한가? ㅠㅠ) 다행히 validate plugin은 addMethod를 이용해서 사용자 정의 메서드를 등록할 수 있게 해준다. https://jqueryvalidation.org/jQuery.validator.addMethod/ jQuery.validator.addMethod() | jQuery Validation Plugin Descrip..

1. 플러그인 설치 일반적인 javascript 라이브러리와 마찬가지로 이 플러그인 역시 다운로드해서 설치하거나 cdn 방식으로 설치할 수 있다. 특별한 이유가 아니라면 CDN 방식의 사용을 권장한다. 이 플러그인은 jQuery 기반이기 때문에 당연히 jQuery가 먼저 삽입되어야 한다. 2. 기본 함수 사용법 다음 폼에 대한 validation을 처리해보면서 사용법을 익혀보자. 사용자 정의 Validation 처리 이름 * 이메일 * 가장 핵심적인 함수는 validate 라는 함수이다. 이 함수는 jQuery를 통해 폼 요소에 추가된다. 따라서 기본 사용법은 아래와 같다. $("#myform").validate({}); 이 함수는 form에서 submit 이벤트가 발생할 때 자동적으로 호출되기 때문에 ..

1. 웹 클라이언트에서의 Validation 처리란? 웹 프로그래밍을 하는 과정에서 클라이언트로부터 무언가를 입력 받기 위해서는 form을 이용한다. 그런데 개발자의 입장에서는 "사용자가 이런 형태로 입력해야하는데.. "하는 값들이 있다. 예를 들어 이름은 필수 입력 항목이고, 2자 이상, 10자 이내여야 한다거나 이메일의 양식을 준수하거나 비밀번호는 영문, 숫자, 특수문자를 포함해서 8글자 이상 16글자 미만 등이다. 사용자가 개발자의 의도대로 값을 잘 넣었는지 확인하는 것을 validation 처리라고 한다. 일반적으로 validation 처리는 클라이언트 단에서 한번, 서버단에서 한번 실행하는 것이 좋다. 클라이언트 단에서 실행되는 validation 처리는 사용자가 값을 제대로 입력했는지 못했는지..

cli 기반으로 Vue를 만들다 보면 main.js에 이해하기 어려운 코드가 적혀있다. import Vue from 'vue' import App from './App.vue’ new Vue({ render: h => h(App), }).$mount('#app') 바로 render라는 속성이 정의된 부분인다. h=>h(App)이라고 적힌 부분이다. 이 문장의 얌전한 표현은 다음과 같다. render: function (createElement) { return createElement(App); } 즉 내부적으로 createElement라는 함수를 파라미터로 받고 이 함수에 App을 넘겨줘서 element를 생성한다. 여기서 createElement는 함수 입장에서는 단지 변수명이기 때문에 h로 바꿔보자..

node js library 검색 엔진 - https://www.npmjs.com/package/package package Easy package.json exports. www.npmjs.com babeljs.io - https://babeljs.io/repl Babel · The compiler for next generation JavaScript The compiler for next generation JavaScript babeljs.io eslint.org/docs/rules: eslint의 rule 목록 - https://eslint.org/docs/rules/ List of available rules eslint.org

vanilla js를 이용해서 배열을 반복할 때 forEach 문장을 사용할 수 있다. 문제는 forEach는 배열 요소를 처음부터 끝까지 순회하기 때문에 중간에 break 할 수가 없다. let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; nums.forEach(item => { console.log("찾는 중.." + item); if (item == 4) { console.log("발견"); return true; } }) 위 코드의 출력 결과는 아래와 같다. 원하는 아이탬을 찾았다면 중간에 벗어나고 싶은데 기본적으로 forEach문장은 그런 행동이 불가능하다. 이때 some() 함수를 사용하며 원하는 동작이 가능하다. some()에서 return true를 하면 반복문을..