태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


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



* 자바스크립트?

: 맨 위의 질문에 대한 대답을 다양한 대답들이 나올 것이다. '자바스크립트'라는 이름 때문에 '자바'의 하위에 존재하는 언어, 또는 '스크립트'라는 이름 때문에 손쉬운 스크립트 언어라고 하는 사람들도 있을 것이고, 직접 자바스크립트를 사용해본적이 있는 사람이라면 아주 쉬운 언어, 배우기 쉽고 적용하기 쉬운 언어라는 의견도 있을 것이고 또는 성능이 느린 언어나 디버깅하기 안좋은 매우 짜증나는 언어라는 생각도 있을 것이다. 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 - [속깊은 자바스크립트 강좌] 변수 선언 방법에 대하여

 

저작자 표시 비영리 동일 조건 변경 허락
신고

이 글을 공유하세요.

  • 앙드레 2013.01.07 06:56 신고  댓글주소  수정/삭제  댓글쓰기

    감동입니다... 이렇게 훌륭한 지식을 공유하시려고 하다니 ㅠㅠ.
    깊이있는 강좌 너무너무 보고싶었었어요!!

    감사합니다 ㅠㅠ!!

    • Unikys 2013.01.07 09:16 신고  댓글주소  수정/삭제

      감사합니다^^; 지금 다음 편을 한 70%정도 써놓은 상태에서 마무리를 못하고 있네요 ㅠ 조만간 또 올리겠습니다 :)

  • 초보javascript개발자 2013.01.08 18:18 신고  댓글주소  수정/삭제  댓글쓰기

    하이브리드 웹앱 개발을 꿈구며 일주일정도 공부중인 대학생입니다~
    정말 도움많이 됩니다ㅎㅎ

    앞으로도 많이 오려주세요 ㅎㅎ

    • Unikys 2013.01.09 08:43 신고  댓글주소  수정/삭제

      넵!^^ 앞으로 하이브리드앱의 미래라고 보여지는 HTML5와 필수적인게 기존의 웹개발과 확연하게 다른 자바스크립트 개발방법론에 대한 인식이니까 그러한 것을 키울 수 있는데 도움이 될 수 있음 좋겠네요. 연말연초 바쁜일이 많이 끝나서 이제 다시 조금씩 올릴수 있을거라 생각합니다! 궁금한게 있으면 언제든 물어보세요 :)

  • 란란 2013.01.28 10:27 신고  댓글주소  수정/삭제  댓글쓰기

    아~ 강좌가 너무 기대되네요.. 계속 들러서 배움을 얻어가겠습니다~
    이런 훌륭한 지식을 공유해주시는 것에 너무나도 감사합니다~

    • Unikys 2013.01.30 11:04 신고  댓글주소  수정/삭제

      감사합니다^^ 자주자주 올려야하는데 요즘 쓸데없는 소셜게임에 빠져버리는 바람에 짬짬이 시간을 겨우 내고 있네요 ㅠ 그래도 열심히 올리겠습니다! 자주 방문해주시고 모르는 부분/제 설명이 틀린 부분이 있으면 언제든 알려주세요!

  • kranj 2013.02.01 10:27 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 내용이 참 많은 블로그로군요...
    출처 남기고 퍼다 나르겠습니다. ^^;;
    뭐 제 개인 블로그에 퍼나르는 거겠지만요...
    좋은 정보감사드리고 앞으로도 자주 들르겠습니다.

  • 시돌이 2013.03.27 15:49 신고  댓글주소  수정/삭제  댓글쓰기

    수강료는 어디에 내야 하나요?ㅎㅎㅎㅎ

    너무 감사합니다!!!!

  • 머떨이 2013.05.20 19:11 신고  댓글주소  수정/삭제  댓글쓰기

    글이 참 좋은데 ㅜ.ㅜ 글자의 색깔이나 배경이 가독성이 좀 떨어지네요.
    저만 그런가 --;

    • Unikys 2013.05.22 09:00 신고  댓글주소  수정/삭제

      저도 그렇습니다 ㅠ ㅋㅋ 웹퍼포먼스에 대한 글을 쓰면서 블로그에 적용하는 김에 테마랑 싹 자체 제작하려고 했는데 시간이 여의치가 않네요 ㅠ 글씨색을 흰색으로 써놓은게 있다보니 테마를 바꾸는게 작업이 필요해서 조심스럽습니다만 조만간 제가 좋아하는 심플한 블랙엔 화이트 스타일로 바꿀듯 합니다 ㅎㅎ

  • 아마추어 2013.08.19 09:30 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 글 잘 읽었습니다. 앞으로 강좌가 너무 기대됩니다. 꾸벅...

  • 바람꽃 2013.10.17 06:41 신고  댓글주소  수정/삭제  댓글쓰기

    퍼블리셔로 일하다 제이쿼리와 자바스크립트 공부 중인데 너무 어렵네요 ㅡㅡ
    위의 질문중 대답 제대로 할수 있는게 별로 없네요 ㅡㅡ
    어디서 부터 어떻게 공부해야 할지 막막해요^^;
    그래도 좋은글 감사합니다~~~

    • Unikys 2013.10.17 09:00 신고  댓글주소  수정/삭제

      사실 자바스크립트를 많이 해오던 사람들도 대답하기 힘든 사항들이 많습니다. 경험적으로 알 수 있는 것도 있지만, 깊이 있게 공부하지 않으면 모르는 사항들도 있거든요. 요즘 또 많이 바빠져서 간단하게 쓸 수 있는 다른 글들을 쓰고 있는데 시리즈를 최대한 이어갈 수 있도록 노력하겠습니다!

  • 세팔이 2013.10.22 20:44 신고  댓글주소  수정/삭제  댓글쓰기

    새로운 회사 면접준비를 하면서 이 사이트 강좌를 접하게 되었네요. MDN 사이트와 Object Oriented Javascript란 책과 여기 강좌들이 많은 도움이 되었습니다. 감사합니다.

    • Unikys 2013.10.23 09:42 신고  댓글주소  수정/삭제

      감사합니다. 면접과 같이 중요한 시기에 조금이라도 도움이 되었다면 좋겠네요. 더 넓은 범위의 내용을 계속 올리도록 하겠습니다. 건승하시길 바랍니다.

  • 레모나루피 2013.11.13 18:17 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요~ ExtJS로 현재 개발을 하고 있는데 우연히 들어왔습니다!!

    자바스크립트를 좋아라 해서 강좌 감사히 보고 배우겠습니다^^

  • 짝퉁코더 2015.03.30 14:28 신고  댓글주소  수정/삭제  댓글쓰기

    좋은강좌 감사합니다.
    자바스크립트 몰랐던 부분을 많이 알게되었습니다.

  • 쓰레기코더 2017.10.18 23:48 신고  댓글주소  수정/삭제  댓글쓰기

    '클로저 활용' 키워드로 찾아 들어오게 되었다가 코멘트까지 남기게 됩니다.
    너무 감동받았습니다. ES6 에서 추가되는 기능을 어떻게 사용하는지에 대해서만 집중하고 있었는데...
    늘 기초가 부족하다는 생각을 하고 있었습니다.
    블로그 글을 조금더 읽어보고 책을 구매하려고 합니다.
    지식 공유에 대한 깊은 고마움을 느낍니다.
    감사합니다.

질문이나 의견을 댓글로 달아 주세요