Web Club

Web Tech 검색 결과

해당 글 70건

AngularJS 의 View, Controllers, Scope의 관계

View, Controller, $scope$scope 는 컨트롤러와 뷰 사이에서 중계자자(ViewModel) 역할을 합니다. MV* 프레임워크(MVC, MVVM, MVP) Controller 를 생성한 후 View 에 추가 // 사용할 컨트롤러 설정 초간단 컨트롤러 추가 //$scope 의 멤버에 접근 {{ cust.name }} - {{ cust.city }} // 함수로 컨트롤러 생성 function SimpleController($scope) { // 매개변수로 동적 $scope 주입 $scope.customers = [ { name: 'RedPlus', city: '인천'}, { name: 'Taeyo', city: '서울＇}, { name: 'Songgun', city: '경기'}, { nam..

Web Tech/AngularJS 2015. 10. 26. 22:57

AngularJS module

AngularJS module 정의 AngularJS 의 module 정의와 controller // 데이터 준비 : 서버측에서 Ajax 로 전송되는 데이터라고 가정 arrs = [{ num: 10, name: 'AngularJS', lib: '앵귤러' }, { num: 11, name: 'jQuery', lib: '제이쿼리' }, { num: 12, name: 'javaScript', lib: '자바스크립트' }]; // 모듈(ng-app) 선언 (모듈은 애플리케이션의 개념) var myModule = angular.module("myModule", []); // 컨트롤러(ng-controller) 선언 (특정위치에 데이터 출력) // 사용자 정의의 컨트롤러 이름 정의 myModule.controlle..

Web Tech/AngularJS 2015. 10. 26. 22:35

AngularJS 란 무엇인가?

AngularJS 개념 AngularJS 는 SPA(Single Page Application) 프레임워크라고 합니다. 예를 들어, 하나의 웹 페이지가 실행할 때 View 단에 해당되는 부분이 페이지의 주소가 바뀌지 않으면서 또 다른 새로운 view 를 동적으로 로드하여 사용하는 것을 SPA 라고 합니다. 이러한 SPA 를 편하게 사용하도록 도움을 주는 것이 AngularJS 와 같은 자바스크립트 프레임워크입니다. 그래서 AngularJS 는 SPA 를 만들때 도움을 주는 프레임워크이고 자바스크립트 기반의 MV* 오픈소스 프레임워크라고도 합니다. 결론적으로 SPA & 자바스크립트 기반의 MV* 프레임워크입니다. MVC 그렇다면, MV* 패턴은 무엇인가? 자바스크립트 공부를 시작하면서 생소한 용어들 중에 ..

Web Tech/AngularJS 2015. 10. 24. 13:24

Ajax를 이용한 이미지 동적 로딩(JSON 버전)

Image & JSON with Ajax 앞선 포스팅에서 xml 이미지 데이터를 JSON 형식으로 구성하여 처리하도록 하겠습니다. image.json 파일 json { "imageList": [ { "title": "이미지1", "url": "http://lorempixel.com/output/people-q-c-400-200-9.jpg" }, { "title": "이미지2", "url": "http://lorempixel.com/output/sports-q-c-400-200-3.jpg" }, { "title": "이미지4", "url": "http://lorempixel.com/output/business-q-c-400-200-10.jpg" }, { "title": "이미지5", "url": "http..

Web Tech/Ajax 2015. 10. 20. 13:45

Ajax를 이용한 동적 이미지 노드생성(XML 버전)

Image & XML with Ajax 다음은 "이미지 정보 읽기" 버튼을 클릭하면 images.xml 파일을 읽어들여 img 태그 요소의 수만큼 이미지 패널을 동적으로 생성하는 예제입니다. codepen 소스는 실행되지 않으므로 각자의 로컬에서 웹서버를 실행시킨 후 실행해 주세요. var xmlHttp; window.onload = function(){ $("#btn_load").click(function(){ loadFile(); }); }; function loadFile() { // 1. 브라우저에 따른 XMLHttpRequest 객체 생성 xmlHttp = createXMLHTTPObject(); // 2. 요청에 대한 응답처리 이벤트 리스너 등록 xmlHttp.onreadystatechange..

Web Tech/Ajax 2015. 10. 20. 08:34

Ajax 핵심단계 파헤치기

Ajax 기본 핵심단계 Ajax의 시작은 항상 XMLHttpRequest 객체를 생성하는 것부터 시작합니다. 다음은 앞선 포스팅에서 살펴본 XMLHttpRequest 객체 생성방법을 다른 방법으로 작성한 코드입니다. /** * ----------------------------------------- * 브라우저에 따른 XMLHttpRequest 생성하기 * ----------------------------------------- */ window.onload=function(){ var xmlHttp = HTTP.createXMLHTTPObject(); }; var HTTP = {}; // 브라우저에 따른 XMLHttpRequest 객체 생성 함수인 팩토리 함수를 만들어 배열에 저장 HTTP._fac..

Web Tech/Ajax 2015. 10. 16. 16:55

Ajax 실행 단계별 알아보기

Ajax 실행 단계 "Ajax 시작하기"의 앞 선 포스팅에서 Ajax 에 대한 workflow 에 대해 간단히 살펴보았습니다. 다음은 이 실행 순서 단계에 관련된 내용을 설명하도록 하겠습니다.1. XMLHttpRequest (요청) 객체를 생성 2. 처리 결과를 받을 이벤트 리스너 등록 3. 서버로 보낼 데이터 생성 4. 클라이언트와 서버 간의 연결 요청 준비(open() 메서드 이용) 4-1. 서버로 보낼 데이터 전송방식 설정(GET, POST 중 선택) 4-2. 서버 응답 방식 설정(동기, 비동기 중 선택) 5. 실제 데이터 전송 6. 응답처리 7. 데이터 처리 XMLHttpRequest 란? XMLHttpRequest 객체는 Ajax 의 핵심이며, 클라이언트와 서버 간의 통신을 담당하는 객체입니다...

Web Tech/Ajax 2015. 10. 6. 16:30

Ajax 시작하기

Ajax 란? Ajax 는 작게는 검색어 자동 완성 기능부터 크게는 전 세계를 안 방에서 한 눈에 들여다 볼 수 있는 구글 지도 서비스, 그리고 먼 나라의 거리를 간접 체험할 수 있는 street view 등을 시작으로 기존 데스크 톱에서나 가능했던 오피스 애플리케이션을 웹 애플리케이션으로 만들어 천대받고 저급한 언어로 여겨졌던 자바스크립트를 자바스크립트의 전성시대로 탈바꿈시킨 것이 구글이 내세운 Ajax 입니다.이 이후로 정적인 웹은 동적인 웹으로 변모하기 시작했으며, 순수 웹 표준 기술만으로 기존 상상만 하던 것을 가능하게 하고 있습니다.Ajax 라는 용어는 말하는 사람마다 조금씩 다르게 정의되고 있습니다. 어떤 이는 클라이언트와 서버 간의 데이터 연동을 다루는 것만 Ajax 라고 정의 내리기도 하고..

Web Tech/Ajax 2015. 10. 6. 15:45

jQuery Navi Menu 플러그인 제작 고려사항

jQuery Navigation Menu 플러그인 제작 고려사항 내비게이션 위젯에 접근성 향상을 위한 WAI-ARIA 적용 WAI-ARIA는 RIA 웹 애플리케이션의 취약한 접근성을 개선하기 위한 목적으로 개발된 표준 접근성 API로, Javascript를 사용하여 HTML 문서에 역할, 속성, 상태 등을 정의할 수 있습니다. 이를 통해 웹 제작자는 웹 애플리케이션의 접근성을 향상시킬 수 있습니다. WAI-ARIA 퀵 레퍼런스 보기 웹 사이트 글로벌 내비게이션 제작가이드 보기 역할(Roles) 설정 ㆍ 네비게이션 요소 ( or ) 에 role="navigation" 역할 설정 ㆍ 네비게이션바 요소 ( ) 에 role="menubar" 역할 설정 ㆍ 레벨 2Depth 메뉴 컨테이너 요소 ( ) 에 role..

Web Tech/jQuery 2015. 7. 9. 13:27

jQuery 플러그인 디자인 패턴

jQuery 플러그인 디자인 패턴jQuery 플러그인 설계시에 기본적으로 고려해야 할 점들을 알아 보겠습니다. 1. 플러그인 이름 2. 플러그인 제작 기본 패턴 (function())(); 을 활용한 $ 별칭을 보호 체이닝 설정 3. 사용자 정의 옵션 설정 4. 네임스페이스 플러그인 이름 작성 jquery.{{플러그인이름}}.js 또는 jquery.{{플러그인이름}}.1.0.0.js 플러그인 제작 기본 패턴 (function(global, $){ 'use strict'; $.fn[{{pluginName}}] = function() { var _this = this; return _this; // return _this.each(function(index, item){}); // return _this.p..

Web Tech/jQuery 2015. 6. 30. 14:15

jQuery 인스턴스 객체를 참조했을 때와 참조하지 않을 때의 성능차이

$() 팩토리 함수의 참조 vs 비참조$() 에서 반환되는 인스턴스 객체(jQuery 객체) 를 참조했을 경우와 참조하지 않고 사용했을 경우의 성능 차이를 콘솔 타임으로 보도록 하겠습니다. jQuery 인스턴스 객체를 참조하지 않은 경우 console.time('Non Cached'); var i = 0; for(; i < 10000; i++) { var $test = $('div'); } console.timeEnd('Non Cached'); jQuery 인스턴스 객체를 참조한 경우 console.time('Cached'); var i = 0, $test = $('div'); for(; i < 10000; i++) { var s = $test; } console.timeEnd('Cached'); 콘솔창..

Web Tech/jQuery 2015. 6. 30. 12:55

[STEP 04] 기초 플러그인 제작 가이드

jQuery PlugIn 기초 이번 단계에서는 플러그인 사용자를 위한 간단한 유효성 검사항목을 추가하여 제작해 보도록 하겠습니다. STEP 04 JavaScript // 전역이 오염되지 않도록 별도의 공간을 생성 // 스코프 함수 (즉시 실행되는 함수 내부) (function(global, $){ 'use strict'; // $.fn.radioClass 플러그인이 존재하지 않는다면? if ( !$.fn.radioClass ) { /** * $.fn.radioClass 플러그인 정의 * @param {string} name radioClass 를 적용할 class 속성 이름 * @param {string} context radioClass 를 적용할 컨텍스트 선택자 * @return {jQuery Obj..

Web Tech/jQuery 2015. 6. 23. 15:25

[STEP 03] 기초 플러그인 제작 가이드

jQuery PlugIn 기초 이번 단계에서는 사용자가 정의한 클래스 속성을 원하는 요소에 설정하도록 제작해보도록 하겠습니다. 마크업은 이전과 동일한 형태입니다. STEP 03 JavaScript / 전역이 오염되지 않도록 별도의 공간을 생성 // 스코프 함수 (즉시 실행되는 함수 내부) (function(global, $){ 'use strict'; // $.fn.radioClass 플러그인이 존재하지 않는다면? if ( !$.fn.radioClass ) { $.fn.radioClass = function(name, context) { // 클래스 속성이 설정될 context 의 기본 값을 설정합니다. // 사용자 정의 값이 있으면 덮어쓰기 context = context ? context : null..

Web Tech/jQuery 2015. 6. 23. 15:18

[STEP 02] 기초 플러그인 제작 가이드

jQuery PlugIn 기초 STEP 01 단계에서는 a 태그가 없는 li 에 class 를 추가하는 플러그인이었습니다. 하지만 li 요소는 탭포커스가 이동되지 않기 때문에 접근성을 위한 탭포커스를 위해 마크업에 a 태그를 추가하여 접근성까지 고려한 플러그인을 제작해보도록 하겠습니다. Mark-up Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor. STEP 02 JavaScript // 전역이 오염되지 않도록 별도의 공간을 생성 // 스코프 함수 (즉시 실행되는 함수 내부) (functi..

Web Tech/jQuery 2015. 6. 23. 14:59

[STEP 01] 기초 플러그인 제작 가이드

jQuery Plugin 기초 제이쿼리 플러그인에 대한 기초 단계부터 심화단계까지 포스팅해 보겠습니다. 간단하게 class 를 붙였다 지웠다하는 radio 와 같은 역할을 하는 플러그인을 단계별로 작성해보도록 하겠습니다. STEP 01 JavaScript if (!$.fn.radioClass) { // $.fn 객체의 radioClass 메소드 정의 // $ 가 jQuery 의 Alias(별칭)이듯이 fn 은 prototype 의 Alias(별칭) 입니다. // console.log($.fn === $.prototype); // true $.fn.radioClass = function(name) { // 플러그인 함수 내부에서 this 는 jQuery 인스턴스 객체를 가리킵니다. // $('li.sele..

Web Tech/jQuery 2015. 6. 23. 14:57