일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
- 리액트
- React
- 캡스톤디자인 후기
- JS변수
- 결제페이지
- Next.js
- MSW
- 기술 낙서장
- state 관리
- React.JS
- 일상 생각
- javascript
- TypeScript
- react-query&Next.js
- 사내 이슈
- SSR
- 사내 오류 해결
- react-query 도입후기
- SW캡스톤디자인
- ClientSide
- react-query v5
- node.js
- nextjs
- no router instance found
- 기술낙서장
- 사내 오류 대응
- router instance
- 더블엔씨
- state 사용하기
- react-query
- Today
- Total
목록분류 전체보기 (21)
코딩을 잘하고 싶은 코린이 동토니
주요 변경점useQuery1. 컨벤션의 변화기존 : queryOptions에 queryKey와 queryFn이 포함되지 않았음const { data: paymentPromotions, isSuccess } = useQuery(PaymentPromotionsKey.all(),fetchPaymentPromotions,)변경 : queryOptions에 모들 property 추가const { data: paymentPromotions, isSuccess } = useQuery({queryKey: PaymentPromotionsKey.all(),queryFn: fetchPaymentPromotions,})2. options의 변화(많은 변화가 있지만 제일 많이 사용하는 위주로 정리)cacheTime (삭제) =..
1. data 캐싱 여부에 따른 initial status- cached = true - status === 'success'- cached = false - status === 'loading'2. loading status- 캐싱된 데이터가 없다면 항상 true- 데이터를 호출 하고 나서야 false로 변경 (호출 이후 status = loading => 'success' | 'error')- react-query에서의 loading의 의미는 데이터를 불러오는 중이 아닌 아직 데이터가 없는 상태3. fetchStatus- 기본 값 'idle' (쿼리가 아무런 동작도 하지 않는 상태)- query 실행시 'fetching' 으로 상태 변경4. enabled의 고찰- useQuery 혹은 useQueri..
이전에 작성한 스마트 스토어의 경우 인스턴스가 AWS-EC2에 생성되어있다.해당 프로그램은 종종 알 수 없는 이유로 갑자기 CPU메모리가 확 튀게 되면서 순간적으로 죽어버리는 현상이 발생했었다.여기서 더 큰 문제는 정작 AWS콘솔을 확인해봤을 때 아무런 이상점이 없다는 것이 가장 큰 문제였다. 업무시간중 이러한 문제가 발생되면 그나마 슬랙채널을 통해 CX팀에서 문의가 들어오지만, 가장 큰 문제는 주말이나 휴일에 해당 프로그램이 메모리 과부화로 죽어버리게 된다면 직접 눈으로 확인하기 전까지는 이를 알 방법이 없었다.이러한 문제를 해결하기 위해서 여러가지 방식을 생각해봤었다.생각 했던 해결법들은 다음과 같다.1. 스마트 스토어 인스턴스 내부에서 서버를 구축하고 외부 서버에 요청을 지속적으로 한다.이 방법의 ..
사내 프로젝트중 스마트스토어 자동 판매 프로그램이 있다.해당 프로젝트의 경우 회사의 첫 BM이기도 했고 관련된 내용의 히스토리를 알고있는 분이 CTO님 제외 초창기 회사 개발팀 구성원분들 정도였는데 대부분의 초창기 개발팀 구성원 분들이 퇴사하고 나서 해당 프로젝트를 CTO님에게 인계받아 혼자 관리하게 되었다.해당 프로젝트는 다음과 같이 구동되고 있다.구동 방식해당 프로그램을 위한 aws-ec2 instance를 생성한다.생성된 instance를 접속해 vncserver를 시작해준다instance 내부에 생성된 뷰를 통해 크롬을 실행시키고 해당 프로그램을 실행시킨다.이렇게 동작하는 프로그램에는 몇가지 문제점이 있었다.문제점네이버 스마트스토어 자동 로그인 시도시 간헐적으로 Captcha 인증이 발생해서 자동..
최근 Next.js를 도입하는 기업들이 많아졌다. 그 이유는 뭘까? 나는 당연코 Server Side 방식의 지원이라고 생각한다. 그러면 Server Side는 무엇일까? 먼저 Server Side를 살펴보기 전에 이와 상반되는 개념인 Client Side Rendering (이하 CSR)에 대해서 알아볼 필요가 있다. Client Side Rendering (CSR) CSR은 말그대로 클라이언트 측에서 렌더링이 시작되는 개념이다. 즉 클라이언트가 페이지에 들어오고 브라우저는 이를감지하고 HTML 다운로드 => JavaScript 다운로드 => JavaScript 실행 => Data 호출 => 화면 노출 의 순으로 렌더링이 진행된다. 간단하게 요약하면 클라이언트가 그린다 그린다? : 데이터를 가져와서 그..