by Baekjoon Online Judge 1줄 입력 백준 2231 분해합 const fs = require('fs'); const input = fs.readFileSync('input.txt').toString(); let start = 1; const sum = (num) => { let sum = 0; while(num > 0) { sum += num % 10; num = Math.floor(num/10); } return sum; } while(true) { if ((start + sum(start)) == input) { console.log(start); break; } if (start == input) { console.log(0); break; } start++; } 테스트케이스의 수 또는 조건에 따른 수가 주어지지 않는 단일 입력의 경우 한 번만 받으면 된다. More

시작 유튜브 Interactive Developer님의 HTML5 Canvas Tutorial 영상을 보고 관심을 가지게 되어서, 간단히 캔버스를 클릭하면 불꽃이 터지는 효과를 만들어보기로 했다. 강의에서 클래스로 기능을 구현하시는 걸 따라하며 겸사겸사 연습하기로. 구현 가장 처음으로 기본세팅. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <script type="module" src="app.js"></script> </body> </html> style.css * { outline: 0; margin: 0; padding: 0; } html { width: 100%; height: 100%; } body { width: 100%; height: 100%; background-color: #ffffff; } canvas { width: 100%; height: 100%; } app. More

게임 오버 팝업 띄우기 더 이상 블럭을 넣을 수 없을 때 나오는 팝업은 화면 전체를 가려야하기 때문에 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

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

Page 1 / 3
Top