mock data 활용하여 상품 상세페이지를 구현하기 위해 공부하던 중 fetch() 함수 사용법에 대해 더 공부하고자 찾아보고 정리한 내용을 기록해본다. mock data mock data란? UI를 구현하다 보면 API가 나오기 전에 페이지가 먼저 나오는 경우가 많은데, 이 때 프론트엔드 개발자는 API가 나오기만을 기다리는게 아닌 mock data 즉, 샘플 데이터를 만들어서 내가 만든 화면에서 데이터가 어떻게 나타나는지를 미리 테스트하며 개발을 진행한다. mock data를 잘 만들어 둔다면, 백엔드와 실제 연결할 때도 수월하게 작업할 수 있을 뿐만 아니라 자료의 형태가 구체적으로 특정되기 때문에 소통에도 도움이 된다 mock data를 관리하는 두 가지 방법 js 파일로 데이터를 분리하는 방법 .js 파일은 어떤 데이터인지 알 수 있게 명명한다 배열 데이터를 변수에 담고 필요한 component에 import해서 사용한다

1. 설치 react는 npm으로 설치된다. npm(node package manager)이니 node.js가 필요하다. node.js는 js(브라우저,인터프리터 언어)를 서버(터미널환경)에서 사용할 수 있게한 프로그램이다. 왼쪽은 가장 안정적인 버전, 오른쪽은 가장 최신 버전입니다. 원하는 버전을 다운로드 한 뒤 버전을 확인한다. npm을 이용해서 react를 설치한다. -g라는 옵션을 주는데, 글로벌로 어떤 곳에서든 실행할 수 있게 옵션을 준다. 여기서 npx로도 설치를 할 수 있는데, npx의 경우 항상 최신버전의 react를 설치하지만, 임시로 설치하는 것이기 때문에 매번 새롭게 다운로드를 받아야합니다. 그에 반해 npm은 한번 설치를 하게 되면 추가적으로 다운로드

리액트가 무엇인지 간단하게 살펴보고, 리액트의 특징에 대해 살펴보려고 한다. 리액트란? 리액트는 UI 자바스크립트 라이브러리이다. 싱글 페이지 애플리케이션의 UI(User Interface)를 생성하는데 집중한 라이브러리다. 리액트는 JSX, 가상 돔, 단방향 데이터 바인딩, 선언형 프로그래밍, 컴포넌트 기반을 가장 큰 특징으로 뽑을 수 있다. 리액트는 싱글 페이지 애플리케이션에서 UI를 만드는 자바스크립트 라이브러리이다보니, 싱글 페이지 애플리케이션 제작을 하는 다른 프레임워크에 비해 부족한 부분이 있다. 예를 들어 리액트는 페이지 전환 기능을 제공하지 않기 때문에, 리액트를 사용하여 페이지 전환을 해야한다면, react-router와 같은 추가적인 라이브러리를 사용해야 한다. 리액트의 특징 1. JSX 리액트에서는 JSX라는 독특한 문법을 가지고 있다. JSX는 자바스크립트와 HTML을 동시에 사용하며, HTML에 자바스크립트의