ajax 등장 이전부터, ajax, comet, 그리고 html5의 웹소켓까지 기술의 흐름을 간략하게 정리해 보았습니다.
웹 어플리케이션의 개발을 다뤄보지 않은 개발자들을 대상으로 처음부터 웹소켓을 다루기 전에,
1. 이전 세대의 통신 기법은 어떤 모양이었는지
2. 웹소켓이 왜 환영받을 만한 기술인지
... 등을 공감할 수 있기 위한 목적으로 PT를 작성 하였습니다.
Blazor is a single-page web application (SPA) framework built on .NET that runs in the browser with Mono's WebAssembly run-time, or server-side via SignalR. Blazor features a component architecture, routing, a virtual DOM, and a JavaScript Interoperability (interop) API. Currently, Blazor is in an experimental state which allows for rapid development, iterations, and as implied, experimentation.
카카오 광고 플랫폼 MSA 적용 사례 및 API Gateway와 인증 구현에 대한 소개if kakao
황민호(robin.hwang) / kakao corp. DSP개발파트
---
최근 Spring Cloud와 Netflix OSS로 MSA를 구성하는 시스템 기반의 서비스들이 많아지는 추세입니다.
카카오에서도 작년에 오픈한 광고 플랫폼 모먼트에 Spring Cloud 기반의 MSA환경을 구성하여, API Gateway도 적용하였는데 1년 반 정도 운영한 경험을 공유할 예정입니다. 더불어 MSA 환경에서는 API Gateway를 통해 인증을 어떻게 처리하는지 알아보고 OAuth2 기반의 JWT Token을 이용한 인증에 대한 이야기도 함께 나눌 예정입니다.
Business critical systems—off-the-shelf systems, custom-built applications, or software-as-a-service—consist of many logical end points. However, they are all common in exposing a set of inputs and a set of outputs. They also produce and consume data of different forms, custom binary or a standard format like XML, EDI, JSON, and so on. This data needs to follow a particular protocol—TCP/IP, HTTP, or FTP—in order to ensure seamless communication between different end points.
Integration is a buzzword we hear all the time, but what does it really mean? Essentially, integration is the act of allowing these different end points to work together in meaningful ways to accomplish business value. IBM IIB version 10 provides a significant leap forward from version 9 and provides key enhancements in terms of experience as well as capabilities. Join us to see the difference and learn how it may serve you in your Digital Transformation journey.
Software release cycles are now measured in days instead of months. Cutting edge companies are continuously delivering high-quality software at a fast pace. In this session, we will cover how you can begin your DevOps journey by sharing best practices and tools used by the engineering teams at Amazon. We will showcase how you can accelerate developer productivity by implementing continuous Integration and delivery workflows. We will also cover an introduction to AWS CodeStar, AWS CodeCommit, AWS CodeBuild, AWS CodePipeline, AWS CodeDeploy, AWS Cloud9, and AWS X-Ray the services inspired by Amazon's internal developer tools and DevOps practice.
Level: 200
Speaker: Nick Brandaleone - Solutions Architect, AWS
“Progressive Web Apps (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native mobile applications. PWAs are an emerging technology that combine the open standards of the web offered by modern browsers to provide benefits of a rich mobile experience”
Blazor is a single-page web application (SPA) framework built on .NET that runs in the browser with Mono's WebAssembly run-time, or server-side via SignalR. Blazor features a component architecture, routing, a virtual DOM, and a JavaScript Interoperability (interop) API. Currently, Blazor is in an experimental state which allows for rapid development, iterations, and as implied, experimentation.
카카오 광고 플랫폼 MSA 적용 사례 및 API Gateway와 인증 구현에 대한 소개if kakao
황민호(robin.hwang) / kakao corp. DSP개발파트
---
최근 Spring Cloud와 Netflix OSS로 MSA를 구성하는 시스템 기반의 서비스들이 많아지는 추세입니다.
카카오에서도 작년에 오픈한 광고 플랫폼 모먼트에 Spring Cloud 기반의 MSA환경을 구성하여, API Gateway도 적용하였는데 1년 반 정도 운영한 경험을 공유할 예정입니다. 더불어 MSA 환경에서는 API Gateway를 통해 인증을 어떻게 처리하는지 알아보고 OAuth2 기반의 JWT Token을 이용한 인증에 대한 이야기도 함께 나눌 예정입니다.
Business critical systems—off-the-shelf systems, custom-built applications, or software-as-a-service—consist of many logical end points. However, they are all common in exposing a set of inputs and a set of outputs. They also produce and consume data of different forms, custom binary or a standard format like XML, EDI, JSON, and so on. This data needs to follow a particular protocol—TCP/IP, HTTP, or FTP—in order to ensure seamless communication between different end points.
Integration is a buzzword we hear all the time, but what does it really mean? Essentially, integration is the act of allowing these different end points to work together in meaningful ways to accomplish business value. IBM IIB version 10 provides a significant leap forward from version 9 and provides key enhancements in terms of experience as well as capabilities. Join us to see the difference and learn how it may serve you in your Digital Transformation journey.
Software release cycles are now measured in days instead of months. Cutting edge companies are continuously delivering high-quality software at a fast pace. In this session, we will cover how you can begin your DevOps journey by sharing best practices and tools used by the engineering teams at Amazon. We will showcase how you can accelerate developer productivity by implementing continuous Integration and delivery workflows. We will also cover an introduction to AWS CodeStar, AWS CodeCommit, AWS CodeBuild, AWS CodePipeline, AWS CodeDeploy, AWS Cloud9, and AWS X-Ray the services inspired by Amazon's internal developer tools and DevOps practice.
Level: 200
Speaker: Nick Brandaleone - Solutions Architect, AWS
“Progressive Web Apps (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native mobile applications. PWAs are an emerging technology that combine the open standards of the web offered by modern browsers to provide benefits of a rich mobile experience”
A modified version of my Desert Code Camp 2011.2 presentation on SignalR from November 5th, 2011.
It's modified since I'm more of a talker and rarely utilize bullet points and much text in my slides.
Get Started with ReactJS 18 Development Services_ New Features and Updates.pptxConcetto Labs
Looking forward to build facial recognition apps? Concetto Labs is a top notch face recognition app development company. If you have a unique face app development idea then contact us now.
Här har ni en presentation om WebSphere Application Server.
Titta närmare på området på dessa länkar: Application Infrastructure (http://www-03.ibm.com/software/products/sv/category/SW600) respektive Connectivity & Integration (http://www-03.ibm.com/software/products/sv/category/SW666).
An introduction to SignalR
This deck was part of my presentation to Virtusa employees on an ASP.NET asynchronous, persistent signaling library known as SignalR
There is also a slide on how to use SignalR with SharePoint.
Date: August 2013
Follow / Tweet me: @ShehanPeruma
Web development using javaScript, React js, Node js, HTML, CSS and SQLJayant Surana
A presentation of Web development describing the use of various languages required. The languages covered are javaScript, React js, Node js, HTML, CSS and SQL.
AWS 클라우드를 활용하면 사용자의 트래픽에 따라 IT 인프라 아키텍처를 확장할 수 있습니다. 이번 강연에서는 서비스 초기의 작은 트래픽에 대응할 수 있는 단순한 아키텍처로 시작해 사업 성장 후의 수백만 사용자에 달하는 대규모 트래픽을 지탱할 수 있는 고확장성 아키텍처에 이르기까지의 단계별 아키텍처 구성 방법에 대해 소개해 드리고 컴퓨팅 및 데이터베이스 선택 및 사용자 증가에 따른 트래픽 경감 방법, 오토스케일링 및 모니터링과 자동화, DB 부하 분산, 고가용성 확보 등에 대한 다양한 모범사례를 알려드릴 예정입니다.
VM과 컨테이너 상에서 Apache & Tomcat 설치, 실행 그리고 배포 데모
데모 요약 : 수작업으로 진행하는 가상화환경과 OCP 환경(Dockerfile)의
간단한 apache / tomcat 설치 및 실행하는 비교 데모 입니다.
데모 내용 : 물리서버 또는 가상화 환경에서 수작업으로 진행했던 배포 작업들이 컨테이너 환경에서 원클릭으로 배포하는 영상을 보여주는 데모입니다. 컨테이너 환경에서의
배포는 수작업으로 하는 배포 대비 상상이상의 시간을 아낄 수 있습니다.
오픈나루 데모 URL : http://www.opennaru.com/seminar/%ed%81%b4%eb%9d%bc%ec%9a%b0%eb%93%9c-%eb%84%a4%ec%9d%b4%ed%8b%b0%eb%b8%8c-%eb%8d%b0%eb%aa%a8-%ec%9c%a0%ed%8a%9c%eb%b8%8c/
오픈나루 비대면 워크샵 URL : http://www.opennaru.com/seminar/%ed%81%b4%eb%9d%bc%ec%9a%b0%eb%93%9c-%eb%84%a4%ec%9d%b4%ed%8b%b0%eb%b8%8c-%ec%9b%8c%ed%81%ac%ec%83%b5/
Cross-Browser-Testing with Protractor & BrowserstackLeo Lindhorst
With Protractor the Angular Ecosystem has an almost-standard for UI-Testing, but ensuring not only functionality in general, but also verifying that the app is cross-browser, cross-platform and cross-device compatible and responsive can be challenging. It's not only a financial and organizational effort to supply all the different devices and browser and integrate it into an existing organizations infrastructure, but also the scalability is limited and setting up the devices and connections is tied to some work. Browserstack provides a Cloud-Service for testing Web-Apps on a bunch of real devices with a rather easy to use integration into all Selenium based test execution frameworks, like Protractor. The talk gives a short introduction to Browserstack and shows, how it can be integrated into Protractor.
A modified version of my Desert Code Camp 2011.2 presentation on SignalR from November 5th, 2011.
It's modified since I'm more of a talker and rarely utilize bullet points and much text in my slides.
Get Started with ReactJS 18 Development Services_ New Features and Updates.pptxConcetto Labs
Looking forward to build facial recognition apps? Concetto Labs is a top notch face recognition app development company. If you have a unique face app development idea then contact us now.
Här har ni en presentation om WebSphere Application Server.
Titta närmare på området på dessa länkar: Application Infrastructure (http://www-03.ibm.com/software/products/sv/category/SW600) respektive Connectivity & Integration (http://www-03.ibm.com/software/products/sv/category/SW666).
An introduction to SignalR
This deck was part of my presentation to Virtusa employees on an ASP.NET asynchronous, persistent signaling library known as SignalR
There is also a slide on how to use SignalR with SharePoint.
Date: August 2013
Follow / Tweet me: @ShehanPeruma
Web development using javaScript, React js, Node js, HTML, CSS and SQLJayant Surana
A presentation of Web development describing the use of various languages required. The languages covered are javaScript, React js, Node js, HTML, CSS and SQL.
AWS 클라우드를 활용하면 사용자의 트래픽에 따라 IT 인프라 아키텍처를 확장할 수 있습니다. 이번 강연에서는 서비스 초기의 작은 트래픽에 대응할 수 있는 단순한 아키텍처로 시작해 사업 성장 후의 수백만 사용자에 달하는 대규모 트래픽을 지탱할 수 있는 고확장성 아키텍처에 이르기까지의 단계별 아키텍처 구성 방법에 대해 소개해 드리고 컴퓨팅 및 데이터베이스 선택 및 사용자 증가에 따른 트래픽 경감 방법, 오토스케일링 및 모니터링과 자동화, DB 부하 분산, 고가용성 확보 등에 대한 다양한 모범사례를 알려드릴 예정입니다.
VM과 컨테이너 상에서 Apache & Tomcat 설치, 실행 그리고 배포 데모
데모 요약 : 수작업으로 진행하는 가상화환경과 OCP 환경(Dockerfile)의
간단한 apache / tomcat 설치 및 실행하는 비교 데모 입니다.
데모 내용 : 물리서버 또는 가상화 환경에서 수작업으로 진행했던 배포 작업들이 컨테이너 환경에서 원클릭으로 배포하는 영상을 보여주는 데모입니다. 컨테이너 환경에서의
배포는 수작업으로 하는 배포 대비 상상이상의 시간을 아낄 수 있습니다.
오픈나루 데모 URL : http://www.opennaru.com/seminar/%ed%81%b4%eb%9d%bc%ec%9a%b0%eb%93%9c-%eb%84%a4%ec%9d%b4%ed%8b%b0%eb%b8%8c-%eb%8d%b0%eb%aa%a8-%ec%9c%a0%ed%8a%9c%eb%b8%8c/
오픈나루 비대면 워크샵 URL : http://www.opennaru.com/seminar/%ed%81%b4%eb%9d%bc%ec%9a%b0%eb%93%9c-%eb%84%a4%ec%9d%b4%ed%8b%b0%eb%b8%8c-%ec%9b%8c%ed%81%ac%ec%83%b5/
Cross-Browser-Testing with Protractor & BrowserstackLeo Lindhorst
With Protractor the Angular Ecosystem has an almost-standard for UI-Testing, but ensuring not only functionality in general, but also verifying that the app is cross-browser, cross-platform and cross-device compatible and responsive can be challenging. It's not only a financial and organizational effort to supply all the different devices and browser and integrate it into an existing organizations infrastructure, but also the scalability is limited and setting up the devices and connections is tied to some work. Browserstack provides a Cloud-Service for testing Web-Apps on a bunch of real devices with a rather easy to use integration into all Selenium based test execution frameworks, like Protractor. The talk gives a short introduction to Browserstack and shows, how it can be integrated into Protractor.
2012년 1월13일 알펜시아 리조트에서 열렸던 HCI2012 행사의 일환이었던 "모바일 웹 UI/UX 현재와 미래" 패널 토의에서 제가 기조 발제로 발표했던 자료입니다.
W3C에서 표준화 진행중인 HTML5와 Web API를 중심으로 새로운 UI/UX의 가능성들과 모바일 UI/UX에 대한 가능성들을 살펴보았습니다.
[111015/아꿈사] HTML5를 여행하는 비(非) 웹 개발자를 위한 안내서 - 1부 웹소켓.
1. HTML5를 여행하는
비(非) 웹 개발자를 위한 안내서
The Non – Web Programmer’s Guide to the HTML5
1부. 웹 소켓
아꿈사
http://cafe.naver.com/architect1
최성기
florist.sk@gmail.com
2. 1. HTTP의 대전제
2. AJAX
3. 웹 소켓
4. Node.js
5. Java script
원래는 Node.js에 대해서 이야기 하려고
PT 배경색도 로고 이미지 바탕색이랑 맞춰두고 시작한 pt였으나
준비 부족으로 결국 Node.js는 얘기도 못 꺼내고 웹소켓 까지만 준비되었습니다...
4. HTTP
Hyper-Text Transfer Protocol
아주 멋진super보다 더 멋진 hyper 텍스트를
전송하려고 만들어낸 통신 규약.
서버가 Html로 만들어진 문서(디자인된 문서)를
유저에게 잘 보여주는 것이 이 프로토콜의 최초 목적이었다.
이전 세대에는 터미널 창에서 오직 텍스트만 주고 받던 통신 시대였으니
차세대 통신 규약으로의 적절한 설정이었다.
5. 대.전.제
http 프로토콜을 이용한 통신의 대전제:
클라이언트는 원하는 페이지를 url로 요청하고,
서버는 그 페이지를 보내준다.
http 클라이언트(≒웹 브라우저)는 url을 보내고 결과를 받아오는 게
유일한 존재목적이고, 그 외 다른 것은 할 필요도 없었고, 할 수도 없었다.
즉,
브라우저는 서버와 통신하려면 다른 페이지로 이동해야 하는 대전제를 가진다.
근데 http는 점점 대중화되고, 페이지 보는 거 말고 다른 게 하고 싶어 졌다.
Ex) 이 사이트에 가입하고 싶어. ‘ok’버튼을 눌렀을 때 가입시켜줘.
6. 사이트 회원가입?
사진이나 동영상 올리기?
남의 글에 악플 달기?
클라이언트가 ‘페이지 읽기(이동하기)’가 아닌 다른 작업을 하고 싶을 땐
클라이언트가 할 수 있는 유일한 스킬인 ‘서버에 원하는 url 쏘기’를 시전하면서
이때 부가적인 정보를 붙이도록 했다.
http://XXX.com/join_member.htm?id=florist&name=최성기&gender=male...[1]
[1]
Url에 정보를 붙여서 보내는 GET 방식 이외에,
내부적으로 전송하는 POST 방식이 있다. (쉬운 설명을 위해 간소화.)
7. 철수는 XXX 사이트에 회원 가입을 했을 때
한 페이지 가득한 환영의 인사를 보고 기분이 좋았다.
‘날 위해 새 페이지를 보여줘 가면서까지 환영해 주고 있구나!
난 사랑 받기 위해 태어난 사람이야!’
웰컴!
격하게 환영합니다.
Join_form.htm Join_result.htm
하지만 그것은 불편한 진실이었다.
사실 http로는 무언가 새 페이지를 요청하지 않고서는
회원가입 따위의 요청을 서버에 날릴 수가 없었다.
(과연… 철수는 사랑 받기 위해 태어난 사람일까…?)
8. 그러고 보니 아이디 중복체크를 할 때도 그랬다.
서버에게 중복 검사를 요청하기 위해선 새 페이지를 요청해야만 하는데,
회원정보 작성 중에 페이지를 이동할 수 없기 때문에
새로 요청한 페이지를 팝업창으로 띄웠던 것이다.
(요즘 사이트들은 대부분 팝업창 없이 검사 가능. Ajax를 이용)
이미지 출처 : http://jinzza.net/IdCheckHowTo.html
9. 하드웨어 드라이버 다운로드 페이지
제품종류 제품시리즈 모델명
메인보드 GeForce GeForce 9800 GT
그래픽카드 nForce GeForce 9800 GX2
사운드카드 3D Vision GeForce 9600 GT
… … …
다른 예를 하나 더 들어보자.
여태 살면서 한 번쯤은 다 겪어봤을 만한 하드웨어 드라이버 다운로드 폼 구성은
다른 페이지로 이동하지 않으면서도 서버에서 모델 정보를 받아오는 것처럼 보이지만
이는 눈속임에 불과하다.
10. 하드웨어 드라이버 다운로드 페이지
제품종류 제품시리즈 모델명
메인보드 GeForce GeForce 9800 GT
그래픽카드 nForce GeForce 9800 GX2
사운드카드 3D Vision GeForce 9600 GT
… … …
graphic_serize_list.htm geforce_model_list.htm
실은 iframe이라는 태그로 페이지에 구멍을 뚫어놓고,
그 구멍에 결국 유일하게 할 줄 아는 [2] ‘새로운 url 페이지 열기’ 스킬을 시전한 것 뿐이다.
[2] 물론 오늘날의 웹은 가능하다. 지금은 원시적인 기법에 대해 이야기 하고 있다.
11. 하드웨어 드라이버 다운로드 페이지
제품종류
메인보드
그래픽카드
사운드카드
…
제품시리즈 모델명
GeForce … 실상은 이렇다. GeForce 9800 GT
nForce GeForce 9800 GX2
3D Vision GeForce 9600 GT
… …
graphic_serize_list.htm geforce_model_list.htm
12. 브라우저가 웹서버에게 뭔가를 요청하려면
페이지를 이동하지 않고서는 요청할 방법이 없었다.
이런 제한적인 환경 때문에,
웹에서 무언가 다양한 기능을 하게 해주는 꼼수들과 대체기법들이 유행했다.
플래시를 집어넣어 몽땅 플래시 기반으로 사이트를 만들기도 하고
특히 한국에서는 뭘 좀 만들어야지 싶으면 ActiveX를 얹어서
웹도 아니고 애플리케이션도 아닌 어정쩡한 결과물들이 홍수처럼 흘러 넘쳤다.
13. 그러던 한 편에선구글 이란 이름의 괴집단이
꾸준히 세력을 키워가고 있었다.
구글톡, 지메일, 구글그룹, 구글문서, 구글리더, 구글지도 등
신기한 서비스들을 연이어 내놓았는데,
구글의 서비스는 웹페이지 같지 않게 동적이고 자연스러웠다.
‘짤각’ 거리는 새로고침 소리도 들리지 않았는데도 웹페이지는 자유롭게 변환되었고
사람들은 ‘이런 게 웹에서 된단 말이야?’ 라고 말했다.
게다가 구글은,
이 모든걸 ActiveX 없이 해냈다.
15. AJAX
Asynchronous Javascript And Xml
구글이 사용한 기법은 Ajax라는 기법이었다.
자바 스크립트와 xml을 이용한 비동기 통신. Konami, 1987
2005년 경 부터 점차 대중화 되면서 쓰이기 시작했고[3]
오늘날 Ruby, JQuery 등을 이용한 대중적인 웹 개발의 기반에도
페이지 이동 없는 통신의 근간을 이루는 기술이 되었다.
Ajax가 쓰이기 시작하면서 웹 페이지들은 페이지 이동 없이도 서버와 통신을 했고
페이지에 구멍을 뚫지 않아도 특정 영역만 업데이트하거나 조작할 수 있게 됐다.
[3]
Ajax 기법은 2005년부터 대중화되기 시작했지만, 사실 예전부터 존재하던 기법이다.
거의 알려지지 않았던 테크닉이었고, 이전엔 Ajax라는 이름도 없었다.
16. 웹 브라우저에 쓰이던 자바 스크립트에는 사실
XMLHttpRequest라는 API가 있었다. (IE 기준 5.0부터 지원)
http://dna.daum.net/TR/XMLHttpRequest/
http://ko.wikipedia.org/wiki/Ajax
이녀석을 통해 url 이동이 아닌 임의 요청을 보내고 응답을 받을 수 있었는데
그 동안엔 있는 줄도 몰랐고, 또 쓰면 이렇게 멋있어질 줄 몰랐겠지.
아무튼 구글 및 기타 선두 진영들[4]이 Ajax라는 이름을 붙여 유행시켰고
웹페이지는 이제 이전과 비교할 수 없는 다양한 표현력을 갖게 되었다.
일부 책에서는 이런 비동기 방식을 ‘XHR을 이용한 통신’이라고 부르기도 한다.
[4] 사실 구글밖에 모른다...
17. 이미지 출처 : http://goo.gl/XEey5
이젠 회원 가입할 때
버튼이나 팝업창 없이 입력 focus만 떠나면
바로 웹서버와 통신해서 중복체크를 할 수 있고
18. 검색어 추천 기능
검색창에 글씨가 한자씩 타이핑 될 때마다
웹서버에 단어를 보내
추천 검색어 리스트를 보여줄 수도 있고
19. 구글 지도
마우스 입력에 따라 브라우저에서 맵을 늘였다 줄였다…
위성 사진을 보였다가 지도를 보였다가…
이런 건 도대체 어떻게 하는 거야
웹 브라우저만 가지고도 다양한 표현이 가능해졌다.
20. Ajax의 사용으로 인해
Http 통신을 할 때의 대전제였던 ‘페이지 갱신’이라는 제약은
이제 무의미해진 옛날 말이 되었다.
Ajax를 이용한 웹사이트는 나날이 늘어났고
데스크탑 어플리케이션으로 구현됐던 상당수 프로그램이
차츰 웹 기반으로 대체되기 시작했다.
Ajax의 표현력에 반한 철수가 어느 날
MSN 메신저를 설치할 줄 모르는 영희를 위해 웹 메신저를 만들기로 결심한다.
21. 웹 기반 메신저 통신 예제 :
구글톡이 등장하기 이전에도 ActiveX없이 동작하는 웹 채팅은 존재했다.
‘별로 어렵지 않을 거야. Ajax는 짱 이니까.’
철수는 부푼 기대감을 안고 개발을 하기 시작했는데
얼마 안 가서 난관에 부딪혔다.
22. 요청
응답
요청
응답
웹 브라우저가 XMLHttpRequest를 이용해 서버로 먼저 요청을 날리고
서버가 이에 대한 응답을 보내주는 것 까지는 크게 문제가 없었지만
23. 요청
응답?
요청
응답?
서버가 요청 없는 브라우저에게 먼저 통신을 시작할 수 있는 방법이 없었다.
서버는 응답밖에 할 수 없었다.
자유로운 양 방향 통신이 불가능한 반 쪽짜리 통신이었다.
24. 출처 : 마이크로 소프트웨어 2010년 11월호 ‘모바일 실시간 그림판 구현’中..
25. 출판사 리뷰 中…
…Ajax 1.0은 시작에 불과했다. 이제 근본적인 변
화를 몰고 오는 Ajax 2.0, Comet이 온다!
Ajax가 웹에 불러온 변화들을 기억할 것이다.
Ajax로 인해 더욱 풍성해진 웹은 더욱 사용자에
가깝게 다가설 수 있었고, 결국 Web 2.0이라는
커다란 패러다임의 변화를 이끌 수 있었다.
Comet은 Ajax가 보여주었던 변화에서 한걸음
더 나아가는 기술이다. 클라이얶트가 요청하기
전에 서버가 자유롭게 메시지를 보낼 수 있고,
그 결과 양측의 컴퓨터가 웹을 통해 자유롭게 대
화할 수 있는 진정한 대화형 웹 애플리케이션의
시대, Comet이 만들어갈 새로운 웹의 모습이다.
하지만 초큼 어렵다.
26. 요즈음의 웹사이트에서 볼 수 있는
페이지 갱신 없이 이루어지는 실시간 통신들은
모두 Ajax와 Comet에 바탕을 두고 있다.
(IE에서도 잘 동작하는 것들은 모두 Ajax라고 보면 된다.)
Comet을 통해 양방향 실시간 통신이 가능해 졌지만
다소 억지스러운 테크닉은 개념을 초큼 복잡하게 만들었다.
웹은 아직도 무섭게 성장하고 있고 수요는 점점 늘어가고 있다.
그러는 와중에 HTML는 5.0 표준을 만들어 가고 있는 중인데,
28. HTML5 표준에 쉽고 강력한 ‘웹 소켓’이라는 규약(?)이 정해지게 됐다.
개인적으로 HTML5 다른 기능도 멋지지만 웹소켓이 짱이다.
HTML5가 간달프라면 웹소켓은 간달프의 지팡이 정도랄까.
(사실 발표자가 네트워크 프로그래머라서 그렇슴)
29. http://caniuse.com/#search=socket
Web Sockets - 아직 표준화 작업 진행 중(draft)
웹 어플리케이션을 위한 양방향 통신 기법.
기존의 Tcp 소켓기반 S/C 통신처럼 웹 app을 작성할 수 있다.
인터페이스도 TCP 서버 짜오던 개발자로서 늘 작업하던 방식들과 매우 흡사하다.
기쁘지 아니할 수가 없다.
30. 클라이언트의 경우,
웹소켓을 지원하는 브라우저라면 자바 스크립트에서 생성자를 호출해
소켓을 만들어 바로 사용하면 된다.
서버의 경우,
• pywebsocket : http://code.google.com/p/pywebsocket/
• phpwebsocket : http://code.google.com/p/phpwebsocket/
• jWebSocket : http://jwebsocket.org/
• web-socket-ruby : https://github.com/gimite/web-socket-ruby
• socket.io-node : https://github.com/learnBoost/Socket.io-node
… 등등 다수의 오픈 소스 모듈 중 선택해 구축할 수 있다.
IIS에서 웹소켓 사용할 수 있는지 혹시 아시는 분?
MS가 html5의 대응에는 매우 굼뜬 것 같네요…
32. 1부. ‘웹 소켓’ 요약
웹을 기반으로 뭔가 멋있는 걸 만들어 내기가 원래는 참 힘들었다.
그러다 5~6년쯤 전 Ajax, Comet 의 등장으로 웹은 훨씬 Rich해 졌지만
다소 변칙적인 응용과 기법들로 몇몇 아쉬운 점들이 남아있었다.
이제 HTML5의 웹소켓을 통해
더욱 심플하고 강력한 실시간 통신이 가능해 질 것이다.
2부에 계속...