비동기적인 Ajax 요청

이번 주에는 전에 배웠던 비동기 관련 학습을 보충해야겠다는 생각이 들었습니다.

특히 Ajax 요청은 이후로도 많이 쓸 것 같아서 말이죠. 

 

🚩Ajax 가 무엇인가?

Ajax : Asynchronous Javascript And XML의 약자. 서버와 비동기적으로 데이터를 주고받는 JS 기술.

즉, 데이터를 보내주는 '서버'와 통신하기 위해서 XMLHttpRequest 객체를 쓰는 걸 말합니다. 

 

서버에게 데이터를 요구할 때에는 기본적으로 두 가지 원칙을 지켜야 합니다.

1) 원하는 데이터의 url을 명시하고 2)그 url에게 요청을 해줘야 합니다. (GET/POST)

 

데이터를 요청하는 방법에는 주소창에 url을 입력하거나, form 태그로 버튼을 눌러 요청을 하는 방법이 있습니다. 문제는 이 방법이 모두 요청을 할 때 새로고침이 되기 때문에 발생합니다. 일단 새로고침이 되면 전체 화면이 하얗게 변했다 다시 돌아오는데 이것은 사용자에게 불편감을 줍니다. 이런 과정에 대한 해결책으로, Ajax를 사용해서 페이지 일부만 고칠 수 있도록 비동기적 요청을 할 수 있게 되었습니다. 

즉, Ajax는 새로고침 없이 데이터를 부드럽게 주고받을 수 있도록 하는 중요한 기능입니다. 특히 SNS등에서 댓글 쓰기, 쇼핑몰 상품 더 가져오기 등을 할 경우 자주 쓰입니다. 

 

그렇다면 ajax요청을 어떻게 보내게 될까요? 

우선 정석적으로 then과 catch를 쓰는 방법이 있습니다. 

fetch('원하는url주소')
.then((response) => {
if(!response.ok){
throw new Error('400 아니면 500에러')
}
 return response.json()
 //콜백함수 안의 파라미터가 우리가 수신한 데이터다. 이걸 파싱할 때 json()
}) 
.then((결과)=>{
 console.log(결과)
})
.catch(()=>{
console.log('에러')
//에러를 catch로 잡을 수 있다.
})

 

아니면 아래와 같이, async 와 await 문법을 쓸 수도 있습니다.

async function 함수(){
const response = await fetch('주소');
if(!response ok){
throw new Error('400 아니면 500에러');
}
let result = await response.json();
console.log(result);
}
함수().catch(()=>{
console.log('에러');
});

 

또한 리액트나 뷰에서는 axios를 따로 설치한 뒤에 많이 씁니다.

좀더 코드가 명확하고 짧아진 걸 볼 수 있습니다. 

axios.get('주소')
 .then((result)=> {
  console.log(result.data)
  //성공하면 이렇게 콘솔창에 출력
  }).catch(()=> {
    console.log('에러')
    //에러가 났을 때
})

 

🚩CORS 관련 에러가 발생할 경우?

ajax 쓸 때 가장 많이 보게 될 에러가 어쩌면 CORS 관련된 에러일 것입니다. 다른 출처에서 접근하지 못하도록 막는 CORS 관련 에러는 기본적으로 보안을 위한 정책이지만, 개발할 때는 번거롭습니다. CORS 에러를 해결하는 방법으로는 여러가지가 있지만, 헤더에 Access-Control-Allow-Origin: "*"을 추가하여 접근을 허용하면 모든 url에서 ajax 요청으로 데이터를 가져다 쓸 수 있게 됩니다. 

 

 

🚩Ajax 요청이 느릴 경우?

한편, Ajax 요청이 즉각적이지 않을 경우를 대비하여 로딩 화면의 구현도 해주어야 합니다.

외부 API에 접속하는 것이 원활하지 않을 수 있으니까요. 그럴 때 로딩 없이 방치되는 사용자들은 무언가 문제가 있다고 판단하고 불편감을 느끼게 됩니다. 적절한 로딩 표시의 삽입은 사용자의 불편을 해소하고 기다릴 수 있게 도와줍니다.

 

이때 만든 로딩 화면을 <LoadingIndicater />컴포넌트로 구현했다고 쳤을 때, 다음과 같이 상태를 처리할 수 있습니다.

const [isLoading, setIsLoading] = useState(true);
return {isLoading ? <LoadingIndicator /> : <div>로딩 완료 화면</div>}

 

 

참고: 

https://developer.mozilla.org/ko/docs/Web/Guide/AJAX/Getting_Started