[Web] JavaScript -2

AJAX

AJAX(Asynchronous JavaScript and XML) : 구현하는 방식이다.

웹에서 화면을 갱신하지 않고 데이터를 서버로부터 가져와 처리하는 방법을 의미

비동기 방식으로 결과를 조회한다.

동적으로 DOM을 구성해야하므로 구현이 복잡

AJAX는 다른 도메인과의 통신이 기본적으로 불가능하다.

 

· 일반 요청에 대한 응답

 - data 입력 후 이벤트 발생

 - 일반 요청은 서버에서 data를 이용하여 logic 처리

 - logic 처리 결과에 따라 응답 page를 생성하고 client에 전송(화면전환)

 

· Ajax 요청에 대한 응답

 - data 입력 후 이벤트 발생

 - ajax 적용 시 이번트가 발생하면 서버에서 요청을 처리한 후 데이터로 응답 (Text, XML또는 JSON)

 - client는 이 응답 data를 이용하여 화면 전환 없이 현재 페이지에서 동적으로 화면을 재구성

 

· 서버와 클라이언트의 상호작용

웹 화면 구성방식은 서버 중심의 상호작용 방식과 클라이언트 중심의 상호작용 방식으로 구부

서버 중심의 개발 방식 : 화면구성이 서버에서 이루어진다.

클라이언트 중심의 개발 방식 : 웹 브라우저에서 화면 구성

ajax는 클라이언트 중심의 개발 방식이며 동적 화면구성이 관건

 

JavaScript AJAX

· 데이터 전송 형식 : CSV

서버와 클라이어느는 주고 받을 data 형식을 맞춰야함. 대표적 파일 타입 : CSV, XML, JSON

 

· CSV

각 항목을 쉼표(,)로 구분해 데이털르 표현하는 방법, 많은 양의 데이터 전송 시 유리하다. 

단, 각각의 데이터가 어떤 내용인지 파악하기 어렵다.

장점 : 파일 크기가 작다

단점 : 값에 대한 정보가 없다

11111111,가나다,A,40 22222222,라마바,B,50 33333333,사아자,C,60

· XML

tag로 데이터를 표현함, tag를 보면 각 data가 무엇을 의미하는지 파악 가능, 복잡한 data 전달 가능

장점 : 값의 정보를 확실하게 알 수 있다.

단점 : 부가적 정보가 너무 많다.

· JSON

CSV와 XML의 단점을 극복한 형식으로 JavaScript에서 사용하는 객체의 형식으로 data를 표현

Ajax 사용시 거의 표준으로 사용되는 data 표현 방식이다.

반응형 웹

· 뷰포트(viewport)

<meto name="viewport" content="width=device-width, initial-scale=1.0">

· 부트스트랩 

fontend Framework

HTML 및 CSS 기반 디자인 템플릿과 선택적 JavaScript 플러그인이 포함

반응형 디자인을 쉽게 만들 수 있는 기능 제공

 - Grid Class : 클래스를 결합하여 보다 동적이고 유연한 레이아웃을 만들 수 있다.

   부트 스트랩의 그리드 시스템은 플렉스 박스로 구축되어 페이지에 최대 12개의 열을 허용한다.

class	device	설명
.col-num	extra small	<576px
.col-sm-num	small	>=576px
.col-md-num	medium	>=768px
.col-lg-num	large	>=992px
.col-xl-num	extra large	>=1200px

4

8

576px 미만일 때에는

4

8