URLURL 객체는 웹 주소(URL)를 파싱하고 조작하기 위한 JavaScript의 내장 APIURL 객체를 사용하면 URL의 각 구성 요소(프로토콜, 호스트, 경로, 쿼리 매개변수 등)에 쉽게 접근하고 수정 가능https://www.example.com:8080/path/to/page?name=value&search=test#section└─┬─┘ └─────┬─────┘ └─┬──┘└─────┬─────┘└───────┬─────────────┘└──┬──┘프로토콜 호스트 포트 경로 쿼리 매개변수 해시(프래그먼트) URLSearchParamsURLSearchParams 객체는 URL의 쿼리 문자열(query string)을 쉽게 처리하기 위한 APIURL의..

📃CartPage 코드import React, { useState } from 'react'import { useLoaderData } from 'react-router-dom'import css from './CartPage.module.css'import { formmatCurrency } from '@/utils/features'import { updateCartItemCount, removeFromCart } from '@/api/cartApi'const CartPage = () => { const cartList = useLoaderData() const [items, setItems] = useState(Array.isArray(cartList) ? cartList : []) conso..

리액트의 동작 원리를 파악하기 위해 구현 순서를 우선적으로 정리했다.💡구현 순서1. 필요한 컴포넌트 생성: components 폴더 생성 후 Header.jsx, Editior.jx, List.jsx파일 생성 2. 컴포넌트 호출: App.jsx로 들어가 생성한 컴포넌트를 불러온다.import './App.css';import Header from './components/Header';import Editor from './components/Editor';import List from './components/List'; 3. 화면 렌더링: App 컴포넌트안에 각각 컴포넌트들을 렌더링한다.function App() { return ( );} 4. H..

📃 DetailTabInfo 코드 설명import React, { useState } from 'react'import css from './DetailTabInfo.module.css'const DetailTabInfo = () => { const [activeTab, setActive] = useState(0) const tabTiles = ['메뉴1', '메뉴2', '메뉴3'] return ( {tabTiles.map((title, i) => ( setActive(i)} > {title} ))} 제목1 내용이 들어갑니다. ..

📃 features.jsexport const formatCurrency = number => { return number.toLocaleString() + '원'}export const formatDate = date => { const d = new Date(date) const year = d.getFullYear() // getMonth()는 0부터 시작하므로 1을 더하고, 10보다 작으면 앞에 0 추가 const month = String(d.getMonth() + 1).padStart(2, '0') const day = String(d.getDate()).padStart(2, '0') return `${year}. ${month}. ${day}`}// 디바운스 : 연속된 호출을 ..

animation은 각 애니메이션 제어 속성의 단축 속성animation: 애니메이션이름 지속시간 대기시간? 타이밍함수? 반복횟수? 반복방향? 전후상태? 재생/정지?;값의미기본값animation-name@keyframes의 이름none animation-duration 지속 시간 0s animation-delay 대기 시간 0s animation-timing-function 타이밍 함수 ease animation-iteration-count 반복 횟수 1 animation-direction 반복 방향 normal animation-fill-mode 전후 상태 none animation-play-state 재생과 정지 running CSS Animation ..

📃 image slider 코드에 대한 설명import React, { useEffect, useState } from 'react'import { Swiper, SwiperSlide } from 'swiper/react'import { Link } from 'react-router-dom'import { Navigation, Pagination, Autoplay } from 'swiper/modules'import { getBannerData } from '../api/bannerApi'import css from './HeroSlider.module.css'const delay = ms => new Promise(resolve => setTimeout(resolve, ms))const HeroSli..

💡 Lighthhouse F12 → 개발자 도구 → Lighthouse Lighthouse는 무엇인가? 🤔 웹 성능 최적화 도구 총 4가지( performace, accessibilty, best practices, seo )로 검사주의사항테스트 환경에 따라 점수가 달라짐네트워크 상태, 시스템 성능 등 환경 요소가 결과에 여향비즈니스 우선순위와 균형 유지사용자 경험 개선이 목표💡성능 향상을 위해 검토할 내용 → 자바스크립트 최적화 → 라우터 구성에서 lazy 컴포넌트를 Suspense로 감싸기🔍 lazy()에 대해서 알아보자!const MainPage = lazy(() => import('./pages/MainPage'))const AboutPage = lazy(() => import('./pa..

📃 주요 코드 설명import React, { useEffect, useState } from 'react'import { Link, NavLink, useLocation } from 'react-router-dom'...const Header = () => { const [isOn, setIsOn] = useState(false) const location = useLocation() console.log(location) console.log(location.pathname) const addClassOn = () => { setIsOn(!isOn) } useEffect(() => { setIsOn(false) }, [location.pathname]) const hand..