쌓고 쌓다

플레이 화면 API를 써보고 싶어서 행맨 게임을 만들어 봤습니다. 확실히 비동기 처리를 잘해야 문제없이 돌아가더라고요... 단순히 데이터를 가져와 쓰는것이 아닌 가져오는 데 걸리는 시간과 그 이후의 과정들을 잘 연결하는 게 문제였습니다. 그 외에도 많은 고비가 있었다... 1. 단어를 가져오는데 시작 버튼을 클릭을 연속으로하면 두 개의 단어가 붙어 구성되는 문제가 있었다. 시작 버튼을 클릭하면 데이터를 가져올때까지 시작 버튼을 비활성화했다. 2. 문자열로 제공받은 단어를 이용하면 문자 하나하나를 다루는데 불편함이 있어 배열에 담는 과정을 포함함. 3. 데이터를 가져오는데 시간이 걸려 그 전에 단어를 가져온 것처럼 실행이 될 때 문제가 있어 비동기 처리함. 위의 두 과정은 아래에서 다룸. 주요 기능 및 구..

구조 분해 할당 구조 분해 할당을 사용하여 객체와 배열로부터 속성이나 요소를 쉽게 가져올 수 있다. candyMachine 객체 const candyMachine = { status: { name: 'machine1', count: 5 }, getCandy() { this.status.count-- return this.status.count } } candyMachine의 getCandy, status.count 속성을 같은 이름의 변수에 대입한다면 아래의 코드로 작성한다. var getCandy = candyMachine.getCandy var count = candyMachine.status.count 이것을 구조 분해 할당 방법을 이용하여 아래와 같이 작성이 가능하다. const { getCand..

행맨 게임을 만들기위해 API를 이용해 랜덤 단어를 가져오는 부분을 알아보고 있었다. 그런데 통신하여 단어를 가져오는건 잘 되는데 출력을하면 undefined만 뜨는것이다... 여기에 2가지 문제를 겪었고 이해했다. 처음 API를 써보는거라 바보 같았지만 꼭 짚고 넘어가야할 부분이였다. 첫번째 문제 async function getPuzzle() { axios.get('https://puzzle.mead.io/puzzle?wordCount=1') .then((result) => { console.log('성공:', result.data.puzzle) return result.data.puzzle }) } getPuzzle().then(console.log) then으로 가져온것을 출력해보아도 잘 나오지만..

비동기 처리의 필요성 function fetchUser() { // 10초 걸림 return '홍길동' } const user = fetchUser() console.log(user) 사용자의 데이터를 가져오는 함수 fetchUser가 있다고 하자. 이것이 처리되는데 10초가 걸린다고 가정하면. 자바스크립트는 동기적인 처리를 하기 때문에 fetchUser가 끝날 때까지 머무르게 된다. 이후에 웹 페이지 UI를 표시하는 코드들이 있다면 10초가 걸리는 동안 사용자는 텅텅 빈 페이지를 보게 된다. 그래서 비동기적인 처리를 위해 promise를 사용한다. Promise 적용 function fetchUser() { return new Promise((resolve, reject) => resolve('홍길동'..

콜백 함수 매개변수로 전달하는 함수를 콜백 함수라고 한다. 콜백함수는 즉시 실행할 수도 있고, 나중에 실행할 수도 있다. 동기 콜백(Synchronous callback) function printImmediately(print) { print() } printImmediately(() => console.log('즉시 콜백함수 실행')) 비동기 콜백(Asynchronous callback) function printWithDelay(print, timeout) { setTimeout(print, timeout) } printWithDelay(() => console.log('async callback'), 2000) 콜백 지옥 아래의 콜백 함수 add가 있다고 하자. function add(x, cal..

static 속성 및 메소드는 정적 속성, 정적 메소드라고 부른다. static 속성과 메소드는 객체를 생성하지 않고 사용할 수 있다. static 속성 및 메소드 생성 형태 class 클래스이름 { static 속성 = 값 static 메소드() { ... } } static 속성 및 메소드 사용법 클래스이름.속성 클래스이름.메소드() Counter 클래스 class Counter { static #privateCount = 0 static count = 0 constructor(){ Counter.count+=1 // 생성자에서 this.#count+=1로 불가 } static get getCount(){ return Counter.count } } static은 private과 결합이 가능하다. s..

아래와 같이 정사각형 클래스가 있다고 하자. class Square { constructor(length) { if(length

상속 상속의 필요성을 이해해 보자. 사각형 클래스와 정사각형 클래스를 먼저 만들어 본다. 사각형 클래스 class Rectangle { constructor(width, height) { this.width = width this.height = height } // 둘레 계산 getPerimeter() { return 2 * (this.width + this.height) } // 넓이 계산 getArea() { return width * height } } 정사각형 클래스 class Square { constructor(length) { this.length = length } // 둘레 계산 getPerimeter() { return 4 * this.length } // 넓이 계산 getArea()..