Frontend

그래프(Graph) 그래프는 tree의 상위개념으로 그래프(Graph)란 사물을 정점(vertax)와 간선(edge)으로 이루어져있다. 그래프는 두 가지 방식으로 구현할 수 있다. 인접 행렬(adjacency matrix): 2차원 배열을 사용하는 방식 인접 리스트(adjacency list): 연결 리스트를 이용하는 방식 인접 행렬(Adjacency Matrix) 인접행렬(adjacency matrix)에서는 그래프를 2차원 배열로 표현한다. 가중치가 0인 경우와 대비하기 위해 ∞로 표시하기도 한다. 인접행렬 - 무방향 무가중치 그래프 모든 간선이 방향성을 가지지 않는 그래프를 부방향 그래프라고 한다. 모든 간선에 가중치가 없는 그래프를 무가중치 그래프라고 한다. 무방향 비가중치 그래프가 주어졌을 때 ..

트리(Tree) 트리는 가계도와 같이 계층적인 구조를 표현할 때 사용할 수 있는 자료구조이다. 나무(tree)의 형태를 뒤집은 것과 같이 생겼다. 트리에서는 부모와 자식관계, 형제관계가 성립한다. 트리(Tree) 용어 정리 루트 노드(root node): 부모가 없는 최상위 노드 단말 노드(leaf node): 자식이 없는 노드 -> (이때 5리프와 23리프끼리는 17이라는 같은 부모를 두었으므로 형제관계에 속한다고 볼 수 있다.) 깊이(depth): 루트노드에서의 길이(length) -> 길이란 출발노드에서 목적지 노드까지 거쳐야 하는 간선의 수를 의미한다. 트리의 높이(height): 루트노드에서 리프노드까지의 길이를 의미한다. 이진 트리(Binary Tree) 이진 트리(Binary Tree)는 최..

큐(Queue) 큐(Queue)는 먼저 삽입된 데이터가 먼저 추출되는 자료구조이다. 예시) 게임대기 큐는 먼저 대기한 사람이 먼저 게임에 매칭된다. 연결 리스트로 큐 구현하기 큐를 연결리스트로 구현하면, 삽입과 삭제에 있어서 O(1)을 보장할 수 있다. 연결리스트로 구현할 때는 머리(head)와 꼬리(tail) 두개의 포인터를 가진다. 머리(head): 남아있는 원소중 가장 먼저 들어온 데이터를 가리키는 포인터 꼬리(tail): 남아있는 원소중 가장 마지막에 들어온 데이터를 가리키는 포인터 삽입할 때에는 꼬리(tail)위치에 데이터를 넣는다. 삭제할 때에는 머리(head)위치에서 데이터를 꺼낸다. 큐 동작속도: 배열(Array) vs 연결리스트(Linked List) 다수의 데이터를 삽입 및 삭제할때에 ..

SSR React Query는 서버로부터 데이터를 미리 받아오고, QueryClient에 제공하는 두가지 방법을 지원한다. 첫째, 클라이언트 측에서 데이터를 미리 가져와 initialData로서 전달하는 것 -> 이 방법은 간단한 경우에 빠르게 설정할 수 있지만 몇 가지 주의 사항이 있다. 둘째, 서버에서 쿼리를 미리 가져오고 캐시를 비활성화하여 클라이언트에서 재사용하는 것 -> 이 방법은 초기 설정에 약간 더 많은 설정이 필요하지만 더 많은 성능 향상을 제공할 수 있다. Using 'initialData' Next.js의 getStaticProps 혹은 getServerSideProps와 함께 사용하면 두 메서드중 어느 하나에서 fetch한 데이터를 useQuery의 initialData옵션에 전달할 ..

Paginated Queries Paginated Queries를 사용하면, API에서 반환된 데이터가 많은 경우, 페이지단위로 데이터를 가져와 사용자경험을 좋게 많들 수 있다. 여기서 주의해야할점은 query keys에 포함된 state(아래 예시에서는 pageNumber)는 기본적으로 변경될때마다 query를 refetch하므로 페이지이동이 발생할때마다 깜빡임이 발생하는둥 사용자경험측면에서 안좋을 수 있다. 이때 해결할 수 있는 방법은 keepPreviousData옵션을 사용하는 것이다. keepPreviousData keepPreviousData옵션을사용하면 새로운 데이터를 받아올때까지, 이전에 성공적으로 받은 데이터를 이용한다. 그리고 새로운 데이터가 성공적으로 받아지면 background에서 교..

Client-side data fetching 클라이언트 사이드 데이터 가져오기는 페이지가 SEO 인덱싱이 필요하지 않거나 데이터를 사전 렌더링할 필요가 없거나 페이지 내용이 자주 업데이트 되어야 할 때 유용하다. 서버 측 렌더링 API와 달리, 컴포넌트 수준에서 클라이언트 측 데이터 가져오기를 사용할 수 있다. 페이지 수준에서 수행하면 데이터는 런타임에 가져와 페이지 내용이 데이터가 변경될 때마다 업데이트된다. 컴포넌트 수준에서 사용하면 데이터는 컴포넌트 마운트 시점에 가져와 컴포넌트 내용이 데이터가 변경될 때마다 업데이트된다. 하지만 클라이언트 측 데이터 가져오기는 애플리케이션의 성능과 페이지 로드 속도에 영향을 미칠 수 있다. 이는 데이터 가져오기가 컴포넌트나 페이지 마운트 시점에 수행되며 데이터가..

들어가기 React v18에서는 새로운 Suspense SSR Architecture가 추가될 예정이고 이제 React의 Suspense를 융합해 선택적인 Hydratation을 웹사이트에 적용할 수 있게 된다. Hydratation은 이미 서버 사이드 렌더링을 제공하는 많은 프레임워크나 라이브러리(Gatsby, Next.js 등)에서 필수적으로 제공하는 솔루션이다. 왜 이 기술을 사람들이 사용하려 하는지 다시 생각해 보고 그 동작 원리를 한번 정리하는 시간을 가져 보려 한다. Hydration In web development, hydration or rehydration is a technique in which client-side JavaScript converts a static HTML web..

Window Focus Refetching 만약 유저가 다른 창으로 이동했고, 그 사이에 query data가 stale상태로 변해있다면 TanStack Query는 자동적으로 background환경에서 데이터를 요청한다. 만약 이게 싫다면 refetchOnWindowFocus option을 설정하여 개별 쿼리든, 전역적으로 설정해서 모든 쿼리에 대해 서든 이러한 설정을 막을 수 있다. 전역적으로 모든 query에 대해 window focus refetching 막기 const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, }, }, }) function App() { return ... }..