cacheTime vs staleTime

1. cachetime 5분, 기본값으로 staletime 0초 나갔다가 5분 이내에 들어올때 isFetching 은 true 지만 isLoading 은 false (**isFetching 이 true 라는 뜻은 "api call 을 실행했다" 라는 뜻임) 나갔다가

2022년 8월 14일
·
0개의 댓글
·
post-thumbnail

isLoading vs isFetching

isLoading 은 캐싱된 데이터가 없을때만 true -> false 로 바뀌고,(캐싱된 데이터 있으면 처음부터 false)isFetching 은 데이터의 캐싱 유무에 상관없이 true -> false 로 바뀐다.아래 예시를 보면(왠지 모르지만 2번씩 출력되었음;;)

2022년 8월 14일
·
1개의 댓글
·
post-thumbnail

react query

App.js components/Setting.js components/Profile.js 실행 화면 커스텀 훅 사용(재사용성 증가) components/Hooks.js

2022년 8월 13일
·
0개의 댓글
·
post-thumbnail

리덕스 툴킷에서 immer 라이브러리 에러

immer 라이브러리 특성상, 배열이나 'length' 프로퍼티만 사용가능하기 때문에 위와 같이 boolean 값은 사용할 수 없다. 그래서 나는 단지 신호(알림)가 필요하기 때문에 return action.payload.loginSuccess 처럼 불린값을 dispa

2022년 8월 11일
·
0개의 댓글
·
post-thumbnail

Tuple, Enum, Void, Never

tuple 타입은 배열과 매우 유사하다. 차이점은 정해진 타입의 고정된 길이(length) 배열이라는 점이다.데이터를 개별 변수로 지정하지 않고, 단일 tuple 타입으로 지정해 사용할 수도 있다.근데 사실 유저 정보를 정해진 타입, 고정된 길이만 보고 tuple 을

2022년 6월 30일
·
0개의 댓글
·

타입 단언(Assertion), 타입 가드(Guards)

타입스크립트가 타입 추론을 통해 판단할 수 있는 타입의 범주를 넘는 경우, 즉 타입추론으로는 해결할 수 없는 경우, 에러가 발생하는 것을 막기 위해 사용자가 임의로 타입을 명시할 수 있다. 이를 타입 단언이라고 한다. 아래의 예제는 isNumber 가 true 라면

2022년 6월 29일
·
0개의 댓글
·
post-thumbnail

Generics(제너릭)

Generics 는 타입스크립트에서 함수, 클래스, interface, type aliase 를 사용하게 될 때 여러 종류의 타입에 대하여 호환성을 제공해야 하는 상황에서 편리하게 쓰이는 문법이다.타입을 지정해주지 않은 상태에서는 기본적으로 any 를 사용하게 되는데

2022년 6월 29일
·
0개의 댓글
·
post-thumbnail

Redux & Redux Toolkit 의 불변성 유지

redux 의 state 값을 변경(return) 할때는 불변성(immutable)을 유지시켜줘야 한다. 불변성을 유지하기 위해서는 새로운 객체를 return 해줘야 한다. 만약 새로운 객체가 아니라 기존의 state 값을 참조하여 state 를 return 한다면 r

2022년 6월 22일
·
0개의 댓글
·
post-thumbnail

reducers vs extraReducers, createAsyncThunk

Redux Toolkit 에서 사용되는 reducers 와 extraReducers 의 차이를 알아보자. stackoverflow 를 참고하였다.reducers 는 액션함수를 생성함과 동시에 해당 액션함수에 대응하는 역할을 한다. extraReducers 는 사용자가

2022년 6월 22일
·
0개의 댓글
·
post-thumbnail

Redux Toolkit CRUD

redux toolkit 을 이용하여 crud 를 구현해보면서 redux toolkit 에 대해 알아보았다. configureStore 을 이용하여 리듀서들을 간편하게 통합시킬 수 있다.기존과 거의 비슷한 index.js 세팅이 부분이 핵심이다. 기존의 redux 에서

2022년 6월 22일
·
0개의 댓글
·

화살표 함수 객체 반환

기본 개념 화살표 함수를 정의할땐 함수 표현식을 사용해야 한다. 함수 선언식으로는 불가능하다. 매개변수가 1개일 경우 () 소괄호를 생략할 수 있으나 2개 이상인 경우 소괄호를 사용한다. 함수 몸체에 하나의 문밖에 없다면 {} 중괄호를 사용하지 않아도 된다. (

2022년 5월 27일
·
0개의 댓글
·
post-thumbnail

mongoDB 에 이미지 업로드하기

프론트에서 이미지를 서버에 저장한다음, 그 경로를 데이터베이스에 저장하고, 프론트가 데이터베이스에서 서버에 저장된 이미지의 주소를 받아와서 이미지 태그의 주소에 넣어주는 방법을 알아보자.참고: https://www.positronx.io/react-file-u

2022년 4월 16일
·
0개의 댓글
·
post-thumbnail

비동기 Promise, async & await

동기적으로 코드를 실행시키는 JS 에서 만약 데이터를 받아오는데 10초가 걸리는 코드가 있다면, 이후의 코드들을 작업이 끝날 때까지 기다려야 할 것이다.만약 이 코드 뒤에 웹페이지의 UI를 표시하는 코드가 있다면 위 작업이 끝날때까지 데이터가 들어오지 않아 빈페이지만

2022년 4월 6일
·
0개의 댓글
·
post-thumbnail

중괄호 사용에 따른 return 유무의 차이

return 하기 위한 값 앞에 return 을 붙여줘야 한다.return 문이 필요없이 자동으로 return 된다.

2022년 4월 4일
·
0개의 댓글
·
post-thumbnail

props 를 받아올 때 주의 사항, ({props}) 와 (props) 의 차이

todos 배열을 props 로 넘겨준 경우,하위 컴포넌트가 그냥 (todos) 로 받으면 객체 한겹 쌓여서 받아진다따라서 todos 배열을 바로 받기 위해서는 객체 안의 배열을 나타내는 ({todos}) 로 받아야 한다. (값 추가했음)

2022년 3월 31일
·
0개의 댓글
·
post-thumbnail

Array.map is not a function 에러

배열이 빈 배열일 경우 나타난다. 빈 배열의 boolean 값이 false 인줄 알았는데 알고보니 true 였다. 이럴땐 Array.length 를 사용하자.

2022년 3월 31일
·
0개의 댓글
·
post-thumbnail

reducer 모듈을 합친(combine) 경우의 state 값 접근

한단계 더 들어가야 한다.console.log(state)인 경우, reducer 라는 모듈에 접근하려면 추가로 한단계 더 들어가야 한다.console.log(state.reducer)

2022년 3월 31일
·
0개의 댓글
·

react redux 에서 switch 문 사용할때 주의사항

reducer 함수를 정의할때 action.type 을 분별하기 위해 switch 문을 사용하는 경우가 있다.이 경우 초기의 상태, 즉 아무런 action 을 취하지 않았을 때의 return 값을 정해줘야 하는데객체안에 또 현재의 state 객체를 감싸면 안된다. r

2022년 3월 31일
·
0개의 댓글
·

useHistory -> useNavigate 업그레이드

변경 전 변경 후

2022년 3월 26일
·
0개의 댓글
·

input 에 [Object Object] error

예시

2022년 3월 8일
·
0개의 댓글
·