웹 공부일지

RTK Query 캐쉬 무효화 상황 A라는 사람의 데이터를 불러온 다음, 로그아웃 한 뒤, B라는 사람으로 로그인 했지만, rtk query의 캐싱 기능에 의해 A의 데이터가 지워지지 않고 A의 데이터로 렌더링된다. 새로고침이나 refetch 등을 사용하면 데이터를 제대로 가져오긴하지만 처음 렌더링 했을 때, 제대로된 데이터를 가져오게 하기 위해 로그아웃시 지정해 놓은 태그의 캐시를 무효화 시킨다. 해결 로그아웃시, 해당 태크를 이용하여 캐싱을 무효화한다. customerApi export const customerApi= createApi({ reducerPath: 'customerApi', baseQuery: fetchBaseQuery({ baseUrl: ``, prepareHeaders: (head..

2 단계 : 뒤에 있는 큰 수 찾기 코딩테스트 연습 > 연습문제 > 뒤에 있는 큰 수 찾기 정수로 이루어진 배열 numbers가 있습니다. 배열 의 각 원소들에 대해 자신보다 뒤에 있는 숫자 중에서 자신보다 크면서 가장 가까이 있는 수를 뒷 큰수라고 합니다. 정수 배열 numbers가 매개변수로 주어질 때, 모든 원소에 대한 뒷 큰수들을 차례로 담은 배열을 return 하도록 solution 함수를 완성해주세요. 단, 뒷 큰수가 존재하지 않는 원소는 -1을 담습니다. 제한사항 4 ≤ numbers의 길이 ≤ 1,000,000 1 ≤ numbers[i] ≤ 1,000,000 입출력 예 numbers result [2, 3, 3, 5] [3, 5, 5, -1] [9, 1, 5, 3, 6, 2] [-1, 5,..

2 단계 : 귤 고르기 코딩테스트 연습 > 연습문제 > 귤 고르기 경화는 과수원에서 귤을 수확했습니다. 경화는 수확한 귤 중 'k'개를 골라 상자 하나에 담아 판매하려고 합니다. 그런데 수확한 귤의 크기가 일정하지 않아 보기에 좋지 않다고 생각한 경화는 귤을 크기별로 분류했을 때 서로 다른 종류의 수를 최소화하고 싶습니다. 예를 들어, 경화가 수확한 귤 8개의 크기가 [1, 3, 2, 5, 4, 5, 2, 3] 이라고 합시다. 경화가 귤 6개를 판매하고 싶다면, 크기가 1, 4인 귤을 제외한 여섯 개의 귤을 상자에 담으면, 귤의 크기의 종류가 2, 3, 5로 총 3가지가 되며 이때가 서로 다른 종류가 최소일 때입니다. 경화가 한 상자에 담으려는 귤의 개수 k와 귤의 크기를 담은 배열 tangerine이 ..

2 단계 : 주식가격 코딩테스트 연습 > 스택/큐 > 주식가격 초 단위로 기록된 주식가격이 담긴 배열 prices가 매개변수로 주어질 때, 가격이 떨어지지 않은 기간은 몇 초인지를 return 하도록 solution 함수를 완성하세요. 제한사항 prices의 각 가격은 1 이상 10,000 이하인 자연수입니다. prices의 길이는 2 이상 100,000 이하입니다. 입출력 예 prices return [1, 2, 3, 2, 3] [4, 3, 1, 1, 0] 입출력 예 설명 1초 시점의 ₩1은 끝까지 가격이 떨어지지 않았습니다. 2초 시점의 ₩2은 끝까지 가격이 떨어지지 않았습니다. 3초 시점의 ₩3은 1초뒤에 가격이 떨어집니다. 따라서 1초간 가격이 떨어지지 않은 것으로 봅니다. 4초 시점의 ₩2은 1..

상황 moment js를 사용하다가 다음과 같은 경고메세지가 나타났습니다. moment.js:287 Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info. Arguments: [0] _isAMomentObject: tr..

React Props 제한하기: & 와 | 연산자 활용 상황 예를들어 A라는 prop이 있을 때, B라는 prop을 가졌으면 좋겠고, C라는 prop이 있을 때, D라는 prop을 가졌으면 좋겠다. 다음과 같이 하면 제한이 되지 않는다. import React from "react"; /** * 상황 1 * money가 won or dollor 값을 가지고, won일때는 KR이라는 prop이, dollar일 때는 US라는 prop이 오기를 기대한다. */ type ChildProps = { name: string; money: "won" | "dollar"; KR?: string; US?: string; }; const Child = ({ name, money, KR, US }: ChildProps) =..

Windows NVM 설치 1. github nvm-windows repository 방문 https://github.com/coreybutler/nvm-windows 밑으로 내려서 Download Now! 버튼클릭 버튼을 클릭하고 들어왔다면, 밑으로 내려서 nvm-setup.exe 다운로드 nvm-setup.exe 실행 다운받은 파일을 실행해서 쭉 진행합니다. 만약 이미 NodeJs가 깔려있다면.. nvm이 원래 깔려있던 버전을 관리하는 것을 허용하겠냐는 알림이 뜹니다. 이부분은 알아서 선택하시면 됩니다. NVM이 잘 설치되었나 확인 window키 + r 을 눌러서 실행창을 띄운 뒤, cmd를 입력하고 명령프롬프트 접속. nvm —version (nvm version) 입력해서 해당 설치한 버전이 뜬다..

A non-serializable value was detected in an action, in the path: 상황 리덕스 툴킷을 사용하여 이미지 데이터를 저장하기 위해, blob객체를 dispatch하여 state에 저장시키려는 과정에서, A non-serializable value was detected in an action, in the path: reducername/reducer 와 같은 경고 발생 특정 액션을 수행하는 과정에서 문제가 있다고 경고 blob 객체와 같은 순수 자바스크립트 오브젝트가 아닌 것을 dispatch로 넘겨줄 경우 발생 (직렬화할 수 없는 객체) 해결법 필자와 같은 이미지를 다루는 상황이라면 base64String으로 변환해서 전달하는 것도 가능하지만, redux-..

base64Image 변환하기 base64String Base64는 인코딩 방식 중 하나로, 이진 데이터를 문자열로 변환하는 과정을 말합니다. 이진 데이터는 0과 1로 이루어진 이진수로 표현되는 데이터로, 문자열로 표현하기 어렵기 때문에 Base64 인코딩을 사용하여 문자열로 변환합니다. Base64는 이진 데이터를 일종의 알파벳으로 이루어진 문자열로 변환합니다. 이 문자열은 인코딩과 디코딩을 거쳐 다시 이진 데이터로 변환할 수 있습니다. Base64는 MIME(Multipurpose Internet Mail Extensions) 표준에서 이메일을 통해 전송되는 이진 데이터를 안전하게 인코딩하기 위해 사용됩니다. Base64는 네트워크에서 이진 데이터를 안전하게 전송하는 데 사용되는 바이너리 인코딩 알고..

Nextjs redux-persist 적용 (typescript) 상황 이미 리덕스를 사용해서 데이터를 관리하고 있던 상황에서 새로고침 해도 데이터를 유지하려함. 로컬스토리지나 세션스토리지에 직접 넣는 코드를 추가할 수 있으나, 그렇다면 리덕스를 사용할 필요가 없고 관리해야할 데이터가 많아서 비효율적이라고 생각함. redux-persist를 사용하면 redux-persist config에서 허용한 리듀서만 새로고침해도, 데이터를 유지할 수 있음. 제 경우에는 로컬스토리지를 사용하였습니다. 설치 npm i redux-persist npm i --save-dev @types/redux-persist 혹시.. npm i --save-dev @types/redux-persist 설치 하였음에도 불구하고 계속 설..