FRONT-END/Script & jQuery


스크립트에서 함수의 전달 (anonymous Function)


* 이포스트는 The Node Beginner Book 문서를 보고 정리하는 개인적인 포스트입니다.





JavaScript에서는 함수도 다른 값처럼 파라미터로 넘길 수 있습니다.

예를 들어, 아래와 같이 say 함수의 return 값이 아닌 함수 자체를 넘기는 것이 가능합니다.


JavaScript

function say(word) { console.log(word); } function execute(someFunction, value) { someFunction(value); } execute(say, "Hello");



예를 들어 say는 execute 함수 내에서 someFunction 이라는 변수가 되며 execute는 이 변수에 담긴 함수를 someFunction() 이라고 표시함으로서 호출 할 수 있다.


하지만 위와 같이 say 함수를 먼저 정의하고 그것을 넘기는 간접적인 방법을 사용할 필요 없이, 함수를 정의하면서 동시에 다른 함수의 파라미터로 넘기는 것이 가능하다.


이때, 함수에 이름을 줄 필요가 없다(anonymous function)


JavaScript

function execute(someFunction, value) { someFunction(value); } execute(function(word){ console.log(word) }, "Hello");




ES6(ECMAScript) 문법 사용정리


NodeJS v4 부터는 스크립트 ES6 문법을 사용할 수 있습니다.



1.  Template Literals (Grave Accent)


ES6에서는 Grave Accent ( 키보드 좌측 상단의 ` ) 를 사용하여 코드를 가독성 있고 편리하게 작성할 수 있다.

GraveAccent 를 사용하면  문자열 내에서 줄바꿈 과  문자열 내에 변수 사용 이 가능하다.


예를 들어, 스크립트에서 HTML 코드를 동적 생성해야 하는 경우, 아래와 같이 작성해야한다.


var name   =     "mingcho";

var img     =     "img.jpeg";

var temp   =     "<a style='cursor:pointer' class='mingcho_class' tmp_attr='"+name+"'><img src='/mingcho/"+img"' /></a>";



GraveAccent를 사용하면 위코드를 아래와 같이 변경 가능하다.


var name   =     "mingcho";

var img     =     "img.jpeg";

var temp   =     `

<a style="cursor:pointer" class="mingcho_class" temp_attr= ${name}>

<img src="/mingcho/${img}"    />

</a>

`;




2.  Arrow Function


처음에 보고 굉장히 헷갈렸던 문법이다. (커피스크립트의 -> 와 같다고 한다).

기존의 function 키워드를 간략화 하여 표현하는 방식인데 예를 들어 ES5의 경우 


http.createServer( function (request, response) {


response.write("mingming");

response.end();


}).listen(port);



Arrow Function 사용할 경우, 아래와 같이 변경 가능하다. 


http.createServer( (req, res) => {


req.write("mingming");

req.end();


}).listen(port);



파라미터가 한개일 경우


soket.on("error", function(e) {

});  //아래와 같이 변경가능.


soket.on("error", e => {

});




[참고]

http://blog.jeonghwan.net/2016/04/28/es6.html

* 이 포스트는 "ES6 사용에 앞서" 알아본 내용을 정리하는 개인적인 포스트입니다!


[참고/출처]

* https://nodejs.org/

* http://blog.nekoromancer.kr/2016/01/26/es6-var-let-%EA%B7%B8%EB%A6%AC%EA%B3%A0-const/

http://chanlee.github.io/2013/12/10/javascript-variable-scope-and-hoisting/



ES6는 뭘까?


NodeJS를 공부하기 위해 http://www.nodejs.org 에서 샘플 소스를 옮겨적어봤다.

내용은



Webstorm에서 에러를 잔뜩 표시해준다 

뭔가 해서 살펴봤더니 처음보는 아이들 const.. => .. 얘네는 뭘까 ㅎ.ㅎ

그래서 찾아보니 2015년 6월에 공개된 자바스크립트(JS) 표준 ECMAScript 6 의 문법이라고한다.

지금은 2017년인데 처음봐..ㅎㅎ ECMAScript 6 의 특징들 (한글번역)



그래서 일단은 const 와 let에 대해 알아보기로한다.

아! Webstorm에서의 빨간줄은 File -> Setting-> Languages & Frameworks 에서 

Javascript를 선택한 후 Javascript language version 을 ECMAScript 6로 변경해주면 말끔히 사라진다 ㅎ.ㅎ




자바스크립트에서 변수의 범위(VAR) 와 호이스팅


[자세한내용보기] http://chanlee.github.io/2013/12/10/javascript-variable-scope-and-hoisting/


contst 와 let을 알기에 앞서 먼저 var에 대해서 알필요가 있다.

변수는 지역 범위(local scope)와 전역 범위(global scope) 둘 중 하나를 가진다.



1. 지역변수(local scope)


스크립트의 가장 큰 특징 중 하나는 다른 언어들과 달리 블럭 {} 수준의 범위를 가지고 있지 않다.

그 대신 함수 수준의 범위를 가진다.

예를 들어 



위에 같은 경우 함수안에서 선언된 name 변수는 지역범위를 가진다. 그러므로 함수밖에서 선언된 name 의 값은 

전역변수 mingcho.

그러나 아래와 같이 



블럭 안에서 값을 할당하면 전역변수의 값이 바뀐다. 블럭수준의 범위에 해당되지 않는다.

위와 같은 경우 if 문안에서 var name = "minyoung" 과 같이 변수를 다시 선언해도 name은 여전히 전역 변수이며 

전역변수의값은 블럭안에서 할당된 값으로 변경된다. (블럭수준 X / 블럭범위의 변수가 아님)

그러나 함수안에서 var name = "minyoung" 과 같이 선언될 경우 name은 전역변수가 아닌 지역변수로 간주된다.


또한, 함수안에서 사용하더라도 선언을 해주지 않았을 경우엔 전역변수로 간주된다.

그러니 함수안에서 지역변수를 사용하고 싶을 땐 항상 선언을 해주도록 하자.

지역변수는 함수내에서 전역변수보다 높은 우선 순위를 가진다.


2. 전역변수(global scope)


함수의 외부에서 선언된 모든 변수는 전역 범위를 가진다.

모든 전역변수는 window객체와 연결되어 window객체를 통해 모든 전역 변수에 접근이 가능하다.




만약 변수가 최초 선언 없이 초기화 되었다면, 이 변수는 함수 내에 들어있더라도 전역변수가 된다.

또한, 함수가 아닌 블럭 {} 내에서 선언될 경우에도 전역변수로 간주된다.


for문의 경우도 같다.



또한, setTimeout 안에서 선언된 모든 함수는 전역 범위에서 실행된다.

setTimeout안에서의 this는 window객체.


스크립트를 잘쓰려면 가급적 전역 범위에 변수를 생성하는 것을 피해야한다.

function name(){} 이런식으로 생성하는 함수역시 전역범위에 포함된다.



3. 변수 호이스팅


스크립트의 모든 변수선언은 호이스트 된다.

호이스트란, 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되는 것을 의미한다.

즉, 변수가 함수내에서 정의되었을 경우 선언이 함수의 최상위로, 함수 바깥에서 정의되었을 경우 전역범위의 최상위로 

변경되는 것을 뜻한다.



위와 같은 경우 처음에 name의 값을 찍어봣을때 선언부가 아래있음에도 에러가 아닌 undefined라는 결과가 나온다.

이 경우 지역변수 name이 최상위로 호이스트 되었기 때문이다.

이 경우에 ES6의 const, let 과 다른 특성을 보여준다.


호이스트 되었을 때, 함수 선언은 변수선언을 덮어쓴다. 

즉 변수를 선언한 후 같은 이름의 함수를 선언할 경우 그 이름의 주인은 함수가 된다.

하지만 변수에 값이 할당될 경우에는 반대로 변수가 함수 선언을 덮어쓴다. 



const , let 의 사용


[자세한내용보기] http://blog.nekoromancer.kr/2016/01/26/es6-var-let-%EA%B7%B8%EB%A6%AC%EA%B3%A0-const/


contst 와 let은 var와 같이 변수의 선언에 사용되는 ES6용어이다.

다만 이들은 var보다 훨씬 엄격한 규칙을 가지고있다.


1. 중복선언 금지


var의 경우 



위와 같이 선언을 두번 해줘도 에러가 나지 않는다. 

하지만 const, let은 경우 위와 같은 경우 에러를 발생시킨다.


2. 호이스팅!?


var의 경우 선언을 해주기전에 값을 출력해도. 선언된 변수가 호이스팅 되므로 출력값은 "undefined"

하지만 const 와 let은 다르다. ERROR! 먼저 선언을 하고 사용하자.

이를 임시적 사각지대라고한다.



3. 함수범위 X , 블럭범위 O


위에서 살펴봤듯이 스크립트 변수는 함수수준의 범위를 가진다 .

그러므로 if 나 for문 등 블럭안에서 전역변수와 같은 이름의 변수를 선언할 경우 이는 전역변수로 간주!

그러나 const 와 let은 블럭범위(Block-scope)이다.

블럭안에서 선언하여 사용할 경우 블럭밖에서 선언된 변수와는 다른 변수로 간주되어 사용된다.


4. 임시적 사각지대(TDZ)


어떤 변수가 호출되었을 때 블록 안에 같은 이름의 변수가 없으면 상위 블록에서 선언된 같은 이름의 변수를 호출한다.

하지만 블록안에서 const 나 let으로 선언된 변수가 있다면 그 이름의 변수는 변수가 선언되기 이전까지 그 블록안에서는

정의 되지 않는 내용으로 간주된다.



5. let , const 의 적절한 사용


일반적으로, 값의 변경이 있는 경우는 let으로 

값의 변경이 되지 않는 경우는 상수 const로 사용합니다. 

단, 참조형의경우는 const로 사용하는 것이 바람직합니다.

@ ES6에서 var의 사용은 지양합시당



JQuery 노드 다루기


1. 노드찾기


* 아이디 이름으로 찾기    :    $('#아이디명')

* 클래스 이름으로 찾기    :    $('.클래스명')

* 태그 이름으로 찾기       :    $('<태그명>')

* 속성으로 찾기             :    $('속성 옵션')   ex) input[type="text"] 


2. 노드다루기


* 노드 갯수 구하기    :    $('노드').length    ,    $('노드').size();

//length 와 size() 는 같은 결과를 반환합니다.


* n번째 노드에 접근  :    $('노드').eq(index);


* 특정 노드 찾기      :    $('노드').filter('선택자');    $('노드').find('선택자');

/*

 filter는 노드 전체에서 해당 선택자를 찾고 find는 해당 노드의 자식요소에서 해당 선택자를 찾습니다.

 (find에 반환값에서 '노드'는 제외됩니다.)

*/


3. 자식 노드 찾기


* 전체 자식 노드 찾기    :    $('노드').contents();    $('노드').children();

/*

 children()    vs    contents()

 children() 은 특정 노드 하위에 위치한 모든 자식 노드 중 태그 노드만을 찾습니다.

 반면, contents()는 특정 노드 하위에 위치한 텍스트 노드를 포함한 모든 자식 노드를 찾습니다.


 children()    vs    find()

 children() 은 특정 노드 `바로` 하위에 위치한 모든 자식 노드를 찾습니다.

 반면, find() 는 `바로` 하위에 위치한 노드에서가 아닌 하위에 위치한 모든 노드를 찾습니다.

*/


* 특정 자식 노드 찾기    :    $('노드').children('선택자');

//노드 바로 하위에 있는 자식요소 중 특정 '선택자' 요소를 모두 찾습니다.


* 첫번 째 자식 노드 찾기    : 

  $('노드').children().eq(0);

  $('노드').children().first();

  $('노드').children(':first');

  $('노드').children(':eq(0)');


* 마지막 자식 노드 찾기    :

  $('노드').children().last();

  $('노드').children(':last');

  $('노드').children().eq($('노드').children().length -1);

  $('노드').children().eq(-1);

  $('노드').children(':eq(-1)');


* n번 째 자식 노드 찾기    :    $('노드').children().eq(n);    ,    $('노드').children(':eq(n)');





4. 부모 노드 찾기


* 부모 노드 찾기        :    $('노드').parent();

//바로 위에 있는 부모 노드를 찾습니다.


* 조상 노드 찾기    :    $('노드').parents();

//해당 노드 상위의 모든 부모 노드를 찾습니다.


* 특정 조상 노드 찾기    :    $('노드').parents('선택자');

//해당 노드 상위의 모든 부모 노드 중 선택자에 해당하는 부모를 찾습니다.


5. 형제 노드 찾기


* 이전 형제 노드 찾기    :    

  $('노드').prev();

  //바로 이전에 있는 형제 노드를 찾습니다.


  $('노드').prevAll();

  //이전에 있는 모든 형제 노드를 찾습니다.


  $('노드').prevAll('선택자');

  //이전에 있는 모든 형제노드 중 선택자에 해당하는 형제노드를 찾습니다.


* 다음 형제 노드 찾기    :

  $('노드').next();

  //바로 다음에 있는 형제 노드를 찾습니다.


  $('노드').nextAll();

  //다음에 있는 모든 형제 노드를 찾습니다.


  $('노드').nextAll('선택자');

  //다음에 있는 모든 형제노드 중 선택자에 해당하는 형제노드를 찾습니다.


6. 노드 생성 및 추가


* 노드생성    :    

  $('Dom문자열')    ex) $('<li>li노드생성</li>');

  $('선택자').clone();    // 선택자에 해당하는 노드 복사(deep copy)


* 자식 노드로 추가    :

  $('부모노드').prepend($추가노드);

  //부모노드의 자식노드 중 가장 첫번 째 자식 노드로 추가


  $('자식노드').prependTo($부모노드);

  //자식노드를 부모노드의 자식 중 첫번 째에 추가(prepend와 기능은 같다)


  $('부모노드').append($자식노드);

  //부모노드의 자식노드 중 가장 마지막 번째 자식노드로 추가


  $('자식노드').appendTo($부모노드);

  //자식노드를 부모노드의 자식 중 마지막 번째에 추가(append와 기능은 같다)


* 형제 노드로 추가    :

  $('기준노드').after($추가노드);

  //추가노드를 기준노드의 바로 다음 형제노드로 추가


  $('추가노드').insertAfter($기준노드);

  //기준노드의 바로다음 형제로 추가노드를 추가(after과 기능은 같다)


  $('기준노드').before($추가노드);

  //추가노드를 기준노드의 바로 이전 형제 노드로 추가.


  $('추가노드').insertBefore($기준노드);

  //기준노드의 바로이전 형제로 추가노드를 추가(before과 기능은 같다)



7. 노드의 이동 및 삭제


* 노드 이동    :

  노드를 특정 노드의 첫번째나 마지막번째 자식노드의 위치로 이동 시키고 싶은 경우 노드를 추가할 때 사용하는 

  prepend, prependTo, append, appendTo를 활용하면 된다.

  추가하고자 했던 노드에 이동 시키고자 하는 노드를 넣어주면 같은 방식으로 동작한다.


  이와 마찬가지로 자식노드가 아닌 형제 노드로 이동시키고 싶은경우

  after, insertAfter, before, insertBefore 을 사용하면 된다.

  

  ex)

  $('부모노드').prepend($이동노드)   //부모노드의 자식노드 중 첫번째 위치에 이동시키고자 하는 노드를 이동시킨다.

  $('기준노드').before($이동노드)     //기준노드의 바로 이전의 형제노드에 이동시키고자 하는 노드를 이동시킨다.


* 노드의 삭제    :    $('노드').remove()




  1. 2018.03.20 13:34

    비밀댓글입니다

  2. 2018.05.30 17:39

    비밀댓글입니다

+ Recent posts

티스토리 툴바