[JSer.info#번역] 2014-12-02 자바스크립트 주요 소식

DaliyJS 앙케이트

올해도 역시 DailyJS의 자바스크립트 개발자 앙케이트가 시작됐습니다. JavaScript Developer Survey 2014에서 어떤 목적으로 자바스크립트를 사용하는지 또, 사용하는 라이브러리나 테스트 등에 대해 조사 하고 있습니다. 2010년(JavaScript Developer Survey 2010) 부터 지속적으로 시행하고 있는 설문 조사입니다. 여력이 되다면 꼭 참가 합시다.
 

The State of JavaScript in 2015

The State of JavaScript in 2015(한국어) 아티클에는 라이브러리와 기술 변화에 어떤 자세로 임해야할지 작성돼 있습니다. AngularJS 2.0은 지금과 완전히 다르며 트랜드를 따라가는건 부질없고 대기업이 지원한다고 해서 기대할 필요도 없다고 말하고 있습니다. 대도록 AngularJS나 Ember 같은 단일체 프레임워크를 사용하지 말고 레이어에 전문성을 가진 라이브러리를 사용하여 점진적으로 레거시한 프로젝트에 새로운 기술을 도입하고 또, 사용하다가 마음에 안들면 언제든지 다른 라이브러리로 교체 가능해야한다고 합니다. 새로운게 30초 마다 커밋되는데 무슨 수로 다 배우냐는 등 재미있는 어투로 새로운 라이브러리나 기술을 사용할 때 주의해야 할 교훈 등에 대해서 이야기합니다.
근래 개발자들 사이에서 이와 같은 생각이 많은 이유는 View를 전문적으로 다룰 수 있는 React나 데이터 바인딩에 전문성을 가진 Flux 등이 공개됐기 때문에 지금까지는 고비용을 요구하는 최신 기술 반영 문제를 점진적으로 잘 해결한 사례가 많아지고 있기 때문입니다.

• 왜 Virtual DOM이 우리들을 흥분시키는가?(일본어[구글번역])

Functional Programming

Functional Programming 슬라이드에는 자바스크립트 환경에서의 함수형 프로그래밍에 대해 작성돼 있습니다.객체지향적 코드와 함수형 코드를 비교하여 소개하므로 이해하기 쉽습니다. 또, 자바스크립트에서는 꼬리 재귀에 대한 최적화가 이뤄지지 않은 상황이나 패턴 매칭, 지연 평가, 단일상징성(homoiconicity, 코드나 데이터를 동급으로 취급)하는 방법 등을 설명합니다. 언어적으로는 어려운 부분이 있지만 함수형 페러다임에 대해 잘 아는 사람이 읽으면 좋을 것 같습니다.
 

릴리즈 소식

• Release 0.11.1 · yyx990803/vue : Vue.js 0.11.1이 릴리즈 됐습니다. v-component의 스코프와 wait-for에서 특정 event가 emit 될때까지 기다리도록 변경 됐으며 v-style에 data로써 CSS 객체를 전달하여 스타일 적용이 가능합니다.
• ESLint 0.10.0 released : ESLint 0.10.0이 릴리즈 됐습니다. CLI가 기본적으로 node_module을 무시하도록 변경됐습니다. 확장자 없이 파일 이름만으로 지정 가능하며 별도 옵션으로 확장자의 기본 값을 설정할 수 있습니다.

읽을거리

• IE Web Development Support Moving to Stack Overflow : IE 개발에 관한 Q&A 시스템을 Stack Overflow로 이전한다고 합니다.
• The State of Flux : Flux 아키텍처 관련 라이브러리를 정리하고 각각 구현적인 특징에 대해서 설명합니다.
• Getting Started with React and JSX : React 튜토리얼, props, state, event를 순서대로 소개합니다.
• 프론트엔드 엔지니어가 되고부터 11개월 간 배운 숙달된 Chrome의 사용법(일본어[구글번역]) : Chrome 개발자 도구 팁을 소개합니다. GIF 스크린샷으로 설명하기 때문에 일본어를 모르더라도 어느 정도 이해할 수 있습니다.
• What’s in a Function Name? : 자바스크립트 함수 이름에 대한 고찰이 정리돼 있습니다. 함수 정의나 함수식, 즉시 실행 함수, new의 경우, ES6의 let이나 export 등의 경우에 함수 이름에 대한 고민 등이 정리돼 있습니다. 또, JSHint에 의한 검증이나 디버그에 유용한 displayName 속성에 대해서도 이야기합니다.
• Custom Element-WebComponents를 구성하는 기술(일본어[구글번역]) : Custom Element를 설명합니다. Custom Element를 생성하는 법, 구조, 라이프 사이클 콜백, 유스케이스에 대해 정리돼 있습니다.
• Goodbye, Layout Invalidation: Animating SVGs With CSS Transforms : 움직이는 SVG 요소를 분리해 CSS Transform 등을 사용해 GPU에서 처리 하도록 튜닝하여 60FPS가 나오도록 성능 개선을 하는 과정에 대해서 설명합니다.
• React Through the Ages : React 향후 진로에 대해 설명합니다. Reusable Components가 Facebook 안에 이미 10000개 존재하며 1.0을 위해 API 안정화 / 수정, ES6 Classes 구문 대응, CSS in JS, Web Worker 대응, 레이아웃이나 애니메이션 등을 준비합니다.
  • React: CSS in JS
• ReactJS: Keep Simple. Everything can be a component! : React의 특징에 대해 알기 쉽게 정리돼 있는 슬라이드입니다. immutable, Virtual DOM, Prop와 State, DRY를 위한 Mixin, Isomorphic에 대해 이야기합니다.

라이브러리

• decadecity/css-specificity-map : CSS의 Maps CSS Specificity 데이터를 이용해 Specificity 그래프를 생성하는 라이브러리입니다.
  • The Specificity Graph
  • CSS specificity graphs
  • CSS specificity
• knsv/mermaid : 텍스트에서 D3를 사용한 플로우 차트나 다이어그램 등의 그림을 생성하는 라이브러리입니다.
• krasimir/atomus : Node.js 환경에서 DOM을 포함한 클라이언트 측 코드를 테스트할 수 있는 라이브러리입니다. jsdom을 사용하며 테스트 실행을 위한 기반 HTML을 준비하고 click 등 여러가지 이벤트를 발생시켜 테스트를 할 수 있습니다.
• serratus/quaggaJS : 자바스크립트로 개발된 바코드 리더 라이브러리입니다. getUserMedia를 사용하여 리얼 타임으로 처리하거나 사진으로 추출할 수 있습니다.
• Handsontable : Excel과 비슷한 데이터 그리드 에디터입니다. 의존 라이브러리 없이 사용할 수 있습니다.

도서

• Full Stack JavaScript Engineering : 프론트엔드를 전반적으로 다루고 소개하는 GitBook으로 작성된 전자 서적입니다.

 
JSer.info를 번역하여 공유드리고 있습니다.
JSer.info는 JavaScript Weekly, Badass JavaScript, JsMag, A Minute With Brendan, The Changelog를 참고, 자바스크립트의 주요 소식을 공유하는 사이트입니다.
감사합니다.