2023년 03월 4주차 Week I Learned.

Dongchan Alex Kim·2023년 3월 26일
0

Week I Learned

목록 보기
3/14
post-thumbnail
  1. 리덕스/ToolKit : 전역 상태 관리 (state를 여러컴포넌트에서 같이 쓰겠다)

  2. thunk : 서버 통신하면서 전역상태관리에 넣는 중간에 행동을 추가한다.

  3. 리액트쿼리 : 전역상태관리 상관없이 서버통신하는 행동

  4. 악시오스 : 그냥 서버랑 통신

  5. 악시오스 인터셉터 : 서버에 데이터를 보내기 직전, 또는 데이터 받은 직후에 하는 행동하겠다.

지금까지 배운 것들을 좀 정리해두는게 좋겠다.
여태까지 Thunk를 이용해서 서버와 통신하였는데, 그럴 필요가 사라진 것이다.
그저 Thunk는 전역 상태 관리를 사용해서, 모듈 파일에서 서버 통신과 관련된 코드를 한 번에 관리할 수 있는 정도? (사실 이 목적은 아니지만, 개인적인 생각이다) 그 이상 그 이하도 아니라는 생각이 든다.

이번 프로젝트에서는 서버에서 전역상태를 하지 않아도 되는 부분들은 이제 리액트쿼리를 이용해서 프로젝트를 해보려고 한다.
다시 한번 느끼지만, 너무 편해서 이루 말할 수 없었다...

** 다만 에러처리 로직을 꾸준하게 써주어야 하는 부분이 있었다.
{ data, isLoading, isError } 등의 상태 값을 같이 볼 수 있기 때문에, 상태값에 따라 들어오는게 data 가 다르다는 점은 알고 써야한다.
-> 반대로 생각해보면, isLoading 이라는 상태 값으로 Loader 같은 거도 구현해볼 수 있기 때문에 더 편하다는 점도 있다.

문제 상황

리액트 쿼리를 현재 악시오스에 넣어서 쓰고 있는데, 문제는 id 값을 가져와서 쓰는 악시오스들은 인스턴스를 써서 useQuery를 이용해서 export해서 쓰는데, 이게 사용처 에서 data로 받아오질 못하는 문제가 있었다.
인스턴스 폴더에서 request.interceptor.use 메서드를 이용해서 header에 토큰을 넣는 과정 때문에 애용해서 쓰고 있었지만,
어떤 선택된 무언가를 어떻게 하는 행동 (특정 값 get, delete, patch 같은 것들) 은 이런 인스턴스에 Querykey가 고정되어서 그런지,
인스턴스 파일에서는 서버와 통신해서 잘 가져오는데, useQuery가 적힌 사용처 에서 data가 자꾸 undefined 떠서 의아했다.

해결(? 확실하진 않음)

엑시오스 통신 자체를 사용처 에서 직접하니까 해당 데이터값을 바로 사용해서 쓸 수 있었다.
먼가 QueryKey의 문제인거 같은데, 흠.. 정확한건 월욜에 매니저님께 여쭤봐야하긴 해야겠다.

QueryKey는 매우 unique 해야한다고는 한다고 배웠는데,

  • 인스턴스를 쓰게 되면, 같은 QueryKey에 id값만 다르게 들어가기 때문에 받아오질 못하는 거처럼 느껴진다.
  • 사용처에서 쓰게 된다면, 결론적으로는 QueryKey가 사용되는 곳이 다르다.? 라고 판단이 되는지 값을 잘만 가지고 온다.
    (정확한 정보가 아니니 나중에 수정하기로 함)

useQuey에는 매우 짜증나는 조건이 있는데, 조회를 무한히 한다는 부분이 있다.
처음에 굉장히 당황했던 부분이 있는데,
결국엔 옵션 값이 있었다.

//app.js
const queryClient = new QueryClient ({
  defaultOptions:
  queries: {
  	refetchOnWindowFocus: false,
  	retry: 0,
	}
})                                  

가장 최상위에 있는 컴포넌트에서 옵션 값을 주어서,
refetchOnWindowFocus 라는 옵션 값을 false로 준다면, 그 현상을 멈출 수 있었다.
retry 는 0으로 해서 3번씩 다시 통신하는 현상을 막을 수 있다고 한다.


이번 주차는 팀 빌딩부터해서 되게 머리가 어지러웠던 나날들이었던 것 같다.
B2B도 그렇고 서비스도 그렇고 이런저런 고민도 많고, 프론트도 혼자하게 되어서 예민한 상태가 계속 되었던 것 같은데,
결론적으로만 보면,
마음이 맞는 파트너도 찾게 되었고,
클론 진행도 어느정도 순조롭게 되어서 행복한 하루가 계속 되었던 것 같아서 좋았던 것 같다.

영미님과 나는 서비스팀을 주제로 하게 되었고, 그 이유는 아무래도 한정적인 주제에서 나오는 한정적인 창의성과,
이미 비즈니스 경험이 많으신 다른 분들에 비해 아직 학부생인 영미님과 나는 경쟁력이 떨어진다는 판단을 하게 되었다.

우리는 6주 그 이상을 보기로 했고,
실력과 상관없이 부디 팀원들도 마음이 잘 맞는 분들이 들어와서 다 같이 으샤으샤하는 팀으로
더 성장하는 기회가 되었으면 좋겠다...

profile
Disciplined, Be systemic

0개의 댓글