이게 씨발 현대적인 웹사이트다

블로그나 문서 사이트의 접근성, SEO, 소셜 카드, 성능 최적화는 복잡한 프레임워크 없이도 HTML과 브라우저 기본 기능으로 구현할 수 있음 시맨틱 HTML과 기본 UI 요소를 쓰면 별도 라이브러리 없이 문서 구조를 전달하고, 키보드와 스크린 리더를 지원하는 인터페이스를 만들 수 있음 리소스 힌트, 사전 렌더링, 반응형 이미지로 로딩과 페이지 이동을 개선할 수 있으며, 모든 리소스를 미리 로드하면 우선순위를 지정하는 효과가 사라짐 페이지가 많고 공통 헤더가 필요하면 정적 사이트 생성기나 서버 측 포함 기능이 적절하며, 스프레드시트나 영상 편집기 같은 실제 애플리케이션에는 프레임워크를 사용해도 됨 원칙은 스타일이나 도구를 무조건 배제하는 것이 아니라, HTML부터 시작해 필요한 것만 추가하고 완성되면 멈추는 것임 문서를 보여주는 데 과도해진 도구 체계 2013년 motherfuckingwebsite.com이 웹사이트의 과잉 설계를 비판했지만, 이제는 문단 하나를 표시하는 데도 Node, 패키지 관리자, 의존성 1,100개, 번들러, 트랜스파일러, 메타 프레임워크, 하이드레이션 전략, CI 파이프라인까지 동원함 단순한 “Hello World”의 잠금 파일이 페이지보다 길고 텍스트 중심 블로그에 로딩 표시가 붙는 상황에서, 현대적 기능이 필요하다는 이유만으로 복잡한 도구 체계를 정당화할 수는 없음 SEO, 소셜 카드, 성능 최적화, 반응형 이미지에 필요한 기능은 HTML 태그로 직접 작성할 수 있음 시맨틱 요소와 브라우저 기본 UI <div>에 탐색 영역이라는 의미를 부여하려고 접근성 라이브러리를 설치하기보다 <nav> 를 사용할 수 있으며, 이 요소는 Internet Explorer 9에서도 지원했음 시맨틱 요소로 랜드마크와 문서 개요를 구성하고 키보드 탐색, 읽기 모드, 스크린 리더와 검색 엔진의 이해를 지원할 수 있음 예시에는 <header>, <nav>, <main>, <article>, <h1>, <section>, <aside>, <time datetime="…">, <footer>가 쓰임 이를 위해 별도의 JavaScript를 추가할 필요가 없음 <details> 로 펼침/접힘 UI를 만들면 npm 설치나 useEffect 없이 키보드, 스크린 리더, 페이지 내 검색을 지원함...