프로그래밍 교육 처음에 가장 넘기 힘든 것이 개발환경을 구축하는 것입니다. 자바의 경우 JDK 설치하고, CLASSPATH 설정하고, 등등등

그래서 저는 자바스크립트가 브라우저로 쉽게 시작할 수 있는 것이라 생각하고 있었습니다.


그런데 진짜가 나타났습니다.


http://www.processing.org


개발환경을 자동 지원해줍니다. 자바스크립트의 경우, 크롬브라우저가 바로 실행되고, 자바는 애플릿으로 바로 뜹니다. 안드로이드는 이클립스가 없이도 SDK만 설치해서 연결하면 됩니다. 현재는 3가지 언어를 지원합니다. 

자체적으로 Processing.js 라는 언어를 사용하고 있는데, 몇 권의 서적도 나와있습니다.


"Processing is a programming language, development environment, and online community. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology. Initially created to serve as a software sketchbook and to teach computer programming fundamentals within a visual context, Processing evolved into a development tool for professionals. Today, there are tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning, prototyping, and production."

프로세싱은 프로그래밍 언어, 개발 환경, 온라인 커뮤니티입니다. 2001년부터, 프로세싱은 기술을 이용한 시각 예술과 시각화 분야에서 소프트웨어 역량을 진흥시켜 왔습니다. 초기에 소프트웨어 스케치북으로 사용되거나, 시각화 영역에서 컴퓨터 프로그래밍 기초를 가르치기 위해 만들어졌지만, 프로세싱은 전문가들을 위한 개발 도구로 진화했습니다. 오늘날에는, 프로세싱을 사용해서 배우고, 프로토타이핑하고, 제품을 만드는 수많은 학생, 예술가, 디자이너, 연구원, 동호회원이 있습니다.




다음과 같은 특징이 있습니다.

  • » Free to download and open source
  • » Interactive programs with 2D, 3D or PDF output
  • » OpenGL integration for accelerated 3D
  • » For GNU/Linux, Mac OS X, and Windows
  • » Over 100 libraries extend the core software
  • » Well documented, with many books available


윈도우, 맥, 리눅스 OS를 지원합니다.


jdk가 설치되어 있지 않아도, java applet이 실행됩니다. 배포 패키지에 java가 들어가 있기 때문이죠.

processing.exe를 실행하면 다음과 같은 스플래시 화면이 뜹니다. 만든 분 이름이 보이네요. Ben Fry, Casey Reas. 오픈 프로젝트이고요.


이클립스보다 메뉴가 아주 단순합니다. 툴바의 아이콘이 실행, 정지, 새파일, Open, Save, Export Application 입니다. 우측에 작업중인 언어가 Java로 표시되어 있습니다.  


하지만 줘도 못먹는 화면입니다. 실행 버튼 클릭하고 아래 콘솔을 보면 null (멍~~~)해집니다. 당.황.하셨어요~~ 모드죠.

그리고, 어디서 많이 봤다 싶었는데, 아두이노의 개발환경과 똑같습니다.


팁을 하나 알려드리자면, 메뉴에서 File > Examples... 가 있습니다.


여기에 있는 코드를 보고 학습을 하면 될 것입니다.



개발 도구의 우측에 Java 라고 쓰여진 버튼을 확장 시켜서 다른 언어 모드를 추가할 수 있습니다.


안드로이드, 커피스크립트, 자바스크립트, PDE X, Tweak Mode 를 추가할 수 있습니다.



새로운 개발 플랫폼, 흥미롭습니다.



하나 더,

프로세싱을 통해서 만들어진 것들의 전람회입니다.

http://www.processing.org/exhibition/


자바스크립트에서 더하기를 처리하는 방법에 대한 이야기입니다.

http://www.2ality.com/2012/01/object-plus-object.html 문서의 일부를 참고했습니다.


자바스크립트 두 종류의 값

1) 기본형(primitives) : undefined, null, true/false, 숫자, 문자

2) 객체(objects) : objects, arrays, functions


더하기 실행시 세 종류의 값 변환

1) 기본형 

2) 숫자

3) 문자열


1) 기본형으로 변환되는 경우

내부적으로 실행되는 함수 

ToPrimitive(input, PreferredType?)


1. input이 기본형인 경우, 그대로 반환

2. 다른 경우 input은 객체. obj.valueOf() 호출.

   결과가 기본형이면 그것 반환

3. 아닌 경우, obj.toString() 호출. 

   결과가 기본형이면 그것 반환

4. 이것도 아니면, TypeError 던짐


참고 ECMAScript5.1 섹션9.1



2) 숫자로 변환되는 경우

내부 호출 함수 ToNumber()


1. 인자가 undefined 이면 NaN 반환

2. 인자가 null 이면 +0 반환

3. true는 1, false는 +0

4. 문자열은 문자열에 포함된 숫자를 변환 

  "324"라면 324

5. 객체라면 ToPrimitive(obj, Number) 호출해서 

  숫자로 가져온 값에 ToNumber() 적용


참고 ECMAScript5.1 섹션9.3



3) 문자열로 변환하는 경우

내부 호출 함수 ToString()


1. 인자가 undefined 이면 "undefined" 반환

2. 인자가 null 이면 "null" 반환

3. true는 "true", false는 "false" 각각 반환

4. 숫자는 문자열로, 예 "1.765"

5. 문자는 그대로 반환

6. 객체는 ToPrimitive(obj, String) 호출해서

  숫자로 가져온 값에 ToString() 적용


참고 ECMAScript5.1 섹션9.8


검증하기 위한 객체입니다.

    var obj = {
        valueOf: function () {
            console.log("valueOf");
            return {}; // not a primitive
        },
        toString: function () {
            console.log("toString");
            return {}; // not a primitive
        }
    }

code from: http://www.2ality.com/2012/01/object-plus-object.html



그리고 재밌는 더하기의 경우입니다.



이클립스에서 ctrl+shift+F를 통해서 코드를 정렬할 수 있습니다. formatter라고 합니다.

JavaScript의 포맷이 마음에 들지 않아서 변경했습니다.


ctrl+3 을 통해서 quick access에 커서를 이동합니다. formatter라고 검색하고 JavaScript formatter 항목을 선택합니다.



JavaScript Conventions [built-in] 항목을 선택하고 Edit... 버튼을 클릭합니다.



Indentation(들여쓰기)의 Tab policy(탭 정책)에 Spaces only를 선택하고 상단의 Profile name을 변경한 뒤에 저장하면 됩니다.


JSLint 또는 http://jsbeautifier.org 사이트의 code format을 참고하면 좋을 것 입니다.


어제 방송을 재밌게 했습니다.

녹화방송 일주일간 공개됩니다. 혹시 JavaScript 개발에 관심이 있다면 도움이 될 것입니다. 개발에 사용한 브라우저는 크롬브라우저입니다.


http://afbbs.afreeca.com:8080/app/read_ucc_bbs.cgi?szBjId=kenuheo&nStationNo=12409927&nTitleNo=5784764&szSkin=


제 방송국 주소는 http://afreeca.com/kenuheo 입니다.

즐겨찾기 하시면 매일 밤 자정에 시작되는 방송 알림을 앱을 통해서 받으실 수 있습니다.



도메인이 다르면 원격의 JSON데이터를 가져올 수 없습니다. 그래서 JSON 데이터를 제공해 주는 쪽에서 사용하려는 사이트의 callback 함수명을 파라미터로 받아서 JSON데이터를 감싸주는 기능을 제공합니다. JSON with Padding 줄여서 JSONP 방식이라고 합니다.


클라이언트 쪽의 간단한 코드입니다. Daum Open API 를 이용해서 데이터를 가져옵니다.

Daum Open API 월 3억 호출 축하합니다.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>title</title>

<style type="text/css">

#banner-message {

}

#banner-message img {

    width: 200px;

    border-radius: 5px;

}

</style>

</head>

<body>

<div id="banner-message">melong</div><div id="button-container"><button>hello</button></div>

<script type="text/javascript">

function parse(obj) {

var items = obj.channel.item;

var tag = '';

for(var idx in items) {

tag += '<img src="'+items[idx].image+'">';

}

document.getElementById('banner-message').innerHTML = tag;


function rawJSXHR() {

var xhr = document.createElement('script');

xhr.src = 'http://apis.daum.net/search/image?q=snsd&apikey=3803541fce89370275fcefe628ed9f9acafe223e&output=json&callback=parse';

document.getElementsByTagName('head')[0].appendChild(xhr)

}

// apikey는 향후 바꿀 수 있으니 http://dna.daum.net의 나의API에서 발급받으세요.

rawJSXHR();

</script>


</body>

</html>


이번 주 zdnet을 통해서 기사가 나왔습니다.

http://www.zdnet.com/how-replacing-java-with-javascript-is-paying-off-for-paypal-7000023697/

Paypal이 Java를 버리고, node.js로 서버를 변경했다고 합니다. 기사에 링크된 페이팔 블로그 링크에 옮겨간 이유가 나옵니다. 여러 이유가 있겠지만, 서버에서 프론트까지 같은 언어로 커뮤니케이션하는 것이 좋다고 판단했다는 이유가 눈에 띕니다.


"It unifies our engineering specialties into one team which allows us to understand and react to our users’ needs at any level in the technology stack."

from: https://www.paypal-engineering.com/2013/11/22/node-js-at-paypal/


오래 전부터 프로토타이핑을 해왔고, 올해부터 서비스에 적용했다고 합니다. 웹 애플리케이션 프레임워크로 express를 쓰고, Grunt 작업 실행기와 설정을 위해서 nconf를 사용했다고 zdnet이 전합니다.


개발 생산성 향상은 다음과 같습니다.


2배 더 빨라졌고, 더 적은 인원으로 Built almost twice as fast with fewer people

33%라인 수가 줄었으며 Written in 33% fewer lines of code

40%의 파일 갯수로 만들어 집니다 Constructed with 40% fewer files


자바가 파일이 많기는 하죠. 스프링이나 EJB 모두 말이죠.


성능에 대한 그래프도 응답시간이 줄어서 node.js 쪽이 나은 데이터가 공개되었습니다. 고객의 대기시간이 줄었다는 얘기죠.





java 시장이 현재 크지만, node.js로 인해 많이 잠식될 것 같습니다. 당장은 아니라도 말이죠.


ps. Douglas Crockford님이 야후에서 Paypal로 간 까닭은?http://techcrunch.com/2012/05/13/paypal-gets-its-own-share-of-the-yahoo-diaspora-hires-java-icon-douglas-crockford/


Ceylon (http://ceylon-lang.org) 언어는 Java와 JavaScript 두 가지 플랫폼을 지원합니다. JVM 또는 node.js 플랫폼에서 동작하는 진정한 일타쌍피 언어이죠.

이 실험적인 언어의 기능(Feature)이 정해졌다고 합니다.

http://www.theserverside.com/news/thread.tss?thread_id=77418 (Gavin King이 직접 쓴 뉴스)

http://www.infoq.com/news/2013/09/ceylon-beta


Ceylon은 C, Java언어를 아시는 분들은 아주 잘 읽힙니다. html도 구조대로 프로그래밍을 하고 동적으로 생성해줍니다.

Table table = Table {

    title = "Squares";

    rows = 5;

    Border {

        padding = 2;

        weight = 1;

    };

    Column {

        heading = "x";

        width = 10;

        String content(Integer row) {

            return row.string;

        }

    },

    Column {

        heading = "x^2";

        width=10;

        String content(Integer row) {

            return (row^2).string;

        }

    }

};


하이버네이트로 자바 표준인 JPA도 이끌어낸 Gavin이라 이 분이 만든 Ceylon이 어떤 반향을 일으킬 것 같습니다. 특히나 메이저 언어가 된 자바스크립트와 전혀 다른 언어 자바를 통합시켰으니까요.


15분이면 Ceylon 언어를 탐험하실 수 있습니다. 

http://ceylon-lang.org/documentation/current/introduction/

영어가 안되서 당황하시면 안 됩니다. ^^;

@estima7 님의 트위터를 통해서 알게된 정보입니다.
http://www.webdirections.org/sotw10/ 에서 가져온 그림이 많은 것을 말해주고 있습니다.

개발에 편한 브라우저가 Firefox가 1위인 것은 당연하다 생각되는데, Safari가 2위인 것도 한국인으로서는 의외이고, 구글 크롬브라우저가 3위입니다.
테스트 브라우저에서 IE의 위상은 최종 사용자에서 IE의 비율을 제대로 반영한 것이 아닌가 생각됩니다.
모바일 브라우저에서는 모바일 사파리가 압도적이고, javascript 라이브러리에서 jQuery의 78% 점유율은 대단하게 느껴집니다.

국내 웹 개발자들의 현황과는 다르다고 생각이 되는데, 지난 번 Safari 브라우저의 개발자 지원 도구를 보면서 상당히 진보했다고 느꼈는데, 찬찬히 현재 개발환경을 개선할 점을 찾을 수 있지 않을까 생각됩니다.

http://www.webdirections.org/sotw10/ 에 더 자세한 정보들이 담겨있습니다.

sponsored post : [Adobe RIA 공식 사이트(www.adoberia.co.kr)]


아이폰엔 있습니다. 이런 괴물... 이미지 상단에 "콘솔 디버그 오류 없음" 이라고 보입니다.

설정에서 브라우저 정보에 보면 개발자용이라고 표시됩니다.

콘솔 디버그 옵션을 활성화하면 됩니다.

오류가 생긴 경우 더 자세한 정보를 볼 수 있습니다.

HTML/JavaScript/CSS 의 오류가 보여집니다.

모바일웹 개발시 유용하게 쓰일 것 같습니다.



이 글을 포스팅하려는데 3.0.4 업데이트가 나왔군요. ^^

firebug의 업데이트와 함께 새로운 UI의 옵션이 맨 처음에 나옵니다.
콘솔(Console), 스크립트(Script), Net 기능을 체크해야 자바스크립트와 네트워크 관련 기능을 사용할 수 있습니다.

이 중에서 콘솔은 자바스크립트 에러가 표시되는 화면입니다. 다음과 같이 표시됩니다.

여기서 에러메시지를 클릭하면 해당 소스의 자바스크립트로 이동하게 됩니다.

콘솔에는 다른 기능도 있습니다. 바로 현재 페이지의 자바스크립트를 편집해서 실행할 수 있는 영역이 있다는 것입니다. 콘솔 탭의 하단에 >>> 프롬프트 라인입니다. 여기에 자바스크립트를 넣어서 실행할 수 있습니다. 예전부터 있었는데, 안 썼습니다. 몰랐으니까요. ^^;

이렇게 실행 결과도 확인할 수 있습니다.

편집 영역을 확장할 수도 있습니다. 라인 우측의 회색 동그라미를 클릭하면 다음과 같이 넓어집니다.

Ajax 작업을 할 때 작은 프로그램도 여기에 넣어서 실행이 가능합니다. ^^;

 
해킹에 조심하셔야겠어요. 툴은 중성이죠. 사용하는 사람에 따라 선이 될 수도 악이 될 수도 있으니까요. 중요한 로직 체크는 자바스크립트로 하는 것을 피해야죠. 서버 쪽의 프로그램에서 체크하는 것은 웹개발의 기본이겠죠.

춤추러 갑니다. ^^ 스윙댄스요. ㅎㅎ


+ Recent posts