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 버전 이후에는 확장 프로그램을 설치하지 않고 추가적인 세팅만 하면 되도록 개선되었다. 먼저 디버깅 실행 ..

숫자 세 자리마다 콤마 찍기

let value = 12523401.515; let str = value.toLocaleString(); // '12,523,401.515' Number 타입의 내장 함수인 toLocaleString 함수를 통해 세 자리마다 콤마를 찍는 표기방식을 적용한 string 값을 얻을 수 있다. let value = 12523401.515.toFixed(2); // '12523401.52' let str = value.toLocaleString(); // '12523401.52' 문제는 toFixed 함수(소수점 표시 제한)를 거친 뒤 toLocaleString 함수를 실행하면 세 자리마다 콤마를 찍지 않는다. 왜냐하면 toFixed로 인해 value의 타입이 string으로 바뀌었고, string의 내장 함..

Array 함수 #6. 기타

1. toString let input = [1,2,3,4]; let output = input.toString(); // output = '1,2,3,4' 일반적으로 toString은 숫자 하나와 같은 객체 하나를 문자열로 변환할 때도 쓸 수 있지만 배열에 사용했을 때는 배열의 원소들을 연결해서 하나의 문자열로 반환한다. 만약 number 타입이 아닌 string 타입의 배열 ['1', '2', '3', '4']를 만들려면 let input = [1,2,3,4]; let output = input.map(String); // output = ['1','2','3','4'] map 함수를 써서 변환하려는 타입을 전달하면 된다. 2. join let input = [1,2,3,4]; let output =..

Array 함수 #5. sort

1. sort let input = ['a','b','A','ddd','C','a7']; let output = input.sort(); // input = output = ['A','C','a','a7','b','ddd] sort 함수는 정렬한 후의 결과 배열을 리턴하며, 원본 배열도 같이 수정된다. 매개변수를 생략할 경우 ASCII 문자 표 기준 오름차순으로 정렬된다. let input = [8,3,5,0,11,6]; let output = input.sort(); // input = output = [0,11,3,5,6,8] 위의 배열을 정렬하면 예상과 다르게 11이 3 보다 앞서있다. 그 이유는 내부적으로 배열의 원소들을 string으로 형변환하고, 이후에 첫 번째 문자를 기준으로 정렬한다. 11..

Array 함수 #4. reduce vs.forEach

1. reduce reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T; reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T; reduce(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U, initialValue: U): U; reduce 함수는 배열을 순회하면서 콜백 함수를 반복 실행하고, 모든 반복의 결과를 하나의 값으로 줄..

Array 함수 #3. 배열에 원소 추가,삭제

1. slice 특정 배열을 start 인덱스부터 end 인덱스까지 잘라서 새로운 배열에 넣어 리턴하는 함수다. 함수의 반환 값은 잘라낸 원소들로 이뤄진 새 배열이다. 함수 자체는 두 개의 파라미터를 받는 간단한 형태인데 두 파라미터를 어떻게 넣는지에 따라 아주 다양하게 결과가 나오기 때문에 주의가 필요하다. start와 end 주의점 배열의 인덱스를 벗어나는 수를 입력해도 에러가 발생하지는 않음 양수인 경우, 배열의 앞에서부터 인덱스를 의미함 음수인 경우, 배열의 뒤에서부터 세는 인덱스를 의미함 양수이면서 그 절대값이 배열의 길이 이상인 경우, 배열의 길이와 같은 인덱스를 의미함 음수이면서 그 절대값이 배열의 길이 이상인 경우, 0을 의미함 start가 undefined인 경우, 0을 의미함 end를 ..

Array 함수 #2. 조건 확인

1. filter let input = [0,1,2,3,4]; let output = input.filter(x => { if (x % 2 == 0) return true; }) console.log(output); // [0,2,4] filter 함수는 map과 비슷하다. 둘의 공통점은, 배열을 순회하면서 새로운 배열을 만들어 리턴한다. filter 함수는 콜백 함수가 true를 리턴했을 때만 그 때의 원소를 새 배열에 추가한다. map과 filter의 차이는 크게 두 가지가 있다. (1) map은 리턴하는 배열에 콜백 함수가 적용된 새 원소를 추가하고, filter는 기존 배열의 원소를 그대로 복사해 추가한다. let input = [0,1,2,3,4]; let outputMap = input.map..