우사미 코딩

import Button from "../components/Button" import { useReducer } from "react"; import Panel from "../components/Panel" const INCREMENT_COUNT = 'increment'; const DECREMENT_COUNT = 'decrement'; const SET_VALUE_TO_ADD = 'set-value-to-add'; const ADD_VALUE_TO_COUNT = 'add-value-to-count'; const reducer = (state, action) => { switch(action.type){ case INCREMENT_COUNT: return { ...state, count: state...

예전에 App.js에 CRUD function만들었던걸 모두 context에 옮길거임 - books.js (context) import { createContext, useCallback, useState } from 'react'; import axios from 'axios'; const BooksContext = createContext(); function Provider({ children }) { const [books, setBooks] = useState([]); const fetchBooks = useCallback(async () => { const response = await axios.get('http://localhost:3001/books'); setBooks(response...

정보를 공유할 때 사용한다 현재 우리의 앱은 이벤트핸들러(초록색)을 컴퍼넌트 하위요소까지 전달하는 지루하고 실수하기 쉬운 작업들을 하고있는데 refactor을 사용하면 이런 실수를 줄일 수 있다고 함 여기서 중요한 것은 context는 communication chennel이고 data를 공유하는지, 그 처리는 어떻게 되는지 전혀 상관하지 않는다 Redux는 organization data 암틑 컨텍스트를 사용해보도록 하게음 1. context 생성하기 2. context import하기 - index.js render부분을 이렇게 수정하면 app에서 렌더링 하는 모든 요소들은 context.provier의 value를 사용할 수 있다 확인. BookList.js에서 context 불러오고 useCont..

근데 우리의 프로젝트는 첫 실행했을때 가지고 있는 데이터르 ㄹ띄워야한단 말이져 function App(){ const[books, setBooks] = useState([]); const fetchBooks = async()=>{ const response = await axios.get('http://localhost:3001/books'); setBooks(response.data); }; // fetchBooks(); 무한 츠쿠요미 fetchBooks라는 함수를 만들었고염 근데 이거 7행처럼 호출해보면.. 절대 안 됨. 7행에서 fetchBooks호출하면 setBooks하져 setter함수 호출하면 다시 App함수가 실행되고 다시 7행에서 fetchBooks호출하고 setBooks().. App호출..

axios설치하고 이제 CRUD요청하는 부분을 다 api사용하게 바꿀거임 리액트는 그냥 데이터만 표현한다구 그랬쪄? ajax같이 통신하는 부분은 axios를 사용합시더 axios 설치는 검색 ㄱ 1. App.js const createBook = (title) => { // console.log('need to add book with : ', title); setBooks([...books, { id:Math.round(Math.random()*9999), title : title }]); }; 이제 이걸 json 서버에 요청하는걸러 바꿀거임 const createBook = async(title) => { const response = await axios.post('http://localhost:3..

이제 vs code 확장프로그램으로 api client를 설치하고 사용하려고 함 vs code extension에서 'rest client' 검색하고 설치 ㄱ - 만약 다음과 같은 서버오류가 발생한다면 package.json의 server를 초록색과 같이 바꾸기 "The connection was rejected. Either the requested service isn’t running on the requested server/port, the proxy settings in vscode are misconfigured, or a firewall is blocking requests. Details: RequestError: connect ECONNREFUSED 127.0.0.1:3001" "ser..

- 이번에 할 일 우리의 로컬앱은 db를 사용하지 않기 때문에 서버를 껏켰하면 불러올 데이터가 없다 이때 사용하면 좋은 api가 json server 앱을 개발할 때 json object의 파일을 db처럼 사용하는 json-server 기존에는 editBookById를 하면 바로 state를 변경했지만 이제는 api server에 삭제하란 요청을 보내고 결과에 대한 응답을 받도록 수정할 것이당 1. json server 설치 터미널 하나 더 켜고 프로젝트 디렉토리에 가서 json server설치하기 npm install json-server 2. document root에 db.json파일 생성하고 초기값 넣어주기 3. package.json에 debug-server 추가하기 (17행) 위에 17행을 추..

1. src의 주소를 curly braces로 감싼다 2. double quotes(")는 back tick(`)으로 바꿔준다 3. 변수를 사용할 때 앞에 dollar sign ($) 붙인다