자바스크립트의 비동기 처리 2탄(async & await)
async & await 가장 최근에 나온 비동기 처리 패턴 문법으로, callback 함수와 Promise의 단점을 보완해주는 것이 특징인 async / await 문법을 살펴보도록 하겠다. async & await 기본 문법 async function 함수명() { await 비동기(); } 비동기로 실행할 함수 앞에 async 예약어를 붙인다. 함수 내부 로직 중 비동기 처리 코드 앞에 await 을 붙인다. 이때, 이 비동기 처리 로직은 Promise 객체 를 반환한다. (일반적으로 axios와 같은 api 호출 함수이다) 예외 처리 Promise 에서 .catch를 사용했던 것처럼 try catch문을 사용한다. catch로 코드를 실행하다가 발생한 네트워크 오류, 타입 오류 등등과 같은 에러들..
자바스크립트의 비동기 처리 1탄(callback 함수 & Promise)
JS 엔진은 동시에 여러가지를 처리할 수 없다. 이에 순서대로 코드를 실행하는 것이 아닌(동기적 실행), 코드의 실행 완료를 기다리지 않고 다음 코드를 먼저 실행하는(비동기적 실행) 것이 가능하도록 한 JS의 설계들을 살펴보도록 하겠다. Callback 함수 첫번째로 JS에서 callback 함수로 비동기적 실행이 가능하다. (콜백함수가 꼭 비동기적으로만 쓰이는 것은 아니다) callback 함수는 다른 함수의 매개변수로 넘겨진 함수를 의미하고, 어떤 이벤트가 발생한 후 이 콜백 함수가 다시 호출되며 실행된다. 함수 안에서 실행되는 함수이기 때문에 보통 익명함수로 작성된다. // 간단한 callback 함수 예시 function printNumber(num){ num(); //callback 함수 } p..
JS에서 Class 다루기
JS로 게임을 만들다가 파일과 코드 분리에 어려움이 생겨 class 도입에 대한 필요성을 느꼈다. 공부한 것을 바탕으로 JS식 객체지향 프로그래밍에 대한 정리를 해보려고 한다. 정리의 끝에는 'JS의 class는 프로토타입을 베이스로 한다' 라는 말을 조금이나마 와닿게 하려 한다. 생성자 생성자는 객체를 생성하는 함수이며, 'new'를 사용해 호출한다. 다른 함수와 구분하기 위해 대문자로 시작하는 것이 규칙이다. function Person(name, age, gender){ this.name = name; this.age = age; this.gender = gender; this.sayHi = () =>{ console.log('Hi!'); } } let a = new Person('A','20','..