이 글은 PC 버전 TISTORY에 최적화 되어있습니다. Javascript Index SignaturesJavascript(및 Typescript)의 Object는 다른 Object의 참조를 유지하기 위해 문자열로 접근할 수 있습니다.다음은 간단한 예입니다.let foo:any = {}; foo['Hello'] = 'World'; console.log(foo['Hello']); // World 우리는 "Hello"라는 Key로 "World"라는 문자열을 저장했습니다. 기억하세요, 우리는 Javascript의 어떤 객체든 저장할 수 있습니다. 그럼 이제 이번 장의 컨셉을 이해하기 위해 클래스의 인스턴스를 아래와 같이 저장해보도록 하죠.class Foo { constructor(public message:..
Basic
이 글은 PC 버전 TISTORY에 최적화 되어있습니다.클래스는 유용합니다.다음과 같은 구조는 일반적으로 사용되는 패턴이죠.function foo() { let someProperty; // Some other initialization code function someMethod() { // Do some stuff with `someProperty` // And potentially other things } // Maybe some other methods return { someMethod, // Maybe some other methods }; } 이는 드러내는 모듈 패턴 으로 알려져 있으며 Javascript에서 흔히 볼 수 있습니다. (자바 스크립트 클로저 사용).만약 당신이 파일 모듈 패턴..
이 글은 PC 버전 TISTORY에 최적화 되어있습니다. 수업JavaScript에서 클래스를 첫 번째 강의 주제로 다루는 이유는 다음과 같은 중요한 이유가 있습니다.클래스는 유용한 구조적 추상화를 제공합니다.계속 자신만의 방식으로 새로운 버전을 만들어내는 framework(emberjs, reactjs etc) 대신 class를 사용하여 개발자에게 일관적인 방법을 제공합니다.객체 지향 개발자는 이미 클래스를 이해합니다.마지막으로 이제 JavaScript 개발자가 Class를 가질 수 있습니다 . 여기에 Point라는 기본 클래스가 있습니다.class Point { x: number; y: number; constructor(x: number, y: number) { this.x = x; this.y = ..
이 글은 PC 버전 TISTORY에 최적화 되어있습니다. 현재로부터 미래의 자바스크립트Typescript의 주요 판매 전략은 현재 자바스크립트(ES3, ES5)로부터 ES6까지 지원해준다는 것 입니다. 이제부터는 Typescript에서 제공하는 유용한 기능과 TypeScript에서 이러한 기능이 구현되는 방법에 대해 자세히 설명합니다.참고 : 이러한 기능 중 일부는 JavaScript에 즉시 추가 할 수있는 것은 아니지만 코드 구성 및 유지 관리에 유용합니다. 또한 결국 프로젝트의 대부분을 사용하게 될지라도 프로젝트에 이해가되지 않는 구조는 무시해도된다는 점에 유의하세요. 미래의 자바스크립트는 어떤 것이 있는지 다뤄본 후 본격적으로 Typescript Deep Dive를 시작하도록 하겠습니다. 다음의 순..
이 글은 PC 버전 TISTORY에 최적화 되어있습니다. 서론 좋은 구조는 그 코드를 다시 배우거나, 유지하거나, 테스팅하거나, 고치거나, 확장하는 비용을 줄여준다.신입 개발자로 일한지 어언 1년이 되었지만 완벽한 객체지향을 구현해본 기억이 별로 없기 때문에 (바빠서라는 핑계도 있지만) 개발 도중 내가 좋은 객체지향 코드를 짜고 있는지 돌이켜보기 위해 이 글을 쓴다. 1. 전능한 클래스를 피하라, 의미있는 이름을 사용해라.2. 업데이트 중 전능한 클래스를 피하라, 의미있는 이름을 사용해라. 개발을 시작할 때 어떤 일들이 있는지 정하고 그 일을 할 수 있는 클래스들을 만든다. 그리고 그 클래스들이 무슨 일을 하는지 이름을 붙여준다. 그런데 이 클래스가 너무 많은 일을 하면 어떻게 이름이 붙게 될까? 아마도..
이 글은 PC 버전 TISTORY에 최적화 되어있습니다. 서론 자바스크립트에 객체 정의 방법에는 리터럴 표기와 생성자 함수가 있다. 언어적으로 Object()나 Array() 같은 내장 생성자 함수를 지원하고 있는데, 이를 사용하는 것보다 리터럴 표기법을 사용하면 어떤점이 좋은지 다룬다. 이번 포스팅에서는 객체 리터럴 방식을 알아보도록 한다. 1. 객체 리터럴 방식 객체 리터럴을 이용한 객체 생성 자바스크립트의 객체는 단순히 이름 : 값의 쌍이다. 값에는 원시 데이터 타입, 객체 심지어 함수까지 올 수 있으며 이 때의 함수는 메서드라고 부른다. 그러므로 사용자가 만든 객체는 언제든지 그 값이 바뀔 수 있다. 또한 네이티브 객체의 프로퍼티도 변경이 가능하다. 또한 객체 정의 후 프로퍼티 및 함수를 추가할 ..
이 글은 PC 버전 TISTORY에 최적화 되어있습니다. 서론 이 글은 필자가 속해 있는 팀의 코딩 컨벤션(스타일 가이드)를 맞추기 위해 '더글라스 크락포드의 자바스크립트 코드 컨벤션'을 참고하여 작성한 것 입니다. 무조건 이 규칙들이 좋은 것은 아니니, 팀원들의 규칙들을 잘 통합하여 각자 팀만의 코딩 컨벤션을 적용하길 권장합니다. 1. 코딩 컨벤션(스타일 가이드)가 필요한 이유2. 들여쓰기3. 연산자4. 괄호5. 주석6. 기본 리터럴7. 객체 리터럴8. 변수 선언9. 함수 선언10. 문장 규칙11. 가독성을 위한 공백 1. 코딩 컨벤션(스타일 가이드)가 필요한 이유 대학 시절, 컴공과를 다니던 황OO군은 아무것도 없는 공백에 필요한 코드를 작성하여 '동작'을 목적으로 '성적'을 목적으로 의식의 흐름따라..
이 글은 PC 버전 TISTORY에 최적화 되어있습니다. 서론 자바스크립트에서 문자열 -> 숫자(string to integer, float), 숫자 -> 문자열(int, float to string)로 타입 변환하는 방법을 알아봅니다.1. 숫자 -> 문자2. 문자 -> 숫자 숫자 -> 문자 1. 숫자 뒤에 "" 붙이는 방법 (추천)var num = 1000, string = [];for (var i = 0; i < 10000; i++) {string[i] = 1000 + "";} 2. String 함수 사용var num = 1000, string = [];for (var i = 0; i < 10000; i++) {string[i] = String(1000);} 3. toString 함수 사용var nu..
이 글은 PC 버전 TISTORY에 최적화 되어있습니다. 서론 setInterval 함수를 실행해보시면 알겠지만, 지정한 delay 이후에 실행합니다. 즉 (delay - callback - delay - callback - ...) 순으로 진행한다는 것입니다. setInterval을 사용할 때 callback 부터 실행하도록 하는 간단한 방법을 알아보도록 하겠습니다. 방법function startInterval(seconds, callback) { callback(); return setInterval(callback, seconds * 1000); }매개변수로 시간, 콜백함수를 받는 startInterval 함수를 만듭니다. 함수는 실행하자마자 callback을 실행하고 setInterval을 시작하..
이 글은 PC 버전 TISTORY에 최적화 되어있습니다. 포스팅 순서1. 개념 및 구현2. 수도코드(pseudocode)3. 구현 및 최적화 수도코드function A*(start, goal) // 이미 실행했던 노드들 '닫힌 목록' closedSet := {} // 아직 실행하지 않았지만 이제 탐색할 노드들 '열린 목록' // 초기에는, 시작 노드만 들어있습니다. openSet := {start} // 각가장 효율적인 경로를(노드들을) 담습니다. cameFrom := the empty map // 각 노드별 시작 노드로부터의 거리를 담습니다. (기본 비용은 Infinity, 최소비용을 찾는 것이므로) gScore := map with default value of Infinity // 처음 노드는 시작..
