📍문제 링크 https://www.acmicpc.net/problem/21921 21921번: 블로그 첫째 줄에 $X$일 동안 가장 많이 들어온 방문자 수를 출력한다. 만약 최대 방문자 수가 0명이라면 SAD를 출력한다. 만약 최대 방문자 수가 0명이 아닌 경우 둘째 줄에 기간이 몇 개 있는지 출력한다 www.acmicpc.net 📍알고리즘 분류 - 누적 합 - 슬라이딩 윈도우 📍문제 풀이 - 주어진 수열에서 연속된 N개의 최댓값과 가능한 갯수를 출력하라 - Sliding Window 알고리즘을 사용하면 O(N^2) 대신 O(N)으로 해결이 가능 📍Sliding Window - 배열이나 문자열같은 일련의 데이터셋에서 특정 조건을 만족시키는 (예 - 일정 구간의 최댓값) 하위 집합을 찾을 때 유용 - wi..

[유데미] React Query : React로 서버 상태 관리하기 📍props type 부여 - 부모 컴포넌트에서 넘겨준 props는 어떻게 type을 지정할까? 부모 컴포넌트에서 export한 type을 자식 컴포넌트에서 사용하기 위해 새롭게 typing이 필요 // 1. 부모 컴포넌트에서 타입을 import import { PostType } from "./Posts"; // 2. props에 맞는 형태로 재가공 // props가 여러개일때는 post밑에 이어서 쓰면 됨 interface PostProps { post: PostType; } // ... // 3. {} 뒤에 지정 export function PostDetail({ post }: PostProps) { // ... } 📍익명 함수 형..

[유데미] React Query : React로 서버 상태 관리하기 📍React Query Dev Tools이란? - 리액트 쿼리에서 기본 제공하며, 다양한 기능을 제공 - v4 부터 직접 import하게 바뀌었음! npm i @tanstack/react-query-devtools - Development 환경에서만 보여지므로 따로 -D 옵션으로 설치할 필요는 없다 📍기능 1️⃣key에 기반하여 쿼리를 보여준다 - 쿼리들의 상태 - 마지막 업데이트 타임스탬프 2️⃣반환된 데이터를 보여준다 3️⃣쿼리 탐색기 제공 📍사용방법 1️⃣npm install 후, query client를 생성한 컴포넌트 (App) 에서 import 해준다 2️⃣Provider 내부의 최하단에 devtools를 삽입 // App.t..

[유데미] React Query : React로 서버 상태 관리하기 📍prefetching 유저가 다음 페이지로 넘어가기 전에 미리 데이터 받아와서 매끄럽게 UI 변경하는 것 📍기본적인 사용 흐름 overview 1️⃣패키지 설치 npm i @tanstack/react-query 2️⃣query client 생성 - client는 쿼리와 캐시를 관리 3️⃣QueryProvider 적용 - children에 cache, client config 제공 - query client를 값으로 취함 4️⃣useQuery 훅 사용 - 서버에 쿼리하는 훅 📍QueryProvider // app.tsx // import import { QueryClient, QueryClientProvider } from "@tanst..

[유데미] React Query : React로 서버 상태 관리하기 📍@tanstack/react-query npm i react-query 대신 npm i @tanstack/react-query 📍query key들은 배열이어야 함 - 문자열 대신 배열로 묶기 📍devtools를 따로 설치해야 함 npm i @tanstack/react-query-devtools 📍setLogger가 제거됨 - 대신 QueryClient 옵션으로 logger를 추가한다

[유데미] React Query : React로 서버 상태 관리하기 📍클라이언트 상태 vs 서버 상태 - client state : 브라우저의 세션과 관련된 데이터 예) 언어, 테마 등 유저가 선택하는 정보 - server state : 서버에 저장된 데이터 fetching과 updating을 위해 비동기 API가 필요 예) DB에 저장된 post들 📍React Query의 역할 - React 앱에서 서버 상태를 쉽게 fetching, caching, synchronizing, updating 할 수 있다 - fetch로 바로바로 HTTP 요청을 보내서 데이터를 가져오는 것 대신 React Query가 cache한 데이터를 사용 - pagination / infinite scroll 쉽게 구현 가능 📍T..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍타입을 부여하는 2가지 방법 1️⃣ 타입 선언 (Declaration) : 일반적인 방법 (: type) 2️⃣ 타입 단언 (Assertion) : as 키워드를 사용하여 타입을 강제로 지정하고, 타입 체커에게 오류를 무시하게 함 - 예시 interface Person { name: string } const alice: Person = { name: "Alice" }; // 타입 선언 const bob = { name: "Bob" } as Person; // 타입 단언 ⭐ 타입 선언을 사용하는 것이 좋다! - 이유 : 타입 단언은 타입 체크를 무력화한다 interface Person { name: string } const steve: Perso..

📍참고https://www.acmicpc.net/problem/2720 2720번: 세탁소 사장 동혁각 테스트케이스에 대해 필요한 쿼터의 개수, 다임의 개수, 니켈의 개수, 페니의 개수를 공백으로 구분하여 출력한다.www.acmicpc.net 매우 익숙한 그리디 문제.divmod 메서드를 사용하면 // 와 % 연산자를 함께 사용할 때 유용하다 📍코드N = int(input())data = [int(input()) for i in range(N)]coins = [25, 10, 5, 1]for C in data: rest = C answer = [] for coin in coins: # divmod(x, y) : x를 y로 나눈 몫과 나머지를 tuple로 반환할 수 있다 ..