dev in Serengeti

[AngularJS] ng-repeat 과 track by / 더블콜론(이중콜론) :: 더블콜론 ( :: ) 을 사용하는 이유? 시작하기 전 간단하게 더블콜론(double colon) 에 대해서 짚고 넘어가자. ng-repeat 에서 {{ :: friends.age }} 이런식으로 표현하게되면, 해당 요소는 최초 한번만 바인딩 하기로 제한하는 것이다. (one-time binding) => 해당 요소가 다시 렌더링되지 않는 이상, 값의 변화는 화면에 반영되지 않는다! 이제 본문으로 들어가서, ng-repeat 은 $watchCollection 이란 친구로 컬렉션 내의 변화를 감지한다. (여기선 $watchCollection 이라는 것이 있다더라...하고 넘어가면 된다) 순회하는 collection 의 요..

[AngularJS] ng-repeat 과 limitTo / orderBy / $parent ng-repeat 을 더 유용하고 편리하게 사용할 수 있는 잡기술(?) 들에 대해 알아보자 (사실, 잡기술이라기보단 필수적인 요소지만) 1) limitTo : ng-repeat 의 반복 횟수를 제한한다. 예를 들어 어떤 list 의 요소가 몇개가 오든 상관없이 상위 20개만 보여주고 싶다면, 아래와 같이 사용 가능하다. 너무 쉽다. [예시] {{item.name}} => limitTo 는 사실 angularJs 에서 제공하는 filter component 에 속하며, 추후 필터를 다룰 때 더 보기로 한다. 2) orderBy : ng-repeat 의 순서를 정렬한다. 뭔가 sql에서 봤던 것 같은 느낌이 든다. ..

[AngularJS] ng-repeat property($index, $first, $middle, $last, $even, $odd) ng-repeat 은 이름에도 나와있듯, collection 을 순환할 때 사용한다. 위 예제와 같이 "item" 이라는 임의의 변수를 선언하여 " item. " 으로 각 순회마다 각각의 배열 요소에 접근이 가능하다. 한 번 순환할 때마다 각각의 scope 이 생성되며, 그 순서는 $index 프로퍼티에 기록된다. 또한 편리한 사용을 위하여 angularjs 에서는 다음과 같이 유용한 기능들을 제공한다. 1) $index (number) : 순환되고 있는 요소의 순번(index) => id 값에 포함시켜서 구별짓기 위해 사용되기도 하고, 특정 순번을 선택할 때도 유용하다..

[AngularJS] $watch 란? $watch 는 data 의 변화를 캐치하여, 미리 지정해놓은 동작을 수행할 수 있다. 주로 timeout / UI 입력값 변화 / API response(Ajax call) 등으로 인하여, Application 이 비동기 식으로 동작할 때 사용한다. [예시] $scope.$watch('string', function(newValue, oldValue) { //string의 상태가 변하는 순간 실행할 구문 console.log("'string' 의 상태가 변했습니다!"); }, false); $watch 를 사용할 때, 3가지 parameter 를 던질 수 있는데, 아래와 같다. (사실 4가지인데, 마지막 parameter는 생략) 1) watchExp ('stri..

[AngularJS] $broadcast & $on 사용법 / $broadcast 와 $emit 의 차이점 AngularJS 를 사용하다보면 서로 다른 controller 간의 data 를 보내거나, 알림을 주는 등의 event 를 설정해야 할 때가 있다. 가령 A controller 에서 어떤 이벤트가 발생하면, B controller 에서 그 이벤트를 캐치해서 어떤 추가 동작을 한다던지 말이다. 이 때 사용할 수 있는 $broadcast & $emit, 그리고 $on 에 대해 알아보자. 1) $broadcast $scope.$broadcast("myEvent", data); => 현재의 controller 로부터 모든 child controller 에 이벤트가 전파된다. 2) $emit $scope...

[AngularJS] ng-options vs ng-repeat selectbox 형식으로 옵션 선택하는 기능을 개발하다 보면, ng-options 를 쓸까, ng-repeat 를 쓸까 고민이 될 때가 있다. 무슨 차일까? 결론부터 말하면, 둘 중에 무엇을 쓰든 동작에는 무리없이 만들 수 있다! 개인적으로 그냥 HTML 태그를 쓸 때에는 ng-options 가 기능을 구현하기 편하고, FO 디자인을 위해 div>ul>li 형식에 css 입혀서 selectbox 모양으로 구현할 것이라면, ng-repeat 를 쓰는 게 낫다. (사실 태그 말고는 ng-options 는 사용하지 못한다) 에는 ng-repeat & ng-options, 둘 다 사용이 가능하나, ngOptions 사용 시 장점이 있음! 아래는 ..

[자바스크립트] javascript for 문 정리 1) 기존 for문 : for(var i=0; i 가장 기본이지만 제일 정확한 방식인 것 같다. object / array 둘 다 순환이 가능! 2) for in 문 : var player = { name : 'Son', age : 30, position : 'forward', nationality : 'South Korea' } for(let key in player) { if(key.indexOf('age')) { console.log(player[key]); } } //console.log(player[key]) : 30 //객체(Object)를 순환할 때는 //보통 index 처럼 [0,1,2,3...] 이 아니라, //key 는 [name, a..

[자바스크립트] 함수 선언 후 undefined & hoisting 이란? 아래 예시를 참고하자 1)은 스크립트 순서와 상관없이 함수를 런타임 언제든 호출하여 사용이 가능하지만, 2)는 함수가 할당이 되는 그 시점까지의 스크립트를 지난 후에야 호출하여 사용이 가능하다. 1) 함수 선언문 function add(x,y) { return x+y } 2) 함수 표현식 (함수명 생략) var add = function(x,y) { return x+y } 함수 선언문은, 런타임 이전에 이미 일반변수와 같이 선언되어 '호이스팅'된다. 함수 표현식은, 런타임 이전에 undefined 로 변수를 초기화시키고, 런타임 시 해당 함수가 할당된다. 호이스팅(hoisting) 이란? => 끌어올림 실제로 일어나는 현상은 아니..