오늘은 몰랐으면 내일은 알면 된다

[ 서비스란? ] : AngularJS 애플리케이션 한정으로 사용할 수 있는 함수나 객체를 의미한다. $locaion 포함 30가지 정도의 built-in 서비스가 있다. $location은 현재 웹페이지의 위치정보(url)를 반환하는 메서드를 가지고 있다. (window.location과 비슷함) {{myUrl}} 서비스를 컨트롤러에서 사용하기 위해서는 의존성 정의가 되어야한다. (it must be defined as a dependency.) 컨트롤러 객체에 매개변수로 넘기든지 해서 DI해야한다는 뜻인 것 같다. [ 서비스를 왜 사용하는가? ] : $location 같은 경우에는 이미 DOM 내에 존재하는 window.location 객체를 사용하면 될 것 같지만, AngularJS 애플리케이션 내..

[ AngularJS 필터 ] : 데이터 변형을 위해서 사용된다. currency number 를 통화(currency) 형식으로 바꾼다. date date 를 특정한 형식으로 바꾼다. filter array 의 부분집합을 선택한다. (조건에 따른 데이터 선택) json 객체를 JSON String 으로 바꾼다. limitTo array 또는 String 을 특정 인덱스까지만 제한해서 표시한다. lowercase String을 lower case로 바꾼다. number number를 string으로 바꾼다. orderby 배열을 식(expression)에 따라 정렬한다. uppercase String을 upper case로 바꾼다. [ 식(Expression)에 필터를 추가하기 ] : 필터는 파이프 문자..

스코프는 HTML(view) 과 자바스크립트(controller)를 연결해준다. 사용가능한 프로퍼티와 메서드를 가지고 있는 객체이며, 뷰와 컨트롤러 양쪽에서 사용가능하다. [ Scope 사용방법 ] : 컨트롤러를 만들때 $scope 객체를 인자(argument)로 넘기게 된다. 컨트롤러에서 $scope 객체에 프로퍼티를 추가하면, 뷰(HTML)에서는 해당 프로퍼티에 접근할 수 있다. 뷰에서는 $scope라는 접두어를 붙이지 않고 단순히 프로퍼티명을 쓰는 것만으로 데이터를 사용할 수 있다. {{carname}} [ Scope 이해하기 ] : AngularJS 애플리케이션이 다음의 세가지로 구성되어있다고 한다면, 뷰(View) : HTML 모델(Model) : 현재 뷰에서 사용가능한 데이터 컨트롤러(Cont..

AngularJS 애플리케이션은 컨트롤러에 의해 제어된다. ng-controller 디렉티브는 컨트롤러를 정의한다. 컨트롤러는 정규 자바스크립트 객체 생성자에 의해 생성되는 자바스크립트 객체이다. First Name : Last Name : Full Name : {{firstName + " " + lastName}} [ 위의 예제에 대한 설명 ] - ng-app="myApp" : 애플리케이션을 정의하는 부분이다. AngularJS 애플리케이션은 ng-app 디렉티브가 지정되어있는 div 내에서 동작한다. - ng-controller="myCtrl" : ng-controller 속성(attribute)은 AngularJS의 디렉티브이다. 컨트롤러를 정의한다. - myCtrl : 자바스크립트 function..

AngularJS에서의 데이터 바인딩은 모델과 뷰간의 동기화를 의미한다. [ 데이터 모델 ] : Angular 애플리케이션은 보통 데이터 모델을 가지고 있다. 데이터 모델이란 애플리케이션에서 사용가능한 데이터의 Collection을 의미한다. var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstname = 'NY'; $scope.lastname = 'KIM'; }); [ HTML 뷰 ] : AngularJS의 애플리케이션이 표시되는(displayed) HTML 컨테이너를 의미한다. 뷰는 모델에 접근(access)이 가능하며, 모델의 데이터를 나타내는 몇가지 방법을 가지고 있다. ng-bi..

두가지의 textarea의 scrollHeight를 비교해서 긴쪽에 맞춰줘야 할 일이 생겼다. 하지만 향후 늘어날 수도 있기 때문에 여러개의 textarea를 비교해서 맞춰주는 방식을 알아보도록 하자. 요소의 scrollHeight를 구하는 방식 자체는 아래와 같다. $(selector).prop('scrollHeight'); javascript를 활용해서 최대, 최소를 구하는 방식은 아래를 참고했다. programmingsummaries.tistory.com/108 [JavaScript] 배열 요소 중 최대값 최소값 찾기 숫자로 이루어진 배열 내에서 가장 큰 숫자 혹은 가장 작은 숫자를 찾아야 할 경우 FOR문을 돌리는 단순한 방법 외에 두 가지 방법이 더 존재한다. 먼저 Math 객체를 사용하는 방법..

디자이너와 협업을 하는 경우에는 사실 style을 직접 다룰일은 많지가 않다. 간단한 수치값을 바꾸는 정도는 미리 짜여있는 css 코드를 보고 직접 바꾸면 되기 때문이다. (어쨌든 물어보고 해야겠지만) 그런데 직접 요소의 위치를 바꾼다거나 할 때 css에 익숙하지가 않아서 헤매는 경우가 많이 생긴다. 대체 이 요소는 이렇게 주면 이 위치에 들어갈 것 같은데 왜 그리로 안들어가지? 같은.. 이럴때 그냥 위치 조정만 할 줄 알아도 크게 도움이 되는 듯 하다. 하도 안돼서 하루는 날을 잡고 찾아봤는데, 꽤 유용한 사이트가 있어서 포스팅을 해둔다. flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com css 기..

ng-model 디렉티브는 HTML 요소에 제어값(value of controls)을 연결한다(input, select, textarea 등). [ ng-model 디렉티브 ] : ng-model 디렉티브를 통해서 input 필드의 값을 AngularJS의 변수와 연결할 수 있다. Name : [ 양방향 바인딩 ] : 데이터 바인딩은 양방향으로 이루어진다. 사용자가 input 필드의 값을 변경하면, AngularJS 프로퍼티의 값도 바뀐다. 영어값은 그런데, 영어를 제외하면 바로 적용되지는 않는다. focus를 벗어나면 적용되는 듯 하다. 한글, 일본어와 같은 2byte 문자를 양방향 바인딩하기 위해서는 디렉티브를 따로 등록해주어야 한다. qiita.com/koh110/items/4c5d22339ef21..

1. AngularJS는 디렉티브라는 새로운 요소를 통해 HTML을 확장할 수 있게 해준다. 2. Angular에는 몇가지의 미리 만들어진 디렉티브들이 있고, 애플리케이션에 기능을 추가하기 위해 사용할 수 있다. 3. 커스텀 디렉티브를 정의하여 사용할 수도 있다. [ AngularJS 디렉티브 ] : 접두어 ng- 를 붙여 사용한다. ng-app AngularJS 애플리케이션을 초기화한다. ng-app 디렉티브가 붙어있는 element가 애플리케이션 owner라는 것을 알려준다. ng-init 애플리케이션 데이터를 초기화한다. ng-model HTML 요소에 제어값(value of controls)을 연결한다(input, select, textarea 등) Name: You Wrote: {{firstNa..

textArea의 내용을 한눈에 볼 수 있게 해달라는 요청을 받았다. textArea는 내용이 길어지면 스크롤이 생긴다. overflow, height: auto; 가 전부 사용이 되지 않아서, 결국 어떻게 하는지 다시 찾아봐야 했다. textArea 자체에 대해서는 아래를 참고 www.w3schools.com/tags/tag_textarea.asp HTML textarea tag HTML Tag Example A multi-line text input control (text area): Review of W3Schools: At w3schools.com you will learn how to make a website. They offer free tutorials in www.w3schools.co..