hisLibrary

객체를 복사하여 쓸일이 있는데 JS에도 얕은 복사와 깊은 복사의 의미를 갖는 각 방법이 존재하여 정리한다. 1. Object.assign() 객체의 프러퍼티가 key : value 구조를 이루며 value가 객체 또는 배열 구조가 아닌 경우에는 이 방법을 이용해도 좋다 하지만 value 값이 객체 또는 배열일 경우 값의 복사가 아닌 참조(포인터)값이 복사 되어 결국 값의 복사가아닌 참조를 하게 된다. (C언어 지식이 조금 필요) clone_obj = Object.assign({}, default_obj); // 이를 함수화 시키면 아래와 같다 function cloneObject(obj) { return Object.assign({}, obj); } clone_obj = cloneObject(obj); ..

AngularJS 2019. 3. 14. 00:34

1. 변화 angularjs로 개발을 하게 되면 생각대로 값에 대한 변경이 이루어지지 않는 경우가 정말 많다. 그러한 이슈들 중 해결방법은 몇가지 있지만 그거 마저도 굉장히 어렵다.앞서 소개하고 설명했던 공부들중 몇몇이 이에 해당된다. 이번 공부는 $apply와 $watch가 이에 해당된다. 2. $apply 먼저 $apply에 대해 소개를 시작하겠다. function $apply(expr) { try { return $eval(expr); } catch (e) { $exceptionHandler(e); } finally { $root.$digest(); }} $apply는 위와같이 구현되어져 있다. 따라서 $eval을 반드시 수행하며 이후 에러가 나지않는다면 $digest를 수행하게 된다. 먼저 $ev..

AngularJS 2019. 3. 4. 22:57

1. layer 열고 닫기 /* * directive - 다른 레이어 view 또는 레이어 닫기 기능 * * layerShow : 현재 닫으려는 pop-up의 show의 scope 변수명 * input : 현재 닫으려는 pop-up input의 모델 객체 명 (ex object.model => object를 적음됨) * layer : 현재 새로 열려는 pop-up scope 변수명 (열려는 pop-up)없을수도 있음 ) * form : 현재 닫으려는 form name */inquiry_controller.directive('layerShow',['$parse',function($parse){return {priority:'2',restrict: 'AE',scope : {layerShow :'=',inpu..

AngularJS 2019. 2. 21. 22:22

1. 상속 , Prototypal 상속 오늘은 AngularJS의 상속에 대해 알아보자. 미리 말하지만 AngularJS의 상속의 의미는 자바보다 복잡하며 이를 제대로 이해하지 못 할경우 코딩시 차후 문제가 반드시 발생한다.AngularJS에서 상속의 의미는 자바 보다는 자바스크립트를 따라간다. 따라서 자바스크립트 고수분들에게는 쉽게 다가올 것이다. 참고 (https://github.com/angular/angular.js/wiki/Understanding-Scopes) 위 링크를 한번 정독하는 것을 추천하다.정독을 추천하지만 시간이 없는 사람들이 있을수 있기에 윗글을 내 나름대로 정리해보겠다. 1. 부모 scope에 object , primitive type(String, Boolean , Number..

AngularJS 2019. 2. 20. 01:09

1. Directive 공부 에서 아마 짧게나마 하지만 요점은 확실하게 공부 했다. 이번에는 좀더 자세하게 한번 공부해보자 일단 한번 지난 공부를 리뷰해보자 지시자는 앵귤러의 웹 컴포넌트 역할을 한다. 뷰 영역에 속한다. 지시자에는 Angular에서 제공하는 지시자(ng-app,ng-model,ng-...)과 사용자 정의 지시자(file-model,a-b-c)가 있다. 그림은 지시자가 해석되는 순서를 보여준다. 1. HTML을 DOM으로 해석하고 2. 각각의 지시자에 대해 compile()을 진행한다. 결과로 DOM l객체와 link()함수를 반환한다. 3. 반환된 link함수에 대해 $scope를 주입시키게 되면 $digest loop가 돌게 되고 이후 자동을 $watch에 등록 되어진다. 4. 앵귤러..

AngularJS 2019. 2. 19. 00:42

1. 바인딩 AngularJS는 데이터에 대한 바인딩을 제공한다. 여기서 바인딩이랑 값의 일치를 말한다. 자바스크립트를 예로 들자면 var model = document.getElementId('model').value; // ... model을 가지고 작업 후 document.getElementId('model').value = model; 이러한 작업을 말한다. 2. 양방향 , 단방향 자 그럼 양방향 바인딩과 단방향 바인딩을 알아보자. 양방향 ,단방향 바인딩은 이름에서도 알수 있듯이 바인딩 된 값이 변경 되었을 때 이 변경 된 값이 모델에 반영이 되는가를 말한다. 단방향 바인딩은 처음 모델값이 뷰(view)에서 변경이 일어나도 모델의 값은 변경 되지 않는다. 양방항 바인등은 처음 모델값이 뷰(view..

AngularJS 2019. 2. 18. 09:48

1. Module Angular에서 Module은 AngularJs를 부트스트랩 시킬 하나의 영역을 정하는 것과 같다. 자바로 치면 Main Thread 영역이라고 생각하면 쉽다. 이 모듈을 선언하는 방법은 2가지가 있다. 1. ng-app = "myApp" 이 방법은 자동으로 모듈을 설정하는 방법으로 한페이지당 한번밖에 사용하지 못한다는 단점이 있다. 물론 이는 큰 단점이 아니다. 보통 한페이지당 하나의 모듈을 사용하기 때문이다. 2. angular.bootstrap($('html').eq(0), [ 'myApp' ]); 이 방법은 수동으로 모듈을 설정하는 방법으로 한페이지당 여러번 사용 할 수 있다. 나는 주로 이 방법을 사용한다. 이는 보통 Html 문서가 끝나는 아래에다 선언한다. ... 위와 같..

AngularJS 2019. 1. 21. 01:52

AngularJS 공부를 시작한지는 몇일 지났지만 정리가 필요한 시점이 된거 같아 정리를 해보려고 한다. 1. MVC & MVVM AngularJS는 클라이언트 단에서 MVC & MVVM 프로그래밍을 하는것인데 이는 입력값을 어디에서 받는냐에 따라 관점이 달라지므로 총칭으로 MVW 이라고도 한다.그림과 같이 입력값을 서버로부터 받아 Controller에서 바인딩을 하거나 클라이언트로부터 입력을 받아 View에서 데이터 바인딩을 한다.여기서 데이터 바인딩은 말그대로 뷰와 컨트롤러사이의 데이터를 묶어주는 것을 말한다. 2. 양방향 데이터 바인딩 View 와 model이 서로 자동으로 데이터가 바인딩이 되는것을 말한다. View에서 $scope에 모델을 생성해 뷰에서 사용 할 경우 자동으로 $watch리스트에..

AngularJS 2019. 1. 21. 01:14