🌐 1. JavaScript의 비동기 처리 이해하기JavaScript는 싱글 스레드로 동작해요. 즉, 한 번에 하나의 작업만 처리할 수 있다는 뜻이죠. 그런데도 여러 비동기 작업을 동시에 처리하는 것처럼 보이는 이유는 JavaScript의 이벤트 루프(Event Loop) 덕분이에요. 자, 이 과정이 어떻게 이루어지는지 차근차근 설명해보겠습니다. 🎯 JavaScript는 싱글 스레드인데 비동기 작업을 어떻게 처리할까요?JavaScript는 비동기 작업을 처리하기 위해 이벤트 루프와 태스크 큐라는 개념을 사용합니다.비동기 함수 호출: 비동기 함수(예: setTimeout, fetch, async/await)가 호출되면, 그 작업은 브라우저나 Node.js의 백그라운드에서 처리돼고, 이때 JavaScri..
axios
개발환경Nuxt.js 2Vue.js 2Spring Boot 3요청사항 ❓API에 권한을 입히면서 특정 API 사용 시 alert를 노출시키고 페이지 이동은 원하지 않는다는 요청사항이 있어 이를 구현하였습니다.개발 내용 💭Back End에서 권한을 체크하는 AOP를 하나 만들어 체크를 원하는 API에 Annotation을 넣어 Exception처리를 하도록 구현하였습니다.Front End에서 해당 Error를 보고 권한에 대한 Error일 경우 alert를 발생시켜야 합니다.문제발생 ❗공통적으로 처리하기위해 axiox.onError({})로직에 처리를 하려다 보니 무조건 적으로 Error 페이지로 이동하는 현상 발생이는 Nuxt 설정으로 헤더 정보를 보고 Error 발생 시 error.vue 페이지로 r..
자바스크립트를 사용하면서 가장 많이 신경써야하는 부분이 바로 비동기 통신 부분이다. 이번에 비동기 통신 함수를 콜백함수로 호출할 수 있도록 수정하는 방법을 알게되어 정리해 둔다. 호출 할 함수 - 아래의 코드가 콜백함수로 구현한 비동기 통신 함수이다. return을 할떄에 Promise 객체를 생성해준다. - resolve는 결과가 잘 실행됐을때, reject는 error가 났을때에 실행된다. const getList = function("api"){ let url = api; return new Promise(function(resolve, reject){ sendAxios(apt, 'get').then(function(response){ resolve(response.data); }).catch(fu..
axios async getCategoryList(url, conceptScheme){ var responsData = await this.$axios.$get(url+ '?conceptScheme=' +conceptScheme) this.catgryList = responsData.list } fetch - fetch는 json으로 받아오지 않기 때문에 .then을 이용에 reponse값을 json형식으로 변환해 주어야 한다. async getCategoryList(url, conceptScheme){ var option = { method: 'GET', } await fetch(url+ '?conceptScheme=' +conceptScheme) .then(result => result.json())..
