[FE 과목평가 대비] AJAX, Bootstrap (각각의 특징 등)
AJAX 특징 ★★★
AJAX : 비동기적인 자바스크립트와 XML의 통신
언어나 프레임워크X 구현하는 방식
화면을 갱신하지 않고 데이터를 서버로부터 가져와서 처리
JavaScript의 XMLHttpRequest 객체로 데이터를 전달하고 비동기 방식으로 결과조회
화면 갱신이 없으므로 사용자 입장에서는 편리하지만 동적으로 DOM을 구성해야 하므로 구현복잡
Ajax를 적용하면 event(=submlit발생) 발생 시 서버에서 요청을 처리한 후 Text, XML 또는 JSON으로 응답
응답 data를 parsing 후 화면 전환없이 현재 페이지에서 동적으로 화면을 재구성
* GET 방식
* POST 방식
https://mangkyu.tistory.com/17
* Javascript를 이용하여 ajax 처리 (캡처 참고)
* jQuery를 이용하여 ajax 처리 (캡처 참고)
...
https://coding-factory.tistory.com/143
Ajax는 JavaScript의 라이브러리중 하나이며
Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자
브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서
전체 페이지를 새로 고치지 않고도
페이지의 일부만을 위한 데이터를 로드하는 기법
Ajax를 한마디로 정의하자면,
JavaScript를 사용한 비동기 통신이자
클라이언트와 서버간에 XML 데이터를 주고받는 기술
비동기(async)방식이란?
비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식
이 방식의 장점은 페이지 리로드의 경우 전체 리소스를 다시 불러와야하는데,
이미지, 스크립트, 기타 코드등을 모두 재요청할 경우 불필요한 리소스 낭비가 발생하게 되지만,
비동기식 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있으므로 리소스 낭비를 방지한다
jQuery와의 시너지
일반 Javascript만으로 Ajax를 하게되면 코딩량도 많아지고 브라우저별로 구현방법이 다른 단점이 있는데
jquery를 이용하면 더 적은 코딩량과 동일한 코딩방법으로 대부분의 브라우저에서 같은 동작
jquery ajax를 사용하면, HTTP Get방식과 HTTP Post방식 모두를 사용하여 원격 서버로부터 데이터를 요청 가능
Jquery는 Ajax처럼 JavaScript의 라이브러리 중 하나인데
자바스크립트를 좀 더 사용하기 쉽게 패키징화 시켜놓은 것입니다.
Ajax의 장점
1. 웹 페이지의 속도 향상
2. 서버의 처리가 완료 될때까지 기다리지 않고 처리 가능
3. 서버에서 data만 전송하면 되므로 전체 코딩의 양 감소
4. 기존 웹에서 불가능했던 다양한 UI를 가능
Ajax의 단점
1. 히스토리 관리가 안 된다(보안에 신경)
2. 연속으로 데이터 용청 시 부하가 증가
3. XMLHTTPRequest를 통해 통신을 하는 경우 사용자에게 아무런 정보가 주어지지 않아서
아직 요청이 완료되지 않았는데 페이지를 떠나거나 오작동할 우려가 발생
데이터 전송 형식
SCV : comma separated values
쉼표로 구분
많은 양의 데이터 전송 시 유리
단 각각의 데이터가 어떤 내용인지 파악하기 어렵다
(서버와 클라이언트가 완벽히 데이터 구조를 공유할 경우 유용)
항상 같은 데이터가 넘어온다는 가정 하에서는 scv가 가장 유리함
XML
JSON
Bootstrap 특징 ★★★
부스스트랩이란?
웹사이트를 쉽게 만들기 위해서 CSS 클래스 스타일시트와 자바스크립트 플러그인의 라이브러리
부트스트랩을 이용하면
미리 클래스가 정해진 css 스타일시트로 인해
마크업 할 때 정해진 클래스를 쓰는 것만으로도 자동으로 디자인이 된다
부트스트랩의 특징
1) 웹페이지를 쉽게 만들 수 있다
부트스트랩을 다루기 위해서는 HTML과 CSS에 대한 어느 정도의 지식이 필요
웹페이지는 HTML태그로 뼈대가 만들어지며 태그에 CSS선택자를 추가하고,
이 CSS 선택자에 대해 스타일시트에서 속성과 값을 선언해서 레이아웃을 만들게 된다
2) 반응형웹
부트스트랩을 이용하면 쉽게 반응형앱을 만들 수 있다는 장점
레이아웃이 박스처럼 나눠져 있기 때문에
굳이 미디어쿼리를 쓰고 디바이스별로 크기를 나누지 않아도
클래스명만 잘 넣어도 반응형웹을 쉽게 제작 가능
3) 모바일 중심
부트스트랩은 계속 업그레이드 되고 있는데,
3 버전에서는 더욱 모바일 중심으로 프레임워크으로 발전되었다
4) 많은 자바스크립트 플러그인의 지원
5) 정형화된 디자인에서 탈피했다
6) 단점 : 익스플로러 지원이 안된다, 아직은 익숙하지 않은 디자인