본문 바로가기

Ecmascript

(24)
[테트리스 만들기] 테트리스 기능 구현(다음 블록 생성, 한줄 채우면 사라지고 점수 증가) 고정하기 테트리미노 화면 바닥에 닿으면 조각을 고정하고 새로운 조각을 생성해야 한다. 먼저 조각을 고정하는 freeze() 함수 생성해서 테스트 //*** board.js class Board { grid; // 보드 그리드 piece; // 현재 조각 객체 // ... 기존 코드 drop() { let p = moves[KEY.DOWN](this.piece); if (this.valid(p)) { this.piece.move(p); } else { // 유효한 공간이 아니면 못움직이게 고정 this.freeze(); if (this.piece.y === 0) { // Game over return false; } } return true; } freeze() { this.piece.shape.forEa..
공식 API 문서 https://typescript-kr.github.io/ TypeScript 한글 문서 TypeScript 한글 번역 문서입니다 typescript-kr.github.io https://www.typescriptlang.org/docs/handbook/basic-types.html Basic Types · TypeScript Table of Contents # Introduction Boolean Number String Array Tuple Enum Any Void Null and Undefined Never Object Type assertions A note about ‘let’ Introduction # For programs to be useful, we need to be able to wo..
[ES6 ] 객체 리터럴 응용 객체 리터럴(Object literal) 자바스크립트에서 객체는 인스턴스와 자료구조(key, value)라는 2가지 역할을 다 할 수 있다. 객체 리터럴은 key, value 형태의 자료구조로써의 역할을 주력한다. ES6에 와서 객체 리터럴에 많은 기능 추가/개선이 이뤄져서 다양하게 응용이 가능해졌다. 비구조화 할당(Destructuring Assignment) 객체를 받는 변수를 {}로 감싸면 해당 키값을 변수로 사용할 수 있다. 객체의 이름으로 변수를 만들고 값을 '복사'해서 대입한 것이다. = 초기값을 대입(값이 없을때 대입되는 기본값) : 뒤에 있는 이름으로 변수명 변경 생략하면 그대로 변수명으로 할당 let state = {user:{}}; state.user = { loading..
[테트리스 만들기] 레이아웃부터 모션까지 제작 자바스크립트로 만든 테트리스 https://medium.com/@michael.karen/learning-modern-javascript-with-tetris-92d532bcd057 위의 블로그 내용 보고 했지만 빼먹은거 엄청 많고 잘못 타이핑한 부분도 있으니 참고만 할 것 위의 블로그 내용을 각 단계별로 직접 분석하면서 작동 확인하면서 만들면서 커밋했으니 아래 내용들은 실행 잘됨! 단계별로 만들고 커밋한 내용은 아래 깃헙에 올렸으니 참고 https://github.com/ds2lvg/JSwithTetris 사용하는 자바스크립트 ES6 문법 Classes, Arrow functions, Spread operator, Let and const, Default parameters, Array.from(), ..
[자료구조] Map과 Set Map : 중복되지 않은 '키'의 집합 자바의 Map과 특성이 유사한 자료구조 값 가공 메서드 : set(key, value), get(key), has(key), delete(key) 객체 리터럴과의 차이점 임의의 형으로 키를 설정 가능 객체는 프로퍼티로 가능한 요소(문자,숫자)를 키로 하지만 맵은 무엇이든 가능하다. 맵의 사이즈를 취득 가능 -> size() 메서드 열거 가능 : keys()로 모든 키를, values()로 모든 값을, entries()로 모든 키와 값을 취득 할 수 있다. 넣은 순서가 유지된다. const idols = new Map(); idols.set('외모', '아이린'); idols.set('몸매', '설현'); idols.set('이상형', '연우'); // const i..
[Array] useful method every() Array.every(callbackfn: (value: any, index: number, array: any\[\]) => unknown, thisArg?: any): boolean Determines whether all the members of an array satisfy the specified test. 배열의 모든 요소를 순회해서 모든 요소가 조건을 만족 하는지 여부를 검사 every로 체크하면 다중 if문이 쓸 상황이 줄어든다. const array1 = [1, 30, 39, 29, 10, 13]; console.log(array1.every((v) => v < 40)); // true some() Array.some(callbackfn: (value: any, index..
[closure] 간단한 로직으로 이해하는 클로져 클로져 한마디로 함수 내부의 함수에서 바깥 함수의 변수를 참조하고 있으면 바깥 함수의 호출이 끝나고 그 변수가 살아있는 것이다. 즉 바깥변수의 값이 지속되기 때문에 이 값을 이용해서 무언가를 할 수 있다. 말은 어려우니 코드로 알아보자 클릭할때마다 버튼에 클릭횟수가 표시 버튼 클릭 횟수:0 시간을 매개변수로 받아는 스톱워치 0
[module] import, require, module.exports, export 노드랑 리액트랑 번갈아가면서 하다보면 헷갈릴때가 있어서 정리함 import, require 외부 모듈 가져오는 것 node는 commonJS를 지원 -> require만 가능 module.exports, export 외부에서 사용할수 있게 모듈로 내보내는 것 node는 commonJS를 지원 -> exports, module.exports만 가능 /** moduler객체니 default로 내보내면 변수로 내보내기 때문에 한파일에 한번만 내보내기 가능 **/ // 한개만(module) 내보내기 : commonJS 방식 module.exports = {name: "react"}; // 한개만(default) 내보내기 export default React; /** 객체로 묶어내보내기 때문에 여러개를 묶어 내보..