Hono 빠른 시작: 간단한 설정 가이드(한 입 크기의 기사)-JS 튜토리얼-php.cn

Hono 빠른 시작: 간단한 설정 가이드(한 입 크기의 기사)

Patricia Arquette

풀어 주다： 2024-10-12 06:20:02

원래의

421명이 탐색했습니다.

소개

Hono라는 웹 프레임워크를 들어보신 적이 있나요?
최근 여러 매체에서 "호노"라는 이름을 접하게 되었고 직접 한번 사용해 보기로 했습니다.
오늘은 제가 참고할 겸 간단한 초기 설정 가이드와 함께 Hono에 대한 간략한 개요를 공유해보겠습니다.

Quick Start with Hono: Simple Setup Guide (Bite-sized article)

호노란 무엇인가?

Hono는 TypeScript를 기반으로 구축된 가볍고 빠른 웹 프레임워크입니다.
아직 초보이고 모든 기능을 살펴보진 않았지만 Hono의 가장 큰 장점은 고속, 경량 라우팅과 다중 런타임 지원인 것 같습니다. 동일한 코드베이스를 사용하여 Cloudflare, Deno, Bun, AWS, Node.js 등과 같은 다양한 JavaScript 런타임에서 원활하게 작동합니다.

저는 정규 웹 개발 작업에서 MERN 스택을 자주 사용하고 주로 Express를 백엔드 프레임워크로 사용합니다. 그러나 Hono는 Express에 비해 더 나은 TypeScript 호환성과 더 높은 유연성을 갖고 있어 가까운 미래에 선도적인 프레임워크 중 하나가 될 유망한 후보입니다.

또한 웹 프레임워크 분야에서 상대적으로 새로운 플레이어인 Hono는 많은 잠재력을 갖고 있으며 향후 다양한 플랫폼과 환경에서 사용되는 차세대 프레임워크로 자리매김할 수 있을 것입니다.

Quick Start with Hono: Simple Setup Guide (Bite-sized article)

설정

환경 설정 시 Hono는 쉽게 시작할 수 있는 편리한 템플릿을 제공합니다. 이번에는 npm을 사용해 시작해 보겠습니다.

먼저 다음 명령을 실행하세요.

npm create hono@latest hono-myapp

로그인 후 복사

명령을 실행하면 템플릿을 선택하라는 메시지가 표시됩니다. 프로젝트 환경에 가장 적합한 것을 선택하세요. 이 글에서는 nodejs 템플릿을 선택하세요.

설치가 완료되면 최소한의 필수 항목이 포함된 프로젝트 파일이 생성되므로 cd하고 npm run dev를 실행하세요.

오류나 문제가 없다면 localhost를 열어서 Hello World가 나타나는지 확인해 보세요.

단순 경로 추가

지금까지는 템플릿 파일만 실행했으므로 프로젝트를 향상시키기 위해 약간의 코드를 추가해 보겠습니다. 다음으로 Hono를 사용하여 동적 매개변수를 허용하는 경로를 생성하겠습니다. 앞서 만든 디렉터리의 src 폴더에서 index.ts 파일을 찾아야 합니다. 이 파일을 편집하고 app.get('/hello/:name')과 같은 경로를 추가하여 name이라는 경로 매개변수를 처리하고 응답에 해당 값을 반환해 보겠습니다.

기존 코드에 다음 코드 조각을 추가하세요.

app.get('/branches/:name', (c) => {
  const name = c.req.param('name')
  return c.text(`Hello, ${name}!`)
});

로그인 후 복사

:name 부분은 URL의 값을 동적으로 캡처할 수 있는 경로 매개변수입니다. c.req.param('name')을 사용하면 :name의 값을 추출하여 응답에 Hello, {name}!.

로 표시할 수 있습니다.

서버가 실행 중인 상태에서 다음 URL에 접속해 보세요.

http://localhost:3000/branches/John → 표시: Hello, John!
http://localhost:3000/branches/Alice → 표시: Hello, Alice!

이런 방식으로 이름 부분을 동적으로 변경하여 입력에 따라 다른 메시지를 표시할 수 있습니다.

전체 코드의 최종 버전은 다음과 같습니다.

import { serve } from '@hono/node-server'
import { Hono } from 'hono'

const app = new Hono()

app.get('/', (c) => {
  return c.text('Hello Hono!')
})

app.get('/branches/:name', (c) => {
  const name = c.req.param('name')
  return c.text(`Hello, ${name}!`)
})

const port = 3000
console.log(`Server is running on port ${port}`)

serve({
  fetch: app.fetch,
  port
})

로그인 후 복사

Quick Start with Hono: Simple Setup Guide (Bite-sized article)