Total: Today: Yesterday:
개발/JavaScript | 2016. 9. 22. 16:46 | Posted by 알 수 없는 사용자

평소에 자주 사용하지 않았던 자바스크립트 연산자를 알아봤다. 


1. 스프레드(...args) 연산자.
"배열 리터럴의 일부를 반복 가능한 식(다른 배열 리터럴 등)에서 초기화하거나 식을 함수 호출에서 여러 인수로 확장할 수 있습니다."

일반적으로 항목을 연결할때 concat메소드를 많이 이용하는데 스프레드 연산자(...args 로 사용)로도 가능하다.
하지만 스프레드 연산자는 반복 개체로만 연결이 가능하다.

var a = "a";
a.concat(["b","c"],"d"); //  "ab,cd"
var b= ["a"];
b.concat(["b","c"],"d"); //  ["a", "b", "c", "d"]

var a = ["a","b","c"];
...a // ---> Uncaught SyntaxError: Unexpected token ...
var b= ["a","b"];
[...b, ...["c"], "d"]; //  ["a", "b", "c", "d"]

concat 연산자와 비슷하게 사용되지만 반복개체로 호출해야만 에러가 발생하지 않는 것을 확인했다.

2. typeof 연산자.
"식의 데이터 형식을 나타내는 문자열을 반환합니다."

요 근래에 자주 사용하기 시작한 연산자이다.
보통 값을 비교할 때, 값과 값의 타입만 비교하는 "===" 나 "!==" 연산자로 사용한다.
내가 자주 사용하는 메소드는 String메소드(split, trim, replace 등)가 많았던 관계로 String 타입이 아니면 에러를 뱉어내곤 했었다.
그럴때 마다 값의 type만 비교하고 싶을때가 가끔 있었다.

typeof로 비교할수 있는 형식은 'number','string','boolean','object','function','undefined'  총 6가지 이다.
typeof 비교 형식은 대소문자를 가리기 때문에 반드시  소문자로만 적용해야 한다.

typeof "A" === 'string' //true
typeof "A" === 'number' //false
typeof 1 === 'undefined' //false
typeof 1 === 'number' //true
typeof bb === 'undefined' //true 변수 선언 X
typeof {} === 'object' // true
typeof "{}" === 'object' //false

3. void 연산자.
"식의 값을 반환하지 않게 합니다."

반환하면 항상 return을 사용하지만 굳이 함수가 아니더라도 값을 반환하지 않고 undefiend를 반환 하는 연산자이다.

function a (){ return "a" }
a() // "a"
void a() // undefined

var b = "b"
console.log(b) // "b"
console.log(void b) // undefined


4. delete 연산자.
"개체에서 속성을 삭제하거나 배열에서 요소를 제거합니다."

배열 삭제 메소드는 Array.splice()를 사용했었다. 하지만 splice는 배열삭제 메소드로 index도 같이 삭제된다.
delete 연산자를 이용하면 index는 그대로고 해당 index에 값만 삭제되는 것을 확인 할 수 있었다.

var ar = new Array (10, 11, 12, 13, 14);
delete ar[1] // true
console.log(ar) // [10, undefined × 1, 12, 13, 14]

var ar = new Array (10, 11, 12, 13, 14);
ar.splice(1,1) // [11]
console.log(ar) // [10, 12, 13, 14]



5. new 연산자.
"새 개체를 만듭니다."
new constructor([args])

new 연산자의 작업 수행은 아래와 같다.
멤버가 없는 개체를 만든다.
해당 개체에 대해 생성자를 호출하고 this포인터로 새로 만든 개체에 포인터를 전달한다.
생성자는 생성자에 전달된 인수에 따라 개체를 초기화한다.

my_object = new Object;
my_array = new Array();
my_date = new Date("Jan 5 1996");





개발/JavaScript | 2016. 9. 8. 13:34 | Posted by 알 수 없는 사용자


### javascript

SELECT lpad(no, 6, 0) AS nums

  FROM (SELECT right(frame_id, 6) num, @N := @N + 1 AS no

          FROM tables, (SELECT @N := 0) AS TBL1

        ORDER BY num) AS TBL2

 WHERE num <> no

 LIMIT 1


이 쿼리문을


### javascript

" SELECT lpad(no, 6, 0) AS nums " + 

"   FROM (SELECT right(frame_id, 6) num, @N := @N + 1 AS no " + 

"           FROM tables, (SELECT @N := 0) AS TBL1 " + 

"         ORDER BY num) AS TBL2 " + 

"  WHERE num <> no " + 

"  LIMIT 1 "; 


String으로 바꾸거나


### javascript

" SELECT lpad(no, 6, 0) AS nums " + 

"   FROM (SELECT right(frame_id, 6) num, @N := @N + 1 AS no " + 

"           FROM tables, (SELECT @N := 0) AS TBL1 " + 

"         ORDER BY num) AS TBL2 " + 

"  WHERE num <> no " + 

"  LIMIT 1 ";  


String을


### javascript

SELECT lpad(no, 6, 0) AS nums

  FROM (SELECT right(frame_id, 6) num, @N := @N + 1 AS no

          FROM tables, (SELECT @N := 0) AS TBL1

        ORDER BY num) AS TBL2

 WHERE num <> no

 LIMIT 1


쿼리문으로 바꾸고 싶었다.


현재 자바의 Mybatis등을 쓰지 않고 있어 소스에서 쿼리문을 작업할때 String 연결을 하고있는데 이 작업이 매우 번거롭다.

좀더 편하게 작업할 수 없을까 하여 위의 이미지처럼 html파일로 간단하게 만들어 버렸다.



정규식으로 문자열 맨 뒤에 [ "+ ] 를 붙이고 맨 앞에 [ " ] 를 붙이고 마지막엔 [ ; ] 를 붙이는 것으로 원하는 것을 해결하였다.


변경하고자 하는내용이 textarea에 담겨있다면


String.replace(/\n/gi, ' " + \n" ').replace(/^/, '" ').replace(/$/, ' "; ');

로 String 문자열을 연결하거나,

위의 정규식을 사용할 것이라면 순서는 반드시 맞춰주어야 한다.


String.replace(/\"\s{0,2}\+{0,1}\;{0,1}/gi, '');

로 연결된 String 문자열을 제거하면 된다.


적용 방법은 아래와 같다.

### javascript

<body>

<textarea id="replace"></textarea>

<textarea id="replaced"></textarea>

</body>

<script>

function replace(){

var value = document.getElementById('replace').value;


// String 문자열 연결

var replaced = document.getElementById('replace').value.replace(/\n/gi, ' " + \n" ').replace(/^/, '" ').replace(/$/, ' "; ');

// String 문자열 제거

var replaced = document.getElementById('replace').value.replace(/\"\s{0,2}\+{0,1}\;{0,1}/gi, '');


document.getElementById('replaced').value = replaced;

document.getElementById('replaced').select();

}

</script>



개발/JavaScript | 2016. 4. 12. 16:13 | Posted by 짜장이누나



개발을 하다가 복사/붙여넣기를 막아야 하는 상황이 있습니다.

Keycode를 이용하여 아주 간단하게 막을 수 있습니다!!!

바로 아래 코드를 보시죵~!


### JS


//입력창에 Ctrl+V 막기
function preventKeyCtrlV(){
if(event.ctrlKey && event.keyCode == 86 ){ 
event.returnValue=false; 
}
}

//입력창에 Ctrl+C 막기
function preventKeyCtrlV(){
if(event.ctrlKey && event.keyCode == 67 ){ 
event.returnValue=false; 
}
}


+ Javascript 에서 Keycode 값을 쉽게 알수 있는 사이트를 알아냈습니다!

 아래 사이트에 접속하여 알고자하는 키를 입력하면 바로 Keycode를 알 수 있습니다.









 이 글은 오니님의짱꺤뽀 블로그와 같은 글 입니당구리당당

오~~~랜만에 자바스크립트 포스팅 완료!!





개발/JavaScript | 2015. 5. 29. 11:36 | Posted by 알 수 없는 사용자

당연하게 Rest Api에서 받아오는 Json Data를 callback 함수로 사용하다가 문득 변수를 선언하지 않고 전달하는 callBack함수 결과 자체를 변수로 사용할 수 있는것에 의문점을 가지고 생각해보았다.

 
function test(call){
	callbackTest(call, function(result){
		callResult = result;
	});
	console.log('callResult : ' +callResult);
}

function callbackTest(call, callback){
	callback(call);
}


결과는 다음과 같다.



test() 블록 안에서 var callResult를 선언하지 않아도 callResult 변수는 정상 동작 한다.

자바 스크립트는 블럭의 의미가 없다.

가장 가까이에서 선언된 변수를 찾아서 사용되고 있을 뿐이다.

callbackTest ()가 여러개 선언되어있을 때 가장 가까운 블럭의 callback에서의 변수 callResult를 찾아서 사용하였다.

원하는 변수를 찾기가 어려워진다.

다른 함수에서 test()함수를 선언 후 callResult를 호출하여도 test()블록 안에 function에서 사용한 callResult 변수가 사용되었다.

test블록 내에서 사용하는 _callResult변수를 사용하니 write()안에서는 에러가 발생한다.


변수 선언 안해도 가까운 블럭 내에 있는 변수를 사용하여 편리하지만 예상치 못한곳에서 사용될 수 있으니 적절히 선언해서 사용해야 겠다.


개발/JavaScript | 2015. 5. 27. 11:15 | Posted by 알 수 없는 사용자

이미 UI 구조가 다 만들어진 프로젝트에서 스크립트 작업을 하려는데 웬걸!!

크롬 개발자모드(F12)에서 내가 선언해 놓은 스크립트에 debug가 걸리지 않습니다.

선언해 놓은 스크립트들은 동작하는데 말이죠..

그런데 잘보니 스크립트가 동적으로 불려져서 내가 선언해놓은 스크립트에서 에러를 찾지 않고있습니다. ( ↓ )

동적스크립트로 불려질 수 밖에 없는 구조적인 문제를 해결하지 못하니 옆에계신 선임님과 자수씨의 도움으로 내 원래의 스크립트에서 디버그가 걸리도록 방법을 알아 봤습니다.

방법1 : 클래스를 만들고 해당 클래스가 정의되지 않았을 경우에만 클래스를 불러온다.

### javascript

var Class = {

// javascript

}

this['UI'] = Class;// 또는 this.UI = Class;

if (typeof this['UI'] == 'undefined') {

  this['UI'] = Class;

}


예제 소스

### javascript

(function($) {

var Class = {

initComponentOnce: function initComponentOnce() {

$(document).on('loggerOnload','.test', function(){

console.log("initComponentOnce() onload Trigger");

});

},

mailAdminConfig : {

onload: function(){

console.log("mailAdminConfig.onload");

},

getTree : function(){

console.log("mailAdminConfig.getTree");

}

}

}

if (typeof this['testUI'] == 'undefined') {

this['testUI'] = {};

}

this['testUI']['_ma'] = Class;

if (typeof this['testUI']['_ma'] == 'undefined') {

this['testUI']['_ma'] = Class;

}

})(jQuery);



이 방법을 사용 하기 전에 만들어져있던 스크립트가 아래처럼 되어있었습니다.

var abab = {

cdcd : function(){

}

}

var abab = 이 부분을 abab : 으로 바꾸면 UI.abab로 접근이 가능합니다.

기존 메소드들의 접근을 바꾸기 어렵고, 변경작업이 크기 때문에 단지 디버그만 걸고 싶다면 방법2가 빠릅니다!!


방법 2 : 강제로 디버그 걸리게 밑에 한줄 추가한다.

작성한 스크립트파일 맨 밑에 이거 한줄 추가하면 됩니다.


//# sourceURL= 디버그 걸고 싶은 파일명.js


이 내용은 아래 주소를 클릭하면 자세한 내용으로 확인 할 수 있습니다 (영어주의!!)

https://developer.chrome.com/devtools/docs/javascript-debugging




개발/JavaScript | 2015. 2. 27. 18:18 | Posted by 짜장이누나


 html 태그에 있는 정보들를 한번에 받아와 리스트 만드는 방법!

제목 붙이기가 어렵네요...


<예제 html>

### html


<ul class="list_org revertEnabled">

<li class="template" data-external-key="#externalKey#" data-name="#name#" data-email="#email#" data-type-code="#typeCode#" data-master-key = "${userindex}">

<div class="_eddrViewWrap">

<div class="eddrWrap">

<span class="eddrView" title="#email#">#name#&nbsp;</span>

<a href="#" class="btn_del"><img src="${url.context}/images/swp/common/b.gif" width="8" height="8" alt="삭제"></a>

</div>

</div>

</li>

</ul>


위의 태그에서 nameemailtypeCodeexternalKey 의 값을 받아와 map으로 만들려고한다.

원래 하던 방법은 jQuery를 이용해 해당 값들을 받아온 후 map으로 만들어야한다.


하지만 값을 받아오는 동시에 map으로 return하는 방법이 있다!!

바로 [selector].map(function() {...}).get() 을 사용하면된다.

### js

//  필요한 정보만으로 리스트 만들기

var $inviteMember = $('.list_org');

var _memberList = $inviteMember.map(function() {

var $this = $(this);

return {

name: $this.data('name'),

email: $this.data('email'),

typeCode: $this.data('typeCode'),

externalKey: '' + $this.data('externalKey') // int -> string

};

}).get();


위와 같이 사용하면 한번에 필요한 정보를 리스트로 만들어 사용할 수 있다!





그럼 다들 불금!

홧팅2

개발/JavaScript | 2015. 2. 27. 16:58 | Posted by 알 수 없는 사용자

escape(), encodeURI(), encodeURIComponent()  - 자바 스크립트에서 인코딩하는 함수.


1. escape()

ABCDEFGHIJKLMNOPQRSYUVWXYZ

abcdefghijklmnopqrsyuvwxyz

1234567890

@*-_+./

위에 있는 문자가 아니면 모두 유니코드 형식으로 변환, 변환된 형식은 16진수 형식으로 표시되며, 1바이트 문자는 %XX형태로, 2바이트 문자는 %uXXXX형태로 변환 됨.


2. encodeURI() 

기본적으로는 escape()와 비슷한 동작을 하지만. 인터넷 주소 표시에 쓰이는 특수문자(: ; / = ? &)는 인코딩 되지않음.

그래서 보통은 파라미터를 전달하는 인터넷 주소(URL)전체를 인코딩할 때 사용함.


3. encodeURIComponent()

1번escape() 처럼 동작하며, 2번의 튿수문자(: ; / = ? &) 까지 포함하여 인코딩해줌. 

주의할점이 2번의 특수 문자까지 포함하여 인코딩 되기때문에 URL 전체를 인코딩할때에는 사용하지않고, 각각의 값을 따로 인코딩할 때 사용해야 함.

추가 : 디코딩 함수 - unescape(), decodeURI(), encodeURIComponent() 디코딩용 함수


츨처 :  http://realmind.tistory.com/191



개발/JavaScript | 2015. 2. 6. 20:53 | Posted by 짜장이누나


저도 허접한거 하나 올려보겠습니다...

다들 충분히 하실거라 생각되지만!! 그래도 혜원님의 첫 포스팅 시작합니다.\

고고



if/swith 문을 map 으로 리팩토링 하는 방법


간단한 ~~한 처리를 위해서 if문이나 switch문은 쉽고 간편하기 떄문에 많이 사용한다.

하지만 처리해야할 ~~가 많아진다면 if-else가 많아지고, case문이 많아져 코드의 가독성이 떨어질 것이다.


먼저 switch문으로 작성한 코드를 보자.

### js

function getStringMemberStatus(eventList) {

for(var i=0; i&lt;eventList.length; i++) {


var _eachEvent = eventList[i];


logger.log( "☆☆☆" + jsonUtils.toJSONString(_eachEvent));

var _memberCode = _eachEvent.member_status;


 

switch(_memberCode) {

  

case '500':

_eachEvent.xMember_status = '멤버';

break;

case '200':

_eachEvent.xMember_status = '초대';

break;

case '700':

_eachEvent.xMember_status = '운영자';

break;

default :

_eachEvent.xMember_status = '탈퇴';

break;

}



_eachEvent.xMember_status = memberCodeMap[_memberCode] || memberCodeDefaultValue;


var _memberName = _eachEvent.member_name;

   

logger.log( "***memberCode= " + _memberCode);

logger.log( "***memberName= " + _eachEvent.xMember_status);

   }

}

위 소스는 멤버 코드를 받아와 각 코드에 해당하는 String을 반환하는 함수이다.

여기서 멤버 코드가 추가 될 경우 case문을 계속해서 추가해야한다.

계속 코드가 길어지고.... case문이 많아지니까 맘에 들지 않아!


그러면 map으로 바꿔보면 어떨까?

### js

function getStringMemberStatus(eventList) {


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

            

             var _eachEvent = eventList[i];

      

            logger.log( "☆☆☆" + jsonUtils.toJSONString(_eachEvent));

             var _memberCode = _eachEvent.member_status;

            

             var memberCodeMap = {

                         '100': '가입' ,

                         '150': '가입' ,

                         '200': '초대' ,

                         '250': '초대' ,

                         '300': '탈퇴' ,

                         '350': '탈퇴' ,

                         '500': '멤버' ,

                         '700': '운영자'

            };

             var memberCodeDefaultValue = '되바라지다.' ;


            _eachEvent.xMember_status = memberCodeMap[_memberCode] || memberCodeDefaultValue;


             var _memberName = _eachEvent.member_name;

      

            logger.log( "***memberCode= " + _memberCode);

            logger.log( "***memberName= " + _eachEvent.xMember_status);

      }

}

코드가 훨신 더 간결해지고 읽기 편해짐이 느껴지는가??

여기서 멤버 코드가 추가되더라고 '키(key)-값(value)' 만 추가해주면 된다.

아주 간단하죠???????????





그럼 혜원님은 이만 뿅!

고고




개발/JavaScript | 2015. 2. 2. 18:22 | Posted by 자수씨

각종 자바스크립트 라이브러리에서만 써오던 each 함수가 브라우저 지원 함수라는 것을 오늘에야 알았다...



(출처: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)


물론 IE 9 이상에서만 동작하는 것이 함정이지만...



새로 확인된 함수는 총 3종류 이다. (각 함수를 클릭하면 MDN 페이지로 연결됩니다.)



Array.prototype.forEach()

### js

[2, 5, , 9].forEach(function (element, index, array) {

  console.log('a[' + index + '] = ' + element);

});

// logs:

// a[0] = 2

// a[1] = 5

// a[3] = 9


배열의 원소들을 인자로 하는 callback 함수를 호출한다. callback 함수의 인자는 (원소, 인덱스, 전체배열) 이다.


Array.prototype.every()

배열의 모든 원소들이 callback 함수를 모두 통과하는지를 확인하는 함수이다.

### js

function isBigEnough(element, index, array) {

  return element >= 10;

}

[12, 5, 8, 130, 44].every(isBigEnough);   // false

[12, 54, 18, 130, 44].every(isBigEnough); // true



Array.prototype.some()

배열의 일부 원소가 callback 함수를 통과하는지를 확인하는 함수이다.

### js

function isBiggerThan10(element, index, array) {

  return element > 10;

}

[2, 5, 8, 1, 4].some(isBiggerThan10);  // false

[12, 5, 8, 1, 4].some(isBiggerThan10); // true





하위호환성을 유지하기 위한 코드는 MDN 각 페이지에서 확인하길 바란다.



개발/JavaScript | 2015. 2. 2. 17:56 | Posted by 자수씨


자바스크립트에서 in 이라는 구절은 객체의 프로퍼티를 for 문에서 탐색할 때 주로 사용하고 있었다.

### js;

var _params = { name: 'vince', age: 'secret' };

for (var _key in _params) {

var _value = _params[_key];

// ...

}



때로는 배열을 탐색할 때도 사용하기도 한다. (어차피 배열의 인덱스로 프로퍼티이기 때문에)

### js;

var _array = [ 1, 2, 3, 4, 5 ];

for (var _array in _array) {

var _value = _array[_array];

// ...

}



새로 알게된 in 의 활용법은 해당 프로퍼티가 객체에 존재하는지 확인하는 것이다.

### js;

var _params = { name: 'vince', age: 'secret' };

if ('name' in _params) {

var _name = _params['name'];

// ...

}


prop in object 는 object 안에 prop 프로퍼티가 있는지 확인하는 것으로 반환 값은 true/false 이다.


if (!_params['name']) 대신에 사용하면 코딩을 더욱 직관적으로 할 수 있을 것이다.