React-query : fetch, cache, synchronize, update(for server state)에 사용되는 라이브러리이다. 공식사이트 React Query Hooks for fetching, caching and updating asynchronous data in React react-query.tanstack.com 배경 server state 사용 시 발생할 수 있는 문제점은 다음과 같다. caching deduping(데이터 중복 제거) update "out of date" data / know when is it reflecting updates data pagination optimization, lazy loading data memory management, garba..

query가 오래 되었다는 것을 판단하고 다시 fetch해올 때, queryClient.invalidateQueries 함수를 사용한다. https://react-query.tanstack.com/guides/query-invalidation Query Invalidation Query Invalidation Waiting for queries to become stale before they are fetched again doesn't always work, especially when you know for a fact that a query's data is out of date because of something the user has done. For that purpose, the Quer..

query와 다르게 CUD에 사용된다. https://react-query.tanstack.com/guides/mutations Mutations Subscribe to our newsletter The latest TanStack news, articles, and resources, sent to your inbox. react-query.tanstack.com 사용예제 const mutation = useMutation(newTodo => axios.post('/todos', newTodo)) return ( {mutation.isLoading ? ( 'Adding todo...' ) : ( {mutation.isError ? ( An error occurred: {mutation.error.mes..

기본 사용 const info = useQuery('unique_key', fetchData); // fetchData는 promise 반환 unique한 key로 정의하며, key에 묶이는 데이터는 비동기 데이터이다. useQuery가 반환하는 result는 비동기 데이터의 상태를 담고 있다. 상태 loading isLoading이 true가 된다. error isError가 true가 되며, error에 에러 정보가 담긴다. success isSuccess가 true가 되며, data에 정보가 담긴다. idle 사용 예제 const { isLoading, isError, data, error } = useQuery('key', fetchData); // const { status, data, erro..

웹 페이지에서 앱 내부로 유저를 이동하기 위해 딥링크를 사용한다. 즉, 딥링크는 모바일 앱 내의 특정 콘텐츠로 이동할 수 있는 모든 링크를 의미한다. Deeplink 종류 URL Scheme 고유앱://콘텐츠 의 형태이다. 앱이 깔려있을 때 특정 앱의 특정 페이지로 이동한다. 앱 미설치 시 동작하지 않는다. Universal Link IOS에서만 동작하는 딥링크이다. 유니버셜 링크는 앱에서 허용할 도메인을 등록해주어야 하며, 웹 프론트에서 .well-known/apple-app-site-association 파일을 정의하여 혀용할 path를 직접 결정할 수 있다. 유니버셜 링크를 사용하면 모바일 웹으로 특정 Path의 페이지에 접속 시 앱 내의 해당 위치로 유저를 이동 시켜줄 수 있다. App Link ..

JS 동작원리 js는 싱글 쓰레드 기반 언어이므로 호출 스택이 하나고 한 번에 한 작업만 처리할 수 있다. 이에 따른 문제는 하나의 로직을 수행하는데에 시간이 오래 걸리면 다른 로직이 멈춰버린다는 것이다. 이를 해결하려면 비동기 콜백을 사용할 수 있다. 런타임 js 런타임은 JS엔진, web api, task queue, event loop, render queue로 되어있다. 엔진 js 엔진의 대표적인 예는 Google의 V8 엔진이다. Chrome과 Node.js에서 이를 사용한다. memory heap : 메모리 할당 call stack : 호출 스택 위의 두가지로 엔진은 구성되어있다. Web API DOM, Ajax, TimeOut 등의 Web API가 잇다. Callstack에서 비동기 함수가 ..

React 환경변수 등록 기존 개발 시 개발 환경에서 React를 프론트로 사용할 때, 코드 사아에서 환경변수를 이용하려면 어떻게 해야할까? 최상위 폴더에 .env 파일을 만든다. .env 파일에 REACT_APP으로 시작하는 환경변수를 정의한다. REACT_APP_ADMIN_KEY=hi 코드 상에서 process.env.REACT_APP_ADMIN_KEY와 같은 형태로 사용한다. 이렇게 간편하게 이용할 수 있다! 배포 시 하지만 서비스를 위한 build 후에는 환경변수를 읽어들일 수 없기 때문에 build와 동시에 build에 대한 매개변수(argument)로 환경변수를 세팅해주어야한다. NERA는 github action에서 docker/build-push-action@v1.1.0 이라는 action..

SOP, COP Same Origin Policy document 객체는 출신인 origin을 가지고 있고, 이는 js에서 `document.location.origin`으로 확인할 수 있다. document 내에서 리소스들과 상호작용할 때, origin이 다르다면 리소스를 사용하는 데에 있어서 제한을 두겠다는 것이 SOP(Same Origin Policy)이다. Origin 판단 Origin이 같은 지는 Protocol, Host, Port로 판단하는데 url 구조를 보면 다음과 같다. http://localhost:3000 Protocol://Host:Port 세 가지가 모두 같으면 같은 Origin이라고 판단되는 것이다. IE는 양쪽 도메인 모두 높음 단계의 보안 수준일 경우 Same Origin ..