** Web Communication API
1. AJAX - XMLHttpRequest
2. Web Push
3. WebSocket
** 웹 채팅 만들기
1. websocket-api.jar 파일을 WEB-INF 디렉토리의 lib 디렉토리에 복사
2. 서버 역할을 수행할 클래스를 java resource/src 디렉토리에 생성
** 모바일 웹
1. 구현방식
2. 모바일 기기의 접속
3. 모바일 페이지의 설정
4. 회전 이벤트
5. 터치 이벤트
6. 스마트 폰 애플리케이션
** lazy loading
** Web Communication API
1. Ajax - XMLHttpRequest
- 비동기적으로 서버의 데이터를 받아오는 기술
- HTML5에서는 기존의 기능에 몇 가지를 추가해서 Ajax Level 2라고 한다.
- 전체 페이지를 다시 로드하지 않고 서버의 데이터를 가지고 일부분만 업데이트하기 위해서 사용
1) 사용 순서
- XMLHttpRequest 객체를 생성
- 생성한 객체를 이용해서 요청을 생성 - open(전송방식, url, 비동기 여부)
- 전송방식은 'GET' 또는 'POST'
- GET은 파라미터(클라이언트가 서버에게 넘겨주는 데이터)를 url 뒤에 붙여서 전송하는 방식으로 속도는 빠르지만 파라미터 길이에 제한이 있고 보안이 취약하다.
- POST는 파라미터를 header에 숨겨서 전송하는 방식으로 파라미터 길이에 제한이 없고 url에 파라미터를 붙여서 전송하지 않기 때문에 GET 방식보다 보안이 우수
- 최근에는 조금 더 명확하게 작업을 하기 위해서 PUT과 DELETE도 추가
- GET은 Read, POST는 INSERT, PUT은 UPDATE, DELETE는 DELETE 작업에 사용하도록 권장
- URL은 데이터를 전송받을 URL
- 비동기 여부는 기본적으로 비동기 방식으로 동작하는데 false를 설정하면 동기식으로 동작
- 요청을 전송 - send(data)
- data는 파라미터 - HTML5에서는 일반 데이터 이외에 FormData가 추가됨
- 요청을 취소 - abort()
2) 요청 시 발생하는 이벤트
- load : 응답을 받았을 때, 메모리에 로드가 됐을 때
- loadstart , loadended, abort, error
- progress : 응답을 받고 있는 도중 발생하는 이벤트
3) 받아온 데이터
- 이벤트 처리 함수의 매개변수로 처리
- 매개변수.target.responseText - XML 형식을 제외한 데이터
- 매개변수.targer.responseXML
4) Form의 데이터 전송
- 최근에는 폼의 데이터를 전송하는 부분을 ajax로 처리하기도 한다.
- 대표적인 경우가 댓글 쓰기다.
- 게시판의 글쓰기는 입력을 하면 목록 보기 화면으로 전환하는 경우가 많지만 댓글은 보통 그 페이지에 남아있고 댓글만 추가되서 보여지는 형태로 구현을 많이 한다.
- 폼의 데이터를 하나로 만들기
var 변수명 = new FormData(form객체);
- 폼에 있지 않은 데이터를 추가
변수명.append("이름", 데이터);
- ajax 객체에 넣어서 전송
ajax객체.send(변수명); //서버에게 전달
5) CORS
- 이전의 ajax는 자신의 도메인에만 접근이 가능했다.
- 이전에는 외부 도메인의 ajax 처리는 proxy를 만들어서 처리해야 했다.
- jsonp 서비스를 구축하면 외부 도메인에서도 ajax로 직접 요청이 가능
- 외부 도메인에 ajax 요청을 직접 하는 것을 Cross-Origin Resource Sharing이라 한다.
- Kakao Open API는 jsonp 서비스를 제공하기 때문에 ajax 요청을 직접하는 것이 가능하다.
2. Web Push
- Server Sent Events 라고도 하는데 이 기술은 서버가 클라이언트의 요청이 없는데 메시지를 전송하는 것이다.
- 스마트 폰 애플리케이션에서는 이 기술을 APNS(Apple Push Notification Service) 나 FCM(Firebase Cloud Message)라고 한다.
* 클라이언트 작업 순서
1) EventSource 객체 생성
var 변수명 = new EventSource("서버 경로");
2) message 이벤트 등록
변수명.addEventListener("message", function(매개변수){
매개변수.data //서버가 보내 준 데이터
});
3. WebSocket
- Web에서 양방향 통신을 위한 Spec
- http는 서버에게 클라이언트가 요청을 하고 서버가 클라이언트에게 데이터를 넘겨주면 통신이 종료된다.
- 계속해서 통신을 하고자 하면 계속 연결을 요청해야 한다.
- Web Socket은 한 번 연결을 하면 연결을 해제할 때까지 계속 연결을 유지한다.
- 채팅같은 서비스에는 http통신보다는 WebSocket을 이용하는 것이 효율적이다.
- Web Socket 과 Web Push는 서버가 구현되어 있어야 사용이 가능하다.
* 작업 순서
1) 웹 소켓 객체 생성
var 변수명 = new WebSocket("ws://서버 주소");
2) 메시지 전송
변수명.send(메시지);
3) 이벤트 처리
open(접속했을 때), close(접속을 해제할 때), message(서버에서 메시지가 온 경우)
- 서버에서 보내 준 메시지는 message 이벤트 처리 함수의 매개변수.data
변수명.addEventListener('message', function(event){
event.data : 전송된 메시지
});
- WebSocket 서버 구축
- 채팅의 경우는 클라이언트들을 저장할 List를 생성
- open(클라이언트의 접속 요청) 이벤트가 발생하면 클라이언트를 list에 저장
- close 이벤트가 발생하면 클라이언트를 list에서 제거
- message 이벤트가 발생하면 list의 모든 클라이언트에게 메시지를 전송
** 웹 채팅 만들기
1. websocket-api.jar 파일을 WEB-INF 디렉토리의 lib 디렉토리에 복사
2. 서버 역할을 수행할 클래스를 java resource/src 디렉토리에 생성
** 모바일 웹
1. 구현방식
1) 하나의 페이지를 만들고 css를 이용해서 다르게 보이도록 만드는 방법 : 반응형 웹 디자인
2) 모바일 페이지를 별도로 만들어서 모바일에서 접속했을 때 모바일 페이지를 보여줌
2. 모바일 기기의 접속
- navigator 객체의 userAgent 속성을 확인하면 운영체제와 브라우저 이름이 나온다.
- android는 스마트 폰과 태블릿을 구분하지 않음
- apple은 iPhone과 iPad로 태블릿을 구분함
3. 모바일 페이지의 설정
- viewport 메타 태그를 이용해서 설정
- https://developer.android.com/guide/webapps/targeting에서 확인 가능
<meta name = "viewport" content = "width = device-width, user-scalable = no" />의 형태로 많이 사용
4. 회전 이벤트
- 기기의 방향이 바뀌면 window 객체에 orientationchane 이벤트가 발생하고 window 객체의 orientation 속성을 조사하면 기기의 방향을 알 수 있음
- 0이면 수직, 90이면 왼쪽으로 수평, -90이면 오른쪽으로 수편 기기를 반대 방향으로 수직으로 세우게 되면 180이 리턴되어야 하는데 인식 못함
5. 터치 이벤트
- touchstart, touchend, touchmove, touchenter, touchleave
- touchcancel
6. 스마트 폰 애플리케이션
1) Web App
- 모바일 웹 사이트를 만들어서 안드로이드의 크롬이나 iOS의 사파리를 이용해서 접속
- 장점 : 하나의 사이트만 만들면 모두 사용이 가능하고 수정이 쉽다.
- 단점 : 터치와 회전을 제외한 다른 센서를 사용할 수 없다.
- 모바일 페이지를 만들고 안드로이드나 iOS 앱을 만든 후 WebView를 이용해서 이 페이지를 출력하는 방법도 있음
- 모든 페이지를 전부 WebView를 이용하는 것은 reject 사유이다.
2) Native App
- 안드로이드나 iOS의 공식 지원 언어를 이용해서 앱을 만드는 것
- 장점 : 실행속도가 가장 빠르고 기기의 모든 하드웨어를 사용할 수 있다.
- 단점 : 운영체제 별로 앱을 별도로 만들어야 하고 지원하는 언어로만 앱을 만들 수 있다.
3) Hybrid App
- react-native, flutter, phonegap 라이브러리 : HTML과 CSS 그리고 자바스크립트로 애플리케이션 프로젝트를 만들고 각각의 운영체제에 맞게 빌드를 해서 앱을 생성
- 이 방법은 센서도 어느 정도 사용할 수 있다.
- 업데이트가 너무 자주 일어나고 새로운 운영체제가 나오면 바로 사용할 수 없는 단점을 가지고 있다.
- 만들 수 있는 라이브러리 중 ionic 등도 있음
- unity 3D(C#)나 unreal(C++)과 같은 프레임워크 이용 : 프로그램을 작성하는 방식은 위의 방법과 유사하지만 이 프레임워크들은 그래픽 구현에 특화가 되어 있다.
** lazy loading
- 지연 로딩
- 객체 지향에는 지연 생성이라는 개념이 있음
- 처음부터 로딩하거나 생성하지 말고 필요할 때 로딩하거나 생성
- 서버는 일반적으로 초기 구동 시간이 오래 걸리더라도 전부 로딩을 해놓는 것이 좋고 클라이언트는 처음에 필요한 것만 가지고 로딩을 하고 다른 자원은 필요할 때 로딩하는 것이 좋다.