지금부터는 프런트엔드, 즉 HTML의 script 태그 내에서 사용하게 되는 기능들에 대해서 몇 가지 살펴보도록 하겠습니다. 물론 지금 다루는 내용들이 다소 심화된 내용이므로 현 단계에서 즉시 이해가 되지 않을 가능성이 많습니다. 그러므로 차근차근 읽어나간 다음, 반복해서 살펴보시기 바랍니다.
우선 AJAX에 대해서 먼저 살펴보겠습니다. AJAX(Asynchronous Javascript And XML)는 비동기적 서비스 개발 시 사용되는 기법입니다. 간단히 정의만 얘기하자면 이는 페이지의 이동 없이 서버에 요청을 보내고 받는 기술을 의미합니다. 웹 사이트에서 페이지의 전환 없이 새로운 데이터를 불러오는 경우, 대부분 AJAX를 사용하고 있다고 보시면 됩니다.
일단 이 AJAX요청은 jQuery, axios 같은 라이브러리를 이용해서 보내게 됩니다(브라우저 기본 XMLHttpRequest, fetch 객체의 경우 서버 사용이 불가하고 복잡함). 여기서는 axios를 기준으로 설명하겠습니다.
우선 HTML 파일을 하나 생성해서 다음과 같이 설정해 보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.get('https://www.zerocho.com/api/get')
.then( (result) => {
console.log(result);
console.log(result.data);
})
.catch( (error) => {
console.error(error);
});
</script>
</head>
<body>
</body>
</html>
우선 axios.get 내부에도 new Promise가 있습니다. 그래서 then과 catch를 사용할 수 있죠. result.data에는 서버로부터 보내온 데이터가 들어있습니다. Console탭에서 확인이 가능합니다.
* 일단 여기서 프로미스에 대한 이해와 더불어 async/await까지 내용이 이어지므로, 프로미스에 대한 이해가 아직 부족하다면 다시 학습하고 오시기 바랍니다.
'Programming > Node.js' 카테고리의 다른 글
| 3. Front-end Javascript (2) - FormData (0) | 2024.03.08 |
|---|---|
| 3. Front-end Javascript (1) - AJAX [2/2] (0) | 2024.03.07 |
| 2. Javascript ES2015 (9) - 널 병합/옵셔널 체이닝 [2/2] (6) | 2024.03.05 |
| 2. Javascript ES2015 (9) - 널 병합/옵셔널 체이닝 [1/2] (0) | 2024.03.04 |
| 2. Javascript ES2015 (8) - Map/Set (0) | 2024.03.03 |
