[9월 자율기사] 자바스크립트 fetch 복습 한번 하고 가실게요~

햅삐 추석~!~!

여러분, 모두 해피 추석입니다!!

다들 추석 연휴 잘 보내고 계신가요?!

이번엔 연휴가 길어서 아주 만족스럽네요 하하 🐣

짝짝

 

추석 연휴 기간,, 제가 가져온 주제는!

---

fetch API로 배우는 AJAX 입니다.

---

잠깐만요 아직 뒤로가기 안누르실게요.

 

SSAFY의 지난 프론트엔드 주간에 ajax에 대해 잠깐 배웠었는데

너무 슉 지나가버려서 제대로 이해하지 못한 분들도 계실 것 같아요.

나야 나~ 나야 나~

 

저 또한 '콜백지옥' 이런 얘기들만 들어보고 모른 채 넘어갔지만

이번 관통 프로젝트에서 비동기 처리의 필요성을 느끼게 되어

복습을 하게 되었습니다.

 

그런데 생각보다 어렵지 않더라구요!

 

자 그럼, 오늘은 fetch API를 통해 텍스트 파일을 받아오는 법을 알아보겠습니다.

지금 같이 공부해보시죠!!

 

---

 

1. 대체 AJAX가 뭔가요?

fetch API 에 대해 공부하기 전에 AJAX가 무엇인지 알아야 합니다.

AJAX는 Asynchronous Javascript And XML 의 약자로,

웹 페이지의 이동 없이 필요한 데이터만 전송하는 기술입니다.

AJAX를 이용하면 빠르게 동작하는 동적인 웹 페이지를 만들 수 있겠죠?

 

 

2. AJAX는 비동기인가요?

네, 사실입니다. 

일반적인 경우 데이터 처리는 순차적으로 진행됩니다. 

예를 들자면 1번 작업이 끝나면 2번 작업이 실행되고, 2번작업이 끝나면 3번 작업이 실행된다는 것이죠.

 

하지만, AJAX는 그렇지 않습니다. 

1번 작업이 끝날 때까지 기다려주지 않고 2번, 3번 작업으로 넘어가버리는 비순차적인 처리방식을 가지고 있습니다.

 

이런 방식을 비동기 방식이라고 합니다.

 

 

2. 이제 Fetch API를 사용해 텍스트 파일을 불러와봅시다!

비동기 통신에는 여러가지 방법들이 있지만, 오늘은 Fetch API를 이용해 데이터를 가져와보도록 할게요.

 

먼저, 불러올 텍스트 파일을 만들어줍니다.

전 VSCode에서 07ajax 폴더 > hi.txt 라는 파일을 만든 후 다음과 같이 입력했어요.

폴더와 파일명은 자유~

같은 폴더에 html 파일 생성 후 아래의 코드들을 <script> 내에 작성해주면 됩니다.

 

먼저 전체 코드는 다음과 같습니다.

fetch("hi.txt").then(function (response) {
	response.text().then(function (text) {
		alert(text);
    });
});

이제 하나씩 살펴볼게요!

let promise = fetch("hi.txt");

 

fetch라는 함수를 호출하면 하나의 결과물을 받을 수 있는데, 이걸 promise 라고 합니다.

promise 객체는 fetch를 실행했을 때 그 결과에 대한 상태를 반환해주는 약속된 객체입니다.

promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.  (mozila)

아래의 세 가지 상태를 기억해주세요!

1. pending : 수행중 (실행 상태)

2. fulfilled : 성공 ㅎ

3. rejected : 실패 ㅠ

 

 

그럼 결과를 확인해볼까요?

fulfilled이니 성공~

 

그런데 만약 파일을 읽어오는데 시간이 오래 걸린다면 어떻게 해야 할까요?

우린 그동안 기다리고 있어야 합니다. 그래서 사용하는 것이 .then 입니다.

 

'내가 이 파일을 읽어오는데 오래 걸릴 수 있으니,

너가 .then 안에다가 실행 결과를 받을 수 있는 함수만 적어준다면 실행이 완료되는 대로

then 안의 함수에 실행결과를 넣어줄게!' 라는 뜻이죠.

 

then 안의 함수는 호출했을 때에 그 결과를 돌려받는다는 의미로 콜백함수라고 합니다.

그리고 콜백 함수의 첫번째 매개변수에 상태를 저장해두도록 약속되어 있고, response가 바로 그것입니다.

 

      const promise = fetch("hi.txt").then(function (response) {
        console.log(response);
      });

response를 콘솔에 찍어볼까요?

response는 자바스크립트의 객체임을 알 수 있어요.

Response는 자바스크립트의 객체로 성공과 실패에 대한 중요한 정보들을 담고 있고, status 에 숫자가 찍혀 있는데

200은 성공했다는 의미입니다.

아래쪽의 함수들에서는 response가 text()와 json()이라는 함수를 가지고 있다는 걸 확인하면 됩니다.

 

      fetch("hi.txt").then(function (response) {
        response.text().then(function (text) {
          alert(text);
        });
      });

 

response.text()는 받아온 결과를 문자로 변형해주는 함수이며

response.json()은 받아온 결과를 json 파일로 변형해주는 함수입니다.

 

그리고 이렇게 문자 또는 json으로 변형된 것을 then 이라는 함수에 집어 넣어서

안쪽에 있는 익명함수로 받아주는 것이 됩니다.

그렇게 되면 위의 코드처럼 hi.txt 안에 있는 문자를 text 라는 변수를 통해서 받아줄 수 있게 됩니다.

 

실행 결과는 다음과 같습니다.

1학기 벌써 반이나 남았어요(?) 파이팅 ㅋㅌ

 

3.  이번엔 JSON 형식으로 받아봅시다.

앞의 예제에서는 정제되지 않은 문자를 읽어왔지만, 그렇게 되면 중요한 값만 골라서 가져오기는 어렵겠죠?

따라서 문서 안에서 데이터를 사용하기 쉽게 객체 형식인 JSON 이라는 형식으로 주고받도록 되어 있습니다.

 

그럼 이번엔 json 파일을 만들고 객체 형식으로 받아보겠습니다.

fetch("hi.json").then(function (response) {
    response.json().then(function (data) {
         console.log(data.id);
         console.log(data.name);
    });
});

 

이렇게 json으로만 바꿔주면 됩니다.

data에는 json 파일이 들어있을테니 key 값으로 접근하여 데이터를 불러올 수 있습니다.

 

4. 가독성 좋은 코드 Ver.

fetch("hi.json")
    .then(function (response) {
      return response.json();
    })
    .then(function (data) {
      return data.id;
    })
    .then(function (data) {
      console.log(data);
});

사실 저는 가독성이 더 좋은지는 모르겠네요...ㅋㅋㅋㅋㅋ

 

5. API를 가져와서 화면에 뿌려주는 예제

다음 코드는 영화 정보 API를 가져와 화면에 뿌려주는 예제입니다. 내용이 너무 길어질 것 같아 코드에 대한 설명은 생략할게요!

읽어보시고 적용하시면 좋을 것 같습미다 ㅎㅎ

    <script>
      ajax();
      function ajax() {
        fetch("https://yts.mx/api/v2/list_movies.json?sort_by=year&")
          .then(function (response) {
            if (response.status != 200) {
              alert("서버와 통신에 실패했습니다.");
            } else {
              return response.json();
            }
          })
          .then(function (jsonData) {
            const data = jsonData.data.movies;
            const movieList = document.querySelector(".movieList");
            let tag = "";

            for (let i = 0; i < data.length; i++) {
              var title = data[i].title;
              var year = data[i].year;
              var img = data[i].medium_cover_image;
              var summary = data[i].summary;
              var genres = data[i].genres;

              tag += '<div class="movie">';
              tag += '<img src="' + img + '" alt="image" />';
              tag += '<div class="inner">';
              tag += '<h3 class="title">' + title + "</h3>";
              tag += '<h3 class="year">' + year + "</h3>";
              tag += '<ul class="genres">';
              for (const k of genres) {
                tag += "<li>" + genres[k] + "</li>";
              }
              tag += "</ul>";
              tag += '<p class="summary">' + summary + "</p>";
              tag += "</div>";
              tag += "</div>;";
            }

            movieList.innerHTML = tag;
          });
      }
    </script>

css를 대강 입히면 이런식으로 뜬다고 합니다 ㅎㅎ

 

5. 참고 자료

Coding 404님의 자바스크립트 유튜브 강의 및 Mozila와 TCP School 의 내용을 참고하였습니다.

 

---

오늘은 fetch API를 이용해 텍스트 및 JSON 파일을 가져오는 법에 대해 알아보았습니다.

처음엔 되게 어렵게만 생각했는데, 직접 해보니 생각보다 할만해서 뭐지? 싶었네요 ㅋㅋㅋ

오늘은 적다보니 내용이 꽤 길어졌네요,,

이해하시는데 도움이 되었으면 좋겠네요 ㅎㅎ

 

피드백은 언제든지 환영입니다!!

티스토리 좋아요, 구독하기, 댓글, 인스타 팔로우도 다 환영,,🐥

 

오늘도 읽어주셔서 감사합니다 ㅎㅎㅎ

남은 연휴 즐겁게 보내시고 수요일에 싸피에서 만나요~~~