목록javascript (23)
내맘대로 살기🎉
문제 존레식, 베어 바이볼트의 자바스크립트 닌자 비급으로 자바스크립트를 공부하는 중에, 생전 처음(기억이 가물가물..)보는 연산자(?)를 발견하였습니다. 이것은 삼항연산자도 아니고, 어떤 식으로 검색을 해야할지도 애매해서 블로그에 적기로 했습니다. 코드 return filter ? filter.indexOf("opacity=") >= 0 ? (parseFloat(filter.match(/opacity=([^)]+/)[1] / 100) + "" : "" : elem.style.opacity; 이 코드를 보는데, 한 줄 한 줄은 이해가 가는데, 전체적으로 이해가 도저히 안가더라구요. 그래서 웹개발 커뮤니티 중에 가장 오래되었다는 okky.kr에 질문했습니다. 해결 이런 식으로 개발자도구에서 테스트를 했습니다..
MVC와 MVVM의 차이 MVC - controller와 통신한다. model - view - controller MVVM - 자기 자신과 통신하는 선언적 데이터 바인딩. model - view - view - model. 양방향 데이터 바인딩을 하기 때문에 model과 view가 알아서 통신한다. 그러므로 controller가 없어도 작성 가능 !! 데이터를 제공하는 컨트롤러 없이 ng-repeat을 사용하여 생성하는 것이다 {{ number }} 스코프 주석 유효범위 내의 범위를 스코프주석으로 묶어준다. 그러면 어디까지가 유효범위인지 한 번에 확인할 수 있다.
동적 뷰와 라우팅 angular를 이용해서 웹 사이트의 header, footer, left, right로 나누는 것을 쉽게 할 수 있다. angular의 동적 뷰를 이용하면 되는데, 그 방법은 URL을 기준으로 $routeProvider를 통해서 특정 뷰를 얻어온 다음 적용하면 된다. myApp.config(['$routeProvider', function($routeProvider){ $routeProvider .when('/', { templateUrl:'views/main.html' }); .when('/emails', { templateUrl:'views/emails.html' }); .otherwise({ redirectTo:'/' }); }]); - URL이 '/'이면 main.html로 주..
선언적 DOM 메서드 디렉티브이며, 스크립트로 작성해서 DOM에 기능을 제공한다. ng-show와 ng-click을 사용한 토글 네비게이션 예제로 확인해본다. Toggle nav Link 1 Link 2 Link 3 - 이 코드를 실행시키면 아래와 같이 실행되는데, "Toggle nav"를 클릭하면 밑의 Link 1~3이 사라지거나 보인다. 말 그래도 토글이다. 표현식 어떤 식으로 작성하는지 먼저 확인해보자. {{ data.length > 0 && 'My data' || 'No data'}} 이런 식으로 작성하면, data.length가 0보다 크다면, My data. 작다면, No data라고 출력하는 문이다. if문을 쓰지 않아도 아주 짧게 표현할 수 있다. 내 생각 - javacript에서 data..
scope함수를 사용하여 메일 중 하나를 삭제하는 기능을 만들어보자. 고급 팁: 모델에서 데이터를 지우는 동작을 생각해보는 건 중요하다. 실제 DOM과 연관된 요소를 지우는 게 아니기 때문이다. Angular는 양방향 바인딩과 콜백없이 처리한다. 우리는 데이터에 반응하는 코드를 현명하게 작성하면 된다. My Inbox: From: {{ message.from }} Subject: {{ message.subject }} {{ message.sent | date:'MMM d, y h:mm:ss a' }} Delete email // 추가된 부분 - delete하기 위해 - html파일 안에 어떤 식으로 코드가 작성되고, 추가되었는지 확인 var myApp = angular.module('myApp', [])..
GET방식과 POST방식의 차이 GET - 어떠한 정보를 서버에 요청해서 가져오는 것. // " 서버 " ㅁ .jade 태그의 속성을 넣고 싶다면 ex) meta(charset='utf-8') pp.get('/form',function(req,res){ res.render('form'); }); app.get('/form_receiver',function(req, res){ var title = req.query.title; var description = req.query.description; res.send(title+','+description); }); - input이나 textarea의 값을 submit했을 때 값을 가져오고 싶다면 name을 지정해주고 req.query로 참조하면 된다. ㅁ ..
Angular의 철학,- 기능이 풍부한 동적 HTML을 생성해서 웹 클라이언트 측에서 많은 일을 보이지 않게 처리해준다.(view에서 거의 다 해준다는 것인가 ?) var myApp = angular.module('myApp', []); myApp.controller('EmailsCtrl', ['$scope', function ($scope) { $scope.emails = {}; $scope.emails.messages = [{ "from": "Steve Jobs", "subject": "I think I'm holding my phone wrong :/", "sent": "2013-10-01T08:05:59Z" },{ "from": "Ellie Goulding", "subject": "I've got..
실제 서버의 XHR 호출을 한다. $http 메소드는 Angular가 서버 데이터에 접근하는 기능을 래핑한 메소드이다. myApp.controller('MainCtrl', '$http' ['$scope', function ($scope, $http) { $http({ method: 'GET', url: '//localhost:9000/someUrl' }) .success(function (data, status, headers, config) { // 성공! 데이터를 가져왔어 }) .error(function (data, status, headers, config) { // 이런. 뭔가 잘못되었음! :( }); }]); -- GET요청을 보내고 성공인지 실패인지 확인한다. { "user": { "name..
textarea의 스크롤이 있는지 없는지 확인하는 것이 필요했다. (function($) { $.fn.hasScrollBar = function() { return this.get(0).scrollHeight > this.innerHeight(); } })($); - 스크롤의 유무를 확인하는 function을 직접 만들어줘서 사용하면 된다. fn에 대해 찾아봤는데, fn 속성은 prototype 속성의 가명이라고 한다.또한, prototype과 fn은 완전히 같은 것이라고 한다.
양방향 데이터 바인딩이란, 완전히 동기화된 데이터라고 생각하면 좋다. 모델을 갱신하면 뷰에 반영되고, 뷰를 갱신하면 모델에 반영되는 형태이다. * 동기화를 위한 다른 작업을 하지 않아도 자동으로 동기화. My model data: {{ myModel }} - view단의 에서 myModel이라는 모델을 연결. var myApp = angular.module('myApp', []); myApp.controller('MainCtrl', ['$scope', function ($scope) { $scope.myModel = ''; }]); 실제 출력 화면의 textbox에 입력해보면 My model data에 값이 바로바로 동기화되는 것을 확인할 수 있다. * 출처 : http://soomong.net/blog..