러닝패스
Data fetching 그리고 rendering
멤버십
백앤드로부터 데이터를 받아오려면 api를 호출하고 데이터를 응답 받아야 하는데요. 이 때 자바스크립트 Web API fetch() 함수를 쓰거나 axios 라이브러리를 사용할 수 있습니다. 참고로 Web API는 클라이언트 측에서 사용할 수 있는 자바스크립트 내장함수라고 생각하시면 됩니다. 실무에서는 여러 이유로 axios를 많이 사용하지만, fetch 함수로도 웬만한 기능을 충분히 구현할 수 있습니다.
큐레이터의 노트 소개
프론트엔드 개발을 하다보면 UI 구성에 필요한 데이터들이 생길 수 있습니다.
데이터가 정적일 경우 UI에 필요한 데이터를 서버에서 가져오지 않고 프론트 단에서 직접 구성합니다.
서버에서 받아야 하는 값이라도 백엔드 API가 미처 완성되지 않았을 수 있습니다.
이 때도 서버에서 받을 값을 예상해서 UI 개발을 진행할 수 있습니다.
이번 시간에는 UI를 표시하기 위해 필요한 상수데이터, 그리고 api 통신을 모방하기 위한 mock data를 어떻게 만들고 활용하는지 알아보겠습니다.
테크주니어 님의 학습노트 외 1개
학습노트 제목: React JS #9 더미 데이터 구현, map() 반복문 - 초보자를 위한 리액트 강좌
Video
React JS #9 더미 데이터 구현, map() 반복문 - 초보자를 위한 리액트 강좌
출처: https://youtu.be/89jyGFktI40
#전체 #개발자 #프론트엔드 #자바스크립트 #javascript #js #es6 #강좌 #tutorial #중급 #intermediate #react #reactjs #리액트 #json-server #초보 #초보자 #프론트엔드 #백엔드 #rest api #create-react-app #설치 #npm #node #component #jsx #컴포넌트 #이벤트 #event #onClick #클릭 #hook #리액트훅 #state #useState #리액트 훅 #props #map #반복 #더미 #dummy #data #데이터
이미 멤버십 회원이라면 로그인하세요.
이 러닝패스가 어땠나요?
(내 보관함에서 다시 볼 수 있어요)
👋 다양한 인사이트를
읽어보고 계신가요?
나만의 학습 기록을 남기고,
관리하고 싶다면!
다양한 전문가의 멤버십 전용
콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고,
수익을 올리고 싶다면!
3초 회원가입/로그인으로,
런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기