레이블이 자바스크립트인 게시물을 표시합니다. 모든 게시물 표시
레이블이 자바스크립트인 게시물을 표시합니다. 모든 게시물 표시

2016년 8월 29일 월요일

Vorlon.JS - 원격 자바스크립트 디버깅 툴



Homepage: http://vorlonjs.com/
GitHub: https://github.com/MicrosoftDX/Vorlonjs/

원격 자바스크립트 디버깅 툴 이라고 설명은 적어놓았지만
제대로 된 설명은 아래와 같습니다.

"An open source, extensible, platform-agnostic tool for remotely debugging and testing your JavaScript. Powered by node.js and socket.io."

플랫폼에 종속되지 않고 원격으로 자바스크립트를 디버깅, 테스트가 가능한 툴.
(Node.js 와 Socket.io 를 이용함)

현재 버전은 0.3.0 입니다.
앞에 버전 번호가 0 인걸로 봐서 아직 개발이 활발히 진행중인
프로젝트인 것 같습니다.

실제 데모 영상은 다음 링크에 있습니다.
http://www.vorlonjs.com/#demo (유튜브에 올라가 있지 않아서 직접 눌러서 보셔야할 듯 합니다.)

- 설치
$npm install -g vorlon

- 실행
$vorlon

실행 전에 해당 웹 앱 페이지에 스크립트 코드를 넣어주셔야합니다.
<script src="http://localhost:1337/vorlon.js"></script>

이렇게 하면 vorlon에서 사용하는 socket.io에 연결되어서
디버깅, 테스트를 진행 할 수 있습니다.

현재 진행하는 Cordova나 웹 페이지 개발에
테스트, 디버깅에 한번 사용해봐야겠습니다.

2016년 8월 8일 월요일

GitHub 자바스크립트 게임 엔진 프로젝트 모음 - Phaser

https://github.com/showcases/javascript-game-engines

가끔 심심할 때에 깃헙에 있는 Explore 를 보곤합니다.
어떤 프로젝트가 요즘 뜨고 있는가, 재미있는 프로젝트가 있나해서
두리번 두리번 보곤했는데

오늘은 자바스크립트 게임엔진 프로젝트가 있길래 한번 들여다 봤습니다.





총 15개의 프로젝트가 있는데
제일 많은 스타를 받은 프로젝트를 한번 볼까요?

https://github.com/photonstorm/phaser

이 프로젝트는 Phaser 라는 이름의 게임 엔진 프로젝트입니다.




아래에는
엔진의 특징을 설명해놓았네요



WebGL, Canvas 그래픽 표현부터 시작해서
소리, 인풋, 애니메이션 등에 대한 특징에 대해 설명하고 있습니다.

그 아래에는 튜토리얼, 소식 등에 대한 내용이 있습니다.



각 포스트에는 내용에 따라 라벨이 붙어있네요.
튜토리얼, 게임, 컨퍼런스 등으로 나눠져 있습니다.

그리고 마지막에는
퀵스타트 가이드가 있습니다.



Phaser를 깃헙에서 받을 수 있기도 합니다만.
링크로 가면 해당 사이트에 있는 다운로드 페이지로 가서
stable 버전을 다운 받을 수 있게 되어있네요.




저는 js 버튼을 눌러서 다운받아 보았습니다.
(3.3MB 정도의 크기의 phaser.js 파일이 다운받아졌습니다.)

튜토리얼을 한번 해보려고 했으나
http://phaser.io/tutorials/getting-started/index
영어 + 조금 불친절한 내용으로 힘들 것 같네요.

튜토리얼 말고 예시에 대해서 한번 보고 마치겠습니다.
http://phaser.io/examples
깃헙 Examples 링크: https://github.com/photonstorm/phaser-examples



많은 예제가 있는데 하나만 들어가보겠습니다.

ACADE PHYSICS로 가서 Accelerate to pointer 라는 예제를 보겠습니다.



이 예제는 저 초록 화살표가 마우스를 따라옵니다.

이 밑에는 코드 예시가 있는데요



다운받아서 플러그인 처럼 사용해도될 것 같습니다.

Phaser로 한번 간단한 게임 만들어도 재미있을 것 같네요.
이상 자바스크립트 게임 엔진 프로젝트인
Phaser 포스팅을 마치겠습니다.

즐거운 코딩하시길 바랍니다 :)

2016년 7월 25일 월요일

JavaScript Standard Style - 자바스크립트 코딩 스타일(컨벤션) 체크 툴



최근에 자바스크립트 공부를 하면서 느꼈던게 있었는데
코딩 컨벤션, 코딩 스타일에 대한 것이었습니다.

에어비앤비에서 깃헙에 올렸던
자바스크립트 코딩 스타일 가이드 문서 라던지,
https://github.com/airbnb/javascript

구글에 있는 자바스크립트 코딩 스타일 가이드도 봤었습니다.
https://google.github.io/styleguide/javascriptguide.xml

제 코드에서 조금씩 조금씩 바꿔보긴 했는데
힘들어서 자동툴 같은 것이 없을까해서 찾아봤는데
역시 누군가가 잘 만들어놨습니다.
(제가 한번 만들어보고 싶었는데 나중에 한번 만들어봐야겠습니다.)

위에 있는 스탠다드JS가 그 툴을 만든곳이고
그 툴의 이름이기도 합니다.

깃헙 주소는 https://github.com/feross/standard

사용법은 쉽습니다.

1. 설치
$npm install standard -g

2. 사용
자바스크립트로 작성중인 프로젝트의 디렉토리에 가셔서
$standard

그럼 각 라인별로 확인을 해서 기준에 맞는지 틀리는지 체크합니다.

결과는
/Users/pineoc/Desktop/project/server/app.js:1:33: Extra semicolon.
  /Users/pineoc/Desktop/project/server/app.js:2:27: Extra semicolon.
  /Users/pineoc/Desktop/project/server/app.js:3:5: 'favicon' is defined but never used
  /Users/pineoc/Desktop/project/server/app.js:3:39: Extra semicolon.
  /Users/pineoc/Desktop/project/server/app.js:4:31: Extra semicolon.
  /Users/pineoc/Desktop/project/server/app.js:5:44: Extra semicolon.
  /Users/pineoc/Desktop/project/server/app.js:6:40: Extra semicolon.
  /Users/pineoc/Desktop/project/server/app.js:7:5: 'fs' is defined but never used

이런식으로 쭉해서
출력이 너무 많이 나와서 파일로 출력해봤습니다.

$standard > standard.out

그랬더니...
출력 라인수가 17828!
(파일 라인 확인하는 방법은 $wc -l [filename] 입니다.)

많이 고쳐야겠네요.. ㅎㅎ

아, 그리고 이 스타일 체크는 아래와 같은 기준으로 합니다.

/* 깃헙에 있는 룰을 가져왔습니다.*/

Rules

  • 2 spaces – for indentation
  • Single quotes for strings – except to avoid escaping
  • No unused variables – this one catches tons of bugs!
  • No semicolons – It's fine. Really!
  • Never start a line with ([, or `
    • This is the only gotcha with omitting semicolons – automatically checked for you!
    • More details
  • Space after keywords if (condition) { ... }
  • Space after function name function name (arg) { ... }
  • Always use === instead of == – but obj == null is allowed to check null || undefined.
  • Always handle the node.js err function parameter
  • Always prefix browser globals with window – except document and navigator are okay
    • Prevents accidental use of poorly-named browser globals like openlengthevent, and name.

PS. Node.js 프로젝트에 적용한 것이지만
어느정도 골라서 수정이 필요할 것 같습니다.



2016년 4월 15일 금요일

Javascript 개발 가이드 - NHN entertainment 자료



GitHub URL: https://github.com/nhnent/fe.javascript/wiki

공부하기 좋은 내용을 공유하고 있네요.
코딩 컨벤션이나 디버깅, 테스팅등
너무나 배울게 많습니다

NHN enter- 감사합니다!

JIRA Plugin - ScriptRunner 소개 #2

관련 글 소개 #1:  https://pineoc.blogspot.com/2019/03/scriptrunner-1.html ScriptRunner 소개 #2 지난 글에서는 Behaviours를 보았고 다음 내용인 콘솔, 리스너 등을 ...