apache/bin/ab.exe 간편하고 쉬운 도구인데, 아파치를 윈도우에 설치해야 한다는 부담이 있죠.

http://www.apachefriends.org/en/xampp-windows.html#641


xampp 패키지에 있는 apache를 이용하면 됩니다.

xampp/apache/bin/ab.exe 를 호출할 수 있습니다.


물론 이것도 180MB라는 무시무시한 zip파일을 다운받아서 압축을 풀어야 합니다.



이클립스 4.3 Kepler의 장터에서 발견했습니다. 

메뉴의 Help > Eclipse MarketPlace... 를 선택하시고,

node로 검색하면 됩니다.

node로 검색해서 나오는 2번째 Enide를 설치했습니다.


설치되는 목록이 많습니다.


우측상단에 보이듯이 node 퍼스펙티브로 전환한 뒤에 간단한 node.js 프로젝트를 만들어 봤습니다. hello-world-server.js는 자동생성된 코드입니다. 



실행하는 옵션은 hello-world-server.js를 선택하고 Run As > Node Application 하면 Console에 결과를 볼 수 있습니다. 물론 예제는 웹서버를 띄우는 내용입니다만, 웹 뷰나 브라우저는 자동실행되지 않습니다. 


부지런한 개발자들이 많습니다. 이클립스에서 노드 개발을 하다니


하지만 아직 Code Assist 기능은 안 되는 것 같습니다. 자바스크립트 문법 검사 정도만 지원하는 것 같습니다.





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

녹화방송 일주일간 공개됩니다. 혹시 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>


정확히 얘기하면 JSDT jQuery 플러그인입니다. 마켓에서 jquery로 검색하면 됩니다.


JSDT jQuery가 보입니다. 아래쪽에 nodeclipse도 보이는군요.


플러그인을 설치하고 난 뒤 이클립스를 다시 실행합니다. 프로젝트의 JavaScript Resources 항목을 선택하고 Properties 메뉴를 클릭합니다.



Include Path의 Libraries탭에서 Add JavaScript Library... 버튼을 클릭합니다.


jQuery Library 항목을 선택해서 추가합니다. (JDK 1.5 이하로 이클립스를 실행하면 나타나지 않습니다.)



jQuery의 버전을 지정할 수 있습니다.



추가된 jQuery라이브러리가 보입니다.



이제 자바스크립트 편집시에 Content Assist(Ctrl+space) 기능을 통해서 jQuery 함수가 나타나는 것을 볼 수 있습니다. $.ajax는 안 나타나는 단점도 보입니다만, 그래도 jQuery 개발이 많다면 유용할 것으로 보입니다.


IntelliJ에서는 이런 작업이 필요없고 jQuery 자동완성 기능이 기본적으로 된다고 합니다. 역시 유료


related:

http://stackoverflow.com/questions/11731884/jquery-autocompletion-with-eclipse-juno-java-ee


이번 주 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/


구글의 앱 엔진(http://appengine.appspot.com/)은 데이터를 저장할 때 비용이 발생합니다. SQL을 사용하려면 더 비쌉니다.

간단히 데이터를 저장하고 빼는 방법으로 DataStore API를 제공해줍니다. 그리고, 저장된 데이터는 관리자 웹 페이지를 통해서 확인할 수 있습니다.


저장하는 절차는 다음과 같습니다.

1. 환경에서 DatastoreService를 가져옵니다.

2. Key를 만듭니다. Key의 종류와 key 이름을 추가합니다.

3. 레코드는 Entity 클래스를 이용합니다.

4. entity에 key : value 형식으로 기록할 데이터를 입력합니다.

5. Datastore에 entity를 추가합니다.


private static final String KEY_KIND = "Game";

private static final String keyName = "games";


DatastoreService datastore = DatastoreServiceFactory.getDatastoreService();


public void save(Game game) {

Key entityKey = KeyFactory.createKey(KEY_KIND, keyName);


Entity entity = new Entity(KEY_KIND, entityKey);


User firstUser = game.getFirstUser();

User secondUser = game.getSecondUser();


entity.setProperty("first", firstUser.getName());

entity.setProperty("firstchoice", firstUser.getChoice());

entity.setProperty("second", secondUser.getName());

entity.setProperty("secondchoice", secondUser.getChoice());


entity.setProperty("datetime", new Date());

entity.setProperty("ip", game.getIp());


datastore.put(entity);

}



관리자 페이지에서는 다음과 같이 화면이 제공됩니다.




데이터를 꺼내오는 방법은 다음과 같습니다.


1. Key를 만듭니다.

2. Query를 만들면서 정렬순서와 기준 항목을 정합니다.

3. Datastore에서 Query를 이용해서 데이터를 꺼냅니다.

4. Entity 목록을 처리합니다.

public List<Entity> fetchAll() {

Key entityKey = KeyFactory.createKey(KEY_KINDkeyName);

Query query = new Query(KEY_KIND, entityKey).addSort("datetime",

Query.SortDirection.DESCENDING);

List<Entity> games = datastore.prepare(query).asList(

FetchOptions.Builder.withLimit(5));


return games;

}




윈도우에서 찾아 엄청 헤맸는데,

그냥 크롬브라우저로 해결 됩니다.


<html>

  <body>

    <video src="" id="myvideo"  autoplay></video>

    <script type="text/javascript">

      var video = document.getElementById('myvideo');

      navigator.webkitGetUserMedia({video:true}, success); 

    

      function success(stream){

        video.src = window.webkitURL.createObjectURL(stream);

      }

    </script>

  </body>

</html>


from: http://hanury.net/wp/archives/3479





아주 쉬운 퀴즈 10문제(주관식 2 포함) 입니다.


goo.gl/cwEVYJ


정답은 등록하신 이메일로 보내드립니다.

jQuery.browser는 브라우저 정보를 보여줍니다. 1.8.x 까지는 존재했었는데, 1.9.x에서는 없어졌군요.


jquery-migrate.min.js 를 추가하면 1.9.x 이상에서도 보입니다만, console로 보면 deprecated(후지게 되었으니, 가능하면 쓰지마세요.) 메시지가 나옵니다. 


1.9.x 이상에서 사용할 경우 아래의 추가된 코드에 주석을 제거하면 됩니다.



참고: https://github.com/jquery/jquery-migrate/


+ Recent posts