Front-end4 [JavaScript] Promise { <pending> } 문제 해결 (3) - async & await 지난 글에서는 비동기 처리와 콜백 함수에 이어 Promise에 대해 살펴봤습니다. 해당 개념들이 익숙하지 않고 이번 글로 처음 들어오신 분들은 '비동기 처리와 콜백 함수' 및 'Promise' 글을 참고하는 것을 추천드립니다. 이번 글에서는 Javascript의 비동기 처리 문법 중 가장 최근에 나온 async & await에 대해 작성하고자 합니다. 제가 caver-js를 공부하다가 Promise pending 문제를 직면하였고, 해당 문제를 해결하기 위한 핵심이 async & await이므로, 이번 글에서는 caver-js를 바탕으로 설명드릴 것입니다. caver-js에 대해서도 알고 싶으신 분은 해당 글을 참고해 주시길 바랍니다. 다음 코드는 제가 비동기 처리, Promise, async & awa.. 2022. 12. 21. [JavaScript] Promise { <pending> } 문제 해결 (2) - Promise 지난 글에서는 Promise 관련 문제에 어떻게 직면하게 되었는지, 그리고 Promise를 알기 위한 개념인 비동기 처리와 콜백 함수에 대해 살펴봤습니다. 비동기 처리와 콜백 함수에 대해 처음 접하여 간략하게 알고 싶으신 분은 해당 링크(https://dslyh01.tistory.com/26)를 참고해주시면 되겠습니다. 이번 글에서는 Promise에 대해 좀 더 상세하게 살펴보고자 합니다. 지난 글에서 Promise 관련해서는 'Javascript의 비동기 처리에 사용되는 객체'를 의미한다 정도까지 설명하였습니다. Javascript에서는 비동기 처리 방식의 이슈를 해결하기 위해 콜백 함수를 사용하였지만, 이 방식은 콜백 지옥에 쉽게 빠질 수 있다는 또 다른 문제점을 가집니다. 이러한 콜백 함수의 단점을.. 2022. 12. 19. [JavaScript] Promise { <pending> } 문제 해결 (1) - 비동기 처리 및 콜백 함수 이번 글은 사이드 프로젝트를 진행하다가 엄청 헤맸던 부분인 Javascript의 Promise에 관한 글입니다. 우선 헤매게 된 과정부터 공유드리고자 합니다. 아래의 caver-js 코드는 앞서 작성한 'caver-js 설치 및 KAS API 호출' 글(https://dslyh01.tistory.com/25)에서 설명드린 코드와 거의 동일합니다. (차이점을 발견하셨으면 해당 차이점이 본 글에서 발생한 문제점의 해결 방법입니다.) caver.klay.getBlockNumber() 함수는 현재의 블록 넘버를 가져오는 코드입니다. 하지만 결과를 살펴보면 현재의 블록 넘버가 결과로 출력된 것이 아니라, 'Promise { }' 이라는 결과가 나온 것을 볼 수 있습니다. caver.klay.getBlockNumb.. 2022. 12. 19. [React] React 설치 / Create React App 프로젝트 생성 React는 Facebook에서 제공하는 JavaScript 라이브러리 중의 하나로 사용자 인터페이스를 만들기 위해 주로 사용됩니다. HTML, CSS, JavaScript를 통해서도 충분히 웹페이지를 만드는 것이 가능하지만, React를 활용하면 상호작용이 가능한 동적인 UI(User-Interface)를 만드는 것이 수월하기 때문에 많은 사람들이 활용하고 있습니다. React는 HTML에 다음과 같은 코드를 추가하는 것을 통해 간단하게 실행이 가능하기는 합니다. 하지만 제대로 된 React 기반의 애플리케이션 개발을 수행하기 위해서는 Webpack, Babel 등 습득해야하는 기술들이 많기 때문에, 위와 같은 방법으로 진행하게 된다면 막히는 부분이 많을 수 있습니다. 이러한 어려움에 막히지 않고 Re.. 2022. 10. 25. 이전 1 다음
