개발기록

🌱  결과물  🌱  React Query - useInfiniteQuery thecatapi에서 고양이 사진을 무한으로 불러오기 위해 react-query에서 제공하는 useInfiniteQuery 훅을 사용했습니다.//UseFetchInfiniteData.tsimport { useInfiniteQuery } from '@tanstack/react-query';async function fetchInfiniteData({ pageParam = 1 }) { const limit = 10; // 한 번에 불러올 데이터 수 const response = await fetch(`https://api.thecatapi.com/v1/images/search?limit=${limit}&page=${pageP..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

🌱  결과물 🌱  Lighthouse 성능 측정 🌱  Tanstack Query - 비동기 API 호출 // src/hooks/useFetchData.tsimport { useQuery } from '@tanstack/react-query';async function fetchData (page: number, limit: number = 12) { // sessionStorage 데이터 존재 유무 확인. const cachedData = sessionStorage.getItem(`catImages-page-${page}`); if (cachedData) return JSON.parse(cachedData); const response = await fetch(`https://ap..

React Query란? React application의 데이터를 가져오기(fetching)위한 라이브러리 기능 캐싱(특정 데이터의 복사본을 저장하여 이후 동일한 데이터의 재접근 속도를 높이는 것) client 데이터와 server 데이터 간의 분리 백그라운드에서 오래된 데이터 업데이트 데이터가 얼마나 오래되었는지 알 수 있음 데이터 업데이트를 가능한 빠르게 반영 페이지네이션 및 데이터 지연 로드와 같은 성능 최적화 서버 상태의 메모리 및 가비지 수집 관리 구조 공유를 사용하여 쿼리 결과를 메모화 1. 설치 npm i @tanstack/react-query # or pnpm add @tanstack/react-query # or yarn add @tanstack/react-query 개발자도구: Re..

❓ TCP/IP vs OSI 모델 OSI 모델: 표준 프로토콜을 사용하여 다양한 통신 시스템이 통신할 수 있도록 국제표준화기구에서 만든 개념 모델이다. OSI는 상이한 컴퓨터 시스템이 서로 통신할 수 있는 표준을 제공한다.TCP/IP 모델: 인터넷에서 컴퓨터들이 서로 정보를 주고 받는데 쓰이는 프로토콜의 집합. 인터넷 프로토콜 스위트 (Internet Protocol Suite)라고도 부른다. TCP/IP와 OSI의 차이점은 실무와 이론의 차이이다. OSI 7계층은 참조 모델(reference model)로 사실상 이론적인 개념. 현재의 TCP/IP 계층이 더 실무적인 구조에 가깝다. TCP/IP는 실용적인 프로토콜 모음이고 OSI는 프로토콜 독립적인 개념 모델이다. 즉, OSI는 여러 통신 방식에 대한..

◼︎ 빅데이터: 기존의 데이터 처리 응용에서는 다루기 어려운 크고 복잡한 데이터셋에 대하여 분석하고 정보를 찾아내는 분야 ◼︎ 데이터 분석(Data Analysis): 데이터의 패턴을 파악해 의미를 도출하고 미래를 예측하여 유리한 의사결정을 하기 위한 일련의 과정- 데이터(Data): 문자, 숫자, 소리, 영상 등의 형태로 된 의미 단위- 모델링(modeling): 관찰한 데이터에 있는 패턴이나 관계를 수학적인 표현으로 재해석하여 수식으로 표현하는 작업  ◼︎ 데이터 분석 프로세스분석 목표 설정  ->  데이터 수집  ->  데이터 가공  ->  데이터 분석(모델링)  ->  데이터 시각화  ◼︎ 데이터 유형형태에 따라 분류- 정형 데이터: 미리 정해진 형식에 따라 구조화되어 있는 데이터RDB(관계형데이..

▶︎ API(Application Programming Interface)응용프로그램에서 사용할 수 있도록, 운영체제나 프로그래밍 언어에서 제공하는 기능을 제어할 수 있게 해주는 인터페이스애플리케이션 간에 지정된 형식으로 요청과 응답을 할 수 있도록 연결하는 것다른 소프트웨어 시스템과 통신하기 위해 따라야 하는 규칙응용프로그램에서 소통하기 위한 접점 ▶︎ 인터페이스상호간에 소통을 위해 만들어진 접점.사람과 사람, 사람과 사물 또는 기기를 연결하는 것.사용자가 기기를 쉽게 동작시키는데 도움을 주는 시스템.예시) 키보드(사람-컴퓨터), 차키(사람-자동차), 배달 어플(사람-어플)  ▷ UI(User Interface)사용자가 소통하기 위한 접점.사람(사용자)과 사물 또는 시스템, 기계, 컴퓨터 프로그램 등 ..