JavaScript

A* 길 찾기 알고리즘

A* 길 찾기 알고리즘은 유니티로 2D 게임을 만들 때도 자주 사용되는 알고리즘이고 포폴에서도 사용했었다. 구글링해서 C# 코드는 금방 찾을 수 있지만 JavaScript 코드는 찾기가 어려웠다. 그래서 단순히 코드 복붙해서 날먹하려는 시도보다는 A* 알고리즘의 원리에 집중해서 새롭게 코드를 작성했다. 1. 우선순위 큐 (Priority Queue) A* 길찾기 알고리즘에서는 탐색할 다음 노드를 선택할 때, 현재 노드와 연결돼 있는 다음 노드들 중에 비용이 가장 적은 노드를 뽑는 과정을 반복해야한다. 이때마다 노드들을 새로 정렬하거나 가장 적은 노드를 찾는 행위를 다시 한다면 길 찾기 알고리즘의 퍼포먼스가 떨어질 수 있다. 물론 전체 노드의 개수(Grid)가 적다면 큰 차이는 없겠지만. 그래서 대부분 A..

WebStorm Chrome 디버깅

html 파일 실행 후 크롬 브라우저가 제공하는 크롬 개발자도구에서 디버깅 작업을 할 수 있지만 코딩 작업은 WebStorm에서 하고, 디버깅은 크롬 브라우저에서 하는 작업 방식이 익숙하지도 않고 불편하다 생각해서 WebStorm 툴에서 코딩과 디버깅을 같이 할 수 있는 방법을 찾아보았다. 원래는 WebStorm과 Chrome Dev Tools이 다중 클라이언트 디버깅을 지원하지 않는 동일한 디버그 프로토콜을 사용하는 문제점으로 인해서 한 쪽 디버거의 연결이 끊어지는 문제가 있었다. 이를 해결하기 위해 크롬에서 JetBrains의 IDE 확장 프로그램을 설치해서 사용했지만 WebStorm 2017.3 버전 이후에는 확장 프로그램을 설치하지 않고 추가적인 세팅만 하면 되도록 개선되었다. 먼저 디버깅 실행 ..

CreateJS

https://createjs.com/ CreateJS A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5. HTML5의 Canvas 기술을 기반으로 하여 웹 브라우저에서 풍부한 상호작용(이미지와 애니메이션 등) 콘텐츠를 표현하기 위한 자바스크립트 라이브러리 모음이며, 네 가지의 라이브러리로 구성되어있다. ES5 버전으로 구현됨. (1) EaselJS HTML5 Canvas에 Graphic 객체 생성을 위한 라이브러리 (2) TweenJS 객체의 상태 등을 보간하는 기능을 제공하는 라이브러리 (3)..