WIT – NTS UIT Blog

[스터디] Pro git 2장 – Git의 기초

Posted by in Environment, Tech

이 글은 사내 스터디에서 pro git을 진행하며 정리한 글입니다. git 저장소 만들기 git 저장소는 git init 명령어를 사용해 생성한다

기존 저장소를 clone하기 리모트 저장소(github)를 클론해서 가져올 수 있다. 클론은 svn의 svn checkout 저장소경로와 비슷하다.

파일의 생존주기 파일은 크게 untracked, unmodified, modified, staged 영역을 거친다. untracked : 파일이 있으나 한번도 add 되지 않음. unmodified : 파일을 add 하여 commit을 1회 이상 한 이후, 수정사항 없음 modified : 바로 위 케이스에서 수정사항 있음 staged : git add한 상태 파일의 상태 확인하기

위 명령어를 -s를 사용해 축약형으로 확인할 수 있다….read more

0

하위 버전 브라우저의 HTML5 / CSS3.0 호환성 준수방안

Posted by in Research

‘하위 버전 브라우저의 HTML5 / CSS3.0 호환성을 어떻게 준수할 것인가’ 에 대해 포스팅하겠습니다. 요즘 ‘모바일웹을 PC에서 잘보이게 해달라’는 미션을 많이 받습니다. 즉 HTML5, CSS3.0으로 작성된 코드를 PC에서 잘보이게 해야하는 것이죠. 따지고 보면 “모바일 -> PC” 요구사항에만 해당되는 미션이 아니라 모든 프로젝트에서 고민할 내용입니다. 요즘은 반응형이 대세이고 최신 스펙들은 안쓰기엔 너무 아까우니까요… “webkit이나 CSS3.0을 걷어내야하나?” “따로 한벌 더 만들자” “신경안써도 잘 나오게 하는 방법 없을까?” 방법은 여러가지입니다. 문제는 어떤게 가장 효율적인가를 판단하는 것이죠. 호환성 준수를 위한 방법을 크게 4가지로 분류했습니다. 1. polyfill “polyfill”은 낡은 브라우저에서는 작동 안하는 HTML5 , CSS3.0들을 자바스크립트나…read more

1

햄버거 메뉴의 사용을 피해야 하는 이유와 대안

Posted by in UI/UX

Luis Abreu Twitter: @lmjabreu | Email: hello@lmjabreu.com | Blog: https://lmjabreu.com 영국 브라이튼에서 UX/UI 디자이너로 일하고 있다. 지난 십여년간 여러 나라에서 다양한 규모의 업무를 해왔다. Luis Abreu가 쓴 Why and How to Avoid Hamburger Menus를 번역한 글입니다. 사이드바 메뉴는 햄버거 메뉴Hamburger Menu라고도 부른다. 요즘 흔히 볼 수 있는 이 햄버거 메뉴는 사실 좋은 점 보다 위험한 점이 더 많다. 알려진 데이터는 다음과 같다. 사이드 드로어가 사용자의 사용시간을 반토막 낼 수도 있다Side drawer navigation could be costing you half your user engagement 모바일 메뉴 AB 테스트Mobile Menu AB Tested 햄버거 vs 메뉴:…read more

0

[번역] 7 Patterns to Refactor JavaScript Applications

Posted by in Books, Research

이 글은 Michael Phillips 가 2014년 6월,  [Crush&Lovely]에  연재한  ‘자바스크립트 어플리케이션 리팩토링을 위한 7가지 패턴’에 대해  번역한 것이다. 들어가며 2012년 10월 17일, Bryan Helmkamp, Code Climate 설립자가 Ruby on Rails의 액티브 레코드 모델들(대표적인 객체 레이어들)을 리팩토링할 7개의 패턴을 요약하여 블로그 포스트를 작성했다. 여기 [Crush & Lovely]의 포스트는 모든 Rails개발자를 위해 어떻게 문제를 분리하고, 모듈 형으로 작성하며, 간결하면서도 표현적인 코드를 만들고, 매우 간단한 테스트를 만드는 지에 대해 설명하는 핵심 레퍼런스가 될 것이다. 이 시리즈의 포스트들은 자바스크립트 환경에서 다음과 같은 개념에 대해 직접 보여준다 ; 자바스크립트의 데이터 모델보다 더 적합하거나 거기에 필적할 만한 것은 없다. 매주, 일곱 패턴 중…read more

2

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

Posted by in Research

Vivaldi Techinial Preview Chromium 기반의 브라우저인 Vivaldi의 Techinial Preview 버전이 공개됐습니다. 이 브라우저는 전 Opera의 CEO인 jon Stephenson von Tetzchner가 설립한 Vivaldi Technologies에서 개발하고 있습니다. 2014년 3월경 오페라 소프트웨어에 의해 My Opera가 폐쇄 됐고 이를 탐탁치 않아 했던  jon Stephenson von Tetzchner는 My Opera를 대신할 가상 커뮤니티 사이트로써 Vivaldi를 만들었던 것이 시발점이 되어 여기까지 오게됐다고 합니다. Meet Vivaldi, A New Browser From the Former CEO of Opera Former Opera CEO Launches Vivaldi, A New Browser For Power Users Opera 12 유저를 대상으로한 기능이 많이 구현돼 있는 느낌이며 Chronium 기반으로 개발됐으므로…read more

0

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

Posted by in Research

TypeScript 1.4 릴리즈 TypeScript 1.4가 릴리즈 됐습니다. 이전 TypeScript and the Read to 2.0(로드맵)에 작성돼 있었던 것 처럼, Union Types, Type Aliases, Const Enums 등의 기능이 추가됐으며 ES6의 구문 지원의 개선, ES6의 코드를 출력하는 모드도 추가됐습니다. 자세한 사항은 TypeScript 1.4.1 변경 사항(일본어)을 참고해주세요. 또, TypeScript의 Compiler API에 관한 문서가 첨삭(添削)되고 있습니다. io.js 1.0.0 릴리즈 Node.js를 fork한 io.js 1.0.0이 릴리즈 됐습니다. io.js – FAQ에도 작성돼 있습니다만 1.0은 semver 이므로 Node.js에서의 메이저 업데이트라는 의미입니다. production-ready라는 의미는 아닙니다. jser.info 4주년(일본어)에서 간단히 언급했듯이 오픈 거버넌스 모델을 바탕으로 예측 가능한 릴리즈 사이클의 제공을 목적하고 있으며 이와…read more

0

[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