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

toggle chatting slider( 간단한 토글 슬라이더 기능)

토글 슬라이드 var spa = (function ( $ ) { // 모듈 스코프 변수 선언 var // 상수 설정 configMap = { extended_height : 334, extended_title : 'Click to retract', retracted_height : 16, retracted_title : 'Click to extend', template_html : '' }, // 그 외 나머지 모듈 스코프 변수 선언 $chatSlider, toggleSlider, onClickSlider, initModule; // DOM 메서드 /toggleSlider/ // 슬라이더 높이를 조정 // toggleSlider = function () { var slider_height = $chatS..
Code Lab 2015. 10. 2. 15:14

전체 선택, 해제 (JavaScript)

var checkFlag = 'false'; // false면 전체선택, true이면 전체해제 function check(field) { if(checkFlag == 'false') { for(i = 0; i < field.length; i++) { field[i].checked = true; // 모든 체크박스를 체크한다. } checkFlag = "true"; return "전체 해제"; // 버튼객체의 value속성으로 반환(this.value.list로 넘겨져왔기 때문에) } else { for(i = 0; i < field.length; i++) { field[i].checked = false; // 모든 체크박스를 해제한다. } checkFlag = "false"; return "전체 선택";..
Code Lab 2015. 10. 2. 10:07