Dependent Qeuries Dependent Qeuries는 Dependent Qeuries가 실행되기 이전 실행되는 queries에 의존하는 queries다. 이렇게 Dependent Qeuries를 만들어주려면 따로 어떤 특별한 기능을 이용하는 것이 아니라, enabled옵션으로 상황을 조성해주는 것이다. 아래 예시는 userId가 제대로 받아오기이전까지는 실행되지않게 enabled옵션으로 환경을 조성해준 예시이다. *enabled옵션이 false값일 경우 자동적으로 useQuery함수는 실행되지 않는다. userId가 정상적으로 받아진다면?. !!userId는 true, userId가 정상적으로 받아지지 않는다면?. !!userId는 false이다. 따라서 userId가 정상적으로 받아지는 경..
Frontend
Queries Functions Query Function은 말그대로 promise를 리턴해주는 메서드이다. 그 promise는 데이터를 resolve하거나 error을 throw해야한다. 다음의 예시들은 모두 사용가능한 예시들이다. useQuery(['todos'], fetchAllTodos) useQuery(['todos', todoId], () => fetchTodoById(todoId)) useQuery(['todos', todoId], async () => { const data = await fetchTodoById(todoId) return data }) useQuery(['todos', todoId], ({ queryKey }) => fetchTodoById(queryKey[1])) Han..
Query basics 쿼리는 unique key에 묶인 비동기 데이터 소스에 의한 *선언적 의존성이다. 쿼리는 서버로부터 데이터를 받아오기위해 Promise기반 메서드와 함께 사용될 수 있다. 만약 사용하는 메서드가 서버측의 데이터를 수정한는 메서드라면 차라리 Mutation을 사용하는 것이 낫다. 선언적 의존성이란 말이 어렵다. 프로그래밍에서 '선언적'이란 어떤 작업을 어떻게 수행할지를 직접 명시하지 않고도 원하는 결과를 설명하는 것을 의미한다. 예를들어 리액트에서 JSX를 사용하여 UI를 정의할때, 어떻게 UI가 그려지는지는 직접 명시하지않지만 어떤 컴포넌트와 어떤 구조로 UI를 나타내고 싶은지를 선언하는 것과 같다. 프로그래밍에서의 '의존성'이란 비동기 데이터 소스에서 데이터를 가져올 때, 해당 ..
Important Defaults React-Query를 사용하면서 중요하게 여겨야 할 부분에 대한 설명이다. useQuery 혹은 useInfiniteQuery에 의해 cached된 data는 기본적으로 stale상태로 여겨진다. 전역적으로 설정해 모든 쿼리에 대해, 혹은 개별 쿼리에 대해 'staleTime'옵션을 이용해 더 '긴' staleTime을 만들어줄 수 있다. staleTime이 짧으면 짧을수록 stale상태로 빨리 변하고, stale상태로 변하면 자동적으로 refetch된다. staleTime을 더 길게 만들어준다면 refetch주기를 더 길게 가져갈 수 있다는 점을 바로 캐치할 수 있다. Stale queries stale queries는 다음과 같은 상황들에 대해 background에..
Incremental Static Regeneration Next.js는 사이트를 배포한 이후에도 정적인 페이지를 새로 만들거나, 이미 생성된 정적인 페이지의 데이터를 업데이트할 수 있도록 도와준다. ISR은 사이트전체를 갈아엎지않고도 정적인 페이지를 개별단위로 생성할 수 있도록 도와준다. 또한 수백,수천페이지로 확장하면서도 정적인 페이지를 이용하는것의 이점을 유지하도록 해준다. Note: experimental-edge런타임은 현재 ISR과 호환되지않지만, cache-control 헤더를 수동으로 세팅함으로써 stale-while-revalidate를 활용할 수 있다. ISR을 활용하기위해서 revalidate porp을 getStaticProps로 추가해줘야한다. function Blog({ post..
getStaticPaths Dynamic Routes와 getStaticProps를 동시에 사용하고 있는 페이지에서는 SSG를 사용할 path들을 미리 정의해둬야 한다. Dynamic Routes를 사용하는 페이지에서 getStaticPaths를 export할때 Next.js는 getStaticPaths에 의해 미리 정의된 모든 경로들만을 Statically pre-render하기 때문이다. // pages/posts/[id].js // Generates `/posts/1` and `/posts/2` export async function getStaticPaths() { return { paths: [{ params: { id: '1' } }, { params: { id: '2' } }], fallba..
getStaticProps 만약 getStaticProps를 사용하면 *build time때 getStaticProps에 의해 받아진 props를 이용하여 pre-render된다. build time이란 'next build'명령어로 배포할때의 배포프로세스과정을 의미한다. 이는 getStaticProps를 활용함에 있어서 굉장히 중요한 개념이다. 결론적으로 revalidate함수를 통해 옵션을 따로 지정하지 않는 한 getStaticProps에 의한 데이터는 오직 배포하는 단계에서만 머무른다. revalidate함수를 통해 옵션을 따로 지정하지 않는 한 절대 업데이트되지 않는다. export async function getStaticProps(context) { return { props: {}, //..
getServerSideProps(SSR) getServerSideProps를 사용하면 getServerSideProps return값을 참조하는 각각의 페이지들이 pre-render된다. export async function getServerSideProps(context) { return { props: {}, // will be passed to the page component as props } } ⚠️Caution 어떤 렌더링타입과도 관계없이 모든 props는 페이지 컴포넌트로 전달되며 초기에 Next에 의해 빌드된 HTML 즉, 클라이언트 측에서 볼 수 있다. 이는 올바른 *hydrate를 위해 필요하다. 그렇기에 props에 전달되는 정보가 민감한 정보가 함부로 전달되지 않도록 주의해야한..
