프로그래밍 교육 처음에 가장 넘기 힘든 것이 개발환경을 구축하는 것입니다. 자바의 경우 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.vordweb.co.uk/standards/download_lynx.htm 에서 zip파일 다운로드 받아서 C:\lynx_w32 폴더에 압축 풀린 형태로 만든 후 lynx.bat 를 실행하면 됩니다.


G를 누르고 http://cnn.com/ 에 들어간 모습니다.


텍스트 브라우저의 전설입니다.


저작자표시

#time sync

0 2 * * * /usr/sbin/ntpdate -s time.bora.net


저작자표시

node.js는 브라우저에서 동작하지 않기 때문에 디버깅을 돌리기 위해서는 도구가 필요합니다. 이클립스에 node.js 플러그인을 깔아서 하는 방법이 있고, node-inspector 도구를 이용하는 방법 두 가지가 있습니다. node-inspector는 크롬브라우저를 독립적으로 띄워서 크롬 인스펙터처럼 디버깅 할 수 있게 합니다.


설치

npm install -g node-inspector


node-inspector 명령이 위와 같이 설치되면 node.js 로 만들어진 프로그램을 디버그 가능한 모드로 실행합니다. 다음과 같이 node.js를 두 가지 디버그 모드로 실행할 수 있습니다. 5858 포트를 엽니다.



디버그 모드 실행

node --debug ex.js

실행 처음에 브레이크포인트 적용된 모드로 실행
node --debug-brk ex.js

다른 명령창에서 node-inspector 를 실행합니다.

node-inspector 

크롬브라우저가 따로 뜹니다.

http://localhost:8080/debug?port=5858 주소를 이용합니다.



브레이크포인트를 잡으면 실행시 디버그가 가능합니다. 변수의 메모리를 확인할 수 있고, Console탭을 통해서 this 등의 키워드가 가르키는 내용도 확인이 가능합니다. 실행된 변수 위에 마우스를 올리면 내용을 풍선도움말로 띄워서 보여줍니다.


만약 디버그모드로 떠 있는 node.js 가 없다면 다음과 같은 메시지를 보게 됩니다.



전체적인 구조는 다음과 같습니다.



관련 링크: 

node.js debug: 

http://nodejs.org/api/debugger.html


node-inspector 

https://github.com/node-inspector/node-inspector#node-inspector




저작자표시

외부의 오픈API가 callback을 지원하지 않으면 JSONP방식을 사용할 수 없습니다.

이런 경우 로컬의 도메인으로 세탁해주는 기능이 필요하고, 이 방식을 Proxy라고 얘기합니다.


간단한 샘플코드입니다.


package net.okjsp.ajax;


import java.io.BufferedReader;

import java.io.IOException;

import java.io.InputStreamReader;

import java.net.MalformedURLException;

import java.net.URL;

import java.net.URLConnection;


public class Proxy {

public static void main(String[] args) throws Exception {

String sb = Proxy.getSource("http://okjsp.tistory.com/rss");

System.out.println(sb);

}


public static String getSource(String string) throws MalformedURLException,

IOException {

URL url = new URL(string);

URLConnection yc = url.openConnection();

BufferedReader in = new BufferedReader(new InputStreamReader(

yc.getInputStream()));

String inputLine;

StringBuilder sb = new StringBuilder();

while ((inputLine = in.readLine()) != null) {

sb.append(inputLine).append("\n");

}

in.close();

return sb.toString();

}


}


proxy.jsp 입니다.

<%@page import="net.okjsp.ajax.Proxy"

%><%@ page contentType="text/plain; charset=utf-8"

    pageEncoding="UTF-8"

%><% 

String url = request.getQueryString();

%><%= Proxy.getSource(url) %>


이것을 호출하는 javascript입니다.

<!DOCTYPE html>

<html>

<head>

<title>AjaxProxy</title>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script type="text/javascript">

$(function() {

$.ajax({

/* url : "http://www.marinetraffic.com/map/getjson/sw_x:125.62/sw_y:36.52/ne_x:128.02/ne_y:37.14/zoom:10/fleet:/station:0/id:null", 

*/

url : "proxy.jsp?http://www.marinetraffic.com/map/getjson/?",

dataType : "json",

data : {

sw_x : 125.62,

sw_y : 36.52,

ne_x : 128.02,

ne_y : 37.14,

zoom : 10,

station : 0,

id : 'null'

},

success : function(vessel) {

$.each(vessel, function(key, value) {

$("#result").append(value + '\n');

})

},

error : function(xhr, status, error) {

$("#result").append(error);

            }

});

});

</script>

</head>

<body>

<pre id="result"></pre>

</body>

</html>


간단한 이클립스 프로젝트 첨부합니다.

ajaxproxy.zip


저작자표시

adobe가 macromedia를 인수한 뒤에 웹 생태계에 많은 영향을 주고 있습니다. 

요즘 페북에서 많이 언급되는 개발용 에디터가 Brackets입니다.


매우 가볍습니다. 용량은 34메가. 참고로 이클립스 웹 개발용(JavaEE 패키지)은 247메가입니다. 1/7 사이즈입니다.

http://brackets.io


홈페이지에서 얘기하는 Code the Web은 웹 개발용 편집기라는 의미가 담겨 있습니다.


brackets의 소스는 github에서 오픈소스로 개발되고 있습니다. adobe 에서 관리하는 프로젝트입니다. https://github.com/adobe/brackets


File > Live Preview (단축키 Ctrl+Alt+P)를 통해서 HTML/CSS/JS의 라이브 편집이 가능합니다. 


파일을 저장하지 않아도 크롬브라우저에서 바로 확인이 가능합니다. 


자바스크립트 파일 편집할 때는 JSLint가 바로 적용됩니다. 저장할 때마다 JS의 코드를 검사해서 알려줍니다.


JSLint에서 보이는 에러를 줄이기만 해도 코드가 예뻐집니다.


윈도우, 맥, 리눅스에서 모두 사용 가능하기 때문에 sublime text와 경쟁이 될 것 같습니다. 오픈소스로 만들어지는 것이기 때문에 발전속도가 꽤 빠를 것으로 예상됩니다.


저작자표시

자바스크립트로 외부에서 데이터를 가져와서 표현하는 방법이 있습니다. http://dna.daum.net 에서 제공하는 오픈API를 이용해서 알아보겠습니다.

http://apis.daum.net/search/web?q=json&apikey=DAUM_SEARCH_DEMO_APIKEY&output=json&callback=callbackfn

위 주소는 다음에서 제공하는 apis.daum.net 웹 검색용 오픈API주소입니다. Querystring을 보면 다음과 같은 파라미터들이 전달됩니다.

q: 검색어

apikey: 다음에서 제공받은 apikey

output: 응답결과 데이터 형태 json 또는 xml

callback: JSONP를 위해 필요한 callback 함수 이름

* JSONP(다른 도메인 간의 데이터를 전달하기 위한 방법 http://en.wikipedia.org/wiki/JSONP) 


브라우저에서 호출하면 결과는 callbackfn({json format data}) 형태로 보입니다.


크롬 브라우저에서 ctrl+shift+J 를 눌러서 Console을 엽니다.

우선 callbackfn 함수입니다.

function callbackfn(res) { console.log(res); }


그리고 엘리먼트 하나를 만들어서 script 태그를 만들고 src에 위 주소를 붙입니다.

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

element.src = "http://apis.daum.net/search/web?q=json&apikey=DAUM_SEARCH_DEMO_APIKEY&output=json&callback=callbackfn";


head 태그는 배열로 리턴되기 때문에 첫 번째 요소에 script 엘리먼트를 붙입니다. 

document.getElementsByTagName("head")[0].appendChild(element);


위 오픈API 주소가 호출되면서 자동으로 callbackfn() 함수가 실행되는 것을 볼 수 있습니다.



저작자표시

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

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을 참고하면 좋을 것 입니다.


저작자표시

from: http://angularjs.org



Hello {{yourName}}!

저작자표시

+ Recent posts

티스토리툴바