Dr.Mlem Blog

Q1.useEffect(()=> { // Ajax 처리를 위한 비동기 구조. Hook에 연결되는 함수는 async를 직접 적용할 수 없기에, 즉시실행함수로 감싸준다. (async() => { // (async()=> {비동기 작업 처리할 내용...})() --> 이렇게 즉시실행함수로 만들어서 useEffect의 리턴값에 넣어주면, async를 적용할 수 있다. let data=null; setLoading(true); // 로딩 상태임을 표시 try{ data=await axiosHelper.get("/titanic"); console.log(data); ..

AJAX 자체가 비동기 연산 과정을 거치기 때문에 promise객체를 사용하거나 async-await 구조로 코드를 짜는거야?   네, 맞습니다. AJAX (Asynchronous JavaScript and XML)는 그 이름에서 알 수 있듯이 비동기적으로 작동합니다.AJAX의 비동기 작동 방식:AJAX 요청은 웹 페이지의 다른 부분 실행을 막지 않고 백그라운드에서 서버와 통신합니다.요청이 완료되면, 서버로부터 응답을 받아 처리하는 콜백 함수를 실행합니다.이러한 비동기적인 특성 때문에, AJAX 요청 결과를 기다리고 처리하는 과정을 효율적으로 관리하기 위해 Promise나 async/await 구조를 사용합니다.Promise와 async/await의 역할:Promise: 비동기 작업의 결과를 나타내는 객..

Q. AJAX 자체가 비동기 연산 과정을 거치기 때문에 promise객체를 사용하거나 async-await 구조로 코드를 짜는거야?A. 네, 맞습니다! AJAX 자체가 비동기적인 연산을 처리하는 방식이기 때문에 Promise 객체를 사용하거나 async-await 구조로 코드를 작성하는 것이 필요합니다.왜 AJAX가 비동기적이고, 왜 Promise 또는 async-await을 사용하는가?AJAX의 비동기적 특성:AJAX(Asynchronous JavaScript and XML)는 클라이언트 측에서 서버와 비동기적으로 데이터를 주고받기 위한 기술입니다. 이 비동기적인 특성 덕분에, 브라우저는 서버로부터 응답을 기다리는 동안 다른 작업(예: 사용자 인터페이스의 업데이트, 사용자 입력 처리 등)을 계속 수행할..

/* Async Await 방식의 Ajax 요청(권장) */        document.querySelector("#btn2").addEventListener("click", async e=>{            e.preventDefault();            console.log("로딩중...");            // 요청(접속)할 대상 페이지 주소 -> 이 파일의 소스코드를 읽어온다.            const url = "http://localhost:3001/hello.html";            // 결과를 저장할 변수            let response = null;            try{                response = await axios...

promise 객체를 반환하는 함수를 async-await 구조로 바꾸려면 무엇을 해야해?  Promise 객체를 반환하는 함수를 async-await 구조로 바꾸려면 다음과 같은 단계를 따르면 됩니다.1. 함수에 async 키워드 추가함수 선언 앞에 async 키워드를 추가하여 비동기 함수임을 명시합니다. 이렇게 하면 함수 내에서 await 키워드를 사용할 수 있게 됩니다.예시:JavaScriptasync function fetchData() { // ... (Promise를 반환하는 로직)}Use code with caution. 2. Promise 반환 부분을 await로 감싸기Promise를 반환하는 부분 앞에 await 키워드를 추가합니다. 이렇게 하면 Promise가 해결(resolve)되거..