JS 비동기와 데이터

3주차 미션에서는 사용자의 입력을 바탕으로 내가 가진 데이터를 직접 바꾸고, 그 변화가 DOM 추가/삭제로 화면에 반영되는 흐름을 만들었습니다.

이번 주에는 여기서 한 단계 더 나아가, 데이터가 ‘사용자 입력’만이 아니라 ‘외부 서버’에서 비동기적으로 도착하는 상황을 다룹니다. 즉, 버튼을 눌렀을 때 즉시 결과가 나오는 것이 아니라, 네트워크 요청을 보내고 응답을 기다린 뒤 그 결과로 화면을 갱신하는 구조를 만들게 됩니다.

이를 위해 fetch로 외부 API에서 아기 사자 데이터를 불러오고, 받아온 응답을 우리가 사용하는 객체의 형태로 변환해 기존 데이터와 합칩니다. 이를 바탕으로 결과가 화면에 반영되는 렌더링 흐름을 완성해 볼 겁니다.

이 과정에서 JavaScript의 핵심을 이루는 Promise, async/await의 필요성과 비동기 코드의 실행 순서를 자연스럽게 체감하게 됩니다. 또한 받아온 데이터를 그대로 보여주는 데서 끝나지 않고, 필요한 조건에 따라 골라 보여주거나 정리하는 과정도 자연스럽게 경험하게 됩니다.

미션을 하다 보면 ‘데이터를 어떻게 UI와 결합하고, 그 변화를 반영하게 만들 것인지’에 대해 끊임없이 고민하게 될 겁니다. 기능이 늘어나면서 코드가 복잡해졌음을 느낄 때, 그 지점에서 어떤 정리가 필요한지에 대해 가볍게 고민해 보시길 바랍니다.