# mockdata
Mock Data를 만들어서 자유롭게 개발하기 🎉 (+ fetch와 axios)
Mock Data 👉 mock: 거짓된, 가짜의 👉 mock data: 가짜 데이터, 샘플 데이터 Youtube 오픈 API 를 이용해서 리액트로 클론코딩 프로젝트를 진행하였다. 이번 프로젝트를 진행하면서 실제 API 에서 받아온 데이터가 아닌 샘플로 만
React - mock data 활용해서 filter로 delete하기
2023.02.16(목) 1차 프로젝트 진행 중참고자료 | \[React] 배열에 있는 데이터 삭제하기 (filter() 사용), GitBook-배열내장함수🛒 장바구니 기능을 구현하는데 백엔드에서 장바구니 API가 아직 완성이 되지 않아서 장바구니 삭제 기능을 구현하
[wecode] React - mock 데이터 활용 과제
2023.02.02(목) Foundation-2 > 프론트엔드 세션 > React Data활용💎 westagram mock 데이터 활용 과제를 구현하는 과정에서 아리송했던 부분들을 기록.가짜데이터, 샘플 데이터를 의미. 실제 API에서 받아온 데이터가 아닌 프론트엔드
React | Mock Data
UI 구성에 필요한 백엔드 API가 필요할 때, 모조, 가짜로 만드는 API, 즉 MOCK DATA 다.실제 API가 아닌, 백엔드 API 가 완성되지 않은 상태에서 개발을 진행해야 할 때, 임시로 써보는 가짜 API다. 프론트엔드 개발자가 필요에 의해 샘플로 만든 데
MocData map으로 돌리는 법
useState(\[]) 안에 각 가로를 꼭 넣어서 초기화 해야 한다!!!.JSON 파일은 array 이기 때문에 되게 해야 하기 때문에 의 이름인 feeds를 불러냈고 feeds? 를 쓰는 것은 랜더링시 true 일 경우 map을 실행하기 위함이다.
Mock Data
Mock은 흉내내다 라는 뜻이다. Mock Data 또한 흉내낸 데이터라는 의미다. 웹을 개발함에 있어서 프론트와 백은 개발속도에 차이가 있을 수 있다. 백엔드에서는 API를 구성해야 하는데, 프론트엔드에서는 UI부터 바로 그릴 수 있기 때문이다. 그러니 백엔드 API
unit test할 때 가짜 데이터 만들기
1. 실제 사용할 데이터로 fakeData를 만든 뒤 그걸로 테스트한다. 2. Mokito 라이브러리를 사용해 가짜 데이터를 만들어 테스트한다. 3. 내가 그냥 정의해서 가짜데이터를 만들어준다.
[Justgram React] mock Data 활용해서 피드 구현하기(useEffect + fetch)
mock data를 활용하여 데이터를 따로 분리해준 뒤 데이터 개수 만큼 피드를 구현피드를 여러개 띄우고 싶으면 <Feed/>를 여러번 복사하면 되지 않을까? 생각할 수도 있지만 그렇게 하면 데이터를 동적으로 다루고 props로 넘겨줘야할 때 굉장히 비효율적이기
[React]mock 데이터 이용해서 테스트하기
백엔드와 프론트의 작업속도가 달라서 보통 프론트엔드가 UI를 그리면서 개발에 들어갔을 때에는 백엔드 api가 만들어지기 전일 가능성이 있다. 그렇다면 프론트에서는 데이터없이 상상으로 개발을 한다? 는 아니다 우리는 백엔드 api가 없어도 백엔드가 있는 것처럼 목데이터
220816
TIL 공백기에 대한 변명.. 상당히 오랜만에 TIL을 적는다.. 면역체계가 무너졌는지 알러지가 심해져서, 학원수업 09-18 시간에는 어떻게든 작업을 했지만 약을 먹어도 한계가 있어서 저녁 시간을 활용하지 못했다. 지난 연휴까지도... TIL 정도야 메모처럼 금방 적으면 됐을텐데, 작업 중심으로 시간을 보내다보니 그게 잘 안됐다. 그래도 그동안 개인 ...
fullstack-react-toy(1) 환경 세팅, 목록뷰 구현하기, 새글쓰기 기능 구현
fullstack-react-toy(1) 환경 세팅, 목록뷰 구현하기, 새글쓰기 기능 구현
React Mock Data
이름에서 알 수 있듯이 가짜 데이터, 샘플 데이터 정도로 해석할 수 있다.실제 API에서 받아온 데이터가 아닌 필요에 의해 샘플로 만들어 본 데이터이다.사용이유는 간단하다.개발 진행 시 필요한 API가 완성이 안되어있을 경우 mock data를 만들어 데이터가 들어오는
#21.TIL | React(MockData활용하여 피드 여러개 만들기)
HTML,CSS,JavaScript로 구현하였던 인스타그램 클론을 React와 Scss로 재구현해보면서 React의 이점을 느끼지 못했었다.그 이유를 생각해보니, 백엔드로부터 API를 받아서 UI를 만드는것이 아닌 내가 직접 피드 사진, 게시글, 댓글 등을 하드코딩하고
TIL - mock data를 활용하여 article component 각각에 댓글 추가 기능 구현하기
mock data를 통해서 여러 피드 중 원하는 피드에서 입력한 댓글이 나타나도록 했는지 정리해보았다.
[(과제) [React] Mock Data 활용법]
애를 많이 먹은 Mock Data 활용법...Mock Data를 활용하면서 LifeCycle과 props의 개념을 전보다 정확히 머릿속에 파악 할 수 있었다.댓글 데이터를 파일로 분리해서 관리해주세요.아직 fetch 함수가 익숙지 않은 분들은 .json 파일이 아닌 .
#TIL22, fetch() 함수 사용법
개인 공부를 위해 작성했습니다4주차에 mock data 활용하여 react westagram을 구현하기 위해 공부하던 중fetch() 함수 사용법에 대해 더 공부하고자 찾아보고 정리한 내용 기록해본다.UI를 구현하다 보면 API가 나오기 전에 페이지가 먼저 나오는 경우
TIL_46_with Wecode 036 Mock data 활용법
Mock data?실제 API 에서 받아온 데이터가 아닌 프론트앤드 개발자가 필요에 의해 샘플로 만들어본 데이터mock data 를 만들어 데이터가 들어오는 상황을 미리 대비하고 UI 가 기획에 맞게 구현 되는지 확인Backend 와의 소통 - 주고 받는 데이터가 어떤
[westargram] react로 옮기기 작업 2 - 메인페이지
현재 레이아웃 옮기기는 다했고, mock데이터를 활용하는데 따로 mockdata.js로 분리해야하고, 댓글, 좋아요 기능이 state에 반영되도록 해야한다.인스타그램에선 좋아요 누름과 동시에 서버로 전송하는건가?? 아니면 먼저 좋아요 컴포넌트 sate에 like 버튼
Mock Data 활용방법
정적 버전을 만들기 위해 state를 사용하지 마세요. state는 오직 상호작용을 위해, 즉 시간이 지남에 따라 데이터가 바뀌는 것에 사용별도 js 파일로 관리실제 API에서 보내주는 형식인 JSON파일에 담아 fecth 함수를 통해 사용commentData.json
Mock Data 🐾
mock data란?mock: 거짓된, 가짜의이름에서 알 수 있듯이 mock data 는 가짜 데이터, 샘플 데이터즉, 실제 API 에서 받아온 데이터가 아닌 프론트앤드 개발자가 필요에 의해 샘플용으로 만든 데이터 mock data가 필요한 이유API 가 아직 준비중인