기초적인 부분이긴 하지만 유니코드 값 비교 부분은 잘 살펴볼 필요가 있다. 꼭 자바스크립트가 아니더라도 각 언어에서 유니코드를 어떻게 처리하고 다루는지 알아두면 유용하다. 발생할 수 있는 수많은 케이스가 있는데 그 중 하나로 음악 스트리밍 서비스인 spotify가 사용자명으로 유니코드를 사용해 보안 문제가 발생했었던 사례를 들 수 있다.

Chapter 2 어휘 구조 Lexical Structure

어휘 구조는 프로그래밍 언어의 가장 기초적인 문법.

2.1 캐릭터 셋

ASCII와 Latin-1를 포함하고 있는 유니코드

2.1.1 대소문자 구분 – 구분한다

html은 구분 안하므로 유의

2.1.2 공백, 줄바꿈, 양식 문자

공백은 무시됨, 가독성을 위해 사용 (예외 2.5)

줄바꿈은 단일 행 실행 종료로도 처리됨 (세미콜론 없어도 된다는 말)

식별자 빼고 LTR, RTL MARK 등 양식 문자를 사용할 수 있음

2.1.3 유니코드 탈출 문자열

유니코드 미지원 환경을 위한 유니코드 사용

\u + 4자리 8진수 주소

"résumé" === "r\u00e9sum\u00e9" // => true

2.1.4 표준화 Normalization

유니코드는 같은 글자를 여러 방법으로 표기할 수 있음

é는 유니코드 문자 하나로 표기할 수도 있고 e + ́ 로도 표시할 수 있음

console.log("e\u0301", "\u00e9"); // => é é
console.log("e\u0301" === "\u00e9"); // => false

자바스크립트는 작성된 코드를 이미 표준화 된 것으로 보고 별도로 표준화 처리 안함

2.2 주석

/* 블럭주석 */
/*
* 블럭주석
*/
// 인라인 주석

2.3 문자열 Literals

문자열은 데이터 값을 의미

number, string(Chapter 3), boolean, 정규표현식(Chapter 10), null, array, object

2.4 식별자와 예약어

문자, _, $, 숫자

첫글자는 숫자 못씀

일반적으로 아스키 문자와 숫자

유니코드 식별자도 가능

2.4.1 예약어

예약어는 식별자로 쓸 수 없음 – 기본 함수, 타입 등등

예약어를 무심코 쓰더라도 예약어 썼다고 에러를 출력하므로 외울 필요는 없어 보임

(변수명을 undefined로 한다거나 -_ 혼난다)

2.5 선택적 세미콜론

다른 언어처럼 각각 명령문 끝에 ; 넣음

세미콜론 대신 줄바꿈으로 생략도 되는데 말이 안되는 줄바꿈은 알아서 인식함

작성 의도와 다르게 실행되는 예시 – 코드의 명확성을 위해 세미콜론 꼭 쓰자

놀부님이 진행하는 자바스크립트 스터디 http://on.fb.me/1iEpW0a 에 참여하게 되었다. 커리큘럼에서 제시된 교재를 선택하고 순서대로 공부해나가면 된다. 상당히 세세하고 실질적이라서 전혀 모르는 사람도 공부하기에 좋은 커리큘럼이다. 교재는 JavaScript: The Definitive Guide으로 선택했다.

자바스크립트 : 고 수준, 동적, 타입 없는 인터프리터 프로그래밍 언어. 객체 지향, 함수형 언어 스타일

명칭에는 역사적인 배경이 있음. 상표권 문제로 ECMAScript 로 명명. 3와 5 버전이 있음. (4는 건너 뜀)

클라이언트측 언어의 태생으로 인해 대다수의 언어와 달리 입출력과 같은 API 지원이 약함.

공부를 위해 개발자 도구를 설치할 것. (Firebug, 또는 각 브라우저 개발자도구)

1.1 코어 자바스크립트

Number, string, boolean

null과 undefined

object {} 와 array []

연산자

함수 선언

변수로의 함수

조건문 if 반복문 while for

Class와 prototype 상속

1.2 클라이언트측 자바스크립트

script 태그

window 객체

DOM

이벤트 핸들링 (onclick, onload etc.)

jQuery

이후 웹앱, 스크립티드 http, 미디어 그래픽, 스토리지, html5 api 등 심화 학습.

1.2.1 계산기 예제

DOM과 ajax, canvas 이용

예전에 트위터에서 누군가 소개해줘서 알게 되었는데, 도메인이 도저히 기억나지 않아 한참 검색하다가 다시 찾아서 까먹지 않기 위해 포스트. (허무하게 gitignore.io라니…)

http://gitignore.io

git에서는 커밋에 포함하지 않기 위한 규칙을 리포지터리 최상위 .gitignore 파일에 저장하는데 이 템플릿들을 제공하는 서비스다. 사이트 들어가보면 알겠지만 필요한 OS, IDE, 개발언어나 프레임워크 등의 이름을 넣으면 그에 맞는 gitignore 파일을 제공한다.

Command Line 도구를 설치하면 콘솔에서 간편하게 내려받을 수 있다. OSX에서는 다음과 같이 설치해 사용할 수 있다.

$ echo "function gi() { curl http://www.gitignore.io/api/\$@ ;}" >> ~/.bash_profile && source ~/.bash_profile
$ gi wordpress,osx >> /path/to/.gitignore

정말 사소한 부분이지만 이런 부분까지 자동화 하는 게으름(?)이 존경스럽다.

WordPress에서 제공하는 클래스인 WP_Query는 wordpress의 컨텐츠(Post, Page, Custom content etc.)를 쉽게 불러 사용할 수 있도록 도와준다. Widget이나 테마 등에서 컨텐츠 목록을 제공할 필요가 있을 때 편리하게 사용할 수 있다.

<?php    
// The Query
$the_query = new WP_Query( $args );

// The Loop
while ( $the_query->have_posts() ) {
    $the_query->the_post();
    echo '<li>' . get_the_title() . '</li>';
}

자세한 내용은 WordPress에서 제공하는 WP_Query 문서에서 확인할 수 있다.

WP_Query에서는 데이터를 가져올 때 array의 형태로 properties를 추가해 활용한다. 한 페이지에서 WP_Query를 여러번 사용할 수도 있는데 이런 경우, 재사용성을 높이기 위해 이전의 설정들이 저장되어 의도하지 않은 데이터가 출력될 때가 있다. 그런 경우를 위해 설정을 초기화 하는 함수인 wp_reset_postdata()가 제공된다.

<?php    
// The Query
$the_query = new WP_Query( $args );

// The Loop
while ( $the_query->have_posts() ) {
    $the_query->the_post();
    echo '<li>' . get_the_title() . '</li>';
}
wp_reset_postdata();

$new_query = new WP_Query( $new_args );

wp_reset_postdata()를 사용했는데도 입력한 properties가 무시되는 등 의도한 대로 동작하지 않는 경우가 있다. 이 경우는 WP_Query 클래스에서 포스트를 가져올 때 pre_get_posts hook을 실행하는데 이 포인트에 query 결과를 조작하는 action이 등록되어 있을 가능성이 높다.

이 hook을 잘못 건들면 대다수의 플러그인과 테마에서 문제가 발생할 수 있기 때문에 만지지 않는걸(should not) 권장한다. Woo Commerce와 같은, 규모가 큰 플러그인은 구현 편의를 위해 이 hook을 사용해 개발하는 경우가 있다. 즉, WP_Query가 제대로 동작하지 않는다면 다른 플러그인이나 테마에서 pre_get_posts를 조작하고 있는지 확인해야 한다.

<?php

wp_reset_postdata();

global $evil_class;
remove_action( 'pre_get_posts', array( $evil_class, 'inject_get_posts' ) );

// The Query
$the_query = new WP_Query( $args );

// The Loop
while ( $the_query->have_posts() ) {
    $the_query->the_post();
    echo '<li>' . get_the_title() . '</li>';
}

// Recover
wp_reset_postdata();
add_action( 'pre_get_posts', array( $evil_class, 'inject_get_posts' ) );

예전부터 cocos2D나 unity를 배워보고 싶었는데 몇 번 글을 보고 따라해봐도 감이 안와서 미뤄왔다. 우연히 SpriteKit 튜토리얼을 보고 따라하다보니 생각보다 쉽게 결과물이 나오길래 게임 만들어보자 마음 먹고 매일 문서 찾아보며 조금씩 만들어가고 있다. 아직 Objective-C도 익숙하지 않지만 CS 193P iPhone Application Development에서 야금야금 들었던 내용 가지고 하나씩 배우고 있다.

다음 링크는 진행하면서 도움이 된 글들을 간단하게 정리해봤다. 애플 공식 문서도 깔끔하게 정리되어 있는데 좀 예제가 적은 편이라서 기본적인 내용은 공식 문서에서 확인하고서, 실제 사용하는 방법들은 구글링, Stackoverflow에서 찾을 수 있었다.¹

기초

다음 튜토리얼에서 게임에서 기초적으로 필요한 이미지 불러오기, 터치 이벤트 처리, 간단한 충돌 처리, 노드 animate 방법 등을 배울 수 있다. 리소스도 제공하고 단계별로 잘 설명하고 있어 쉽게 시작하는데 도움이 된다.

• 초보자를 위한 SpriteKit 튜토리얼
• Apple SpriteKit Documentation

디자인/그래픽 관련

여러 장의 이미지로 에니메이션을 처리하거나 한 장의 이미지로 여러 node를 만들려고 할 때 다음 글이 도움이 된다. 이미지 하나로 처리하는 방법은 미리 SKTexture textureWithRect:inTexture:로 텍스쳐를 만들어두고 사용하면 된다.

• Atlas로 애니메이션 만들기
• 이미지 하나로 sprite 처리하기

점수나 안내 문구를 SKLabelNode로 사용하려고 했었기에 임베드 폰트 넣는 방법을 찾아봤다. SKShapeNode로 벡터 처리도 가능하다.

• 임베딩 폰트 넣기
• 벡터로 간단한 선 그리기

버튼 관련

시작, 다시하기, 처음으로 등 버튼을 만들기 위해 찾아본 버튼 관련 내용이다. 꼭 버튼 뿐만 아니라 SKNode에 다 적용되는 내용이라 이해하는데 도움이 되었다.

• 버튼 클래스 만들기
• 토글 버튼 만들기
• touches에서 특정 node만 반응하도록 만들기

데이터 저장하기/불러오기

High Score를 저장하기 위해 찾아봤는데 여러 저장 방법이 있지만 NSUserDefaults를 사용하기로 했다.

• NSUserDefaults로 최고점 데이터 저장하기
• NSCoding 데이터 저장하기

근래 아이폰, 아이패드, 맥북 프로 등 통칭 레티나로 일컬어지는, 고밀도 디스플레이 기기가 늘고 있다. 그에 따라서 웹페이지도 레티나 해상도에 대응을 하기 시작했는데, 각 이미지를 2배의 해상도로 저장한 후 css 또는 js를 이용해 치환하는 형태 또는 svg, canvas 등을 이용하는 방식으로 대응하고 있다. 여러 방법 중 svg를 활용하는 방법을 살펴보려고 한다.

svg는 xml로 작성된 벡터 이미지 포맷으로 대다수의 최신 브라우저에서 지원하고 있어 이와 같은 문제를 해결하는데 도움이 된다. svg를 이용하는 장점은 다음과 같다.

• 이미지를 2번 이상 생성하지 않아도 된다. 하나의 이미지로 여러 해상도를 지원할 수 있으며 단일 파일로 모두 제어할 수 있으므로 유지보수에 용이하다.
• svg 엘리먼트를 이용해 인라인으로 사용하면 stylesheet나 js를 이용해 동적으로 활용할 수 있다.

물론 svg를 사용할 때 단점도 분명 존재한다.

• 확대/축소에 따라서 의도와 다른 형태로 렌더링 될 수 있다. 예를 들면 비트맵에서는 쉽게 가능한 1px 선을 벡터 방식에선 면으로 표현해야 하기 때문에 그리기 어렵다.
• IE 8 이하, Android 내장 브라우저 (2.1, 2.2, 2.3)에서는 지원하지 않는다.¹

위에서 살펴본 장단점에 따라 svg를 사용할 수 있는지, 어떤 경우에 적용할 것인지 전략을 세워야 한다. 특히 렌더링에서 차이를 보이는 부분으로 인해 iOS에서 벡터 앱 아이콘을 사용할 수 있는 상황에도 애플앱들은 비트맵으로 작성한 아이콘을 쓰고 있는 예도 있다.²

svg 사용하기

svg를 웹에서 사용하는 방법은 img 엘리먼트와 svg 엘리먼트를 이용하거나 css를 통해 활용할 수 있다.

img를 이용해 일반 이미지처럼 사용할 수 있다.

<img src="logo.svg" alt="Weird Meetup" />

그리고 svg 엘리먼트를 통해 직접 넣을 수 있다. 이렇게 작성하면 다소 지저분해지는 경향이 있지만 svg 내부의 엘리먼트도 css로 제어할 수 있다는 장점도 있다. 아래는 이상한 모임 로고의 글자 부분이다.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px"
 height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
    <g id="이상한모임">
        <g>
            <path fill="#000000" d="M180.647,389.499c-2.698,0-5.852-1.786-5.852-6.649v-9.042c0-3.951,2.584-6.991,6.991-6.991h3.381
                c4.217,0,6.839,3.153,6.839,7.105v9.156c0,3.837-2.545,6.421-5.205,6.421H180.647z M184.447,385.586
                c1.899,0,2.773-1.824,2.773-3.268v-8.055c0-1.634-1.254-3.078-2.773-3.078h-1.9c-1.52,0-2.925,1.444-2.925,3.078v8.055
                c0,2.47,0.988,3.268,2.925,3.268H184.447z M200.291,364.309h-5.091v31.953h5.091V364.309z"/>
            <path fill="#000000" d="M216.556,365.639c0.342,4.521,4.597,11.702,7.485,15.273h-5.737c-1.52-1.823-3.153-5.015-4.407-7.94
                c-1.292,2.583-2.28,5.167-4.445,7.94h-6.421c5.433-4.559,8.207-13.374,8.435-15.273H216.556z M226.283,384.712
                c2.735,0,4.939,1.71,4.939,4.104v3.039c0,2.09-2.127,4.027-4.787,4.027h-12.918c-3.496,0-5.396-1.178-5.396-4.065v-2.887
                c0-2.812,2.128-4.218,5.281-4.218H226.283z M214.922,388.663c-1.444,0-1.976,0.38-1.976,1.292v1.102
                c0,1.103,1.064,1.103,2.052,1.103h9.727c0.912,0,2.052-0.381,2.052-1.103v-1.178c0-0.722-0.76-1.216-2.052-1.216H214.922z
                 M235.135,374.947h-4.255v7.979h-4.863v-18.655h4.863v6.231h4.255V374.947z"/>
            <path fill="#000000" d="M248.742,366.437h6.117v3.495h-2.735c0.874,0.912,1.405,2.166,1.405,3.496v3.951
                c0,3.191-2.355,5.471-5.053,5.471h-4.711c-2.698,0-5.091-2.279-5.091-5.091v-4.331c0-1.33,0.532-2.584,1.406-3.496h-2.66v-3.495
                h6.117v-2.166h5.205V366.437z M263.484,395.502h-22.721v-10.524h4.788v6.003h17.934V395.502z M249.122,376.847v-2.432
                c0-1.216-0.912-2.127-2.166-2.127h-1.596c-1.216,0-2.318,0.911-2.318,2.127v2.432c0,1.254,0.722,2.166,1.938,2.166h2.127
                C248.362,379.013,249.122,378.101,249.122,376.847z M262.42,372.819h4.483v4.56h-4.483v8.473h-4.901v-21.619h4.901V372.819z"/>
            <path fill="#000000" d="M298.063,392.767h-28.876v-4.445h11.893v-4.293h5.091v4.293h11.893V392.767z M272.493,367.12v15.616
                h22.455V367.12H272.493z M290.236,378.557h-12.538v-7.295h12.538V378.557z"/>
            <path fill="#000000" d="M315.621,370.806v5.243c0,2.926-2.317,5.243-5.091,5.243h-4.901c-2.773,0-5.281-2.317-5.281-5.243v-5.243
                c0-2.926,2.508-5.243,5.281-5.243h4.901C313.304,365.562,315.621,367.88,315.621,370.806z M326.031,384.598v11.664h-22.492
                v-11.664H326.031z M311.176,371.87c0-1.292-0.987-2.242-2.241-2.242h-1.71c-1.254,0-2.355,0.95-2.355,2.242v3.115
                c0,1.292,1.102,2.279,2.355,2.279h1.71c1.254,0,2.241-0.987,2.241-2.279V371.87z M322.422,388.587h-14.817v3.609h14.817V388.587z
                 M326.031,364.232h-4.407v18.124h4.407V364.232z"/>
        </g>
    </g>
</svg>

어떻게 지저분한지 보여주기 위해 위 예를 넣었다. 다섯글자일 뿐인데 이렇게 지저분하다.

modernizr와 css를 이용한 이미지 대체

위와 같이 직접 적용하면 svg를 지원하지 않는 브라우저에서는 이미지가 나타나지 않기 때문에 modernizr를 통해 svg 지원 여부를 확인하고 그에 따라 css로 이미지를 교체해주는 방법을 활용할 수 있다.

Modernizr를 웹페이지에 적용하면 해당 브라우저에서 어떤 기능을 지원하는지 html의 클래스로 선언해준다. html에 적용된 클래스를 플래그로 이용해 css 배경을 대체/적용하는 방식으로 svg 미지원 브라우저 문제를 해결할 수 있다.

#logo { background: url("logo.svg"); }
.no-svg #logo { background: url("logo.png"); }

svg 적용 사례

• Apple : apple 사이트의 메뉴 등에서 svg를 사용함. 벡터 이미지는 서체 표현에 용이함.
• Mailchimp : 동보메일 서비스인 mailchimp도 이번 개편에서 svg를 곳곳에서 사용하고 있음. 특히 체크박스나 라디오 버튼을 svg로 대체하고 있는 점이 독특.
• FontAwesome : 아이콘 폰트를 제공하는 서비스인데 svg로 된 포멧도 지원함.

이외에도 svg를 활용한 곳을 심심하지 않게 찾아볼 수 있다. svg도 이제 지원하는 브라우저가 많기도 하고 하위 호환을 고려하기도 큰 어려움이 없기 때문에 예전에 비해 많이 사용하는 추세다. 위의 예시에서 눈치챘을 수도 있지만 이상한모임의 로고도 svg를 사용했다.

읽어볼 만한 글

다음 두 포스트는 레티나 지원을 위한 다양한 방법에 대해 체계적으로 잘 정리된 글이다.

• 레티나 웹(Retina Web)에 대응하는 우리들의 자세 1 – 래스터 이미지 편 – uxd.so
• 레티나 웹(Retina Web)에 대응하는 우리들의 자세 2 – 벡터 이미지 편 – uxd.so

간단한 svg 적용 방법, 위에서 언급한 fontawesome를 이용하는 방법은 다음의 링크에서 확인해볼 수 있다.

• Get ready for Retina – using SVG images and web font icons for pixel perfection