Bootstrap 3.3.0 릴리즈
Bootstrap 3.3.0이 릴리즈 됐습니다. translate3d가 원인인 버그가 수정됐고 Normalize.css, H5BP의 업데이트를 대응 하는 등의 변경 사항이 있습니다. 자세한 내용은 아래 문서를 참고해주세요.
Bootstrap4의 개발을 시작했습니다. navbar를 개선하고 panels, thumbnails를 대체 하는 새로운 컴포넌트를 추가하며 IE8 지원을 종료한다고 합니다.
CSP Lv.2 이야기(일본어)
이 슬라이드에는 CSP(Content Security Policy)의 Lv.2에 추가된 기능에 대해서 작성돼 있습니다. CSP Lv.1은 레거시한 코드에 적용하기 어려운 느낌이었지만 Lv2에서는 인라인 스크립트도 일정 규칙으로 허가할 수 있어 보다 유연한 설정이 가능하게 됐습니다. CSP를 적용한 경험과 팁을 소개한 Twitter의 @ndm님의 슬라이드도 함께 보면 도움이 될 것입니다. CSP Lv1에 대한 것은 An Introduction to Content Security Policy와 Content Security Policy Playground를 참고하세요.
A State of Change— On the future of Object.observe
이 슬라이드에는 현재 Chrome에서 사용할 수 있는 Object.observe()에 대한 여러 가지 관점과 논란에 대해 작성돼 있습니다. 간단한 개요를 메모(일본어)로 작성해 놓았습니다. Object.observe()는 객체를 감시하고 있다가 변경이 생길 때 콜백을 호출하는 메서드이며 ES7+ 사양에 추가될 예정입니다.
객체의 변경을 감시한다는 것은 Mutable 한 객체를 취급하고 그 객체의 변경 결과를 DOM에 반영하는 구현법 즉, 데이터 바인딩에 알맞은 기능이라고 생각합니다. 반대로 Immutable 한 객체를 취급하고 그 객체에서 이전 상태를 계승하지 않는 DOM을 만드는 즉, React 같은 구조가 현재 널리 사용되고 있습니다. 슬라이드에서는 전자와 같은 데이터 바인딩 구조를 Mutable data to a Stateful DOM이라고 표현하고 후자와 같은 React나 Mercury 구조를 Immutable data to a Stateless DOM이라고 표현하고 있습니다. Stateless와 Stateful이라는 표현은 Canvas나 REST와 같은 개념에서 들어봤을 것입니다.
Object.observe()가 네이티브에서 구현돼 있다면 데이터 바인딩 같은 기능 구현이 한결 쉬워집니다만, 이 방법 외의 다른 관점의 접근도 가치가 있으므로 사양에 추가된다는 이유로 데이터 바인딩이 유행될지 의문이라고 합니다. 최근에는 React나 virtual-dom을 사용해 뷰 생성 비용을 줄이고 Flux 등을 이용한 새로운 애플리케이션 아키텍처 스타일을 디자인하는 바람이 일고 있습니다. 단순하게 라이브러리를 사용해야 한다는 이야기가 아니라 왜 그러한 아키텍쳐가 좋은지를 생각해볼 필요가 있습니다.
릴리즈 소식
- Open Web Platform Milestone Achieved with HTML5 Recommendation : W3C HTML5가 Recommendation(참고 : W3C 표준화 제정 단계) 됐습니다.
- Meteor 1.0 : Meteor 1.0이 릴리즈 됐습니다.
- React v0.12 : React 0.12가 공식 릴리즈 됐습니다. 용어나 API 그리고 JSX가 변경됐고 Chrome의 DevTools 확장 개선됐으며 라이센스가 Apache 2에서 BSD로 변경 됐습니다.
- Release JSHint 2.5.7 : JSHint 2.5.7이 릴리즈 됐습니다. ES6의 Symbol, Reflect, System, ComputedPropertyNames 등을 대응합니다.
- Socket.IO 1.2.0 : Socket.IO 1.2.0이 릴리즈 됐습니다. 서버와 클라이언트의 버그가 수정 됐습니다. IE10 처럼 XDR과 XHR Lv2가 있는 경우에는 XHR을 우선하며, PhantomJS를 지원합니다.
- Sinon.JS/Changelog.txt at v1.11.1 : Sinon.JS 1.11.0이 릴리즈 됐습니다. AMD의 지원이 개선됐고 xhr에 .response 속성이 추가 됐으며 버그가 수정 됐습니다.
- Release RxJS Version 2.3 : RxJS 2.3이 릴리즈 됐습니다. Promise와 Generator를 지원하며 ES6 이후의 Array.form 같은 메서드와 동일한 기능을 제공합니다.
- Release Son of Dragon · sass/libsass : libsass 3.0.1가 릴리즈 됐습니다.
블로그&아티클
- Spy-js 2.0: New level of JavaScript tracing : Webstorm9의 spy-js 2.0에 대해서 작성돼 있습니다. 브라우저 실행 결과 코드 자동 완성 기능, brakpoint를 걸지않아도 inspection에서 변수의 값을 볼 수 있으며 Node.js를 지원하고 tracing 결과 공유, ES6를 지원합니다.
- Getting To Know Flux, the React.js Architecture : Flux 아키텍처에 대해 알기 쉽게 설명하고 있습니다. Store가 복수인 경우에 watiFor를 사용해 의존 관계를 해결하는 방법과 어떤 흐름으로 처리 되는지를 다이어그램을 이용해 쉽게 정리돼 있습니다.
- Class 구문이 구현됐습니다.(일본어[구글번역]) : ES6의 Class 문법에 대해 설명합니다. prototype을 대체할 문법과 상속, 익명 클래스, class 안은 strict mode 같은 특징에 대해서 작성돼 있습니다.
- For and against ‘let’ : ES6의 let에 대해서 자세히 작성돼 있습니다. let에 의한 블록 스코프와 사용 방법을 이야기합니다.
- Introducing SIMD.js : SIMD(Single Instruction, Multiple Data) API에 대해서 이야기합니다. SIMD 정의와 polyfill인 SIMD.js에 대해 소개합니다.
- Why we should stop using Grunt & Gulp : Grunt나 Gulp 같은 태스크 러너 대신 npm run을 사용하는 방안에 대해 이야기합니다. 태스크 러너가 업데이트 되거나 별도의 선택 사항 나왔을때의 변경 및 반영 비용과 불만족스러운 plugin 동작 방식에서 비롯되어 npm run을 사용하게 된 일에 대해 이야기합니다.
- Building single page apps using web components : WebComponents를 사용하여 SPA를 만들어 볼 수 있는 튜토리얼 입니다.
- The Fine Art of JavaScript Error Tracking : 자바스크립트의 오류 보고서를 모니터링 할 수 있는 서비스인 New Relic, Honeybadger, {Track:js}, Sentry에 대해 이야기합니다. 무분별한 오류 보고서는 소음이 될 수 있지만 Sentry는 중요한 오류를 우선적으로 출력하고 어떤 브라우저인지에서 발생했는지 표시합니다.
라이브러리
- jwerle/w625 : 6to5를 사용한 ES6 REPL 구현 라이브러리 입니다. 특정 웹사이트에 연결하여 콘솔처럼 사용할 수 있습니다.
- Zolmeister/promiz : ES6 Promises의 polyfill 라이브러리 입니다.
JSer.info를 번역하여 공유드리고 있습니다.
JSer.info는 JavaScript Weekly, Badass JavaScript, JsMag, A Minute With Brendan, The Changelog를 참고, 자바스크립트의 주요 소식을 공유하는 사이트입니다.
감사합니다.
0개의 댓글