hwigaeng 님의 블로그

쿼리(Query)쿼리의 특징쿼리는 고유 키에 연결된 비동기 데이터에 대한 선언적 종속성을 가진다.쿼리는 모든 Promise 기반 메서드와 함께 사용하여 서버에서 데이터를 fetch 할 수 있으며 메서드가 서버의 데이터를 수정하는 경우 (Post , Put , Delete 등) Mutations 를 사용하는 것이 좋습니다.쿼리 사용컴포넌트나 커스텀 훅에서 쿼리를 구독(쿼리의 데이터 변경이 발생하면 구독한 컴포넌트나 커스텀 훅이 업데이트) 하려면 컴포넌트와 커스텀 훅에서 useQuery hook을 호출하여야 합니다.useQuery의 필수 매개변수로는 쿼리의 고유키와 Promise 를 반환하는 함수를 매개변수로 사용해야 합니다.고유한 키는 쿼리를 refetching , caching , sharing 하는데 ..

프로젝트를 진행하며 react query를 적용하며 공부하고 싶었으나 프로젝트에서 사용하지 못하여 따로 공식 문서를 보며 공식문서의 Overview -> installation -> Quick start -> 쿼리-> 뮤테이션 -> Invalidation -> 캐싱-> 백그라운드 업데이트 -> 페이지네이션 및 무한쿼리 -> preFetching 순으로 공부하고자 합니다. Overview 서버 상태의 특징으로는 다음과 같습니다.서버는 보통 원격으로 유지된다.fetch 및 update를 위해서 비동기 API가 필요하다.서버는 공동 소유권(여러 사용자에 의해 동시에 변경이 될 수 있으며)을 의미하며 다른 사람이 변경 가능하다.서버에서 받아와 클라이언트에서 사용한 데이터가 서버 기준으로 오래된 내용일 수도 있..

문제 상황사용자가 선택한 카테고리(Category) 와 문제 수(최대 20개) 에 따라 해당 조건을 만족하는 퀴즈 데이터를 랜덤으로 불러와야 합니다. 그러나 Firebase의 무료 읽기 비용 제한으로 인해 효율적인 데이터 조회 방법이 필요합니다. 트러블슈팅 과정Firebase에서 쿼리를 실행하면 문서 ID 기준 오름차순으로 정렬된 데이터를 반환합니다. 하지만 내부적으로 랜덤하게 데이터를 불러오는 기능은 제공되지 않으며, limit()을 사용하여 개수를 제한할 경우 항상 동일한 데이터가 반환됩니다.첫 번째 시도: 기본 Where 쿼리 사용where 조건을 사용하여 Category == "HTML" 인 퀴즈 데이터를 조회선택된 데이터 중에서 사용자 지정 개수만큼 랜덤으로 선택 문제점:쿼리 색인 비용: Fir..

문제 발생 1: CORS 에러 발생 문제 상황서버에서 프론트엔드서버의 ip를 origin 허용을 해줬으나 POST 요청 시 CORS 에러가 발생하였습니다.문제 분석CORS 에러는 프로토콜, 도메인, 포트가 일치하지 않을 때 발생합니다.현재 상황:프로토콜: HTTP로 동일도메인: 현재 도메인 네임은 없고 ip가 서로 다르므로 서로 다른 도메인으로 설정되어 있음.서버에서 프론트엔드 도메인(프론트엔드 ip)을 허용 출처(origin)로 설정했지만 여전히 문제 발생확인 결과, 허용되지 않은 헤더가 존재하여 CORS 에러가 발생하였습니다.서버에서 와일드카드(*)를 사용하지 않고 특정 헤더만 허용했기 때문에, 브라우저가 자동으로 추가하는 헤더에서 CORS 에러가 발생했습니다.해결 방법Node.js와 Express에..

공연 등록 에디터 구현에서 겪은 문제와 해결 방법이번 프로젝트에서는 소공연장의 예약 기능을 제공하는 플랫폼을 개발하고 있었고, 저는 그 중 공연 등록 기능을 담당하게 되었습니다. 공연 등록 기능을 구현하는 과정에서 다양한 문제를 겪었고, 그 문제들을 해결해 가며 배운 점들을 정리해보았습니다.1. 에디터 선택: 다양한 옵션들공연 등록 과정에서 공연에 대한 세부 정보를 업로드할 수 있는 에디터가 필요했습니다. 이 과정에서 고려했던 에디터는 Draft.js, Toast UI, React-Quill, Tiptap 이었습니다. 각 에디터의 장단점을 비교한 결과 Tiptap을 선택하게 되었고, 그 이유는 다음과 같습니다.Draft.js: Meta에서 제공하는 에디터로 유연한 커스터마이징이 가능하지만, 높은 러닝 커..

프로젝트 개요소공연장의 예약 기능을 제공하는 플랫폼을 개발하는 프로젝트를 진행하고 있습니다. 제가 담당한 부분은 공연 등록 기능이며, 사용자가 예기치 않게 브라우저가 종료되었을 때를 대비한 임시 저장 기능을 구현하는 과정에서 발생한 문제와 해결 방법을 정리했습니다.1. 임시 저장 기능 구현 계획요구사항사용자가 공연 등록 도중 브라우저가 종료되어도 입력한 데이터가 유지되어야 함재방문 시 이전에 입력했던 데이터를 복원할 수 있는 옵션 제공접근 방법프로젝트에서 Redux를 통해 상태 관리를 하고 있었기 때문에, localStorage에 상태를 영구 저장하는 기능을 제공하는 redux-persist 라이브러리를 활용하기로 결정했습니다. 2. 문제 상황 1: 비직렬화 값 에러문제 설명redux-persist를 도..

문제 다음의 연산을 할 수 있는 자료구조인 이중 우선 순위 큐를 구현하여 주어진 명령어를 수행한 결과를 리턴하는 문제이다.I 숫자 : 큐에 주어진 숫자를 삽입합니다D 1 : 큐에서 최대값을 삭제합니다.D -1 : 큐에서 최솟값을 삭제합니다.내 풀이이중 우선순위 큐는 두개의 힙(maxHeap과 minHeap)을 이용하여 구현하는 자료구조로 최솟값과 최대값을 효율적으로 추출하고 관리할 수 있는 구조이다.JavaScript에서는 기본적으로 heap을 제공하지 않기때문에 직접 구현을 하여 문제를 풀게 되었다. minHeap 구현 minHeap은 이진 트리 구조를 기반으로 하는 자료구조로 , 부모 노드의 값이 자식 노드의 값보다 항상 작거나 같다는 특성을 가진다 . 이로 인해 최솟값이 루트 노드에 위치하게 되어 ..

문제1 ~ 1,000,000,000 의 길이의 도로가 있을 때 1,000,000 까지의 숫자가 적혀있는 블록으로 도로를 채우는 문제이다.블록을 채울 때의 규칙은 다음과 같다.블록에 적힌 번호가 n 일 때 , 가장 첫 블록은 n* 2 번째 위치부터 n*3 , n*4  , ... 위치에 설치한다.기존에 설치된 블록이 있을 때는 기존의 블록을 제거하고 새로운 블록을 집어 넣게 된다.   내 풀이위의 규칙대로 도로를 블록으로 채우게 되면 도로의 길이에 해당하는 블록은 자기 자신을 제외하고 숫자가 1,000,000 이하인 최대 약수가 되며 최대 약수를 구하는 과정에서 사용한 방법은 약수는 쌍을 이루게 된다는 성질을 이용하였다.자연수 n의 약수를 d라고 가정하면 n / d 또한 약수가 된다.제곱근 이상의 약수는 n..

문제 카드 게임 규칙첫 카드 상자를 임의로 선택선택한 상자의 카드 번호에 해당하는 상자를 차례로 열기처음 선택한 상자의 번호가 나올 때까지 반복위의 과정을 선택할 카드 상자가 없을 때까지 반복점수 계산카드 그룹의 수가 2 미만이면 0점2 이상이면, 각 그룹의 카드 개수를 곱한 값 중 최대값을 점수로 선정내 풀이 function solution(cards) { const visit = new Array(cards.length).fill(false); const result = []; const findGroupCard = (start) => { const cardList = []; let current = start; while (..

문제 틱택토를 진행한 보드판이 주어질 때 해당 보드 판이 정상적으로 진행된 틱택토인지 확인하는 문제이다.내 풀이틱택토는 O(선공)와 X(후공)가 번갈아가며 진행하는 게임이다. 각 플레이어는 한 번씩 번갈아 두어야 하므로, 게임이 정상적으로 진행되려면 다음 규칙들이 지켜져야 한다:O는 반드시 첫 번째로 둬야 한다O와 X는 반드시 번갈아 두어야 한다한 플레이어가 승리하면 게임이 즉시 종료되어야 한다이러한 규칙들을 바탕으로 정상적이지 않은 틱택토의 경우를 찾아보면 선공(O)과 후공(X)의 차이가 2 이상이거나 후공이 선공보다 많이 진행한 경우O와 X는 번갈아 두므로 X의 개수는 절대 O의 개수보다 많을 수 없다O와 X의 개수 차이는 최대 1까지만 가능하다 예시: 'XXO..' (X가 O보다 많음 → 불가능)선..