[속깊은 자바스크립트 강좌] 시작 (예고편)

티스토리 뷰

Programming Lecture/속깊은 자바스크립트 강좌

[속깊은 자바스크립트 강좌] 시작 (예고편)

Unikys 2012. 12. 10. 00:47

* '자바스크립트'하면 제일 먼저 떠오르는 생각이 무엇인가?

* 자바스크립트?

: 맨 위의 질문에 대한 대답을 다양한 대답들이 나올 것이다. '자바스크립트'라는 이름 때문에 '자바'의 하위에 존재하는 언어, 또는 '스크립트'라는 이름 때문에 손쉬운 스크립트 언어라고 하는 사람들도 있을 것이고, 직접 자바스크립트를 사용해본적이 있는 사람이라면 아주 쉬운 언어, 배우기 쉽고 적용하기 쉬운 언어라는 의견도 있을 것이고 또는 성능이 느린 언어나 디버깅하기 안좋은 매우 짜증나는 언어라는 생각도 있을 것이다. c나 자바의 주류 언어로 프로그래밍을 많이 해오던 사람들이라면 웹프로그래머들이 웹페이지, 홈페이지를 구축하는데 있어서 사용하는 스크립트 언어라는 인식이 있을 것이고, 웹프로그래머들은 클라이언트 사이드에서 무언가를 처리하고자할 때 사용하는 언어라는 인식이 있을 것이다. 좀더 깊이들어가게 되면 약 6년전부터 나오던 AJAX나 DHTML과 연관지어서 생각하는 사람들도 있을 것이다. 이러한 사람들의 전체적으로 공통된 인식은 '자바스크립트'는 뭔가 하나의 독립적인 언어로 사용되기 보다는 보조적인 역할을 많이 하는 언어이고 쉽게 간단하게 다룰수 있는 언어라는 것일 것이다. 하지만 그 인식에 이제부터 전면적으로 부인하고 자바스크립트에 대한 인식을 다시 잡고자한다.

: 자바스크립트는 HTML5가 대두되면서, 특히 웹앱(Web application) 또는 하이브리드 앱(Hybrid Application)이라는 말들이 나오면서 하나의 주류 언어로 자리를 잡아가고 있다. 국내에는 그러한 경향이 많이 느리기는 하지만 이미 해외에서는 구글, 야후, 모질라, 페이스북, 애플 등의 모든 회사에서 이미 HTML5와 함께 자바스크립트라는 언어의 효용성에 주목을 하고 각자의 라이브러리를 만들거나 자바스크립트 위주의 어플리케이션들을 개발하기도 했다. 실제로 페이스북이 만들었던 어플리케이션은 웹앱으로 HTML5와 자바스크립트로 만들어진 앱이었다(현재는 성능의 이슈로 네이티브로 다시 바뀌긴했지만 한때는 그랬다). 구글에서도 이미 자바스크립트 기반의 수 많은 라이브러리들이 있고, 야후에는 YUI, 모질라 소속이었던 John Resig이 내놓은 유명한 라이브러리 jQuery 등의 라이브러리들에서부터 다양한 웹앱들이 쏟아져나오고 있다. 현재 브라우져들이 변화되는 추세도 보면 HTML5를 전폭적으로 지원하기 시작했고, 이에 따라 자바스크립트의 중요성 또한 엄청나게 올라가고 있다.

: 하지만 국내에서의 자바스크립트에 대한 인식은 그에 전혀 따라가지 못하고 있다. 자바스크립트는 여전히 웹프로그래머들이 보조로 하는 언어이고, 자바스크립트를 조금 한다하면 jQuery를 가져다 쓰는 정도에 그치고 jQuery 내부에 있는 소스에 대한 이해나 실제로 더 좋은 대체제들이 있고 무조건적으로 사용하는 것이 좋은 것이 아닌데에도 일단 유명하고 좋다니까 가져다쓰는 경우가 대다수이다. 인터넷에서도 '자바스크립트 강좌'라는 검색어로 검색을 했을 경우 나오는 것들은 책에서 한번 읽으면 되는 문법들, 자바스크립트의 초보들이 배울만한 유용한 표현들을 정리해놓은 것은 많지만 자바스크립트의 속깊은 이야기를 하고 있는 강좌를 찾기가 어렵다는 것을 느끼게 되어서, 문법적인 이야기나 Cookbook 같은 이야기가 아닌 무언가 자바스크립트에 대해서 잘 모르고 있었지만 강좌를 읽고 '아하!' 하는 느낌이 드는 강좌를 한번 해보고 싶다는 생각이 들었다.

: 그래서 자바스크립트를 잘알고 있다면 알고 있어야할 간단한 질문들을 몇 개 정리해보았다. 자바스크립트를 잘 알고 있다면 너무너무나 쉬운 질문들일 것이다.

자바스크립트의 scope는?
(function() { /* 어쩌고 */}()); 의 의미는?
window와 글로벌의 상관관계는?
prototype은?
상속을 구현하는 방법은?
변수 선언에 var를 안써줘도 동작 하지만 써줘야하는 이유는?
arguments instanceof Array === false?
private 함수와 private 변수 만드는 방법은?
call 함수와 apply 함수의 다른 사용처는?

<script> 의 적당한 위치는?
minification과 gzip?
this가 결정되는 방법은?
DOM reflow가 발생될 때는?

이벤트 bubble과 capture의 활용 방안은?
setTimeout(function(){alert("time up!"), 1000); 가 호출되는 시간은?
Lazy load를 왜 하는 이유는?

: 자바스크립트를 '조금' 안다고 생각한다면 기본적으로 알아야할 질문들이다. 이것들에 대한 대답을 다 할 수 있다면, 자바스크립트에 대해서는 잘 안다고 생각할 수 있다.

: 사실 자바스크립트에 대해서는 지금 계속 쓰고 있는 HTML5 튜토리얼이 끝나고나면 시작하려고 했는데, 자바스크립트의 심오한 내용들이 너무나 많고 이러한 지식들을 최대한 빨리 공유하고 싶어서 '속깊은 자바스크립트 강좌'도 같이 진행하려고 한다. 문법적인 이야기, 기본적인 이야기는 이미 '자바스크립트 강좌'를 찾아보면 많이 있기도하고 10년전 자바스크립트 책에서부터 이미 다뤄오던 이야기니까 그러한 이야기는 최대한 생략하고 바로 본론으로 넘어가도록 하고, 기초 강좌는 아마 대충 위의 질문들이 얼추 이론적으로 다 대답 되고, 디자인 패턴을 조금 다룬 뒤에 나중에 하지 않을까 생각해본다.

: 그림 하나 없이 주절주절 써놓은 메마른 글을 여기까지 읽어준 사람들을 위해 간단한 팁을 하나 주자면, 위의 10번째 질문, '<script>의 적당한 위치는?'에 대한 답을 말하자면, 일반적으로 <script> 태그는 <head>안에다 많이 두지만, UX를 향상시키기 위해서는 <body>의 가장 아래부분에 놔두는 것이 맞다. 이는 <head> 안에다가 두면 먼저 <script>의 http request(GET)을 먼저 다 끝내고 스크립트의 실행을 다 끝내고난 다음에 HTML을 로드하기 때문에 사용자의 입장에서 페이지가 로드되는 체감이 자바스크립트의 규모나 네트워크상태에 따라서 달라질 수 있기 때문이다. 물론 <script>의 종류에 따라서 <head>에 두는 것이 좋기도 하지만 현재 90%이상의 웹 사이트에서 사용되는 자바스크립트라면 <body> 뒷부분에 둬도 상관없고, 0.2초라도 페이지가 빨리 뜨는 것은 사용자를 묶어두거나 재방문을 유도할 수 있는 아주 사소한 개선점이다. 반면 CSS를 부르는 <link>는 <head> 안에 두는 것이 유리하다. 왜일까 생각해보면 답은 쉽다. 먼저 스타일이 설정된 상태에서 HTML을 로드하는 거랑 HTML을 일단 로드하고 스타일을 적용하는 것이랑 사용자의 입장에서 후자는 전체적인 UI에 한번의 변화가 있기 때문에 UX상 안 좋기 때문이다. 이런 사실들을 알게 되고 그 이유까지 들으면 뭔가 의미없던 행동들에 의미가 부여되고 자바스크립트가 심오하고 재밌다는 생각이 든다. 자바스크립트에는 그러한 너무나 많은 새로운 지식들이 있기 때문에 최대한 빨리 공유를 하고 싶어진다.

: 지금 꾸준하게 쓰고자 하는 시리즈가 HTML5 튜토리얼과 안드로이드 앱 개발 기본, 그리고 [NY-School] 프로젝트 진행 글인데, 자바스크립트 라이브러리 만들기와 이 속깊은 자바스크립트 강좌까지 있어서 얼마나 자주 글을 올릴지는 모르겠지만, 이 속깊은 자바스크립트 강좌는 최소한 1주 1회를 목표로 진행하려고 한다. 앞으로 진행하면서 이글의 아래에 계속 링크를 추가하도록 하고, 이제부터 [속깊은 자바스크립트 강좌] 시작~

- 작성 목록

2012/12/17 - [속깊은 자바스크립트 강좌] 자바스크립트의 Scope와 Closure 기초

2013/01/07 - [속깊은 자바스크립트 강좌] function declaration vs function expression 차이점

2013/01/10 - [속깊은 자바스크립트 강좌] 함수를 호출하는 방법과 this의 이해

2013/01/21 - [속깊은 자바스크립트 강좌] Closure의 이해 / 오버로딩 구현하기

2013/01/30 - [속깊은 자바스크립트 강좌] Closure 쉽게 이해하기/실용 예제 소스

2013/02/13 - [속깊은 자바스크립트 강좌] 쉬어가기: 웹 개발 방법론의 변화/자바스크립트의 재발견

2013/02/22 - [속깊은 자바스크립트 강좌] 객체지향의 기본: prototype

2013/10/04 - [속깊은 자바스크립트 강좌] 상속, new와 Object.create의 차이

2013/10/29 - [속깊은 자바스크립트 강좌] 글로벌(전역) 변수와 window 객체

2013/11/06 - [속깊은 자바스크립트 강좌] 변수 선언 방법에 대하여

2016/11/13 - [속깊은 자바스크립트 강좌] 마무리(는 책으로!)