코어닷 기술 세미나 2018
Session #1 : 박지훈 (코어닷투데이 개발자)
파이썬을 이용해 세상에서 가장 쓸모없는 홈페이지 만들기
14:00 ~ 14:50
Python Flask로 사용자가 글을 쓰면, 마음대로 수정하고 삭제해버리는 쓸모없는 웹사이트(Useless Website)를 만들어 봅니다.
- Python라이브러리인 flask을 이용한 웹사이트 개발 과정 소개
- MongoDB를 이용해 웹사이트상에서 게시물 작성,조회,수정,삭제(CRUD) 기능 구현 실습
https://coredottoday.github.io/2018/10/15/Coredot-기술-세미나/
https://www.youtube.com/watch?v=gfbWxyz7Zeo
스프링군살없이세팅하기(The way to setting the Spring framework for web.)
깔끔하게 스프링 프레임워크 세팅하는 것에 대한 이야기 입니다.
군살없이 프레임워크를 세팅한다는 의미와 이유, 그리고 스프링 기본 설정 및 설정들의 역할에 대해서 정리해 보았습니다.
This presentation is about Spring framework.
I want to talk about the way to setting the spring framework as tidy in this presentation.
CoreDot TechSeminar 2018 - Session1 Park JihunCore.Today
코어닷 기술 세미나 2018
Session #1 : 박지훈 (코어닷투데이 개발자)
파이썬을 이용해 세상에서 가장 쓸모없는 홈페이지 만들기
14:00 ~ 14:50
Python Flask로 사용자가 글을 쓰면, 마음대로 수정하고 삭제해버리는 쓸모없는 웹사이트(Useless Website)를 만들어 봅니다.
- Python라이브러리인 flask을 이용한 웹사이트 개발 과정 소개
- MongoDB를 이용해 웹사이트상에서 게시물 작성,조회,수정,삭제(CRUD) 기능 구현 실습
https://coredottoday.github.io/2018/10/15/Coredot-기술-세미나/
https://www.youtube.com/watch?v=gfbWxyz7Zeo
스프링군살없이세팅하기(The way to setting the Spring framework for web.)EunChul Shin
깔끔하게 스프링 프레임워크 세팅하는 것에 대한 이야기 입니다.
군살없이 프레임워크를 세팅한다는 의미와 이유, 그리고 스프링 기본 설정 및 설정들의 역할에 대해서 정리해 보았습니다.
This presentation is about Spring framework.
I want to talk about the way to setting the spring framework as tidy in this presentation.
알아봅시다, Polymer: Web Components & Web AnimationsChang W. Doh
GDG Korea WebTech : 시작하세요, Polymer, Oct, 11, 2014.
Let's learn about specifications before diving into Polymer:
- Web Components
- Web Animations
This slide includes resources from HTML5Rocks, Polymer and PolyTechnic.
[SOSCON 2018] 오픈소스 개발: Behind the scenesJae Sung Park
오픈 소스 개발에 참여한다는 것은 여러분들에게 어떤 의미가 있나요? 포트폴리오 작성을 위해? 불편함을 개선하기 위해? 무언가 멋져 보이기 때문에?
외적으로 보이는 오픈 소스 개발/운영은 여러분들이 생각하는 '모습'과 아주 다를 수 있습니다. 성공적인 오픈 소스가 되기 위해서는 무엇이 필요할까요?
오픈소스 개발자로 성공(또는 살아남기) 할 수 있을까요?
billboard.js 프로젝트를 운영하면서 경험한 내용을 바탕으로, 여러분들이 알지 못하는 오픈소스 운영 과정에서의 경험을 전달하고자 합니다.
[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기Jae Sung Park
차트란 무엇일까요? 차트는 우리가 일상에서 아주 쉽게 자주 접하지만, 막상 개발자로써의 경험을 하는 동안 차트 개발(적용)은 쉽게 경험해 보기 어려운 영역이기도 합니다.
본 발표는 '차트'라는 영역에 대한 개발 경험기와 함께 오픈소스로 공개 후, 단 기간 내에 많은 주목을 받기 까지의 과정을 통해 어떻게 의미있는 성과를 글로벌 하게 얻을 수 있었는가에 대한 오픈소스 성장에 대한 경험도 ���이 공유합니다.
이를 통해 다양한 오픈소스 개발 시도와 참여가 활발히 이루어 지는데 도움을 줄수 있게 되기를 기대 합니다.
This document provides information about mobile web debugging and development tools. It discusses Chrome DevTools, Weinre (a web inspector tool for remote debugging), iOS Simulator, Safari, and Android debugging. It provides links to documentation and tutorials about setting up remote debugging with these various tools.
Polymer의 기술기반인 Web Componets를 구성하는 표준 스펙들인 Custom Elements, HTML Imports, HTML Templates 그리고 Shadow DOM을 간략히 살펴본다.
Polymer의 아키텍처 및 기본적인 사용방법 그리고 material design이 적용된 paper elements 등을 살펴본다.
This document provides instructions on how to create an Aptana Ruble, which extends the IDE's functionality using Ruby. It covers generating a new ruble, adding menu items and commands, defining command scopes, inputs, outputs, and key bindings. Code assist is enabled through ScriptDoc XML. A simple demo ruble is presented, and packaging/installation instructions conclude the document.
2. Contents
1. 호환성
2. 디스플레이 및 방향
3. 개발자 도구
4. 그래픽
5. 자바스크립트
6. 네트워킹
7. 보안
8. 동영상
9. 고정된 사이트 알림
10. 기타
3. 호환성
userAgent
MSIE 가 제거되고, 다른 모던 브라우저들과의 일관성을 위해 'like Gecko'가 포함된 형태로 변경
IE 10 : Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64;; Trident/6.0)
IE 11 : Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv 11.0) like Gecko
navigator 객체의 appName과 product 속성도 HTML5 표준과 다른 브라우저와의 일관성을 위해 아래와 같이 값을 반환합니다.
navigator.appName --> "Netscape"
navigator.product --> "Gecko"
4. 호환성
legacy API 삭제
IE 에서만 사용되었던 다음의 레거시 API 들이 제거 :
document.all
attachEvent/detachEvent
window.execScript()
window.doScroll()
script.onreadystatechange
script.readyState
document.selection
document.createStyleSheet
style.styleSheet
5. 디스플레이 및 방향
Screen Orientation API
화면의 현재 방향을 감지하고, 방향 변경 시 알림을 받고, 방향을 특정 상태로 잠글 수 있음 (windows 7 IE11은 지원되지 않음)
screen.msOrientation; // 현재 방향
화면 잠금 :
screen.msLockOrientation("portrait-primary", "portrait-secondary");
해제 :
screen.msUnlockOrientation();
이벤트 :
object.addEventListener(“MSOrientationChange”,
handler,
false);
* 화면잠금은 전체 화면 모드일때만 사용가능
6. 디스플레이 및 방향
deviceorientation/deivcemotion 이벤트
화면의 현재 방향을 감지하고, 방향 변경 시 알림을 받고, 방향을 특정 상태로 잠글 수 있음 (windows 7 IE11은 지원되지 않음)
window.addEventListener("deviceorientation", findNorth);
function findNorth(evt) {
var directions = document.getElementById("directions");
if (evt.alpha < 5 || evt.alpha > 355) {
directions.innerHTML = "North!";
} else if (evt.alpha < 180) {
directions.innerHTML = "Turn Left";
} else {
directions.innerHTML = "Turn Right";
}
}
7. 디스플레이 및 방향
fullscreen API
전체 화면 API를 사용하여 사용자가 동영상, 이미지, 기타 콘텐츠에 집중하도록 할 수 있도록 처리
사용자가 시작한 이벤트에서 호출해야만 실행
document.body.addEventListener(“click”, function(e) {
e.target.msRequestFullscreen();
e.preventDefault();
});
9. 그래픽
캔버스 향상
Canvas 2D Context, Level 2 의 새로운 기능을 지원
•
msImageSmoothingEnabled
비트맵 형식의 이미지 데이터를 불러와 페인팅될때 스케일이 변경된
이미지에 필터링 알고리즘을 적용해 부드럽게 표현하도록 처리
ctx.msImageSmoothingEnabled = true | false;
•
Even-odd Fill rule (짝수-홀수 채우기 규칙)
Path로 작성된 닫혀있는 형태의 도형에 적용
ctx.fill(nonzero | evenodd);
•
Dashed lines
다양한 형태의 점선을 생성
ctx.setLineDash([5,5,1,1]);
ctx.setLineDash([3,3]);
ctx.setLineDash([4, 2, 2, 4]);
“nonzero”
“evenodd”
10. 그래픽
높은 DPI 지원
디바이스의 실제 DPI와 논리 픽셀의 비율 확인 속성 추가
window.devicePixelRatio; // 1:1인 경우 반환 값은 1
이전 버전의 IE(6+)에서는 아래와 같은 계산식을 수행 :
window.devicePixelRatio = window.screen.deviceXDPI / window.screen.logicalXDPI;
12. 자바스크립트
•
•
•
더 많은 코드가 JIT 컴파일러는 다형 캐싱 및 함수 호출 인라인을 포함한 다양한 최적화를 지원, JavaScript 수행 시간을 단축
가비지 컬렉션 수행시 효율적인 백그라운드 쓰레드 활용을 통해 UI 쓰레드 차단 주기와 시간을 대폭 감소
ECMAScript 6 기능 일부 지원
13. 자바스크립트
let, const keyword
블록 범위의 변수
let (로컬)및 const(상수) 키워드를 사용하여, 선언된 블록으로 범위가 제한되는 변수를 선언
var a = 5;
let(a = 6) alert(a); // 6
alert(a); // 5
var l = 10;
{ let l = 2; } // l == 2
// l == 10
14. 자바스크립트
Collection Object : Set, Map, WeakMap
컨테이너 개체
Set Object 개체를 사용하여 고유한 개체의 컬렉션을 만들고, Map Object 또는 WeakMap Object를 사용하여 키/값 쌍의
컬렉션을 만들 수 있음
1. Set object : 데이터 컬렉션
var s = new Set();
s.add(1);
s.add({ “a” : “test” });
s.add(“naver”);
s.forEach(function(item) {
console.log(item.toString());
})
2. Map object : key/value 형태의 컬렉션
var m = new Map();
m.set(1, "black");
m.set(2, "red");
m.forEach(function (item, key, mapObj) {
console.log(item.toString());
});
3. WeakMap : key/value 형태로, 객체의 레퍼런스를 키로 갖는 컬렉션
var dog = { breed: "yorkie" }
var wm = new WeakMap();
wm.set(dog, "Sam");
wm.get(dog); // Sam
dog.breed; // yorkie
15. 자바스크립트
ECMAScript Internationalization API
국제화 API
ECMAScript 국제화 API 사양을 따르는 국제화 API를 통해 로캘별 날짜/시간 서식, 숫자 서식 및 비교가 제공
1. 날짜와 시간
new Intl.DateTimeFormat("en-US").format();
new Intl.DateTimeFormat("ja-JP").format();
new Intl.DateTimeFormat("ko-KR").format();
new Intl.DateTimeFormat("ar-SA").format();
// " 0 7 013“
1 /1 /2
// " 013 0 7 “
2
年1 月1 日
// " 013 0 7 “
2
년1 월1 일
// " ١٤٣٤“
١٢/١٢/
2. 숫자 포맷
new Intl.NumberFormat("ko-KR").format(1234567890);
new Intl.NumberFormat("ar-SA").format(1234567890);
new Intl.NumberFormat("hi-IN").format(1234567890);
// "1,234,567,890"
// "١,٢٣٤,٥٦٧,٨٩٠"
// "1,23,45,67,890“
3. 문자열 비교
var co1 = new Intl.Collator(["de-DE-u-co-phonebk"]);
var co2 = new Intl.Collator(["en-US"]);
var arr = ["ä", "ad", "af", "a"];
arr.sort(co1.compare);
// a,ad,ä,af
arr.sort(co2.compare);
// a,ä,ad,af
17. 네트워킹
lazyload 속성
다음의 요소들에 사용가능하며, true로 설정되면 높은 우선 순위의 요소들보다 로딩의 우선순위가 뒤로 미뤄지게 된다.
--> audio, img, link, script, svg, video
<img src="example.jpg" lazyload="1 | 0" />
•
타입에 따른 로딩 우선순위
1. The root document of the webpage
2. CSS stylesheets
3. WOFF fonts
4. Script libraries
5. Images loaded using onload event handlers
6. Synchronous XMLHttpRequest (XHR) requests
7. Asynchronous script requests (such as indexedDB, Web Workers, File API, and others)
8. Asynchronous XHR requests
9. HTML5 audio and video
10. Microsoft ActiveX and other controls loaded using the object element
11. Deferred JavaScript (defer="true")
•
컨텍스트에 따른 우선순위
1. Requests made by the webpage in the foreground tab
2. Requests made by content loaded in iframe elements in the foreground tab
3. Requests made by webpages in background tabs
4. Requests for pre-rendered content
18. 네트워킹
prerendering, prefetch 지원
1. prerendering
<link rel="prerender" href="http://example.com/nextpage.html" />
IE11 Preview는 백그라운드에서 한 페이지를 미리 렌더링 할 수 있다. 두 번째 미리 렌더링 요청이 발생되면 첫 번째 요청을 대
체. 추가 미리 렌더링 요청은 무시
2. prefetch
<link rel="prefetch" href="http://example.com/style.css" />
캐시에 다운로드. 최대 10개까지 지원하며 추가요청은 무시됨
3. dns-prefetch
<link rel="dns-prefetch" href="http://example.com/"/>
요청이 더 빠르게 발생할 수 있도록 백그라운드를 확인하기 위해 DNS 쿼리를 식별
19. 네트워킹
back navigation caching, SPDY 지원
1. 다음의 조건을 충족시키면 이전 페이지에 대한 캐싱이 이뤄지고, 뒤로 가기 시 보다 빠르게 페이지를 로딩하게 된다.
- HTTP: 프로토콜을 사용하여 제공됩니다(HTTPS 페이지는 보안상 캐시되지 않음).
- 페이지에 beforeunload 이벤트 처리기가 정의되어 있지 않습니다.
- 모든 load 및 pageshow 이벤트가 완료되었습니다.
- 페이지에 다음 중 하나가 없습니다.
- 보류 중인 indexedDB 트랜잭션
- 열려 있거나 활성 상태인 웹 소켓 연결
- 실행 중인 웹 작업자
- Microsoft ActiveX 컨트롤, 도구 모음 또는 BHO(브라우저 도우미 개체)가 로드되어 있습니다.
- F12 개발자 도구 창이 열려 있지 않은 상태
2. 단일 TCP 커넥션을 통해 여러 개의 HTTP 요청을 수행할 수 있는 SPDY(draft 3)를 지원
SPDY draft 3 : http://www.chromium.org/spdy/spdy-protocol/spdy-protocol-draft3
20. 보안
Web Cryptography API
var generation = windows.msCrypto.subtle.generateKey(
{ name: "RSASSA-PKCS1-v1_5", params: { modulusLength: 2048, publicExponent: new Uint8Array([0x01, 0x00,
0x01]) } },
false,
["encrypt", "decrypt"]
);
var pubKey, privKey;
generation.oncomplete = function (e) {
pubKey = e.target.result.publicKey;
privKey = e.target.result.privateKey;
}
21. 동영상 - SDP(Simple Delivery Profile)
HTML5 동영상에 캡션을 배치하고 스타일을 지정
TTML(Timed Text Markup Language)을 통한 :
- 텍스트 색을 변경
- 단색 배경 생성
- 글꼴, 글꼴 크기 및 글꼴 스타일을 변경
- 화면의 텍스트에 애니메이션 효과 적용
HTML :
<video id="videoElement" src="Complete 90s Video_VO_1_35.mp4" controls autoplay width="800">
<track src="Pop-up.ttml" id="popupCaptions" label="Pop-up Caption Style" default/>
<track src="Roll-up.ttml" id="rollupCaptions" label="Roll-up Caption Style"/>
<track src="Paint-on.ttml" id="paintonCaptions" label="Paint-on Caption Style"/>
</video>
23. 동영상
Streaming XHR cache control
XHR로 전송받은 스트림 데이터를 디스크에 캐시될 지 여부를 설정할 수 있다.
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.msCaching = 'enabled';
xhr.responseType = 'stream';
xhr.send();
XMLHttpRequest.msCachingEnabled(); // 캐싱 여부 반환 (true | false)
- msCaching 속성은 XHR이 open 된 상태에서 수행되어야 함
- 노트북 또는 태블릿의 경우에는 캐싱하지 않는 것이 배터리 성능을 더 오래 유지시킬 수 있다.
24. 고정된 사이트 알림
Pinned site notification
윈도우 8.1의 시작화면에 고정된 사이트에 주기적으로 알림을 줄 수 있는 방법
•
•
•
meta 태그 이용
JavaScript를 사용
xml 설정파일 사용
26. 기타
data-* 속성 지원
http://msdn.microsoft.com/en-us/library/ie/dn254940(v=vs.85).aspx
Flexible box (“Flexbox”) 레이아웃 벤더 프리픽스 제거
http://msdn.microsoft.com/en-us/library/ie/dn265027(v=vs.85).aspx
Pointer events 벤더 프리픽스 제거
http://msdn.microsoft.com/en-us/library/ie/dn304886(v=vs.85).aspx
DOM 노드의 변경을 모니터링 할수 있는 Mutation observer 지원
http://msdn.microsoft.com/en-us/library/ie/dn265034(v=vs.85).aspx
window.event 객체 변경 - MSEventObj 타입이 아닌 Event 객체가 전달됨
http://msdn.microsoft.com/en-us/library/ie/dn384058(v=vs.85).aspx
문서 모드 제거 ��� IE8에서 호환성을 위해 도입되었던 문서 모드가 제거되며, IE11은 에지(Edge)모드로 처리
http://www.modern.ie/en-us/f12
http://msdn.microsoft.com/en-us/library/ie/dn384051(v=vs.85).aspx
checkbox ��� radio 버튼 기본 레이아웃 값 변경
padding : 0px
margin : 3px (marginLeft는 4px)
box-sizing : “border-box”
http://msdn.microsoft.com/en-us/library/ie/dn384054(v=vs.85).aspx
27. 기타
터치 시 링크 하이라이팅 적용 제어 (Windows 7 IE11은 미적용)
<meta name="msapplication-tap-highlight" content="no" />
살짝 밀기 제스처로 '뒤로/앞으로' 탐색
모던 UI 실행에서만 동작
터치를 이용한 d&d
기존 마우스를 사용한 HTML5 d&d가 적용되어 있는 페이지도 별다른 설정 변경 없이 적용
* Windows 7 IE11에서 미 적용 기능 목록
http://msdn.microsoft.com/en-US/library/ie/dn394063(v=vs.85)
* 다양한 버전의 IE가 설치된 가상머신 다운로드
http://www.modern.ie/ko-kr/virtualization-tools