WIT – NTS UIT Blog

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

Posted by in Research

6to5 공식 홈페이지 리뉴얼 ES6의 코드를 ES5로 변환하는 도구인 6to5의 공식 홈페이지가 리뉴얼됐습니다. 또한, ES6의 코드를 변환하는 도구인 esnext의 팀이 6to5에 합류할 것으로 보입니다. 때마침 ES6로 작성한 라이브러리를 6to5를 사용해 공개하는 과정에 관한 “라이브러리를 ES6로 작성해 공개하는 것부터 시작하자(일본어)”라는 아티클도 작성했으므로 참고하여 6to5를 사용해 보면 좋을 것 같습니다. JavaScript in 2015 – Glen Maddern: Internet Pro JavaScript in 2015 – Glen Maddern: Internet Pro라는 기사에는 jspm 패키지 관리 도구에 관해 소개하고있습니다. jspm은 npm이나 Github에서 라이브러리를 설치하는 커맨드라인 도구와 SystemJS를 사용한 모듈 로더로 구성돼 있습니다. 위 동영상에는 jspm을 이용해 reddit에서 gif를…read more

0

한글에 ‘-thin’ 폰트를 사용할 수 있을까?(모바일)

Posted by in Research

iOS에 AppleSDGothicNeo-Thin 폰트를 적용하고, 안드로이드에도 역시 얇은 폰트를 적용해 달라는 요청을 받았습니다. 해외 사이트에 나와 있는 스펙 문서를 보고 진행을 했지만 특히 안드로이드에서 한글은 스펙과 전혀 다른 길을 가고 있다는 것을 깨달았습니다. 그리고 결국 전체적인 폰트와 크기를 수정할 수 밖에 없었답니다. AppleSDGothicNeo-XXX 와 Helvetica Neue-XXX 로  iOS에서 폰트 굵기를 조절했다면, 안드로이드에서는 어떻게 조절할 수 있을까요? ‘-thin’ 폰트에 대한 버그는 없을까요? ☞ 모바일 폰트 시뮬레이션 iOS iosfonts.com 에도 나와 있듯이, iOS7 부터는 AppleSDGothicNeo-Thin 폰트를 사용할 수 있습니다. 하지만 font-family : AppleSDGothicNeo-Thin; 인 상태에서 가로모드로 돌려 보면(제일 오른쪽 이미지) 한글에서 ‘스’의 ‘ㅡ’가 살짝 안보입니다. 이 버그는 iOS7에서만 재현됩니다….read more

0

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

Posted by in Research

ESLint 0.11.0 릴리즈 JavaScript Lint 도구 ESLint 0.11.0이 릴리즈됐습니다. ES6나 JSX 등을 지원하기 위해 Esprima에서 fork한 Espree로 파서를 변경하고 있습니다. 또한, ECMAScript5가 기본 검증 설정으로 변경됐으며 설정을 package.json(Configuring ESLint)에 작성할 수 있도록 됐습니다. browserify for webpack users 위 아티클에는 webpack의 각 기능을 Browserify에서 실현하는 방법을 비교해 소개하고 있습니다. 소개하는 방법이 꼭 동일한 기능이라고는 할 수 없지만, 각각의 설계 철학의 차이를 알 수 있는 디자인을 볼 수 있습니다. webpack은 모든 기능을 포함하고 그것을 활용한 최적화가 가능한 개발 방식을 취하고 있고, Browerify는 외부에서 기능을 구현하도록 하고 필요시 조합해 사용하는 UNIX 철학을 근간으로…read more

0

vh 사용 예 – 네이버 증권 모바일

Posted by in Research

ios7에서 height 100% 인 딤드 팝업 먼 미래의 단위인 것 같았던 vh 를 처음 사용했습니다. 아직 안드로이드 4.3 이하에서 지원하지 않아 적극적으로 사용하기엔 조심스럽긴 합니다. 저 역시 어떤 버그나 사이드 이펙트가 있을지 두근두근했는데, 배포한지 일주일이 지난 지금까지 다행히도 아무런 이슈가 없어서 기쁜 마음에 정리해봤어요. 그리고 다시 한번 느꼈지만 ‘뷰포트의 크기를 재는 스크립트 처리를 대신 할 수 있는 신박한 단위’ 인건 분명한 것 같습니다. 이슈 아이폰에서 키보드 노출 상태로 팝업 딤드가 보이는 경우, 위 아래로 꽉 차지 않는 이슈가 있었습니다 input 박스에 포커싱이 된 상태 + 키패드가 올라옴 + 스크롤 후,…read more

0

CSS3로 구현된 페이지의 IE7~9 대응 이야기

Posted by in Research

들어가기 CSS3를 활용한 모바일 페이지를 최대한 HTML 수정없이 IE 하위 버전에서도 정상노출하기 위한 테스트를 진행하였었습니다. 이를 위해 조사해보니 다양한 방법이 있어, 그 중 몇가지 적용 사례를 소개합니다. 가상선택자(:before, :after, …), box-sizing:border-box (IE7) 하위 버전 IE에서 지원하지 않는 속성을 지원하기 위한 스크립트를 사용하였습니다. 아래 코드를 head 안에 넣어서 사용합니다.

가상 선택자는, CSS3문법인 더블콜론(::)과 CSS2문법인 싱글콜론(:) 문법을 가지고 있습니다. IE 하위 버전에서는 CSS2문법인 싱글콜론만 지원하여, 더블콜론을 싱글콜론으로 변환해주어야합니다.

더 자세한 사용법은 아래 URL에서 확인할 수 있습니다. https://code.google.com/p/ie7-js/ background-size:cover (IE7/IE8) IE8 이하 버전에서 background-size:cover 속성을 지원하지 않습니다. 이 경우 두가지 방법을…read more

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

Posted by in Research

jsdom 2.0.0 릴리즈 DOM을 자바스크립트로 구현(Node.js에서도 동작하는 DOM 구현)한 jsdom 2.0.0이 릴리즈 됐습니다.  특별히 기능을 추가한 것이 아닌데도 2.0.0을 발표한 이유는 지금까지는 DOM Level 1, 2, 3로 나눠 구현하고 있었지만 향후는 Living Standard 모델로 구현해 나간다는 방침을 표하기 위해서라고 합니다. 버전 번호를 붙이는 것은 장점보다 단점이 많다고 판단하고 있으며 jsdom 내부에서도 level 별로 나누기가 힘든 수준에 이르렇기 때문에 Living Standard 모델로 바꾸는 듯 합니다. 따라서  내부적인 구조를 크게 변경하는 리팩토링을 하고 있다고 합니다. 하지만 사용자 인터페이스에는 큰 변화가 없을것으로 보입니다. 6to5 2.0.0 릴리즈 ES6 코드를 ES5로 변환하는 도구인 6to5 2.0.0(현…read more

0

Sass(CSS Preprocessor) 기초

Posted by in Research

Sass란? 책에서는 이렇게 설명합니다. “Sass는 css전처리기로 .css 파일 중간에 위치하는 하나의 계층입니다. Sass는 보다 간결하고 격식을 갖춘 css 문법을 제공하며, 스타일시트를 쉽게 관리할 수 있는 다양한 기능을 구현합니다.” 대체 이게 뭔소리인가… 혼란스럽습니다. 좀 더 풀어서 접근해보면.. “Sass는 css를 만들어주는 언어로 자바스크립트처럼 특정 속성(ex. color, margin, width … )의 값(ex. #000, 3px, 420px … )을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수도 있고, 반복되는 코드를 한번의 선언으로 여러 곳에서 재사용할 수 있도록 해주는 등의 기능을 가졌습니다.” 사실.. 이런 이론적인 설명만으로는 전혀 감이 오지 않습니다. 그러나 앞으로 접하게 될 예제들을 통해 “아! 이런녀석이구나~” 라고 감을…read more

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

Posted by in Research

DaliyJS 설문 공개 매년 이 시기에 DaliyJS에서 시행하는 설문인 JavasScript Developer Survey 2014 결과가 공개됐습니다. 매년 조금씩 질문 및 응답 방식이 변경되므로 단순 비교는 어려울 수 있으나, 작년 Grunt에 대한 응답이 가장 많았던 빌드 도구에 대한 설문은 올해 Gulp가 35%, Grunt가 47%로 집결되는 등 흥미로운 변화를 알 수 있습니다. 자세한건 아래 문서를 참고해주세요 2014-survey-summary.pdf 무섭지 않아, Protractor(일본어) 무섭지 않아 Protractor(일본어[구글번역])에는 Protractor라고 하는 E2E 테스트 도구가 어떤 방식으로 WebDriverJS를 사용하여 테스트 하는지 작성돼 있습니다. 테스트 시 Selenium으로 브라우저를 조작하기 때문에 실제 결과를 얻기까지 소요 시간이 있고, assert할 타이밍을 잡기가 어려우며 비동기인…read more

1

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

Posted by in Research

Meta programming with ECMAScript 6 proxies Meta programming with ECMAScript 6 proxies이 아티클에는 ECMAScript 6의 Proxy에 대해서 자세히 작성돼 있습니다. 메타프로그래밍 정의, ES6 Proxy를 사용하여 할 수 있는 일, Proxy 동작 원리, 유즈케이스, Proxy 판별법, PropertyDescriptor와 합친 경우, Reflect API에 대해서도 설명하고 있어 메타프로그래밍 적으로 재미있는 부분이 많습니다. Web Components의 기본적인 사용법 정리 Web Components의 기본적인 사용법 정리(일본어[구글번역])에는 Web Components에 대해서 작성돼 있습니다. template 요소, HTML Imports, Shadow DOM, Custom Elements 같은 구성 요소에 대해서 잘 나눠 작성돼 있어서 관심 있는 부분을 먼저 읽어볼 수 있습니다. Chrome 40에서 지금 바로…read more

0

[번역] OS X 요세미티 JXA(자바스크립트를 이용한 자동화) 시작하기

Posted by in Research, Tech

Alex Guyot Twitter: @the_axx | Email: guyot@macstories.net Alex는 MacStories에 iOS 앱에 대한 가이드를 기고하고 있다. 또한 개인 블로그인 Unapologetic에서 iOS 자동화 워크플로우에 관한 내용도 다루고 있다. Alex Guyot가 MacStories에 기고한 Getting Started with JavaScript for Automation on Yosemite를 번역한 글입니다. 나는 지난 달에 MacStories에 OS X 요세미티의 확장가능성과 자동화에 관한 변경사항을 작성하면서 요세미티가 지원하는 자바스크립트를 이용한 자동화(JXA, JavaScript for Automation)를 간단히 살펴봤다. JXA 릴리스 정보나 WWDC의 세션 영상을 단순 요약하는 글을 쓰고 싶지 않았기 때문에, 지난 번 글을 쓰면서 JXA의 기본적인 부분을 공부했다. JXA는 새롭게 지원되는 기능이라 관련 정보를 찾아보기가…read more

1

[번역] The State of JavaScript in 2015

Posted by in Research, Tech

Jimmy Breck-McKye Twitter:@jbreckmckye Jimmy Breck-McKye는 프론트엔드 개발자입니다. Breck-McKye가 자신의 블로그에 쓴 글로 2014년 12월 첫째 주  JavaScript Weekly에 올라온 The State of JavaScript in 2015를 번역한 글입니다. —– 요즘 JavaScript 세계는 춘추전국시대 같다. 감당할 수 없는 속도로 새로운 프레임워크와 기술이 쏟아지고 사라진다. 나는 사람들이 이 상황을 새로운 방법으로 헤쳐나갈 것으로 본다. 내 예상에 앞으로 개발자들은 Angular.js, Ember 같은 단일 프레임워크가 아닌 입맛대로 조합할 수 있는 작은 라이브러리를 사용해서 변화가 가져올 위험을 줄이고 서로 다른 문제를 개별적으로 해결하는 방향으로 나갈 것이다. 많은 사견이 들어가 있는 글이지만 끝까지 읽어보길 바란다. 춘추전국시대 2014년을 마무리하는…read more

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

Posted by in Research

Firefo 34.0 릴리즈 Firefox 34.0이 릴리즈 됐습니다. 개발자 도구에 localStorage inspector, console.table() 등이 추가됐고,  profiler 도구가 개선됐습니다. 그리고 jQuery events를 대응합니다. 자세한 것은 아래 문서를 참고하세요. WebIDE, Storage inspector, jQuery events, iframe switcher + more – Firefox Developer Tools Episode 34 또한 CSS Fonts Level 3 시범적으로 적용됐고, template string 등 ES6의 기능이 구현 됐습니다. Firefox 34 for developers QUnit 1.16.0 릴리즈 자바스크립트 테스트 라이브러리 QUnit 1.16.0이 릴리즈됐습니다.  코드를 리팩토링했고 done() 스타일의 비동기 테스트와 Promise 테스트 지원하는 등 QUnit 2.x를 위한 여러 사항이 반영됐습니다. 2.0에서 바뀌는 부분은 「QUnit 2.x에서 바뀌는…read more

0

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

Posted by in Research

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 같은 단일체 프레임워크를 사용하지 말고 레이어에 전문성을 가진 라이브러리를…read more

0

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

Posted by in Research

Chrome 39 릴리즈 Chrome 39가 릴리즈 됐습니다. 구현된 기능은 베타 릴리즈 노트를 참고해주세요.  ES6 Generator가 기본으로 활성화 됐고 Web Application Manifest 대응, Beacon API(한국어)가 구현됐습니다. 그리고 Web Animations 구현이 진행되고 있습니다. 보통 XHR을 사용한 비동기 통신 시 페이지를 종료하면 요청을 신뢰할 수 없지만 Beacon API를 사용하면 백그라운드로 요청하기 때문에 UI를 블로킹하지 않으면서 요청을 신뢰할 수 있습니다. 예를 들어 링크 클릭을 로그로 쌓기 위해 리스너에서 기본 이벤트를 중지시키고 XHR 요청 후 페이지 전환을 해야 했지만 Beacon API를 사용하면 단순히 navigator.sendBeacon으로 요청하면 보내면 됩니다. Modern Debugging Experience: Part 2 개발자 도구를 사용한…read more

0

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

Posted by in Research

Windows10의 새로운 프리뷰 버전과 IE 프리뷰 버전 공개 Windows10의 새로운 프리뷰 버전을 공개함과 동시에 IE 프리뷰 버전(IE12?)도 업데이트 됐습니다. Living on the Edge – our next step in helping the web just work IE11에 도입된 Edge document mode가 IE 프리브 버전에서는 기본으로 적용됐습니다. Edge 모드에서는 웹 사이트의 X-AQ-Compatible를 무시하므로 호환성 보기 모드가 적용 되지 않습니다.  인트라넷, 호환성 보기 리스트에 등록한 사이트, 엔터프라이즈 모드로 지정한 경우에 호환성 보기 모드가 적용됩니다. "Living" Edge document mode,イントラでenterpriseモード使ってれば互換性リストで動作確保.Webには最新機能ガンガン入れてくよ.古いIEへのフォールバックコード無視するUA文字列にするよ.http://t.co/5OBcP6la3J — あなたとラスト今すぐoxidizeし太郎 (@saneyuki_s) November 13, 2014 IE의 프리뷰 버전은 별도의 UA 문자열을 가지고 있습니다. UA를 분석해서 IE의…read more

0