Frontend/Javascript38 Javascript async/await, Promise 실수 포인트 🗝 async/await에서 에러 처리 new Promise((resolve, reject) => { throw new Error('this is error') }).catch(e => console.log(e)) // 에러내용 출력 new Promise(async (resolve, reject) => { throw new Error('this is error') }).catch(e => console.log(e)) // pending Promise 안에서 async를 사용하여 Error를 반환한 두번째의 경우에는 에러가 정상적으로 반환되지 않습니다. 이 상태면 Promise는 계속 pending 상태가 되고, 메모리를 차지하고 있게 됩니다. 왜 그럴까요? promise 내부에서는 resolve, rejec.. 2022. 4. 19. Javascript 콜백 📞 콜백함수, 콜백함수 지옥, Promise의 등장, generator를 이용한 promise.then 지옥의 탈출, es8에서의 async/await 등장 이와 같은 흐름을 들어보셨고 콜백에 대한 이야기 또한 많이 접했었습니다. 위의 흐름이 등장하게 된 원인인 콜백 함수에 대해서 알아보려고 합니다. 콜백 함수란 다른 함수에 매개변수로 넘겨준 함수를 말합니다. 아래와 같은 두개의 예시가 있을것 같아요 // 1번 // button.addEventListener('click', function() { console.log(this) // button element }) // 2번 // function sayHi(name) { console.log(`hi ${name}`) } function wrongInput(.. 2022. 4. 19. Javascript Promise, async/await MicroTask queue 동작차이 🖇 Javascript 내에서 callback를 더 효율적으로 사용하기 위해 promise가 등장하였고 promise를 더 효율적으로 사용하기 위해 es8에서 async/await 이 등장하였습니다. promise와 async/await이 브라우저에서 어떻게 구현되는지 동작의 차이를 알게되었고 이를 글로 적어보려 합니다. promise, async/await은 둘다 promise를 return하거나 throw하므로 micro task queue에서 다루어집니다. callback queue에는 3종류가 있습니다. macro task queue, micro task queue, animationFrame 우선순위는 micro task queue > animationFrame > macro task queue 순.. 2022. 4. 15. Javascript Prototype 🤢 프로토타입(prototype)이란 한글로 원래의 형태 또는 전형적인 예라는 뜻을 가지고 있습니다. javascript는 프로토타입 기반의 언어입니다. 그래서 javascript에서 프로토타입 개념을 이해하는 것은 매우 중요합니다. 클래스 기반언어 에서는 클래스를 먼저 선언하고 새로운 객체(인스턴스)를 생성합니다. 하지만 javascript에서는 프로토타입(prototpe)을 원형으로 삼고 이를 이용하여 객체를 생성합니다. var jade = { name: 'jade' } jade.toString() // '[object Object]' function Person(name) { this.name = name } var wade = new Person('wade') wade.name // 'wade' wa.. 2022. 4. 15. React-query 🌱 react-query는 서버의 상태를 다루기에 정말 좋은 라이브러리라고 생각합니다. react-query의 공식 홈페이지에서도 서버의 상태를 위한 라이브러리로 설명되어있습니다. * React Query는 서버 상태 라이브러리입니다. 서버와 클라이언트의 비동기적인 동작을 관리하기에 적합합니다. * Redux, MobX, Zustand, etc 는 클라이언트 상태 라이브러리 입니다. 비동기 데이터를 저장할수는 있지만 React Query에 비해서는 비효율적입니다. 이러한 점을 염두에 두고 React Query는 클라이언트 상태에 위치한 캐시데이터를 관리하기 위한 boiler plate코드와 관련 로직들을 코드 몇 줄 만으로 대체한다는 것입니다! Redux에서 서버의 api요청 응답을 저장해두고 있을때는 아.. 2022. 4. 9. Javascript 실행 컨텍스트(Execution Context) 실행 컨텍스트(Execution Context)는 실행 가능한 코드가 실행되기 위해 필요한 환경을 뜻합니다 (실행할 코드에 제공할 환경정보를 모아놓은 객체) 실행 가능한 코드는 크게 3개의 종류가 있습니다. 전역 코드 함수 코드 eval 코드(eval은 사용하지 않아야 합니다.) 일반적으로 실행이 가능한 코드는 전역코드와 함수코드 입니다. 자바스크립트 엔진은 코드를 실행하기 위하여 여러가지 정보를 알고 있어야 합니다. 변수: 전역변수, 지역변수, 매개변수, 객체의 프로퍼티 함수 선언 변수의 유효범위(scope) this 위의 정보들을 물리적 객체의 형태로서 자바스크립트 엔진에서 관리합니다. 이벤트 루프를 언급할때 javascript engine에는 heap과 call stack이 존재한다고 하였습니다. .. 2022. 4. 3. 이전 1 2 3 4 5 ··· 7 다음
