playground_avec coding

// Create - POST //Read - GET //Update - PUT //Delete - DELETE 나는 지금 단어장을 만들면서 단어의 생성, 읽기, 업뎃, 삭제에 대해 배우고 있고, 데이터 값은 json 형식으로 가져오고, 진짜 서버를 이용하는 것이 아니라, json-server 를 이용해 dummy data(?) 를 useFetch( )로 가져오는 것까지 했었다. 1. PUT 우선 해당 날짜에 있는 단어리스트들의 체크박스에 체크하면 체크한 값이 새로고침(F5) 했을 시에도 유지되도록 해줬다. 실제 data.json 에서 데이터 값이 삭제되게끔 해주었다. // import dummy from '../db/data.json'; import { useState } from 'react'; ex..

useEffect 를 이용해 dummy data(더미 데이터) 사용 없이 API 호출한다. 우선, fetch('API경로값 ') 을 불러 들이기 위해서는 >>> 1). import { useEffect, useState } from 'react'; 임포트 시켜준다. 2).커맨드 창에서 json-server --watch ./src/db/data.json --port 3001 로 port 지정을 해준다. 3). const [days, setDays] = useState([]); 을 설정해준다. * useState의 개념 const [state, setState] = useState(initialState); 상태 유지 값과 그 값을 갱신하는 함수를 반환합니다. 다음 리렌더링 시에 useState를 통해 반..

우선, 나는 메인페이지에 몇 몇의 컴포넌트를 이용하여, 내가 참고한 무료강의에서 알려준 것과 같이 '일자(day)' 들에 해당하는 '영단어(word)' 가 나오도록 해보려고 했다. 1. 메인 페이지의 구성 Header + DayList + Day(일자에 해당하는 단어들) + EmptyPage (경로 오류 시에 띄어줄 페이지) ✨ 꼭 필요한 것! -컴포넌트 안에 Header.js / DayList.js/Day.js/EmptyPage.js 임포트(Import) 시켜주기 - import {BrowserRouter, Route, Switch } from 'react-router-dom'; - json을 이용한 dummy (더미) 데이터 만들어주기 *Router 설치 명령어는 npm install react-ro..

2021.05.05 리액트 설치 -프로젝트 생성 1.vscode terminal 창 드래그 2.npx create-react-app "blog" < 폴더명이 되는 것 네이밍 코드짠것 미리보기 npm start 메인페이지에 들어갈 HTML 짜는곳 App.js리액트 5강 state 마음대로 변경하는 법 2021.05.11 deep copy reference data type 이란 2. Reference Type (참조 타입) 참조 타입의 데이터는 크기가 정해져 있지 않고 변수에 할당이 될 때 값이 직접 해당 변수에 저장될 수 없으며 변수에는 데이터에 대한 참조만 저장된다. 변수의 값이 저장된 힙 메모리의 주소값을 저장한다. 참조 타입은 변수의 값이 저장된 메모리 블럭의 주소를 가지고 있고 자바스크립트 엔진이..