Fresh 도전!

Bard·2022년 7월 3일
0

Fresh 도전

목록 보기
1/1

아래 블로그를 통해 Fresh라는 걸 알게 되었다.
Fresh blog
이전에 deno가 나왔을 때 가볍게 살펴본 기억이 있다. Nodejs 창립자인 라이언 달이 만들었고 가장 큰 특징으로 기존에 Nodejs에서 문제가 된 모듈의 의존성을 외부 라이브러리의 리포지토리 url을 임포트하는 방식으로 개선하려고 했다.
가볍게 봤을 때 느낀 점은 Deno 기반의 SSR을 지원하는 웹 프레임워크로 보였다. 이미 Nextjs을 사용하는 중이어서 그런지 크게 어려운 부분은 없어 보였으나 deno를 이해하지 않고 해도 괜찮을까라는 생각이 들었지만 얼마 지나지 않아 결정을 했다. 우선 해보고 아니면 그때 다시 시작하자고..

brew install deno

deno run -A -r https://fresh.deno.dev my-project

cd my-project

deno task start

여기까지는 어렵지 않게 따라왔다.
특히 HMR기능도 있어 변경된 부분은 바로 반영이 되고 있는 것도 괜찮았다.

파일 구조를 보면 전반적으로 다른 웹 프레임워크와 비슷하고 특이사항으로 import_map.json 파일에 외부 라이브러리리를 등록하고 각 컴포넌트에 가져다 사용하는 걸로 보인다. 이건 아마 deno 기반이라 그런 걸로 보인다

{
  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.0.0/",
    "preact": "https://esm.sh/preact@10.8.1",
    "preact/": "https://esm.sh/preact@10.8.1/",
    "preact-render-to-string": "https://esm.sh/preact-render-to-string@5.2.0?deps=preact@10.8.1",
    "@twind": "./utils/twind.ts",
    "twind": "https://esm.sh/twind@0.16.17",
    "twind/": "https://esm.sh/twind@0.16.17/"
  }
}

그리고 islands 라는 폴더가 보이는데 우선은 컴포넌트라고 이해를 하고 넘어간다.

현재까지 느낀 점으로는

  • react를 사용한 경험으로 인해 크게 어렵지 않았다.
  • package.json, yarn.look 같은 폴더가 없어서 그런지 템플릿이 깔끔하다.
    * 아마 deno.json파일이 같은 역활을 하는 것으로 보임
  • 다른 CRA, Nextjs 와 크게 다르지 않은 폴더 구조를 가지고 있어 낯설지가 않다. 특히 Nextjs

여기까지 봤을 때 충분히 사용이 가능하다고 느꼈고 시간이 날 때 마다 https://fresh.deno.dev/docs/getting-started 를 보면서 하나씩 진행해볼 예정이다

profile
영차영차🐢

0개의 댓글