category: front-end

Google Chrome 에서 Grunt 사용하기

KStyleTrip 에서는 프론트엔드 영역에서 디자이너와 개발자가 협업하고 있다. 나는 사실 HTML CSS 를 어느 수준으로 다루기는 하지만 퍼블리셔는 아니어서 픽셀 단위의 디테일을 구현하는데는 어려움이 있다. 디자이너는 디자이너 대로 원하는 만큼의 디테일을 구현하기 어려워하는 내 모습을 보기 안타까워 했다. 그래서 현실적인 수준에서 협업을 시작했다. 개발자가 디자인을 보고 큰 덩이에 대해 마크업과 CSS 처리를 하면 디자이너가 원하는 […]

하이브리드 프론트엔드 개발 5원칙

15 Apr, 2014 - 3 minutes
3년 정도 하이브리드 플랫폼들을 경험했다. 하이브리드 플랫폼은 정말 여러 곳에서 쓰이고 있다. 하지만 그 모든 플랫폼이 크롬, 파이어폭스만큼 우수한 디버깅 환경을 제공하지는 않는다. 에뮬레이터를 지원하지 않는 경우는 부지기수이고 한 줄이라도 수정하면 앱을 종료했다 다시 켜야 변경사항이 반영되는 때도 있다. 오늘도 하이브리드 개발 중에 API 서버가 죽었다. 일정도 꼬인 김에 하이브리드 개발 때 도움이 될만한 팁을 공유해본다. ## 독립된 API 서버를 갖춰라 가능하다면 독립된 API를 갖는 게 좋다. 하이브리드 앱은 API와 통신이 많은 부분을 차지한다. 끊임없이 개발되고 있는 와중에 개발 중인 API가 안정적이기를 바라는 것은 무리다.

자바스크립트의 변수형을 알아내는 다른 방법

23 Mar, 2013 - 2 minutes
JavaScript 의 변수형을 알아내는 데는 일반적으로 typeof 를 사용한다. 하지만 toString 을 사용하면 어떤 객체의 인스턴스인지까지 한번에 알아낼 수 있다. ## JavaScript 의 변수형을 알아내는 데는 일반적으로 typeof 를 사용한다. 이 방법이 가장 간단하고 일반적인 방법이다. typeof 가 나타낼 수 있는 변수형은 아래와 같다. undefined, object, boolean, number, string, function, object typeof 가 변수에 대한 기본적인 호기심을 해결해주긴 하지만 몇가지 모자란 점이 있다. 

jQuery 요소 선택의 성능문제, 셀렉터와 탐색 중 어떤 것이 더 빠를까?

8 Mar, 2013 - 3 minutes
스택오버플로를 둘러보다 아래와 같은 질문을 찾았다. Is jQuery traversal preferred over selectors? jQuery 에서 요소 선택의 성능문제를 묻는 질문인데, $(“#vacations”).find(“li”).last(); $(“#vacations li:last”); 이 두 가지중 어떤 것이 더 빠를까?

자바스크립트 파일이 세미콜론으로 시작하는 이유

3 Mar, 2013 - 1 minutes
어떤 코드를 살펴보면 자바스크립트 파일이 세미콜론으로 시작하는 때가 있다. ;(function () {})(); 왜일까 궁금했었는데 스택 오버플로를 살펴보니 대략 아래와 같은 답변이다. 이 세미콜론은 자바스크립트 파일을 합칠 때(concatenating) 안정성에 도움이 된다.

SSI 를 활용한 프론트엔드 리소스 버저닝

6 Feb, 2013 - 2 minutes

개요 리소스 버저닝은 리소스 캐시를 목적으로 한다. 리소스 캐시는 해당 파일이 변경된 경우 컨텐츠를 새로 전송(Cache Miss)하고, 변경되지 않았다면 컨텐츠를 전송하지 않는(Cache Hit)다. 많이 사용되는 방법으로 버전이름을 쿼리스트링(Query String, GET 파라미터라고도 함)에 명시하는 방법이 있다. 버전이름을 쿼리스트링에 명시하는 방법은

브라우저 자동완성 기능의 미래

4 Feb, 2013 - 3 minutes
Form element 에 autocomplete 기능이 소개된 것은 1999년 Internet Explorer 5이 최초였다. 이후 각 브라우저 별로 산발적으로 지원하던 자동완성 기능은 HTML5에 이르러 표준화 되었다. HTML5 스펙은 2012년 12월 17일 버전으로 기준으로 함. 이전 스펙에서 autocomplete attriute 는 “on” 또는 “off” 값만 가질 수 있었으나 최근의 스펙에서는 on, off 외에 공백으로 분리된 토큰들을 가질 수 있다. 이에 따르면 attribute 이 on, off 가 아니라면 아래와 같은 순서로 동작한다. 1. 첫 8글자가 “section-” 으로 시작하는 경우 필드가 이름을 가진 그룹에 속함을 나타낼 수 있다.

SSI를 이용한 HTML 산출물 모듈화

31 Aug, 2012 - 4 minutes
개요 SSI 는 Server Side Include 의 약자로, 웹서버에서 직접 제공하는 서버사이드 스크립트 언어 입니다. PHP, ASP, JSP 등도 서버사이드 스크립트 언어의 범주에 들어가지만, SSI 는 대부분의 웹서버에서 직접 지원하고, 문법이 HTML 형식이라는 특징이 있습니다. 문법을 살펴보면, <!–#include virtual=”../quote.txt” –> 와 같이 HTML 의 주석 문법에 #을 붙인 형태로 지시자를 작성하고, attirubte 을 사용해 파라미터를 전달합니다. 일반적인 지시자들 일반적으로 많이 사용하는 지시자들 입니다.

HTML5 Page Visibility API

16 Aug, 2012 - 1 minutes

Page Visibility API * 브라우저에서 탭이 이동해서 안보이는 경우, 비디오는 끄고 싶다. * 페이지가 안보이는 중에는 이미지 로테이션을 멈춰두고 싶다. * 페이지가 안보이는 중에는 서버에 요청하지 않았으면 좋겠다. 이런 경우에 사용하기 위해 Page Visibility API 스펙이 표준화되고 있습니다.

입력 필드 내 텍스트 UI, 어떻게 구현하는 것이 좋을까?

14 Jul, 2012 - 4 minutes
요즘 많이 사용하는 UI 중, 입력 필드 내에 입력정보 텍스트를 표시하는 UI 가 있습니다. 아무래도 placeholder속성이 구현되었을 때와 비슷한 모습을 하고 있어서 placeholder 로 오인되는 경우가 있는 것 같습니다.

모바일 웹 디버깅 툴 – Weinre

17 Jan, 2012 - 3 minutes
국내 모바일 브라우저 시장 점유율은 2011년 12월 현재 Webkit 계열이 99% 이상의 점유율을 가지고 있다(Statcounter 기준, Android, iPhone, iPod Touch, Dolfin 을 합한 수치). 하지만 Webkit 계열의 브라우저로 천하통일되었더라도 모바일 사이트를 구축하는 것은 여전히 쉽지 않은 일이다. 단말기가 다양할 뿐 아니라 단말기마다 사용된 웹킷 브라우저 버전이 각각 다르고, 단말기에 적용된 OS 버전에 따라서도 다르다. 심지어는 제조사의 커스터마이징이 이루어진 경우도 심심치 않게 볼 수 있다. 같은 회사에서 나온 라인업(갤럭시 S, 갤럭시 K 등) 에서도 다르게 동작하는 경우마저 있다.

Semantic URL 를 프로젝트 내 소통수단으로!

13 Dec, 2011 - 4 minutes
Semantic URL이란? Semantic URL 은 Clean URL, Fancy URL, Rewritten URL 으로 불리기도 합니다. 위키피디아에서는 Semantic URL과 Clean URL을 각각 다른 용어로 정의하고 있기는 하지만 내용을 살펴보면 근본적으로는 비슷합니다.  즉, 비전문가(사용자)에게 친숙한, (의미를 표현하는)구조적인 URL입니다.

맥에서 hosts 파일 관리 – Gas Mask

24 Nov, 2011 - 1 minutes

[번역/요약] Professional Frontend Engineering

1 Jun, 2011 - 20 minutes
원문은 YUI의 Professional Frontend Engineering 입니다. 스크립트와 함께 보시면 더 좋습니다.  오역/오탈자 신고는 메일로 해주세요.