kenu
45k
2019-08-15 19:17:33 작성 2019-08-15 19:28:45 수정됨
5
1257

아 지짜 JavaScript


객체지향언어 자바스크립트 핵심 익히기

부제:자바스크립트 개발 잘 하기


part 1

자바스크립트 개발의 난제

자바스크립트의 정석

자바스크립트 개발 트렌드


part 2

자바스크립트 개발 도구

자바스크립트 디버깅과 콘솔 사용법

모바일 웹 브라우저에서 디버깅하기





part 1

자바스크립트 개발의 난제


언제 랭귀지 취급 받아봤어?

자바스크립트는 1995년 자바와 같은 해에 Brendan Eich가 만들었습니다. Netscape사에서 일하시던 분이었는데, 언어를 만든 분이 수염이 없다는 이유로 언어적인 헛점을 보였습니다. ( http://bodil.lol/coffeescript 404 Page Not Found) 웹이 폭발적으로 성장하던 시기에 자바스크립트는 브라우저에서 실행가능한 언어라는 특징 때문에 가장 빨리 퍼지게 되었습니다. 하지만 제대로 된 언어로 취급 받은 것은 10년 정도가 지난 이후입니다. 자바스크립트의 구원자인 Douglas Crockford가 쓴 “세상에서 가장 오해가 많은 프로그래밍 언어"라는 글에 보면 여러가지 이유들이 나옵니다. 그 중에 대표적인 하나입니다.


안 좋은 책들

사실상 Javascript에 관한 거의 모든 책이 엉망입니다. 이 책들은 오류와 나쁜 예제투성이고, 잘못된 방법을 부추깁니다. 언어의 중요한 기능들이 잘못 설명되거나 아예 빠져있는 경우도 흔합니다. 필자는 십여 권의 Javascript 책을 검토해보았는데, 다음 단 한 권의 책만 추천합니다. Javascript: The Definitive Guide (5th Edition) by David Flanagan. (필자들에게: 좋은 책을 쓰셨다면 검토본을 보내주세요.)

from: http://javascript.crockford.com/javascript.html 

번역: http://home.postech.ac.kr/~skyul/javascript.html 


만약에 자바스크립트의 디버깅이 쉬웠다면 얘기가 달라졌을 것입니다. 2000년 웹이 뜨기 시작했을 때 브라우저를 통해서 자바스크립트를 디버깅하는 것은 너무 어려운 일이었습니다. 브라우저에서 나타나는 오류 발생 라인 번호는 디버깅에 전혀 도움이 되지 않았기 때문이죠.


다음 소스를 보면 에러가 있습니다.

<html>

<body>

<script type="text/javascript">

var t = 'hello';

var show = function(e) {

    t = 'hell';

    document.writeln(e.);

}

</script>

</body>

</html>


쉽게 찾으셨나요? 저도 긴가민가합니다. 한국에서 가장 많이 쓰이는, 한 때 국내 웹의 기준이었던 ie6에서 이 소스를 돌려보면 아무 표시도 나타나지 않습니다. 브라우저의 옵션을 바꿔야 합니다. 다음과 같은 옵션이 있습니다. 꼭꼭 숨어있죠.


스크롤바의 길이 보시죠. 이렇게 옵션을 변경해야 됩니다. 그리고 나서야 에러를 확인할 수 있습니다. 그래도 답답하기는 마찬가지입니다. 에러가 발생한 화면을 보시죠.


5번째 줄에 "구문 오류"라는 오류가 뜹니다. Syntax Error를 번역한 것이겠죠. 소스보기를 해서 다시 볼 수 있는데, 요즘 다른 웹 개발 도구처럼 바로 보여주면 어떨까 하는 아쉬움이 남습니다.

많은 경우 스크립트의 오류가 무엇인지 파악하기 힘든 경우가 많습니다. 그래서 자바스크립트 오류가 나면 미치기 일보직전까지도 가고는 했습니다.


요즘 개발에 많이 사용되는 크롬브라우저의 개발도구 화면입니다. 우측 하단에 빨간 아이콘을 클릭하면 콘솔에 Uncaught SyntaxError: … 메시지가 나오고 오른쪽에 있는 javascript.html:7 링크를 클릭하면 상단에 소스가 열리고, 에러 메시지 위치까지 바로 이동이 됩니다.


ie8부터 f12로 열리는 개발도구가 계속 개발되고 있으니 ie에서도 희망은 보입니다만, 점점 낮아지는 점유율로 인해서 5년 뒤의 웹 개발을 예측해본다면 이전과 같지는 않을 것 같습니다.





자바스크립트의 정석


수학의 정석(數學의 定石) , 바둑의 정석, 정석(定石) 이라는 말은 정형화된 패턴이라는 뜻입니다.

여기의 정(定) 자는 '바를 정(正)' 자가 아니라 정형화된 것을 뜻하는 '정할 정(定)' 자입니다.

정석이란 말은 바둑에서 유래된 것 같은데, 바둑에서도 정석이란 하나의 정형화된 pattern일 뿐입니다. 지금까진 그렇게 두는 것이 최선으로 알려져 있는 것일 뿐이고, 가치 판단 기준이 달라지거나 새로운 수가 연구되면 정석도 바뀝니다.

from: http://easyisright.net/309


자바스크립트의 정석이 무엇일까 생각해 보면 그리 어렵지 않게 찾을 수 있습니다. 구글신의 도움을 살짝 받으면 됩니다. 구글이 추천하는 자바스크립트 최고의 레퍼런스는 w3schools.com 입니다. 

해법 수준의 한국어와 동영상으로 되어있는 고마운 생활코딩 사이트( http://opentutorials.org/ )도 있습니다.


자바스크립트 뿐만 아니라 HTML, CSS 그리고 핫이슈인 HTML5에 대해서도 아주 깔끔한 예제들이 준비되어 있습니다. 


자바스크립트 레퍼런스

w3schools에 보면 다음과 같은 문구가 있습니다. 

This section contains a complete reference of 

All built-in Javascript objects 

All browser objects 

All HTML DOM objects


3가지 객체 그룹이 있습니다. 내장된 자바스크립트 객체, 브라우저 객체, HTML DOM 객체 각각의 객체 목록은 다음과 같습니다.

Javascript Objects Reference

Browser Objects Reference


HTML DOM Objects Reference

from: http://www.w3schools.com/jsref/default.asp



이것만 알면 자바스크립트 퍼펙트하게 될까요? 아니요. 그 자바스크립트가 변하고 있습니다. 그 변화를 얘기해보겠습니다.




자바스크립트 개발 트렌드


자바스크립트 개발의 처음은 제 기억에는 입력 폼 값 검증으로 기억됩니다. 당시는 document.all. 이라고 하는 ie에서만 돌아가는 자바스크립트로 많이 만들었었죠. 안좋은 교재에 개발의 힘든 난제로 인해서 그저그런 스크립트로 치부되던 자바스크립트는 JSON(Javascript Object Notation; http://www.json.org/ )이라는 표기법으로 변화의 기저를 깔았습니다. 


Ajax (Asynchronous Javascript And XML)


2005년 UI/UX 분야의 대가 Jesse James Garrett 블로그에서 비동기 자바스크립트와 XML의 약자로 시작된 Ajax가 자바스크립트를 달리 보는 변화의 신호탄이 아니었나 생각됩니다. 그 때 포함된 유명한 이미지입니다. 


 

from: http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications


기존의 웹 애플리케이션 모델에서 흰 화면이 나오지 않는 본격 웹클라이언트 프로그래밍이 시작되게 되었지요. 지금은 AJAX를 단어로 취급합니다. Ajax가 되었죠. Ajaxian.com 이라는 블로그를 통해서 혁신적인 웹 기술들이 공유되었습니다. 국내에는 Ajaxian.kr 블로그도 추천합니다.


자바스크립트 라이브러리


이와 함께 자바스크립트 라이브러리들이 마구 생겨났습니다. prototype.js 를 필두로 해서 dojo, YUI, jQuery, ext.js, mootools 등의 자바스크립트의 UI와 Ajax 기능을 간편하게 사용할 수 있는 좋은 제품들이 웹을 휘저어 놓았습니다. 5년이 지난 지금은 jQuery로 평정이 되었다고 해도 과언이 아닙니다. 구글 트렌즈에서 검색 빈도를 참고하시죠.


jQuery는 jQuery UI를 비롯해서 수많은 플러그인을 지원합니다. 가장 핵심이라고 할 수 있는 것이 DOM 셀렉터(selector)입니다. CSS에서 가져온 컨셉이고, 제어를 할 객체를 찾기 위한 좋은 방법입니다. jQuery의 원래 이름을 jselect 라고 하려했는데, 도메인을 선점당해서 jQuery로 지었다는 John Resig의 이야기도 있습니다. 그만큼 핵심적인 기능입니다.


I was, originally, going to use JSelect, but all the domain names were taken already. I then did a search before I decided to call the project jQuery...

from: http://ejohn.org/blog/barcampnyc-wrap-up/#comment-1927





서버사이드 자바스크립트


자바스크립트는 웹용 언어이다라는 고정관념을 버릴 때가 왔습니다. w3schools.com 의 레퍼런스에서 브라우저와 DOM을 제외하면 자바스크립트 언어의 가장 기본적인 문법들이 남는데, 그것을 서버에서 실행하는 기술이 각광받고 있습니다. 페이스북 같이 성공한 서비스들이 node.js로 갈아타면서 대용량 트래픽 처리와 뛰어난 성능으로 더욱 유명해졌습니다.


구글의 V8 엔진을 갖고 만들어진 Ryan Dahl의 node.js


Node.js는 아주 쉽게 빠르고 확장가능한 네트워크 애플리케이션을 만들 수 있는 크롬의 자바스크립트 런타임 위에 만들어진 플랫폼입니다. Node.js는 분산된 기기에 걸쳐서 실행되는 데이터 집중적인 실시간 애플리케이션을 위한 가볍고, 효과적이고, 완벽하게 만드는 이벤트 주도의, 논블로킹 I/O 모델을 사용합니다. from: http://nodejs.org/


다음 코드는 http를 통해서 Hello World를 표시하는 코드입니다.


var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(1337, "127.0.0.1");
console.log('Server running at http://127.0.0.1:1337/');


example.js 파일을 만들고 node example.js 로 실행하면 됩니다. 브라우저를 통해서 http://127.0.0.1:1337/ 주소로 접근하면 Hello World를 확인할 수 있습니다.



Node.js는 npm을 통해서 굉장히 쉽게 플러그인을 설치할 수 있습니다.


npm install node-uuid;
npm install formidable;
npm install pg;
npm install nodemailer;

npm install serialq;
npm install underscore;
npm install underscore.string;

수많은 플러그인들을 지원하고 있습니다. 그리고 그 수는 계속 늘어나고 있습니다. 예를 들면 mysql같은 DB연결 플러그인과 PDF를 생성해 낼 수 있는 기능, 엑셀을 파싱해서 데이터를 추출할 수 있는 기능, express같이 웹 프레임워크 등 다양합니다.


part 2


자바스크립트 개발 도구


Joe Hewitt( http://joehewitt.com/ ) 누군지 아시죠? 취미로 현재의 웹 개발도구 프로토타입을 제대로 만든 분입니다. 파이어버그라고 하면 다 아시겠죠. http://www.getfirebug.com/ iUI를 기억하는 분도 계실지 모르겠네요. 

이렇게 생기셨죠.


구글처럼 디자인 별로 신경 안 쓰는 파이어폭스의 파이어버그가 요즘 많이 예뻐졌습니다. 이게 다 경쟁 제품 웹 인스펙터 때문이죠.






자바스크립트 디버깅과 콘솔 사용법


디버깅은 브레이크포인트에서부터 시작됩니다. 그리고 흔히 얘기하는 찍어보는 것은 콘솔의 영역이죠. 웹 인스펙터의 콘솔은 매우 강력합니다. 마치 이런 모습이죠.

from: http://www.youtube.com/watch?v=faQJL-InqW4


디버그의 기원은 초기 계전기 사이에 있는 죽어있는 나방이 컴퓨터의 오작동을 일으켰고, 그 나방을 제거하자 정상 작동한 것에서 유래를 찾고 있습니다. 말 그대로 de+bug 입니다. ㅎㅎ


프로그래밍을 할 때 정상적인 데이터가 들어왔을 때를 기준으로 설계를 합니다. 하지만 프로그램을 실행할 때 발생하는 예상하지 못했던 경우로 인해 버그가 발생합니다. 숫자입력을 기대했는데, 문자가 들어오는 경우나 자료실을 운영하는데 서버의 하드디스크가 꽉 차는 경우를 예로 들 수 있습니다.


전자의 경우는 프로그램 수정을 통해서 디버그 하기 용이합니다. 후자의 경우는 하드디스크 공간 확장 내지는 불필요한 파일 삭제 등의 조치가 필요한데, 제가 설명하려는 영역에서 제외합니다.


프로그램을 디버깅하기 위해서는 버그를 발생시키는 코드와 그 때 사용된 테스트 값이 필요합니다. 버그를 재현할 수 있다면 프로그램의 약점을 파악한 것입니다. 따라서 디버깅이 쉽게 됩니다. 가장 어려운 경우는 간헐적으로 발생하는 버그입니다. 어떤 이유로 발생하는지 파악하기 어렵기 때문에 디버깅이 아주 어렵습니다. 범인 집 앞에 잠복해 있는 형사의 심정이라고 할까요. 

디버깅을 의학에 비유한다면 내시경과 같습니다. 전신마취하지 않고 내시경 받아보셨나요. 아주 죽습니다. 디버깅도 프로그램을 한줄씩 살펴보는 작업이 동반되는데, 아주 고된 작업이 되기 쉽습니다.




debugging에서 알아야 할 용어들을 먼저 소개합니다.

  • breakpoint : 중단지점입니다. 실행 모드가 아닌 디버그 모드에서 프로그램을 중지하게 되는 지점의 표시입니다.

  • 보통 ide에서 소스 라인 맨 앞 여백을 더블클릭하면 생깁니다. 다시 더블클릭하면 없어집니다. resume을 실행하면 다음 중단점을 만날 때까지 실행됩니다.

  • step over : 한줄을 실행합니다. 함수가 있어도 실행 후 다음으로 넘어갑니다.

  • step into : 함수 내부로 들어갑니다.

  • step out : 함수를 끝까지 실행시키고 호출시킨 곳으로 되돌아 갑니다.

  • resume : 디버그로 한 줄 한 줄 실행시키는 트레이스 모드를 그만두고 다음 브레이크포인트를 만날 때까지 실행합니다.


일단 기본적인 용어는 이상과 같습니다. 디버거의 종류에 따라 확장된 기능들이 있지만 기능이 소개될 때 같이 언급하겠습니다.

다음은 자바스크립트 디버깅을 설명하기 위한 소스입니다.


소스 : debug1.html (UTF-8)

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>javascript debug</title>

<script type="text/javascript">

    // 전역변수 count

    var count = 0;

    /**

     * count값을 #place div에 출력하는 함수

     */

    function doPrint() {

        var place = document.getElementById("place");

        count++;

        place.innerHTML = count;

    }

</script>

</head>

<body>

<input type="button" value="trigger" onclick="doPrint()">

<div id="place"></div>

</body>

</html>


간단히 자바스크립트를 테스트할 수 있는 html과 javascript 코드입니다. input버튼을 클릭하면 doPrint() 자바스크립트 함수를 호출합니다.

디버깅을 위해서는 디버깅 도구가 필요합니다. firefox의 플러그인 firebug를 사용해 보겠습니다.


소스1 debug1.html 파일을 만들고 firefox로 엽니다. 우측 하단의 firebug플러그인 활성화 영역을 클릭하여 그림1과 같이 firebug영역을 활성화합니다. 여러 개의 탭 중에서 Script 탭을 열면 HTML 소스와 함께 Script 소스들이 보입니다.


그림1 firebug script tab


디버깅은 쉽습니다. 그림2와 같이 Javascript 함수의 내부인 14라인에서 앞쪽의 회색부분을 클릭하면 브레이크 포인트가 걸립니다. 디버그 준비 끝입니다.

그림2 Javascript Debug Breakpoint

 

브라우저에서 버튼을 클릭하면 이 함수가 호출되는 소스인데 한 번 눌러보시면 화면에 브라우저 내의 객체들과 변수들이 그림3과 같이 firebug의 우측 패널에 나타납니다. 아울러 브레이크 포인트가 찍힌 곳에 화살표가 나타나면서 Javascript의 실행이 중단 됩니다.

그림3 Debug start


id가 place인 element의 속성들을 확인할 수 있습니다. 여기서 디버깅을 계속하기 위해서 다음 아이콘들을 사용할 수 있습니다.

그림4 debug icons


하늘색 아이콘은 continue (F8) 입니다. resume 이라고 앞 서 설명드린 기능인데 다음 브레이크포인트를 만날 때까지 실행하게 됩니다. 만약 다음 브레이크포인트가 없다면 "기냥 고"가 되겠죠. ^^; 그 옆 아래로 향하는 아이콘은 Step Over (F10) 입니다. 한 줄 실행하고 대기하게 됩니다. 그 옆의 오른쪽으로 향하는 아이콘은 Step Into (F11), 라인에서 함수를 만나면 그 함수 안으로 비집고 들어가는 기능입니다. 그렇다면 나머지 한 개의 아이콘은 말 안해도 되죠? ㅎㅎ. 기냥 고?

삐질까봐 말씀드립니다. Step Out (F12) 인데 비집고 들어갔던 함수에 볼 게 없다면 나와야죠. 함수에서 밖으로 빠져나오게 됩니다.

흠... Step Over 를 실행해보죠. F10 키를 눌러도 됩니다. count 변수는 어디 숨었을까요? 함수 바깥에 있는 전역변수이기 때문에 this 안에 있습니다. 그림5를 참고하세요.

그림5 debug step over




모바일 웹 브라우저에서 디버깅하기


디버깅에서 원격 디버깅은 참 소중하고 고마운 법입니다. 모바일 웹이 하이브리드 앱 때문에 인기를 끌고 있는데, 역시나 디바이스에서 테스팅은 쉽지 않습니다.


WEb INspector REmote 앞 두글자씩 따서 만든 WeInRe[위너리]를 이용하면 디바이스에서 돌아가는 웹페이지의 개발이 손쉬워집니다. 데스크톱에 WeInRe 서버를 기동하고 javascript 링크를 제공합니다. 이 자바스크립트를 테스팅하는 페이지에 한 줄 적어놓으면 웹 인스펙터 기능을 사용할 수 있게 됩니다.


weinre 홈페이지 http://phonegap.github.com/weinre/



시뮬레이터와 연결된 개발도구



Node.js 버전


현재 개발하는 PC의 ip를 확인합니다.

C:\Downloads\weinre-jar>ipconfig

Windows IP Configuration

Ethernet adapter 로컬 영역 연결:


        Connection-specific DNS Suffix  . : localdomain

        IP Address. . . . . . . . . . . . : 172.16.180.130

        Subnet Mask . . . . . . . . . . . : 255.255.255.0

        Default Gateway . . . . . . . . . : 172.16.180.2



다운로드 받은 weinre-jar 압축을 풀고 weinre.jar 파일이 있는 곳으로 이동합니다. ip와 포트를 정해서 weinre를 실행합니다.


C:\Downloads\weinre-jar>java -jar weinre.jar --boundHost 172.16.180.130 --httpPort 8081


2012-01-17 12:42:08.205:INFO::jetty-7.x.y-SNAPSHOT

2012-01-17 12:42:08.315:INFO::Started SelectChannelConnector@172.16.180.130:8081

2012-01-17 12:42:08.315:INFO:weinre:HTTP server started at http://172.16.180.130:8081



서버의 자세한 옵션은 아래 문서를 참고하세요.

http://phonegap.github.com/weinre/Running.html 



이제 크롬브라우저(추천)에서 http://172.16.180.130:8081/ 로 접속하면 됩니다.


http://172.16.180.130:8081/client/#anonymous 로 debugging 시작할 수 있습니다.




관련동영상: http://youtu.be/Pp5fmjQXyiY






<pqq> Debugger 탭 화면

화면 하단의 Debbugger 탭 화면에서는 접속한 클라이언트와 접속 주소를 확인할 수 있습니다.



<pqq> Server Console 탭의 모습. 원격기기의 콘솔로그를 확인 가능




<pqq> Target Script 영역에 보이는 weinre 서버의 스크립트 주소

서버의 설정에 따라 보이는 weinre 서버에서 제공하는 스크립트 주소가 보입니다. 이 주소를 복사해서 테스트하려는 페이지의 소스에 붙여놓습니다.


<pqq> 테스트 페이지 상단에 삽입된 weinre 서버 스크립트 주소


개발을 마치고 운영에 배포할 경우는 해당 주소를 제거해야 합니다. 그렇지 않으면 외부 망에서 접속하는 사람들은 페이지가 뜨지 않게 됩니다.


npm install -g weinre



꼼꼼한 검사기 JSLint



Warning! JSLint will hurt your feeings. 경고! JSLint는 당신의 기분을 망칠 것입니다.

자바스크립트 코드 품질 도구인 JSLint페이지에 나오는 표현입니다. 텍스트 영역에 코드를 입력하고 JSLint 버튼을 클릭하면 코드를 분석해서 꼬치꼬치 따집니다. 심지어는 들여쓰기 마져도 검사합니다.


++ 이나 console, alert 등의 키워드를 승인한다면 하단의 Tolerate를 체크해 줍니다. 체크할 때마다 하단의 조건들에 변화가 생깁니다. 3가지 상태값을 갖게 됩니다.


JSLint를 통해서 코드의 품질을 높였다면 이제 압축해서 용량을 줄이는 방법을 알아보겠습니다.



JavaScript 컴파일러


자바스크립트는 컴파일러를 통해서 바이너리로 변경하지 않아도 실행이 됩니다. 하지만 이것을 컴파일하는 이유는 크게 두 가지가 있습니다.

1. 용량 압축

2. 코드 난독화

변수와 함수명을 줄임으로 용량을 작게해서 웹에서 네트워크 트래픽도 절감하고 페이지의 로딩속도도 향상시키는 효과가 있습니다. 그리고 자바스크립트의 최대 약점인 소스코드가 노출된다는 것인데, 소스의 가독성을 확 낮춰서 소스 분석을 어렵게 하는 효과를 얻을 수 있습니다.


자바스크립트 컴파일러를 이용한 대표적인 것이 jQuery입니다. http://code.jquery.com/jquery-1.7.1.js 파일이 원본 소스로 229KB 용량이지만 http://code.jquery.com/jquery-1.7.1.min.js 파일의 용량은 31KB로 매우 작아집니다. 기능은 동일합니다.



자바스크립트 컴파일러는 오픈소스로 만들어져서 배포되는데, YUI의 컴파일러와 클로저(Closure) 컴파일러를 대표적으로 추천합니다. 여러 개의 자바스크립트 파일을 하나로 합쳐서 웹페이지의 효율을 향상시킬 수도 있습니다.


클로저 컴파일러를 함께 알아보겠습니다.

http://code.google.com/closure/compiler/



참고: http://jsbeautifier.org/



part 3

jQuery 필수

앞서 Ajax 프레임워크의 춘추 전국 시기에 홀연히 등장해서 천하를 통일해 버린 jQuery는 현대 웹의 가장 기본적인 자바스크립트 라이브러리입니다. 플러그 인 모듈을 만들기 쉽게 되어 있기 때문에 jQuery기반의 자바스크립트들도 굉장히 많이 등장했습니다. jQuery에 대해서 알게 된다면 이것 없이 웹 개발한다는 것은 상상도 하기 싫을 것입니다.


1. jQuery의 컨셉


1.0 웹 브라우저 세계를 구할 영웅



1.1 찾아라 (Find)


1.2 뭔가를 해라 (Do Something)



2. jQuery Ajax


1.1 $.ajax()


1.2 $.get()


1.3 $.post()



3. jQuery UI


1.1 애니메이션, 이펙트


1.2 테마



QUnit


<!DOCTYPE html>

<html>

<head>

 <meta charset="utf-8">

 <title>QUnit Example</title>

 <link rel="stylesheet" href="/resources/qunit.css">

</head>

<body>

 <div id="qunit"></div>

 <div id="qunit-fixture"></div>

 <script src="/resources/qunit.js"></script>

 <script src="/resources/tests.js"></script>

</body>

</html>


test( "hello test", function() {

 ok( 1 == "1", "Passed!" );

});




참고




자바스크립트 참고 서적


1. 자바스크립트 완벽 가이드, 인사이트

2. JavaScript Patterns, 인사이트


웹사이트


javascript

1. w3schools http://www.w3schools.com/

2. 생활코딩 http://opentutorials.org/

3. 더글라스 크록포드 http://www.crockford.com/


jQuery

1. jQuery 필수 http://www.slideshare.net/1Marc/jquery-essentials

2. 웹 인터페이스 필수 http://www.slideshare.net/1Marc/web-interface-essentials

3. jQuery UI 필수 http://www.slideshare.net/1Marc/jquery-ui-and-plugins


node.js

1. http://bit.ly/oknodejs


QUnit

1. http://qunitjs.com/


js 커뮤니티

1. http://www.facebook.com/groups/html5jsstudy/


http://d3js.org

http://olc.oss.kr/lec/detail.jsp?lecid=173


from: http://bit.ly/okjavascript

3
3
  • 댓글 5

  • moonti
    2k
    2019-08-15 19:34:57

    너무 오래 되서요.

    거의 모든 내용이 최신화 되어야 하지 않을까 생각합니다.

    2
  • mer
    95
    2019-08-15 20:21:14

    와 이거 언제적 얘긴가요;;

    0
  • kenu
    45k
    2019-08-15 20:39:12

    ^^; 죄송합니다. 

    빨리 업데이트 하겠습니다.


    언제나 그렇듯이 올리고 욕먹음 ㅠㅠ


    1
  • mer
    95
    2019-08-15 20:41:22

    수고 많으십니다

    0
  • 밥도둑계장
    582
    2019-08-22 16:04:45

    항상 수고가 많으세영

    하지만 내용이!!!ㅋㅋㅋㅋㅋ 언제내용입미까 ㅋㅋ

    0
  • 로그인을 하시면 댓글을 등록할 수 있습니다.