Mock Data 활용법

데이터 호출하기 fetch 함수

https://selonjulie.tistory.com/85

 

JSON 

• 클라이언트-서버 간의 HTTP통신을 위한 텍스트 데이터 포멧
  • Javascript에서 객체를 표현하는 방법 (string으로 변환해줌)
  • Javascript에서 객체를 문자열string형태로 표현하기 위해서 만들어져있는 파일 형식
    • Javascript에서 객체는 문자열이 아님, 그냥 객체임
  • 문자열로 만드는 이유?
    • 외부(소프트웨어-소프트웨어)랑 통신을 하기위해서는 서로 알아들을 수 있는 언어로 통신하기위해 사용
    • 모든 소프트웨어에서 문자열string은 이해가 가능
• JSON은 자바스크립트의 객체 리터럴과 유사하게 키와 값으로 구성된 순수한 텍스트

상수 데이터 (진짜 사용하는 데이터)

• 자바스크립트로 정의하는 데이터
• 반복되는 UI는 Array.map()으로 표현
• 여러 객체를 넣으면 각 객체마다 key값은 동일해야한다
• 형태 convention: snake표기, 모두 대문자
  • FOOTER_DATA

const FOOTER_DATA = ["개인정보이용동의서","서비스이용동의서","주식회사"]

function App() {
 return (
  <div>
   {FOOTER_DATA.map((data) => <span>{data}</span>)}
   //[<span>개인정보이용동의서</span>, <span>서비스이용동의서</span>...]
  </div>
  );
  }
  
  export dafault App;

 

Mock data (가짜 데이터)

• 프론트 엔드 개발자가 필요에 의해 샘플로 만든 데이터
• JSON에서 key값은 항상 string, value값은 원형의 타입
• 마지막 객체에 ,를 넣으면 안됨, 객체끼리 연결할때는 , 삽입
• 호출
  • API주소로 생각하고 http요청을 통해서 API 요청을 보내고 응답 받을 수 있음

function CommentList() {
 const [commentList, setCommentList] = useState([]);
 
 useEffect(() => {
  fetch('http://localhost:3000/data/commentData.json', {
   method: 'GET'
   })
    .then(res => res.json())
    .then(data => {
     console.log(data);
     setCommentList(data);
     });
    },[])