CHAPTER 6 도전! 트위터 웹 앱 개발 Jquery Mobile 5/28/2019.

Presentation on theme: "CHAPTER 6 도전! 트위터 웹 앱 개발 Jquery Mobile 5/28/2019."— Presentation transcript:

1 CHAPTER 6 도전! 트위터 웹 앱 개발 Jquery Mobile 5/28/2019

2 메인 페이지(트윗목록 표시) 상세페이지 Jquery Mobile 5/28/2019

3 설정 페이지 에러 페이지 Jquery Mobile 5/28/2019

4 JSON JavaScript Objet Notation(자바스크립트 객체 표기법)
자료의 종류에는 큰 제한이 없으며, 변수값을 표현하는데 적합 데이터를 받아서 객체나 변수로 할당해서 사용하기 위함 형식은 자바스크립트 구문을 따르지만, 프로그래밍 언어나 플랫폼에 독립적이므로 C, C++, C#, Java, JavaScript, Perl, Phython 등 많은 언어에서 이용 가능 Jquery Mobile 5/28/2019

5 AJAX Asynchronous JavaScript + XML
페이지 이동 없이 고속으로 화면 전환 수신하는 데이터의 양을 줄임 보안에 더욱 신경을 써야 함 Jquery Mobile 5/28/2019

6 기존방식 1) 기존방식 - 웹 브라우저가 웹 서버에 요청 전송
 - 웹 브라우저가 웹 서버에 요청 전송  - 웹 서버는 JSP 등의 서버 어플리케이션을 사용해 사용자의 요청 처리 후 결과를 HTML로 생성해서 웹 브라우저에 전송 - 웹 브라우저는 응답으로 받은 HTML을 분석한 뒤 그 내용을 화면에 그림  - 결과적으로 웹 브라우저가 웹 서버와 통신을 하고 요청 결과는 HTML로 생성되고 사용자 입장에서는 페이지 이동이 발생함  [출처] AJAX 기본 개념 정리(Asynchronous JavaScript + XML)|작성자 꽃동생 Jquery Mobile 5/28/2019

7 AJAX AJAX방식  - 사용자가 이벤트를 발생 > 자바스크립트는 DOM을 사용해서 필요한 정보를 구한 뒤, XMLHttpRequest 객체를 통해서 웹 서버에 요청을 전달 - 웹 서버는 XMLHttpRequest로부터의 요청을 알맞게 처리후 결과를 XML이나 단순 Text을 생성해서 XMLHttpRequest에 전송 - 서버로부터 응답이 도착하면 XMLHttpRequest 객체는 자바스크립트에 도착 사실을 알고 자바스크립트는 응답 데이터와 DOM을 이용해 사용자 화면에 반영   - 결과적으로 사용자 입장에서는 페이지 이동이 발생되지 않고 페이지 내부 변화만 일어남  [출처] AJAX 기본 개념 정리(Asynchronous JavaScript + XML)|작성자 꽃동생 Jquery Mobile 5/28/2019