@rune-ts/server

GETTING STARTED

라이브러리 개발

pnpm dev # 개발환경 실행

pnpm types:dev # 개발환경 실행

• 해당 라이브러리가 로컬 앱에 연결되어 있다면 해당 빌드파일이 바로 적용됩니다.

라이브러리 개발 완료

pnpm build # 라이브러리 빌드
pnpm types # 라이브러리 타입 정의 파일 생성

• 추가된 기능이나 수정된 기능이 있다면, 라이브러리를 빌드하고 타입 정의 파일을 생성합니다.
• 해당 라이브러리가 로컬 앱에 연결되어 있다면 해당 빌드파일이 바로 적용됩니다.

라이브러리 설치

pnpm add @rune-ts/server
npm install @rune-ts/server

pnpm add @rune-ts/server --global
npm install @rune-ts/server --global

• 글로벌로 설치 시 rune cli를 바로 사용 가능합니다.

라이브러리 사용

rune cli

{
  "dev": "pnpm rune dev",
  "build": "pnpm rune build",
  "start": "pnpm rune start -c rune.prod.config.js"
}

• rune dev는 개발 환경을 실행합니다. 추가 세팅은 -h 플래그를 사용하여 확인해 주십시오.
• rune build는 배포용 파일을 만듭니다. 추가 세팅은 -h 플래그를 사용하여 확인해 주십시오.
• rune start는 프로덕션 환경을 실행합니다. 추가 세팅은 -h 플래그를 사용하여 확인해 주십시오.

rune.config.js 세팅 설명

module.exports = {
  // 서버가 뜨는 포트
  port: 4000,
  // 서버에서 사용할 호스트이름
  hostname: 'localhost',
  // 해당 서버의 모드 'render', 'server'(클라이언트 번들링을 하지 않음)
  mode: 'render',
	// 개발 시 수정되면 재시작하는 패스
  watchToReloadPaths: ['../../../packages'],
	// 클라이언트 엔트리
  clientEntry: './src/app/client/index.ts',
  // 서버 엔트리
  serverEntry: './src/app/server/index.ts',
  // sass loader 옵션
  sassOptions: {
    // sass loader가 해석 시 추가될 경로
    includePaths: [
      path.join(__dirname, 'src/app/client'),
    ],
	  // 모든 sass파일 최상단에 추가되는 텍스트
    additionalData: `@import "base";`,
  },
  // 웹팩 번들 분석
  showBundleAnalyzer: false,
  // 번들된 파일이 아닌 직접 파일을 조회해서 번들 시도
  internalModules: [/@packages\/*\w+/, '@marpple/rune-ui'],
};

server method 설명

import { app } from '@rune-ts/server';

const server = app();

• 룬 서버가 띄기 위한 사전 작업을 진행한 후 express에 onEvent 메서드가 추가된 객체를 반환합니다.

server.onEvent('connect', () => {
  console.log('서버가 켜집니다.');
});

server.onEvent('close', () => {
  console.log('서버가 닫힙니다.');
});

• 해당 메소드는 위 예시 코드와 같이 서버가 꺼지거나 켜질때 이벤트를 받아서 실행할 수 있습니다.

import { manifest } from '@rune-ts/server';

this.entryScript = () =>
  html.preventEscape(`
        <script crossorigin="anonymous" src="${manifest['main.js']}"></script>
        <script crossorigin="anonymous" src="${manifest['vendors.js']}"></script>
        <script crossorigin="anonymous" src="${manifest['runtime.js']}"></script>`);

• manifest를 통해서 client 번들 파일의 키 값을 확인할 수 있습니다.
• 기본적으로 main.css, vendors.css, main.js, vendors.js, runtime.js가 존재합니다.
• 추가적인 webpack 세팅은 rune.config.js를 통해 추후 제공될 예정입니다.

client method 설명

import { hydrate } from '@rune-ts/server';

import { ClientRouter } from '../router';

hydrate(ClientRouter);

• hydrate은 rune-ts에 종속적입니다.
• 제공받은 router중 document.getElementById('__RUNE_DATA__') 속에 전달된 path와 맞는 View를 찾은 후 client.page.hydrateFromSSR();를 호출합니다.
• 해당 메소드는 편의상 제공하는 것으로 꼭 필요하진 않습니다.
• 해당 메소드를 호출하기 위해서는 Layout에 아래와 같은 코드가 필요합니다.

this.dataScript = () =>
  this.dataScript = () =>
    html.preventEscape(`
        <script 
          id="__RUNE_DATA__"
          type="application/json"
        >
          ${htmlEscapeJsonString(
	      JSON.stringify({
	        data: page.data,
	        layoutData: data,
	        path: this.path,
	        manifest,
	      }),
	    )}
     </script>`);