전진

TextInput에서 글자수 입력 제한을 받는 방법은 Input의 maxlength를 이용하는 방법이 있다.

<input id="title" placeholder="" type="text" maxlength="50">

위와 같은 방법으로 글자수 입력 제한을 둘수가 있는데..

실제로 사용해 보면 영문이나 숫자는 maxlength에 입력된 길이 대로 입력이 제한 되는것을 볼수 있지만..

한글은 그렇지 않은것을 볼수가 있다.

<input id="title" class="form-control" placeholder="" type="text" maxlength="50" onblur="inputLengthCheck(this);">

function inputLengthCheck(eventInput){

var inputText = $(eventInput).val();

var inputMaxLength = $(eventInput).prop("maxlength");

var j = 0;

var count = 0;

for(var i = 0;i < inputText.length;i++) { 

val = escape(inputText.charAt(i)).length; 

if(val == 6){

j++;

}

j++;

if(j <= inputMaxLength){

count++;

}

}

if(j > inputMaxLength){

$(eventInput).val(inputText.substr(0, count));

}

}

그래서 만든 코드..

한글일 경우 길이를 2를 더하고 그외의 문자일 경우 1을 더해서 실질적인 길이를 반환해준다.

onblur에 준 이유는 영문이나 숫자는 입력 될때마다 길이를 체크해 정해진 길이 이상으로 입력이 될때 바로바로 체크가 가능하지만..한글의 경우 입력 완료후 엔터를 치거나 스페이스바를 쳐야만 확인이 가능하다. 그래서 Input에서 포커스가 빠져 나갈때 길이 확인을 해 정해진 길이만큼만 놔두고 나머지를 잘라내는 방법을 사용했다.

data = {

title : "title",

subTitle : "subTitle",

metaTitle : "metaTitle",

ymnews005 : [{aaa:"aaa", bbb:"bbb"},{aaa:"aaa", bbb:"bbb"}]

};

위와 같은 데이터를 jQuery에서 Ajax통신으로 SpringMVC로 파라미터를 넘길 경우..물론 방식은 POST방식..

심각: Servlet.service() for servlet [rest] in context with path [] threw exception [Request processing failed; nested exception is org.springframework.beans.InvalidPropertyException: Invalid property 'ymnews005[0][cardstatckArtclId]' of bean class [ymcms.cms.ka.model.ArtclMasterM1VO]: Property referenced in indexed property path 'ymnews005[0][cardstatckArtclId]' is neither an array nor a List nor a Map; returned value was [ID0000002]] with root cause

org.springframework.beans.InvalidPropertyException: Invalid property 'ymnews005[0][cardstatckArtclId]' of bean class [ymcms.cms.ka.model.ArtclMasterM1VO]: Property referenced in indexed property path 'ymnews005[0][cardstat........

뭔지는 모르겠지만..심각한 오류란다.

이는 jQuery에서 넘긴 데이터중 배열값이 제대로 전달 되지 않아서 생기는 문제이다.

SpringMVC에서 VO를 이용하여 파라미터로 받고 이를 자동으로 맵핑시키는 과정에서 생기는 문제.

jQuery에서 보내는 데이터 형식은 ymnews005[0][cardstatckArtclId]이것과 같은데 자바에서 원하는 형식은 ymnews005[0].cardstatckArtclId 이런 형식을 원하는 듯하다.

그럼 어떻게 해야할까..

JavaScript에서 데이터를 보낼때 원하는 형식으로 보내면 되는것..

ymnews005[0].cardstatckArtclId = "asdf";

이런식으로 데이터를 넣어서 보내면 문제는 해결..

참고 블로그는 http://www.bmchild.com/2014/02/spring-mvc-3-property-referenced-in.html

자바 스크립트의 Undefined Check..

var undefinedCheck = undefined;

if(typeof undefinedCheck === undefined){

alert("typeof undefinedCheck === undefined");

}

if(typeof undefinedCheck == undefined){

alert("typeof undefinedCheck == undefined");

}

if(typeof undefinedCheck === "undefined"){

alert("typeof undefinedCheck === 'undefined'");

}

if(typeof undefinedCheck == "undefined"){

alert("typeof undefinedCheck == 'undefined'");

}

위의 코드에서 실행 되는건 마지막 두개..

타입 체크 할때 undefined 자체를 객체로 인식해 비교 하는줄 알았는데..

그게 아니라 문자열로 비교를 한다.

JavaScript에서 문자열으 치환할때 사용하는 함수는 replace()를 이요한다.

string.replace("beforeString", "replaceString");

위의 코드를 사용 할 경우 문장에서 첫번째 글자나 단어만 치환된다.

그럼 아래 와같은 코드를 사용 하면 모두 바꿀 수 있다.

string.replace(/beforeString/gi, "replaceString");

고치기 이전의 단어를 감싸던 곁따옴표나 홑따옴표 대신 /를 이용해서 단어를 감싸고 옵션격인 gi를 붙여준다.

g는 문자열을 모두다 검색한다는 옵션이고, i는 대소문자를 가리지 않고 검사 한다는 옵션이다.

정규표현식 신기하네..

JavaScript - 함수

함수?

JavaScript에서는 함수도 하나의 자료형으로 볼수 있다.

JavaScript의 함수 종류에는 익명 함수와 선억적 함수로 나뉜다.

언뜻 보면 익명 함수와 선언적 함수 같아 보인다. 하지만 차이점은 있다. 그 차이점은 무엇인가?

익명 함수의 경우 함수가 선언되기 이전에 함수를 사용할 경우 오류가 발생해 실행 되지 않는다.

 선언적 함수는 선언과 사용의 순서와 상관없이 실행된다.

 차이점은 브라우저는 Script의 내용을 읽기전 먼저 선언적 함수를 읽어들인다 그렇기 때문에 선언적 함수의 경우엔 선언의 위치와 상관없이 사용이 가능한 것이다.

 그리고 동일한 이름의 함수가 2개 선언되고 호출 되었을 경우 뒤에 위치한 함수가 호출될 경우..함수도 코드의 집합을 나타내는 자료형이기 때문에 뒤에 위치한 함수가 이전에 선언한 함수를 덮어 씌운다. 그래서 이후에 선언한 함수가 실행 된다.

JavaScript의 배열의 선언에 대해서 알아 보겠다.

var array1 = new Array();

Array()는 길이가 정해지지 않은 배열을 선언 할 때 사용 된다.

var array2 = new Array(5);

Array(5)는 길이가 5인 배열을 선언 한다.

var array3 =  new Array(111, 222, 333, 444);

Array(111, 222, 333, 444)는 배열에 111, 222, 333, 444네개의 데이터를 갖는 배열을 선언 한다.

상황에 맞게 선언 하도록 하자.

JavaScript의 삼항 연산자란 무엇일까?

다음과 같은 if문이 있다.

var i = 1;

if(i > 0){

alert("0보다 크다");

}else{

alert("0보다 작다");

}

위와 같은 간단한 if문의 경우 삼항연산자를 이용하여 간단하게 표현해줄 수 있다.

(i > 0) ? alert("0보다 크다") : alert("0보다 작다");

앞에 괄호에는 비교하려는 식을 넣고 물을표 뒤에는 참일때 실행되는 명령과 뒤에는 거짓일때 실행 되는 명령을 넣으면 된다.

삼항 연산자는 간단한 식일 때 사용 하도록 하자.

JavaScript의 비교 연산자에는 "=="와 "!=" 가 있다.

"" == 0

위의 결과는 과연 무엇이 나올까?

예상과는 다르게 True를 리턴하게 된다.

이유는 JavaScript가 자동으로 형변환하여 비교하기 때문에 일어나는 현상이다.

그럼 어떻게 해야 내가 원하는 결과를 얻을 수 있을까..?

바로 일치 연산자인 ===와 !==을 사용하면 된다.

"" === 0

위의 식은 False를 리턴하게 된다.

위의 일치 연산자는 자료의 형과 값을 모두 비교한다.

두 값을 비교하는데 있어서 원하는 값이 나와야 하지만 원하는 값이 나오지 않는다면..

위의 비교연산자와 일치 연산자를 한번 생각해 보자.