HYEWON JUNG의 개발일지

인터셉터는 왜 필요할까? 우선 내가 이해한 것은 중복되는 코드를 수정해야 할 때 하나의 변수로 만들어둔다면 훨씬 수정이 용이해진다. 단순하게 편하니까 사용한다..? axios interceptor는 코드 흐름을 가로 채서 관여하는 두 상황이 있는데 (1) 요청(request)이 처리되기 전( = http request가 서버에 전달되기 전) (2) 응답(response)의 then(=성공) 또는 catch(=실패)가 처리되기 전 이 있다. 그래서 주로 쓰이는 곳은 요청 헤더 추가 인증 관리 로그 관련 로직 삽입 에러 핸들링 라고 한다. 사용법 src 폴더에 axios 폴더를 만들어준다. 그리고 axios 폴더 안에 api.js를 생성해서 instance를 만들어 줄 것이다. import axios fro..

json server 설치하기 yarn add json-server 사용법 yarn json-server --watch db.json --port 사용할 포트 번호 나는 4000으로 함 요 귀여운 hi가 보이면 성공적으로 실행된 것! 사용은 2023.11.29 - [React] - axios get post delete patch axios get axios란? 간단히 http를 이용해 서버와 통신하기 위해 사용하는 패키지 axios 설치 방법 yarn add axios json-server로 만들어 놓은 데이터를 get 해오는데 response로 그대로 받아서 콘솔에 찍어보면 const fetchTo hyewonjung-coding.tistory.com

목표 10강 까지 듣기 새로 알게 된것/ 오늘의 코드 2023.11.28 - [React] - redux toolkit redux toolkit 리덕스 툴킷이란? 기존의 리덕스를 더욱 간결하고 편하게 쓸 수 있게 만든 것이다. 장점 1. action value, actioncreator, reducer를 하나에 해결할 수있다. redux 기존의 순수?리덕스에서는 Ducks 패턴을 참고 hyewonjung-coding.tistory.com 2023.11.29 - [React] - axios get axios get axios란? 간단히 http를 이용해 서버와 통신하기 위해 사용하는 패키지 axios 설치 방법 yarn add axios json-server로 만들어 놓은 데이터를 get 해오는데 resp..

axios란? 간단히 http를 이용해 서버와 통신하기 위해 사용하는 패키지 axios 설치 방법 yarn add axios json-server로 만들어 놓은 데이터를 get 해오는데 response로 그대로 받아서 콘솔에 찍어보면 const fetchTodos = async () => { const response = await axios.get("http://localhost:4000/todos"); console.log("response=>", response); }; useEffect(() => { fetchTodos(); }); 이런식으로 나온다. 여기서 우리가 사용할 곳은 data 부분이다 만약 비동기 처리를 해주지 않는다면 데이터가 담기지 않은 채로 콘솔이 찍히게 된다. 우리가 필요한 da..

리덕스 툴킷이란? 기존의 리덕스를 더욱 간결하고 편하게 쓸 수 있게 만든 것이다. 장점 1. action value, actioncreator, reducer를 하나에 해결할 수있다. redux 기존의 순수?리덕스에서는 Ducks 패턴을 참고하여 reducer, action Value, action creator를 따로 작성해주었다. 2023.11.10 - [React] - Redux Redux redux는 상태 관리 라이브러리라고 하는데 redux는 왜 필요한가. 장점이 3가지가 있는데 1. 리덕스를 사용하면State를 공유하고자 할때 부-모 관계가 아니여도 된다 2. 중간에 의미없이 컴포넌트를 거 hyewonjung-coding.tistory.com import React from "react"; i..

상황 리액트 심화에 들어가기 전 counter앱을 기본세팅 중 번역 초기화 중에 키 "카운터"에 대한 슬라이스 리듀서가 정의되지 않은 상태를 반환했습니다. 리듀서에 전달된 상태가 정의되지 않은 경우 초기 상태를 명시적으로 반환해야 합니다. 초기 상태는 정의되지 않을 수 없습니다. 이 리듀서의 값을 설정하지 않으려면 정의되지 않음 대신 null을 사용할 수 있습니다. 해당코드 const counter = (state = initialState, action) => { switch (action.type) { case PLUS_ONE: return { number: state.number + 1 }; case MINUS_ONE: return { number: state.number - 1 }; } }; 해결..