게임 오버 팝업 띄우기 더 이상 블럭을 넣을 수 없을 때 나오는 팝업은 화면 전체를 가려야하기 때문에 root가 아닌 동등한 레벨의 새로운 노드로 넣어줘야 할 필요가 있었다. 이를 구현하기 위해 리액트의 Portals를 사용하기로 하였다. 팝업창 만들기 GameoverModel.js import { useContext } from 'react' import ReactDOM from 'react-dom' import GameModeContext from './context/GameMode' import GameScoreContext from './context/GameScore' import './GameoverModal.css' const GameoverModal = () => { const gameMode = useContext(GameModeContext) const gameScore = useContext(GameScoreContext) const link = document. More

게임 오버 판별 블록을 게임판에 하나 둘 때마다, 남은 칸에 넣을 수 있는 블럭이 1개 이상 있는지 판별하여, 불가능한 경우 게임 오버로 판정해야한다. 그러려면 3개의 블럭 형태를 모두 게임판과 비교하여 확인해야하는데, 기존의 블럭 형태로는 어려워 생성 로직에 약간 수정이 필요했다. 블럭 생성 함수 수정 BlockUtil.js const blockShape = [ [[1]], [[0,1],[1,1]], [[1,1],[1,1]], [[1,0,0],[1,1,1]], [[0,1,0],[1,1,1]], [[1],[1]], [[0,0,1],[1,1,1]], [[1,1,1]], [[0,0,1],[0,0,1],[1,1,1]], [[1,1,1],[0,0,1],[0,0,1]], [[1,1,1],[1,1,1],[1,1,1]], ] ... const rotateShape = (shape, rotate) => { let rotated = [] const row = shape[0]. More

fs모듈 NodeJS에서 파일 시스템 접근을 위해서는 파일을 생성, 삭제, 수정이 가능한 fs 모듈을 사용한다. 대부분의 메소드들이 동기/비동기로 나뉘며, 동기방식의 메소드는 Sync라는 이름이 붙어있다. 동기적 방식을 사용하면 다른 작업을 동시에 수행할 수 없으며, 비동기적 방식은 다른 작업을 병행할 수 있으며 완료된 후 매개변수로 전달된 callback 함수를 호출한다. 비동기 방식은 항상 수행 완료시 호출될 callback 함수가 작성되어야 한다. 비동기 방식 파일 쓰기 main.mjs import fs from 'fs'; const text = 'fs.writeFile test' fs. More

모듈 기존의 NodeJS에서는 CommonJS 모듈 시스템을 채택하여 require()로 모듈을 사용했으나, 현재는 ES모듈을 지원하여 export import를 사용할 수 있다. CommonJS CommonJS 방식을 통한 모듈 생성에는 두 가지 방법이 있다. module.exports를 사용하는 방식과 exports를 사용하는 방법인데, 단일 객체를 내보내는 경우와 여러 객체를 내보내는 경우로 나누어 사용하게 된다. require()을 통해 프로젝트 내부 모듈을 불러올 때는 확장자를 생략할 수 있다. exports calculator.js const add = (a, b) => { return a + b }; const subtract = (a, b) => { return a - b }; exports. More

Promise Promise 객체는 두 개의 내부 프로퍼티를 갖는다. state : 진행 상태. pending(보류) / fulfilled(이행) / rejected(거부) / settled(완료)로 나뉨. result : 결과. 진행 중 revolve(value)를 만나면 value로, reject(error)를 만나면 error로 바뀜. 활용 const promise = (props) => { return new Promise((revolve, reject) => { // Do something... if () {revolve(result)} reject(error) }) } // 프로미스 체이닝 promise(props).then((result) => { // Do something... return result }).then((result) => { // Do something. More

클래스 자바스크립트에서의 클래스는 함수의 한 종류로, 생성자의 기능을 대체하여 상속을 보다 간결하게 작성할 수 있음. 별도의 문법을 사용하여 메소드 또는 프로퍼티 등을 선언할 수 있음. 단, 단순한 편의 문법이 아닌 다음과 같은 차이점을 가진다. 반드시 new와 함께 사용해야 함. 클래스의 메서드는 열거할 수 없음. 즉, for...in을 통한 순회 시 메서드는 제외됨. 항상 엄격 모드(use strict)로 실행됨. 기본 문법 class User { //클래스 필드 isHuman = true; //생성자 constructor(name, age) { this. More

이터레이션 프로토콜 이터레이션 프로토콜(iteration protocol)은 데이터 컬렉션을 순회하기 위한 규칙. 이를 준수한 객체는 for...of로 순회 가능하고 Spread 문법의 피연산자가 될 수 있다. 이터러블 이터러블 프로토콜을 준수한 객체를 이터러블이라 하며, Symbol.iterator 메소드를 구현하거나 상속한 객체를 말한다. 배열은 이터러블이며, 일반 객체는 아니다. const array = [1,2,3]; alert(Symbol.iterator in array); //true const obj = {a:1, b:2, c:3}; alert(Symbol.iterator in obj); //false ES6에서 제공하는 빌트인 이터러블은 다음과 같다. Array, String, Map, Set, TypedArray(Int8Array, Uint8Array, Uint8ClampedArray, Int16Array, Uint16Array, Int32Array, Uint32Array, Float32Array, Float64Array), DOM data structure(NodeList, HTMLCollection), Arguments 이터레이터 이터레이터 프로토콜은 next 메서드를 가지고 있어야 하며, next 메서드는 반복이 끝났는지에 대한 done 프로퍼티와 이터레이터로부터 반환되는 값인 value 프로퍼티를 갖는 객체를 반환해야 한다. More