📘 Constant Data, Mock Data

Preface

📌 개발 공부 1개월 차인 to-be 개발자의 자습 blog🙂ﾠAug 23 ~ 27, 2021

현재 상태
data라는 것을 다루게(?) 되었다.
잘 할 수 있을까...

➕ afterthought

commerce 쪽을 개발하는 실무자에게 들어보니 단순히 정적인 data인지 동적인 data인지에 따라서가 아닌, 안정적인 운영을 고려해서 data를 BE가 관리할지, FE가 관리할지 정해야 한다고 한다. 당장은 FE가 관리하는 게 편해 보이고 합리적인 것 같아도 생각보다 많은 경우에 아무리 단순한 data여도 BE로부터 받는 게 안정적일 때가 많다고 한다. 구체적인 사항은 실무에 접해봐야 알 수 있을 듯 하다.

---

---

FE 개발 중 UI 구성에 필요한 data가 필요한데, 정적 data는 data를 서버에서 가져오지 않고 FE단에서 직접 구성한다. server에서 받아야 하는 값이라도 BE API가 미처 완성되지 않았을 수 있다. 이 때 server에서 받을 값을 예상해서 mock data를 제작해 UI 개발을 진행할 수 있다.

Goals

1. `Array.map()` 함수를 통한 컴포넌트 재사용
2. mock data를 만들어 BE API 미완성 상태에서도 차질없이 개발
3. `componentDidMount` method에서 `fetch` 함수로 mock data 호출
4. 상수 data를 `javascript` 로 만드는 경우와 mock data를 `JSON`으로 만드는 경우를 구분

React로 사고하기

---

Constant Data

• 변하지 않는 data, 정적 data
• UI 구성에 필요하지만 동적으로 변하지 않아서 BE API 등을 통해 가져올 필요가 없는 정적인 data를 상수 data로 만들어 UI를 효율적으로 구성
  
  

Why?

• 반복되는 UI를 hard coding으로 일일이 만들되면, code가 길어져서 가독성에 좋지 않고, 수정이 필요할 때 해당하는 부분을 찾기 힘들어 유지・보수가 힘들어질 수 있음
• 이런 반복되는 UI를 상수 data + Array.map() 함수의 조합을 이용해서 간결하게 표현
• 추후, 수정해야 할 때 상수 data에서 해당하는 부분의 내용만 변경
  
  

How?

• 상수 데이터는 별도의 JS 파일로 분리하거나, 필요한 파일 내부에서 선언해서 사용 (단, 내부에서 선언할 땐 component 다음에 선언
• 대문자 + snake case 를 이용해서 변수의 이름을 짓는 게 convention
• 별도의 JS파일로 분리할 경우 export / import를 통해서 필요한 파일에서 사용
• JS파일은 data를 import 하는 component 바로 옆으로 접근하기 쉬운 곳에 생성

---

Mock Data

• 가짜 data, 샘플 data
• 실제 API 에서 받아온 데이터가 아닌 FE 개발자가 필요에 의해 샘플로 만들어 본 데이터
  
  

Why?

• BE API 완성 전에 data를 호출하는 상황을 대비
• data에 맞게 UI가 의도한 대로 구현되는지 사전 확인

※ BE API가 보내는 response의 형태, key value 값 사전 확인 필요, 시뮬레이션을 통한 최적화

How?

• 동적 data를 state로 관리하면서 state 변화를 통해 UI도 변화
• http 통신을 이용해 BE API를 요청, 응답을 가져오고 그 응답을 댓글 state의 초기 값으로 사용하여 사용자가 페이지에 진입할 때 최신의 댓글 정보를 가져와 UI에 노출
• BE API가 준비되기 전이라면 mock data를 만들어 BE API를 모방
• mock data는 BE API를 모방하기 때문에 실제 BE API 응답 값의 형태인 json file로 만들어야 함