React - mock data 를 활용한 페이지 구현 (feat.FE & BE 의사소통의 중요성)
-
2차 프로젝트
돌하룻밤
에서숙소 리스트 페이지
를 담당하게 됨 -
숙소 정보가 적혀있는 리스트 하나하나가 계속 반복됨으로 해당 내용을 담은 컴포넌트를 생성하고, 숙소 정보들은 추후 백엔드로 부터 받을 data 이기 때문에 mock data 를 만들어 페이지를 구현하기로 함
-
구현하기에 앞서 처음부터 mock data 의 key, value 값을 백엔드와 같이 정하는 것이 좋을 것이라고 판단
-
sprint meeting 전 mock data 예시를 만들고 이를 notion 페이지에 공유하여 회의 때 팀원들과 함께 key, value 값을 정함.
-
정해진 key, value 값으로 프론트와 백엔드가 작업하니 작업 속도도 수월했고, 통신도 한번에 성공할 수 있었음!
-
프론트와 백엔드 간의 의사소통의 중요성을 다시금 깨닫게 되었음. 🥰
// Staylist.js
const Staylist = () => {
const [placeList, setPlaceList] = useState([]);
useEffect(() => {
fetch('/data/PlaceList.json')
.then(res => res.json())
.then(data => setPlaceList(data));
...
return (
<StaylistContainer>
<Main>
<StayPlace>
{placeList.map(
({
stayId,
placeImages,
description,
placeName,
adult,
kid,
pet,
bed,
bedRoom,
bathRoom,
stayService,
price,
}) => {
return (
<Placelist
key={stayId}
placelist={{
stayId,
placeImages,
description,
placeName,
adult,
kid,
pet,
bed,
bedRoom,
bathRoom,
stayService,
price,
}}
/>
);
}
)}
</StayPlace>
Author And Source
이 문제에 관하여(React - mock data 를 활용한 페이지 구현 (feat.FE & BE 의사소통의 중요성)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@bboyooning/React-2차-프로젝트-돌하룻밤저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)