코드팩토리

이 글은 Let’s Make a Framework 를 보고 공부한 점을 정리한 글입니다. 원문의 내용과 똑같은 부분도 있고 제가 알고 있는 내용을 따로 덧붙인 부분도 있으니 원문 - Let’s Make a Framework: OO Part 2 을 꼭 보시기 바랍니다.
자바스크립트를 공부하기에 참 좋은 시리즈인것 같은데 제가 실력이 부족해서 번역을 잘 못했습니다. 내용이 좀 이상하다 싶으면 원문을 참고해 주십시오

——————————————————————————————————————–

command line과 web개발에 모두 적합한 JavaScript framework 개발 시리즈, Let’s Make a Framework의 part 3에 오신 것을 환영합니다. 이번 파트에서는 객체지향 자바스크립트 부분을 완성하도록 하겠습니다. 지난 파트, Classes, Inheritance, Extend 에서 Prototypal inheritance와 classical object model에 대해서 말씀드렸습니다. 이번 파트에서는 어떤 object model을 사용할 것인지 결론을 내리고, turing.oo는 어떻게 동작하는지와 super() 에 대해서도 알아보겠습니다.

이 시리즈를 처음 보시는 분이시라면 여기에서 모든 글의 목록을 보실 수 있습니다. Turing이라고 불리는 이 프로젝트는 GitHub: turing.js 에서 코드를 보실 수 있습니다.

Class Creation in More Depth

지난 글에서 저는 여러분이 prototype.js나 Ruby에 꽤 익숙하신 것으로 가정하고 initialize에 대해 말씀드렸습니다. 이점에 대해 사과드리며, 혼란이 있으셨던 분들에게 initialize에 대해 아셔야 할 사항은, 제가 만든 class 만드는 메서드 – Class.create – 를 사용해서 만든 class가 instantiated 될 때 호출되는 메서드라는 것 뿐임을 말씀드립니다.… 계속 읽기 »

현재 사용중인 브라우저를 자바스크립트로 알아내기 위해서 navigator객체의 userAgent 프로퍼티를 분석하는 방법을 쉽게 사용할 수 있습니다. 이런 방법을 userAgent sniffing 이라고 합니다.

console.log(navigator.userAgent);

// IE8 에서는 아래와 같이 나옵니다.
// Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C)

// Chrome 16 에서는 아래와 같이 나옵니다.
// Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.7 (KHTML, like Gecko) Chrome/16.0.912.75 Safari/535.7

위의 코드에서처럼 navigator.userAgent 에는 브라우저의 정보를 담고 있는 문자열이 들어있으며 좀 복잡하기는 하지만 잘 분석하면 현재 브라우저의 정보를 알아낼 수 있습니다. 예를 들어 IE의 userAgent에는 MSIE라는 글자가 나오고 그 다음에 버전을 나타내는 숫자가 나옵니다.

그런데 userAgent에는 현재 브라우저와는 별상관없어 보이는 정보가 많이 들어있기도 합니다. 그리고 차후 버전은 어떤 문자열로 구성이 될지 예측이 안되기도 합니다. 그래서 userAgent를 사용해서 브라우저가 무엇인지 알아내기 보다는 기능 단위로 이 기능을 지원하는지 여부를 알아보는 방법이 추천됩니다. (feature detection, Modernizr가 많이 사용됩니다.)

그런데 IE의 경우에는 좀 특별해서 IE인지 아닌지 알아야 하는 경우가 있습니다. 이때, navigator.userAgent를 사용하지 않고 IE인지 여부와 IE가 맞을 경우 버전 정보까지 알아낼 수 있는 방법을 알게되어 글을 올립니다.

원문 – https://gist.github.com/527683
원문의 코드는 아래와 같습니다.… 계속 읽기 »

JavaScript Pattern Collection

HTML5 Boilerplate와 Mobile Boilerplate에 참여하고 있는 Shi Chuan이라는 분이 작성한 글입니다.

자바스크립트의 코딩 패턴, 설계 패턴, jQuery 패턴 등에 대한 좋은 내용들을 한데 모아 총정리한 글입니다. 그리고 글쓴이께서 각각의 패턴들에 대한 샘플 코드를 만들어서 https://github.com/shichuan/javascript-patterns에 올려 놓으셨습니다.

아래의 링크들은 원문의 하단에 있는 참고자료의 목록입니다.

1. The Essentials of Writing High Quality JavaScript
2. JSPatterns
3. jQuery Anti-Patterns for Performance & Compression
4. How DRY Affects JavaScript Performance
5. Object Oriented JavaScript
6. JavaScript Patterns
7. JavaScript: The Good Parts
8. Pro JavaScript Design Patterns
9. Essential JavaScript Design Patterns For Beginners, Volume 1.
10. Eloquent JavaScript