Tag
#fresh
17개의 글
Fresh에서 글이 늘어날 때: URL로 유지되는 페이지네이션
Fresh의 카테고리와 검색 결과를 서버에서 페이지로 나눕니다. 검색어를 유지하는 링크, 같은 날짜의 글 순서, 빈 결과와 404, 페이지별 canonical을 실제 응답으로 확인합니다.
Fresh Island에서 서버 코드를 import하면 어떻게 될까?
Island에서 Markdown 로더를 직접 가져오면 빌드와 브라우저에서 어떤 일이 생기는지 확인합니다. 서버 핸들러에서 읽은 데이터를 props로 전달하고, import type을 추가했을 때의 번들도 비교합니다.
Markdown 콘텐츠 로더 테스트하기: Deno 임시 파일로 정상·초안·오류 검증하기
Deno.test와 임시 Markdown 파일로 콘텐츠 로더를 검증합니다. 정상 글, 초안, 깨진 YAML, 읽기 권한 오류와 목록 정렬을 실제 파일 시스템에서 확인하고 테스트 데이터를 격리합니다.
Fresh Island의 첫 렌더 맞추기: Preact hydration과 localStorage
글 저장 버튼으로 Fresh Island의 SSR과 Preact hydration을 확인합니다. localStorage를 상태 초기화에서 읽을 때의 오류를 재현하고, 서버와 클라이언트의 첫 렌더를 맞춘 뒤 저장소 실패까지 처리합니다.
Fresh 환경 변수는 언제 읽힐까? Vite 빌드 값과 Deno 실행 값 구분하기
Fresh에서 VITE_, FRESH_PUBLIC_, Deno.env.get()을 비교합니다. 가짜 환경 변수로 빌드와 실행 시점을 나누어 실험하고, 공개 값의 번들 포함 여부와 .env 파일 로딩 차이를 확인합니다.
Fresh 블로그에 HTTP 테스트 붙이기: 빌드 성공 뒤에 확인할 것들
Deno.test로 빌드된 Fresh 서버의 상태 코드, HTML, 검색 결과, 사이트맵과 CSS 응답을 검사합니다. 브라우저나 외부 광고 요청 없이 반복 실행할 수 있는 HTTP 응답 테스트를 만듭니다.
Fresh에서 404·500 페이지 만들기: 없는 글과 서버 오류를 구분하는 방법
Fresh 2의 _error.tsx와 HttpError로 오류 페이지를 만듭니다. Markdown 로더가 파싱 오류와 권한 오류까지 404로 숨기던 문제를 수정하고, 빌드된 서버의 HTTP 상태 코드와 응답 HTML을 확인합니다.
Fresh 서버에서 -A를 빼면 어디서 실패할까? Deno 권한 줄이기
Fresh production 서버에서 -A를 제거하고 콘텐츠와 정적 파일의 읽기 권한을 단계적으로 추가합니다. 실제 HTTP 응답을 비교하며 Deno의 파일·환경 변수·네트워크 권한을 확인합니다.
Fresh 블로그 배포하기: Docker, Markdown 파일 경로와 production 검증
Fresh Markdown 블로그를 Docker로 배포하는 구성을 만들고, 콘텐츠 파일 포함 여부, 실행 경로, 공개 URL과 production 응답을 확인하는 방법을 정리합니다.
Fresh에서 다크 모드 완성하기: ThemeToggle과 쿠키로 첫 화면까지 맞추기
Fresh와 daisyUI에서 테마 전환을 구현하고, 쿠키와 서버 렌더링을 연결해 새로고침 후에도 선택한 테마로 첫 화면을 만드는 방법을 살펴봅니다.
Fresh에서 Preact 사용하기: 컴포넌트, Hooks, Signals와 React 호환성
Fresh의 UI 계층인 Preact를 글 주소 복사 버튼 예제로 살펴봅니다. 컴포넌트 재사용, Hooks와 Signals, 브라우저 API의 실행 위치, React 호환 범위를 정리합니다.
Fresh에서 JavaScript 없이 검색 만들기: Markdown 글을 서버에서 검색하기
Fresh 2에서 별도의 검색 라이브러리나 클라이언트 JavaScript 없이 Markdown 메타데이터를 이용한 서버 검색 기능을 구현합니다.
Fresh에서 Markdown 블로그 만들기: Front Matter부터 동적 라우팅, SEO까지
Fresh 2에서 Markdown 파일을 글 데이터로 사용하고 Front Matter, 동적 라우팅, 코드 하이라이팅, SEO와 sitemap까지 연결하는 과정을 살펴봅니다.
Fresh에서 Vite는 무슨 일을 할까? Deno와 역할 나누기
Fresh 2 프로젝트에서 Deno와 Vite가 각각 어떤 역할을 담당하는지 deno.json, vite.config.ts, 개발 서버와 production build를 따라가며 살펴봅니다.
Fresh 2.3 Zero JS를 직접 확인해봤다: Island 하나로 무엇이 달라질까?
Fresh 2.3에서 Island가 없는 페이지와 있는 페이지를 비교하며 Zero JS가 실제 HTML과 네트워크 요청에서 어떻게 나타나는지 확인합니다.
Fresh는 어떤 프레임워크인가: Server-first와 Islands Architecture 이해하기
Fresh가 왜 서버에서 HTML을 먼저 만들고, 필요한 부분에만 JavaScript를 보내는지 Server-first와 Islands Architecture를 중심으로 살펴봅니다.
Fresh 2로 기술 블로그 만들기: Deno 설치부터 Vite, Tailwind CSS 4까지
Fresh 2로 기술 블로그를 만들면서 확인한 프로젝트 구조와 Deno, Vite, Tailwind CSS 4, daisyUI 설정 과정을 정리합니다.