Fresh

Fresh 2의 구조와 실제 서비스 구현을 다룹니다.

Fresh에서 글이 늘어날 때: URL로 유지되는 페이지네이션

Fresh의 카테고리와 검색 결과를 서버에서 페이지로 나눕니다. 검색어를 유지하는 링크, 같은 날짜의 글 순서, 빈 결과와 404, 페이지별 canonical을 실제 응답으로 확인합니다.

Island에서 Markdown 로더를 직접 가져오면 빌드와 브라우저에서 어떤 일이 생기는지 확인합니다. 서버 핸들러에서 읽은 데이터를 props로 전달하고, import type을 추가했을 때의 번들도 비교합니다.

Deno.test로 빌드된 Fresh 서버의 상태 코드, HTML, 검색 결과, 사이트맵과 CSS 응답을 검사합니다. 브라우저나 외부 광고 요청 없이 반복 실행할 수 있는 HTTP 응답 테스트를 만듭니다.

Fresh 2의 _error.tsx와 HttpError로 오류 페이지를 만듭니다. Markdown 로더가 파싱 오류와 권한 오류까지 404로 숨기던 문제를 수정하고, 빌드된 서버의 HTTP 상태 코드와 응답 HTML을 확인합니다.

Fresh Markdown 블로그를 Docker로 배포하는 구성을 만들고, 콘텐츠 파일 포함 여부, 실행 경로, 공개 URL과 production 응답을 확인하는 방법을 정리합니다.

Fresh와 daisyUI에서 테마 전환을 구현하고, 쿠키와 서버 렌더링을 연결해 새로고침 후에도 선택한 테마로 첫 화면을 만드는 방법을 살펴봅니다.

Fresh의 UI 계층인 Preact를 글 주소 복사 버튼 예제로 살펴봅니다. 컴포넌트 재사용, Hooks와 Signals, 브라우저 API의 실행 위치, React 호환 범위를 정리합니다.

Fresh 2에서 별도의 검색 라이브러리나 클라이언트 JavaScript 없이 Markdown 메타데이터를 이용한 서버 검색 기능을 구현합니다.

Fresh 2에서 Markdown 파일을 글 데이터로 사용하고 Front Matter, 동적 라우팅, 코드 하이라이팅, SEO와 sitemap까지 연결하는 과정을 살펴봅니다.

Fresh 2.3에서 Island가 없는 페이지와 있는 페이지를 비교하며 Zero JS가 실제 HTML과 네트워크 요청에서 어떻게 나타나는지 확인합니다.

Fresh가 왜 서버에서 HTML을 먼저 만들고, 필요한 부분에만 JavaScript를 보내는지 Server-first와 Islands Architecture를 중심으로 살펴봅니다.

Fresh 2로 기술 블로그를 만들면서 확인한 프로젝트 구조와 Deno, Vite, Tailwind CSS 4, daisyUI 설정 과정을 정리합니다.