dev in Serengeti

[자바스크립트] javascript map() 사용하기 자바스크립트에서 for문의 남용을 막기위해 만들어낸 배열함수! 배열 요소를 순환하며 어떠한 가공을 가하거나, 배열요소 안의 요소를 추출하거나 할 때 가장 알맞은 함수! 가공된 결과물은 새로운 배열로 반환된다! [사용법] // 화살표 함수 array.map((element, index, array) => { ... }) // 콜백함수만 호출 array.map(callbackFn, thisArg) // 익명함수 array.map(function(element, index, array) { },thisArg) [간단설명] array.map()은 배열을 순환하면서 지정된 callback 함수를 각 요소마다 순서대로 실행하여 새로운 배열을 return 한다...

[AngularJS] ng-style 사용법 AngularJS 에서 제공하는 ng-style! 일단 AngularJS 공식문서에 따르면, ng-style 은 조건적으로 CSS style을 입힐 수 있는 directive 다. 보통 css를 따로 쓰지만, 때에 따라 inline 형식으로 직접 DOM에 style을 명시할 때 유용하다. 간단하게 정리하자 [예시] {{yourGift}} 1) 위의 div 에 명시한 것처럼 (giftCd == 1) 이면 배경색을 black으로, 아니면 gray로! 2) span 에 명시한 것처럼 그냥 flag 값이 true면 green 으로, false면 red 로! class 를 동적으로 입히고 싶다면? https://devinserengeti.tistory.com/4?cat..

[자바스크립트] slice() vs splice() vs split() 자바스크립트에서 제공하는 배열에 관련된 함수들로, 이름이 비슷하여 맨날 헷갈리는 친구들인데, 맨날 찾지말고 정리해보자 간단히, Slice(startIdx, endIdx) : 원본은 건들지 않고 배열 자르기 Splice(startIdx, number, elementToAdd) : 원본을 자르거나 추가하기 Split(separator, limit) : 문자열을 잘라서 배열로 변환 (문자열 => 배열) 1) slice() : 원본을 건들지않고, 복사된 array를 return! array.slice(startingIndex, endIndex); startingIndex : 시작 index endIndex : 끝 index (끝 index ..

[자바스크립트] Javascript This 정리 자바스크립트에서 this 는 execution context 가 실행될 때에 정해진다. 실행 컨텍스트는 함수가 호출될 때에 실행되는데, 그 때에 this 가 binding 된다! 1) 전역공간 - this 는 window (전역객체) - node.js 에서는 global 이 나온다. 2) 함수 호출 시 - 전역객체가 호출됨 - 함수는 무조건 전역객체가 호출된다. 3) 메서드 호출 시 - 메서드를 호출한 주제 => a.b(); 에서 a가 this - 메서드란 원래 함수인데 어떤 객체와 관련된 동작을 하면 그것을 메서드라 부른다. 4) callback 호출 시 - 원래는 함수인 만큼 전역객체지만, call() 을 어떻게 호출하느냐에 따라 달라진다. - 함수로..

[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 사용 시 장점이 있음! 아래는 ..