/* https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+bash+css-extras+markdown+scss+sql&plugins=line-highlight+line-numbers+autolinker */

?languages=javascript+typescript+python
?tags=frontend,react,hooks

?filters=status:active,owner:me,priority:high
?config=eyJyaWNrIjoicm9sbCJ9==  (base64로 인코딩된 JSON)

?debug=true&analytics=false
?mobile  (존재 = true)

?tags[]=frontend&tags[]=react&tags[]=hooks

?tags[]=frontend&tags[]=react&tags[]=hooks
?ids[0]=42&ids[1]=73

https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript&plugins=line-numbers

https://github.com/zepouet/Xee-xCode-4.5/blob/master/XeePhotoshopLoader.m#L108-L136

https://www.google.com/maps/@22.443842,-74.220744,19z

https://www.figma.com/file/abc123/MyDesign?node-id=123:456&viewport=100,200,0.5

https://store.com/laptops?brand=dell+hp&price=500-1500&rating=4&sort=price-asc

// URL 매개변수 읽기
const params = new URLSearchParams(window.location.search);
const view = params.get('view') || 'grid';
const page = params.get('page') || 1;

// URL 매개변수 업데이트
function updateFilters(filters) {
  const params = new URLSearchParams(window.location.search);

  // 개별 매개변수 업데이트
  params.set('status', filters.status);
  params.set('sort', filters.sort);

  // 페이지 새로 고침 없이 URL 업데이트
  const newUrl = `${window.location.pathname}?${params.toString()}`;
  window.history.pushState({}, '', newUrl);

  // 이제 새 필터를 기반으로 UI 업데이트
  renderContent(filters);
}

// 뒤로/앞으로 버튼 처리
window.addEventListener('popstate', () => {
  const params = new URLSearchParams(window.location.search);
  const filters = {
    status: params.get('status') || 'all',
    sort: params.get('sort') || 'date'
  };
  renderContent(filters);
});

import { useSearchParams } from 'react-router-dom';
// 또는 Next.js 13+의 경우: import { useSearchParams } from 'next/navigation';

function ProductList() {
  const [searchParams, setSearchParams] = useSearchParams();

  // URL에서 읽기 (기본값 포함)
  const color = searchParams.get('color') || 'all';
  const sort = searchParams.get('sort') || 'price';

  // URL 업데이트
  const handleColorChange = (newColor) => {
    setSearchParams(prev => {
      const params = new URLSearchParams(prev);
      params.set('color', newColor);
      return params;
    });
  };

  return (
    <div>
      <select value={color} onChange={e => handleColorChange(e.target.value)}>
        <option value="all">All Colors</option>
        <option value="silver">Silver</option>
        <option value="black">Black</option>
      </select>

      {/* 필터링된 제품이 여기에 렌더링됩니다 */}
    </div>
  );
}

// 나쁨: URL이 기본값으로 복잡해짐
?theme=light&lang=en&page=1&sort=date

// 좋음: URL에는 기본값이 아닌 값만 있음
?theme=dark  // light가 기본값이므로 생략

function getTheme(params) {
  return params.get('theme') || 'light'; // 코드에서 처리된 기본값
}

import { debounce } from 'lodash';

const updateSearchParam = debounce((value) => {
  const params = new URLSearchParams(window.location.search);
  if (value) {
    params.set('q', value);
  } else {
    params.delete('q');
  }
  window.history.replaceState({}, '', `?${params.toString()}`);
}, 300);

// replaceState를 사용하여 히스토리를 넘치지 않도록 함

https://example.com/p?id=x7f2k&v=3
https://example.com/products/laptop?color=silver&sort=price

/products → /products?category=laptops → /products?category=laptops&price=500-1000
  (카테고리 선택)        (가격 필터 추가)

?v=2                   // API 버전
?beta=true             // 베타 기능
?experiment=new-ui     // A/B 테스트 변형

// 사용자가 새로 고침을 누르면 모든 것을 잃음
const [filters, setFilters] = useState({});

// 절대 이렇게 하지 마세요
?password=secret123

// 불명확하고 일관성 없음
?foo=true&bar=2&x=dark

// 자체 문서화되고 일관성 있음
?mobile=true&page=2&theme=dark

?config=eyJtZXNzYWdlIjoiZGlkIHlvdSByZWFsbHkgdHJpZWQgdG8gZGVjb2RlIHRoYXQ_IiwiZmlsdGVycyI6eyJzdGF0dXMiOlsiYWN0aXZlIiwicGVuZGluZyJdLCJwcmlvcml0eSI6WyJoaWdoIiwibWVkaXVtIl0sInRhZ3MiOlsiZnJvbnRlbmQiLCJyZWFjdCIsImhvb2tzIl0sInJhbmdlIjp7ImZyb20iOiIyMDI0LTAxLTAxIiwidG8iOiIyMDI0LTEyLTMxIn19LCJzb3J0Ijp7ImZpZWxkIjoiY3JlYXRlZEF0Iiwib3JkZXIiOiJkZXNjIn0sInBhZ2luYXRpb24iOnsicGFnZSI6MSwibGltaXQiOjIwfX0==

// 잘못된 상태 교체
history.replaceState({}, '', newUrl); // pushState가 필요했을 때 사용됨