yunkogong

1️⃣ 로컬 스토리지와 세션 스토리지 차이항목로컬 스토리지 (localStorage)세션 스토리지 (sessionStorage)유지 기간브라우저 종료 후에도 영구 저장브라우저 탭을 닫으면 자동 삭제범위모든 탭/창에서 공유같은 탭 안에서만 유효용량 제한약 5~10MB약 5MB삭제 시점직접 removeItem 호출 필요탭/창 닫으면 자동 삭제사용 예시로그인 정보, 사용자 설정 등페이지 이동 간 임시 데이터 전달2️⃣ JSON.stringify 를 사용하는 이유웹 스토리지는 문자열만 저장 가능객체/배열을 저장할 때는 JSON.stringify() 필요불러올 때는 JSON.parse()로 원래 형태 복원// 저장sessionStorage.setItem('name', JSON.stringify({ name: '홍..

1️⃣ 메타 태그 예시2️⃣ 메타 태그 설명태그설명한글 등 문자가 깨지지 않도록 UTF-8 인코딩 설정반응형 웹을 위한 필수 태그 (모바일 대응)브라우저 탭에 표시될 제목, SEO 기본 텍스트검색 엔진이 읽는 페이지 설명SNS/메신저에서 공유 시 표시될 제목SNS/메신저에서 표시될 설명페이지 유형 (website, article 등 사용 가능)공유 시 연결될 정확한 URL공유 썸네일 이미지 (전체 URL 권장)3️⃣ og:image 설정 팁권장 사이즈: 1200 x 630px최소 사이즈: 200 x 200px 이상 (너무 작으면 썸네일 미표시 가능)경로 형식: https:// 로 시작하는 절대 경로 사용 권장4️⃣ CSR vs SSR 주의사항CSR(Client Side Rendering) 환경(예: 순수..

✅ 1. 목적서비스 로고(logo.svg)를 최적화하여 초기 페이지 로딩 속도 개선 및 브라우저 렌더링 효율 향상.✅ 2. 적용 전HTML 태그 단순 사용Lazy Loading / Priority 미적용DevTools 기준 로딩 시간 평균 약 10ms✅ 3. 적용 후 — next/image 활용import Image from 'next/image';기본 Lazy Loading 적용priority 옵션으로 즉시 로딩 처리 (로고·히어로 이미지 등 첫 화면 핵심 이미지에 적합)DevTools 기준 로딩 시간 평균 약 4msfill 사용 시 부모 요소에 position: relative 필수✅ 4. 기대 효과초기 렌더링 속도 향상불필요한 이미지 지연 로딩 방지 (필요 시 즉시 로딩)PNG/JPG 사용 시 자..

1. 목적Google Material Symbols 아이콘 사용 시, 폰트 로딩 전 "edit" 텍스트가 잠깐 보이는 깜빡임(FOUT) 현상이 발생합니다.이는 폰트가 늦게 로드될 때 발생하며, 사용자에게 미완성된 UI를 노출하는 문제를 유발합니다.이를 해결하기 위해 폰트 로딩 전 아이콘 숨김 → 로딩 완료 후 표시 전략을 적용했습니다.2. 문제 예시edit네트워크 지연 시 "edit"이라는 글자가 잠시 보인 뒤 아이콘으로 변환FOUT(Font Out-Of-Time) 발생3. 해결 방법(1) MyApp 컴포넌트에서 폰트 로딩 감지_app.tsx의 MyApp 컴포넌트에서 document.fonts.load()로 폰트 로딩 여부를 감지하고, HTML 태그에 클래스를 부여합니다.import { useEffect..