신선한 웹 프레임워크에 대한 빠른 검토

바위 밑에서 살아본 적이 없다면 아마도 반짝이는 새 TypeScript 웹 프레임워크인 Fresh 에 대해 들어봤을 것입니다.

Fresh는 다음과 같은 몇 가지 인상적인 기능을 자랑합니다.

빌드 단계 없음

구성이 필요하지 않음

기본적으로 TypeScript 지원

기본적으로 클라이언트에 JavaScript가 제공되지 않음

그러나 개발자 경험 측면에서 Fresh는 얼마나 좋은가요?

이 질문에 답하기 위해 저는 Fresh와 Deno를 사용하여 Petunia이라는 간단한 파일 시스템 기반의 pastebin 서비스를 구축했습니다.

짧은 대답?

Fresh는 React와 Tailwind를 이미 알고 있다면 꽤 좋습니다. 하지만 입력 처리와 같이 익숙해져야 하는 몇 가지 단점이 있습니다.

더 긴 대답?

Fresh는 React의 경량 버전인 Preact에 의존하여 구성 요소를 표시하므로 React 개발자라면 Fresh가 집처럼 느껴질 것입니다.

새 프로젝트를 초기화할 때 Fresh는 Tailwind-to-JS 라이브러리인 Twind 을 사용할지 묻습니다. 이 옵션을 선택하면 구성 파일을 만들거나 PostCSS를 사용하지 않고도 Tailwind의 기능을 사용할 수 있습니다. 저는 이 기능이 매우 훌륭하다고 생각했습니다.

다음은 주의해야 할 몇 가지 사항입니다.

Fresh는 NextJS's file-system based routing을 사용하므로 예를 들어 routes/link/[id].ts는 웹 앱에서 /link/:id가 됩니다.

Fresh가 양식 제출을 처리하는 방식은 React와 매우 다릅니다. React와 같은 상태를 사용하는 대신 Fresh는 HTML<form> 요소를 활용하여 사용자가 양식에 들어갈 때 <form>에서 양식 데이터를 가져온 다음 사용자 지정 처리기를 사용하여 해당 데이터를 처리하고 해당 데이터를 전면에 반환합니다. -끝.

다음은 서버 측 이름 배열을 필터링하는 검색 양식을 구현하는 Fresh 설명서의 an example입니다.

/** @jsx h */
import { h } from "preact";
import { Handlers, PageProps } from "$fresh/server.ts";

const NAMES = ["Alice", "Bob", "Charlie", "Dave", "Eve", "Frank"];

interface Data {
  results: string[];
  query: string;
}

export const handler: Handlers<Data> = {
  GET(req, ctx) {
    const url = new URL(req.url);
    const query = url.searchParams.get("q") || "";
    const results = NAMES.filter((name) => name.includes(query));
    return ctx.render({ results, query });
  },
};

export default function Page({ data }: PageProps<Data>) {
  const { results, query } = data;
  return (
    <div>
      <form>
        <input type="text" name="q" value={query} />
        <button type="submit">Search</button>
      </form>
      <ul>
        {results.map((name) => <li key={name}>{name}</li>)}
      </ul>
    </div>
  );
}

Discuss on HN | Tweet this post

my blog에서 이 게시물을 읽을 수도 있습니다.