개발기록

✪ 상태 - 어떠한 의미를 지닌 값 - 애플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값 - 웹 애플리케이션을 구성하는 변경될 수 있는 데이터 ✪ 웹에서의 상태 ✧ UI: 상호 작용이 가능한 모든 요소의 현재 값은 상태이다. 예) 다크/라이트 모드, 각종 input, 알림창의 노출 여부 등 ✧ URL: 브라우저에서 관리되고 있는 상태값. 상태는 사용자의 라우팅에 따라 변경됨. 예) https://www.airbnb.co.kr/rooms/2024?adults=2 ➔ 상태: roomId=2024, adults=2 ✧ 폼(form): 로딩 중인지(loading), 현재 제출됐는지(submit), 접근이 불가능한지(disabled), 값이 유효한지(validation) 등 모두가 상태로 관리된다. ✧..

1. 로그인, 회원가입 UI 구현  2. Firebase 연동firebase 가입한 뒤, 프로젝트 생성해주고 기타 설정해준다. 자세한 설명은 docs 참고//firebase.ts// Import the functions you need from the SDKs you needimport { initializeApp } from "firebase/app";import { getAnalytics } from "firebase/analytics";// TODO: Add SDKs for Firebase products that you want to use// https://firebase.google.com/docs/web/setup#available-libraries// Your web app's Fireb..

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