dev in Serengeti

[AngularJS] LazyLoadingModule - 필요한 파일만 로드하기 SPA 구조란? => SPA 는 Single Page Application 의 약자로, 하나의 페이지 안에서 사용자의 요청에 따른 UI/UX 변환이 이루어 지는 구조를 말한다. SPA 의 장점이자 단점? => 하나의 페이지 안에서 모든 것이 이루어지기위해 최초 한번 모든 리소스를 로드하는데 시간이 길다. 대신에, 한번 로드하고나면 동적 리소스만 받아 처리하므로 그만큼 빠르다 이처럼 최초 구동이 느리다는 단점을 보완하기 위해 lazyLoad, 즉 최초 모든 리소스를 전부 로드하지 말고, 필요한 때에 필요한 파일들을 불러오는 기능을 구현하고자 한다. ocLazyLoad 라이브러리의 자세한 사항은 readMe를 클릭하면 알아볼 수..

[AngularJS] AngulrJS 깊은복사 vs Javascript 로 깊은복사 깊은복사와 얕은복사의 차이점은 모두 안다고 가정하고, AngularJS 에서 깊은복사하는 법과 Plain Javascript 로 깊은복사하는 법만 간략히 정리해본다. [AngularJS 함수] var array = [1,2,3,4,5]; //angular.copy() var array2 = angular.copy(array); //깊은복사가 완료되었다 // array = [1,2,3,4,5] // array2 = [1,2,3,4,5] [Javascript 에서 깊은복사하기] var array = [1,2,3,4,5]; //JSON.parse() & JSON.stringify() var array2 = JSON.parse(..

[AngularJS] $location 메소드/이벤트 사용하기 AngularJS 에서 제공하는 $location! URL 을 조작하거나, 페이지 이동기능에 많이 쓰이는 친구인데, 간단하게 정리해보자 [메소드] 1) absUrl() 전체 URL 을 return 한다 getter 의 역할만 수행한다 //예시 URL : https://example.com:8080/#/12?category=901018 var temp = $location.absUrl(); // => "https://example.com:8080/#/12?category=901018" 2) url([url]) 파라미터가 없다면, slash(/) 이후의 URL 을 return 한다 파라미터가 있다면, slash(/) 이후의 URL 을 변경한 후,..

[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..

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