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 포스팅을 마치겠습니다.
즐거운 코딩하시길 바랍니다 :)
가끔 심심할 때에 깃헙에 있는 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==
– butobj == null
is allowed to checknull || undefined
. - Always handle the node.js
err
function parameter - Always prefix browser globals with
window
– exceptdocument
andnavigator
are okay- Prevents accidental use of poorly-named browser globals like
open
,length
,event
, andname
.
- Prevents accidental use of poorly-named browser globals like
PS. Node.js 프로젝트에 적용한 것이지만
어느정도 골라서 수정이 필요할 것 같습니다.
2016년 4월 15일 금요일
Javascript 개발 가이드 - NHN entertainment 자료
GitHub URL: https://github.com/nhnent/fe.javascript/wiki
공부하기 좋은 내용을 공유하고 있네요.
코딩 컨벤션이나 디버깅, 테스팅등
너무나 배울게 많습니다
NHN enter- 감사합니다!
피드 구독하기:
글 (Atom)
JIRA Plugin - ScriptRunner 소개 #2
관련 글 소개 #1: https://pineoc.blogspot.com/2019/03/scriptrunner-1.html ScriptRunner 소개 #2 지난 글에서는 Behaviours를 보았고 다음 내용인 콘솔, 리스너 등을 ...
-
에반젤리스트(Evangelist)란 무엇일까요? 단어 그대로 말한다면 '전도사'의 의미를 가지고 있습니다. 그리고 제가 공부하는 IT업계에서도 이 에반젤리스트가 있지요. 이분들이 하는 일은 쉽게 말해서 기술에 대해 전파하고 알리...
-
Nginx 를 이번에 사용하게 되었는데요. Nginx를 이용해서 폴더에 있는 파일을 받을 수 있게 하려합니다. mac OS에서 테스트할때의 nginx 의 nginx.conf 파일은 /usr/local/etc/nginx/nginx.conf 경...