백앤드로부터 데이터를 받아오려면 api를 호출하고 데이터를 응답 받아야 하는데요. 이 때 자바스크립트 Web API fetch() 함수를 쓰거나 axios 라이브러리를 사용할 수 있습니다. 참고로 Web API는 클라이언트 측에서 사용할 수 있는 자바스크립트 내장함수라고 생각하시면 됩니다. 실무에서는 여러 이유로 axios를 많이 사용하지만, fetch 함수로도 웬만한 기능을 충분히 구현할 수 있습니다.

NOTE

프론트엔드 개발을 하다보면 UI 구성에 필요한 데이터들이 생길 수 있습니다. 데이터가 정적일 경우 UI에 필요한 데이터를 서버에서 가져오지 않고 프론트 단에서 직접 구성합니다. 서버에서 받아야 하는 값이라도 백엔드 API가 미처 완성되지 않았을 수 있습니다. 이 때도 서버에서 받을 값을 예상해서 UI 개발을 진행할 수 있습니다. 이번 시간에는 UI를 표시하기 위해 필요한 상수데이터, 그리고 api 통신을 모방하기 위한 mock data를 어떻게 만들고 활용하는지 알아보겠습니다.

Video