개발기록

🌱  결과물 🌱  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..

총 6단계HTML를 파싱 후, DOM트리 구축CSS를 파싱 후, CSSOM트리 구축JavaScript 실행DOM과 CSSOM을 조합하여 렌더트리 구축뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기 계산 (Layout 단계)계산한 위치/크기를 기반으로 화면에 그림 (Paint 단계) ▶︎ 브라우저의 주요 기능: 사용자가 요청한 HTML 페이지, PDF, 이미지 등을 서버에서 요청해 보여주는 것 ▶︎ 랜더링 엔진: 사용자가 선택한 콘텐츠를 표시해주는 소프트웨어브라우저렌더링 엔진크롬Blink 사파리Webkit파이어폭스Gecko ▶︎ 파싱(Parsing)브라우저가 코드를 이해하고 사용하기 쉬운 구조로 변환하는 것문서나 HTML 등 어떤 큰 자료에서 내가 원하는 정보만 가공하고 추출해서 원할 때 ..

클라우드 서비스란?물리적 자원 혹은 논리적 자원을 대여하는 것인터넷을 통해 컴퓨팅 자원, 데이터 저장, 소프트웨어, 플랫폼 및 기타 서비스를 원격으로 제공하는 것  EC2Elastic Compute Cloud크기 조정이 가능한 컴퓨팅 파워를 클라우드에서 제공하는 웹 서비스  AWS 인스턴스 생성하기 인스턴스 생성 완료  EC2에 애플리케이션 배포하기chmod 400 keyPair.pemssh -i keyPair.pem ec2-user@172.31.16.55curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bashexport NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "$..