HYEWON JUNG의 개발일지

기존 미들웨어의 한계 - 보일러플레이트 : 코드량이 너무 많다. - 규격화 문제 : redux는 비동기 데이터 관리를 위한 전문 라이브러리가 아니다. 쿼리의 강점 - 쉽고 책임에서 자유롭다 - 직관적이다 라이프 사이클 fresh 상태 'Fresh' 상태는 데이터가 최신 상태임을 의미한다 즉, 최근에 가져온(fetch) 데이터이며 staleTime이 아직 경과하지 않았고 fresh상태에서는 추가적인 데이터 요청이 발생해도 리액트 쿼리가 데이터를 재요청하지 않고 현재 캐시된 값을 사용한다 stale 상태 'Stale' 상태는 데이터가 더 이상 최신 상태가 아니며 재검증(revalidation)이 필요할 수 있는 상태를 의미한다. staletime이 오버 된 경우 inActive 상태 특정 쿼리에 대한 모든 ..

자바스크림트의 단점 실행 시간에 결정되는 변수 타입 JavaScript는 변수의 타입이 실행 시간에 결정된다. 이에 따라 개발자의 실수로 인한 오류가 발생하기 쉽고 찾기도 까다롭다 약한 타입 체크 JavaScript는 let, const와 같이 변수/상수를 구분하는 정도의 키워드만 지원이 되어요. 너무나도 물렁물렁한 객체 JavaScript에서는 프로그래머가 마음만 먹으면 객체의 성질을 수시로 변화시킬 수 있다 컴파일러란 컴파일러는 프로그래밍 언어로 작성된 소스 코드 → 다른 프로그래밍 언어로 변환하는 도구 이러한 변환 과정에서 컴파일러는 소스 코드의 구문과 구조를 검사하여 문제가 없는지 확인 이를 통해 개발자가 작성한 코드에 오류가 있는 경우 미리 알려주어 문제를 해결할 수 있다 컴파일러의 장점 에러 ..

인터셉터는 왜 필요할까? 우선 내가 이해한 것은 중복되는 코드를 수정해야 할 때 하나의 변수로 만들어둔다면 훨씬 수정이 용이해진다. 단순하게 편하니까 사용한다..? 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

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..