나아가는 길에 발자국을 찍어보자

개발을 진행하다가 setTimeout을 사용할 일이 생겼다. 하나의 서비스가 돌아가고 결과를 표시하는 과정이었는데, 데이터 자동 추출 프로그램인 외부 프로그램을 돌려서 응답을 기다려야 했기에(최대 예상 시간 2분) 최대 2분동안 데이터를 받아올 때까지 기다려야 했다. 그전에 받아오면 바로 표시한다. 따라서 javascript내에 setTimeout을 사용해 지연과 요청을 반복하여 2분동안 데이터를 받아올 수있는지 확인해보기로했다. 아이디어까지는 문제가 되지 않았다. 하지만 구현에서 분명 비동기임을 인식하고 지연과 axios요청에 async과 await를 제대로 붙였음에도 동기적으로 실행되지 않더라..... setTime에 await가 제대로 기능하지 않는다. 처음 시도한 코드 if(type === 'au..

async && await 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법으로 기존의 비동기 처리 방식이 콜백함수와 프로미스의 단점을 보안하고 개발자가 읽기 좋은 코드를 작성할 수 있게해준다. 기본 문법 async function 함수명() { await 비동기_처리_메서드_명(); } 함수 앞에 async라는 예약어를 선언. 함수의 내부 로직중 HTTP통신을 하는 비동기 처리 코드 앞에 await를 붙인다. (주의) 비동기 처리 메서드가 꼭 프로미스 객체를 반환해야 await가 의도한 대로 동작한다. await 의 대상 : 비동기 처리 코드인 Axios등 프로미스를 반환 하는 API 호출 함수 예외처리 try , catch를 사용한다. async function 함수명() { try { va..

비동기적 JavaScript 프론트에서는 javascript기반 vue.js를 사용해서 개발하고 있는데, 중간에 axios를 사용해 분명히 값을 받아왔음에도 그값을 저장한 변수는 undefined라 자꾸 오류가 발생하는 일이 있었다. console.log() 로 찍어보면 분명 값이 존재하는데 값을 가공하려 사용할때는 undefined라 정말 깊은 빡침을 느꼈었다. 그러다 이것이 모두 자바스크립트의 비동기적 특징 때문이라는 것을 스스로 알게됐을때 정말 엄청난 충격이었다. 이러한 특징때문에 골머리를 앓았던 적은 비단 이번 인턴업무에서만이 아니었다. 저번학기에 진행한 오늘어때라는 프로젝트에서도 같은 일이 일어나 완벽한 해결을 못해 절댓값을 집어넣어 넘어갔었는데, 그당시에는 이유조차 몰라 정말 힘들었었다.(물어..