전체 예시는 여기에서 확인할 수 있습니다.
- hydrate 할 페이지를 애플리케이션에 등록하기 위한 데코레이터입니다.
- key 를 지정하지 않으면 클래스명을 key 로 hydration 을 위한 페이지를 찾습니다.
import { Html, html, Page } from "rune-ts"; import style from "./app.page.module.scss"; import { Rune } from "rune-decorator/client"; export interface PageProps { key: string; } /** * Page 데코레이터를 사용하여 애플리케이션에 페이지를 등록합니다. * 데코레이터의 인자로 key 를 지정하지 않으면 클래스명을 key 로 사용하여 페이지를 찾습니다. */ @Rune.Page() export class AppPage extends Page<PageProps> { constructor(props: PageProps) { super(props); } template(): Html { return html` <div class="${style.container}"> <span class="${style.title}">${this.data.message}</span> <button class="${style.action}">Click</button> </div>`; } }
- View 에서 사용할 Enable 들을 등록하기 위한 데코레이터입니다.
- Enable Class 를 등록하면 View 내부에서 등록된 Enable 이 인스턴스화 되어 사용할 수 있습니다.
// app.enable.ts import { Rune } from "rune-decorator/client"; import { Enable } from "rune-ts"; import style from "./app.page.module.scss"; export class AppEnable extends Enable { @Rune.On("click", `.${style.action}`) handleClick() { alert("Rune is working!"); } } // app.page.ts import { Html, html, Page } from "rune-ts"; import style from "./app.page.module.scss"; import { Rune } from "rune-decorator/client"; import { AppEnable } from "./app.enable"; export interface PageProps { message: string; } /** * UseEnables 데코레이터를 사용하여 AppEnable 을 등록합니다. */ @Rune.UseEnables([AppEnable]) @Rune.Page() export class AppPage extends Page<PageProps> { constructor(props: PageProps) { super(props); } template(): Html { return html` <div class="${style.container}"> <span class="${style.title}">${this.data.message}</span> <button class="${style.action}">Click</button> </div>`; } }
- 애플리케이션에 페이지들을 등록하기 위한 데코레이터입니다.
- client의 entry에서 해당 Navigator 를 Rune.Factory 에 등록하면 페이지들이 필요한 시점에 hydration 됩니다.
import { AppPage } from "../page/app.page"; import { SubPage } from "../page/sub.page"; import { Rune } from "rune-decorator/client"; @Rune.Navigator({ pages: [AppPage, SubPage], // 등록할 페이지 클래스 목록을 지정합니다. }) export class AppNavigator {}
- client application의 진입점으로 AppNavigator 에 등록된 페이지들을 hydration 작업 등을 수행합니다.
import { Rune } from "rune-decorator/client"; import { AppNavigator } from "./client/app.navigator"; function bootstrap() { Rune.Factory.create(AppNavigator); } bootstrap();
- rune 서버 애플리케이션에서 사용할 클래스를 등록하기 위한 데코레이터입니다.
- Injectable 데코레이터를 사용하여 애플리케이션을 등록하면 singleton 으로 사용할 수 있습니다.
import { Injectable } from "rune-decorator/server"; @Injectable() export class AppService { getHello(): string { return "Hello World!"; } }
- rune 서버 애플리케이션에서 외부 클라이언트의 요청을 처리하기 위한 데코레이터입니다.
- Controller 데코레이터를 사용하여 애플리케이션을 등록하고 routing 데코레이터를 사용하여 라우팅을 지정할 수 있습니다.
- Controller 의 라우터 함수에서 rune page 를 반환하면 해당 페이지가 MetaView 로 warping 되어 클라이언트에 페이지가 렌더링됩니다.
import { Controller, Get } from "rune-decorator/server"; import { AppService } from "./app.service"; import { AppPage } from "../pages/app.page"; @Controller("") export class AppController { // @Injectable 데코레이터로 등록된 클래스를 주입받을 수 있습니다. constructor(private readonly appService: AppService) {} @Get() getHello(): AppPage { const page = new AppPage({ message: this.appService.getHello() }); return page; } }
- rune 서버 애플리케이션에서 외부 클라이언트의 요청을 처리하는 라우터 함수를 지정하기 위한 데코레이터입니다.
- 해당 데코레이터의 파라미터로 path를 지정하면 클라이언트가 해당 path로 요청시 등록된 라우터 함수가 실행됩니다.
- rune 서버 애플리케이션이 애플리케이션 구조를 만들 때 사용하는 데코레이터입니다.
- 해당 데코레이터의 provider, controller 클래스들의 인스턴스가 생성되어 애플리케이션에 등록됩니다.
import { Module } from "rune-decorator/server"; @Module({ controllers: [AppController], providers: [AppService], }) export class AppModule {}
- Server 실행
- server application의 진입점으로 AppModule 을 RuneApplication 에 등록하면 서버가 실행됩니다.
import { RuneApplication } from "rune-decorator/server"; import { AppModule } from "./app.module"; import { app } from "@rune-ts/server"; function bootstrap() { const rune = RuneApplication.create(app(), AppModule); } bootstrap();
-
rune 서버 애플리케이션에서 외부 클라이언트의 요청을 처리할 때, 요청의 파라미터를 받아오기 위한 데코레이터 목록입니다.
- @Query() : query string 을 받아오기 위한 데코레이터입니다.
- @Body() : body 를 받아오기 위한 데코레이터입니다.
- @Param() : path parameter 를 받아오기 위한 데코레이터입니다.
- @Req() : request 객체를 받아오기 위한 데코레이터입니다. (express request 객체)
- @Res() : response 객체를 받아오기 위한 데코레이터입니다. (express response 객체)
- @Headers() : request headers 를 받아오기 위한 데코레이터입니다.