Encore.ts 및 React를 사용하여 실시간 대시보드를 구축하는 방법

실시간 대시보드는 웹사이트 분석 추적부터 실시간 금융 데이터 모니터링, IoT 장치 감시까지 다양한 애플리케이션에 매우 유용합니다.

? 이 튜토리얼에서는 React 및 Encore.ts를 사용하여 빌드하는 방법을 보여 드리겠습니다. 업데이트를 즉시 스트리밍하여 정보에 입각한 빠른 결정을 내릴 수 있는 동적 대시보드를 만드는 방법을 배우게 됩니다.

우리가 구축할 제품을 미리 보려면 여기에서 완성된 제품의 GIF와 소스 코드를 확인하세요. 뛰어 들어보세요!

전제 조건

시작하기 전에 컴퓨터에 다음 항목이 설치되어 있는지 확인하세요

• Node.js(v18 이상)
• Npm(v10 이상)

앙코르란 무엇이며 왜?

Encore.ts는 TypeScript로 백엔드를 구축하여 유형 안전성을 보장하는 오픈 소스 프레임워크입니다. NPM 종속성이 없기 때문에 가볍고 빠릅니다.

분산 백엔드 시스템을 개발할 때 프로덕션 환경을 로컬로 복제하기 어려운 경우가 많아 개발자 경험이 좋지 않습니다. 합리적인 방식으로 로컬에서 실행하기 위해 많은 복잡성을 처리하게 될 수 있으며, 이는 실제 애플리케이션 구축에 집중하는 데 시간이 걸립니다. Encore.ts는 다음을 포함하여 분산 시스템 구축을 위한 완전한 도구 세트를 제공하여 이 문제를 해결합니다.

• 클라우드와 어울리는 로컬 환경
• 서비스 간 유형 안전성
• 유형 인식 인프라
• 자동 API 문서 및 클라이언트
• 로컬 테스트 추적
• 그 외

자, 우리는 Encore가 무엇인지, 그리고 Encore가 백엔드 서비스 구축에 어떻게 도움이 되는지에 대해 이야기했습니다. 다음 섹션에서는 Encore를 로컬에 설치하고 구축을 시작하겠습니다.

앙코르 설치

Encore를 사용하려면 로컬 환경을 매우 쉽게 생성하고 관리할 수 있는 CLI를 설치해야 합니다.

# macOS
brew install encoredev/tap/encore

# Windows
iwr https://encore.dev/install.ps1 | iex

# Linux
curl -L https://encore.dev/install.sh | bash

Encore 응용 프로그램 만들기

Encore 애플리케이션을 만드는 것은 매우 쉽습니다. 명령만 실행하면 됩니다.

encore app create

다음 질문을 받게 되므로 그에 맞게 답변을 선택하세요.

Select language for your applicatio : TypeScript
Template: Empty app
App Name : real-time-dashboard

앱이 생성되면 encore.app에서 애플리케이션 구성을 확인할 수 있습니다

{
    "id":   "real-time-dashboard-<random-id>",
    "lang": "typescript"
}

자, 앙코르 애플리케이션을 만들었습니다. 다음 섹션에서는 Encore의 스트리밍 API에 대해 이야기하겠습니다.

Encore의 스트리밍 API란 무엇인가요?

스트리밍 API에 대해 이야기하기 전에 Encore의 API에 대해 이야기해 보겠습니다. Encore에서 API 끝점을 생성하는 것은 encore.dev/api 모듈의 api 함수를 제공하여 유형 안전성이 있는 API 끝점을 정의하기 때문에 매우 쉽습니다. Encore에는 들어오는 요청에 대한 유효성 검사 기능도 내장되어 있습니다. API의 핵심은 요청 및 응답 스키마 구조를 갖춘 간단한 비동기 함수입니다. Encore는 컴파일 타임에 코드를 구문 분석하고 상용구를 생성하므로 API 정의에만 집중하면 됩니다.

스트리밍 API는 애플리케이션과 데이터를 주고받을 수 있는 API로, 양방향 통신이 가능합니다.

Encore는 각각 다른 데이터 흐름 방향에 대해 세 가지 유형의 스트림을 제공합니다.

• StreamIn: 이를 사용하여 데이터를 서비스로 스트리밍합니다.
• StreamOut: 서비스에서 데이터를 스트리밍하는 데 사용합니다.
• StreamInOut: 이를 사용하여 서비스 안팎으로 데이터를 스트리밍합니다.

스트리밍 API 엔드포인트에 연결하면 클라이언트와 서버는 HTTP 요청을 사용하여 핸드셰이크를 수행합니다. 서버가 이 요청을 수락하면 클라이언트와 API 핸들러 모두에 대한 스트림이 생성됩니다. 이 스트림은 실제로 메시지를 보내고 받을 수 있는 WebSocket입니다.

자, 이제 Encore에 어떤 API와 스트리밍 API가 있는지 알았으니 다음 섹션에서 스트리밍 API 엔드포인트를 사용하여 실시간으로 데이터를 저장하고 검색하는 대시보드 서비스를 만들어 보겠습니다.

대시보드 서비스 생성

영업 대시보드에서 데이터를 스트리밍하기 위해 영업 API를 정의할 대시보드 서비스를 만들어 보겠습니다.

dashboard라는 루트 수준에 폴더를 만든 다음 encore.service.ts 파일을 추가합니다. 이 파일은 Encore에 대시보드 폴더와 해당 하위 폴더를 서비스의 일부로 처리하도록 지시합니다.

# macOS
brew install encoredev/tap/encore

# Windows
iwr https://encore.dev/install.ps1 | iex

# Linux
curl -L https://encore.dev/install.sh | bash

그런 다음 encore.service.ts 파일에 다음 코드를 추가합니다. encore.dev/service에서 서비스 클래스를 가져오고 서비스 이름으로 "dashboard"를 사용하여 해당 인스턴스를 생성합니다.

encore app create

이제 Dashboard.ts 파일을 생성하고 판매 API를 설정해 보겠습니다.

Select language for your applicatio : TypeScript
Template: Empty app
App Name : real-time-dashboard

API를 설정하기 전에 먼저 판매 데이터를 저장할 데이터베이스를 설정하겠습니다. encore.dev/storage/sqldb 모듈의 SQLDatabase를 사용하여 Encore에서 지원하는 PostgreSQL 데이터베이스를 생성하겠습니다.

SQL을 마이그레이션으로 정의해야 하며, encore run 명령을 실행할 때 Encore가 이를 선택합니다.

대시보드 폴더 안에 migrations라는 폴더를 생성한 후 1_first_migration.up.sql이라는 파일을 생성합니다. number_로 시작하고 up.sql로 끝나는 명명 규칙을 따르세요.

# macOS
brew install encoredev/tap/encore

# Windows
iwr https://encore.dev/install.ps1 | iex

# Linux
curl -L https://encore.dev/install.sh | bash

여기에서는 4개의 열이 있는 sales라는 테이블을 만듭니다.

• id: 자동으로 증가하며 기본 키 역할을 합니다
• 세일: 세일 제목
• 총액: 판매 총액
• 날짜: 판매일

다음으로 Dashboard.ts 파일에 다음 코드를 추가하세요.

encore app create

여기에서는 대시보드라는 이름을 지정하고 마이그레이션 폴더 경로를 지정하여 SQLDatabase 인스턴스를 생성합니다.

우리는 데이터베이스의 변경 사항을 수신하고 알리기 위해 postgres 패키지를 사용하고 있습니다.

?

다음으로 연결된 스트림(웹소켓 연결)을 보관하기 위해 이러한 유형과 메모리 내 맵을 추가합니다.

Select language for your applicatio : TypeScript
Template: Empty app
App Name : real-time-dashboard

다음으로 새로운 판매가 발생할 때 업데이트를 보낼 수 있도록 판매 스트리밍 엔드포인트를 설정해 보겠습니다.

{
    "id":   "real-time-dashboard-<random-id>",
    "lang": "typescript"
}

여기에서는 api.streamOut 함수를 사용하여 두 개의 인수를 사용하는 API를 정의합니다.

• 스트림 옵션:
  • 노출: 엔드포인트를 공개하려면 true로 설정하고, 그렇지 않으면 false로 설정합니다
  • auth: 인증으로 엔드포인트를 보호하려면 true로 설정하고, 그렇지 않으면 false로 설정합니다
  • 경로: /판매
• 함수: 두 개의 인수를 사용합니다.
  • 핸드셰이크: 스트림 연결을 설정하는 데 사용됩니다
  • stream: 스트림 개체

connectedStreams 맵에서 연결을 유지하고 Postgres 클라이언트를 사용하여 new_sale 채널을 수신합니다. 신규 판매가 발생하면 연결된 모든 스트림에 업데이트가 전송됩니다.

다음으로 요청 본문에서 판매 데이터를 가져오고 db 인스턴스를 사용하여 새 판매 기록을 삽입하는 판매 추가 API 엔드포인트를 정의하겠습니다.

# create dashboard folder
mkdir dashboard

# switch to dashboard folder
cd dashboard

# create encore.service.ts file inside dashboard folder
touch encore.service.ts

여기에서는 새 판매 기록을 데이터베이스에 추가한 후 Postgres 클라이언트를 사용하여 판매 데이터와 함께 new_sale 채널에 알림을 보냅니다. 이렇게 하면 new_sale 채널 청취자가 알림을 받고 조치를 취할 수 있습니다.

마지막으로 판매 기록 목록을 반환하도록 API 엔드포인트를 설정해 보겠습니다.

import { Service } from 'encore.dev/service';

export default new Service('dashboard');

여기에서는 db 인스턴스 메소드 쿼리를 사용하여 데이터를 가져온 후 처리하여 목록으로 반환합니다.

좋습니다. 이제 모든 API 엔드포인트가 정의되었습니다. 다음 섹션에서 Encore 개발 대시보드를 살펴보겠습니다.

개발 대시보드 살펴보기

데이터베이스 설정이 포함된 API 엔드포인트가 있는데 서비스를 어떻게 테스트하고 디버깅합니까? Encore는 개발자의 삶을 더 쉽게 만들고 생산성을 높일 수 있는 로컬 개발 대시보드를 제공하므로 걱정하지 마세요.

애플리케이션을 설계, 개발 및 디버깅하는 데 도움이 되는 여러 기능이 포함되어 있습니다.

• 로컬 백엔드에 대한 API 호출을 쉽게 하기 위한 서비스 카탈로그 및 API 탐색기
• 쉽고 강력한 디버깅을 위한 분산 추적
• 지식 공유 및 질문 답변을 위한 자동 API 문서
• 마이크로서비스 아키텍처 시각화를 위한 Encore Flow

애플리케이션을 변경하면 이러한 모든 기능이 실시간으로 업데이트됩니다.

대시보드에 액세스하려면 encore run으로 Encore 애플리케이션을 시작하면 자동으로 열립니다.

# macOS
brew install encoredev/tap/encore

# Windows
iwr https://encore.dev/install.ps1 | iex

# Linux
curl -L https://encore.dev/install.sh | bash

대시보드는 이렇게 생겼으며, 프로덕션에 들어가기 전에 로컬에서 모든 것을 테스트할 수 있습니다. 이를 통해 외부 도구 없이도 마이크로서비스 아키텍처를 훨씬 쉽게 테스트할 수 있습니다.

다음은 API 탐색기를 사용하여 새 판매를 추가하는 예입니다. Call API 버튼을 클릭하면 응답과 로그를 받게 됩니다. 오른쪽에서는 요청의 흔적을 확인할 수 있습니다.

추적 링크를 클릭하면 데이터베이스 쿼리, 응답, 로그와 같은 세부정보를 얻을 수 있습니다.

자, 로컬 개발 대시보드에 관한 모든 것입니다. 서비스 카탈로그, 흐름 등과 같은 다른 옵션을 탐색할 수 있습니다. 다음 섹션에서는 대시보드 서비스 API와 통신하기 위해 프런트엔드 서비스(React 애플리케이션)에서 사용할 TypeScript 유형 안전성을 갖춘 클라이언트를 생성하겠습니다.

클라이언트 생성

Encore는 TypeScript 또는 JavaScript로 프런트엔드 요청 클라이언트를 생성하여 요청/응답 유형을 동기화하고 수동 작업 없이 API를 호출할 수 있도록 도와줍니다.

루트 디렉터리에 frontend라는 폴더를 만들고 다음 명령을 실행하여 Vite를 사용하여 React 프로젝트를 설정합니다.

encore app create

다음으로 src 디렉터리에 lib 폴더를 만들고 client.ts라는 새 파일을 추가한 후 비워둡니다.

Select language for your applicatio : TypeScript
Template: Empty app
App Name : real-time-dashboard

그런 다음 package.json 파일에 gen-client라는 새 스크립트를 추가합니다.

{
    "id":   "real-time-dashboard-<random-id>",
    "lang": "typescript"
}

다음으로 스크립트를 실행하여 src/lib/client.ts에 클라이언트를 생성합니다.

# create dashboard folder
mkdir dashboard

# switch to dashboard folder
cd dashboard

# create encore.service.ts file inside dashboard folder
touch encore.service.ts

src/lib/client.ts 파일에는 생성된 코드가 포함되어 있어야 합니다.

import { Service } from 'encore.dev/service';

export default new Service('dashboard');

다음으로 lib 디렉터리에 getRequestClient.ts라는 파일을 만들고 다음 코드를 추가합니다. 그러면 환경에 따라 클라이언트 인스턴스가 반환됩니다.

# make sure you are in dashboard folder
touch dashboard.ts

자, 이제 대시보드 API를 호출하기 위해 React 애플리케이션에서 사용할 클라이언트가 생겼습니다. 다음 섹션에서는 프런트엔드 서비스를 생성하고 실시간 판매 대시보드용 UI를 구축해 보겠습니다.

프런트엔드 서비스 만들기

이전 섹션에서는 React 애플리케이션으로 프런트엔드 폴더를 설정했고 이제 이를 서비스로 만들고 싶습니다. encore.service.ts 파일을 만들고 다음 코드를 추가하여 Encore에 프런트엔드 폴더를 "프런트엔드" 서비스로 처리하도록 지시해 보겠습니다.

# macOS
brew install encoredev/tap/encore

# Windows
iwr https://encore.dev/install.ps1 | iex

# Linux
curl -L https://encore.dev/install.sh | bash

두 가지 옵션이 있습니다.

• 대시보드와 프런트엔드 서비스를 별도로 제공
• 모든 것을 단일 번들로 제공합니다(이 튜토리얼에서는 이 접근 방식을 사용합니다)

React 애플리케이션을 제공하려면 이를 Encore에서 정적 자산으로 구축하고 제공해야 합니다. 프론트엔드 폴더에 static.ts 파일을 설정해보겠습니다.

Encore.ts에서 정적 파일을 제공하는 것은 일반 API 엔드포인트와 유사하지만 대신 api.static 함수를 사용합니다.

encore app create

여기에 주목해야 할 두 가지 중요한 사항이 있습니다. 경로와 디렉터리 옵션을 전달하고 있다는 것입니다.

• path: /!path는 대체 경로로 작동하고 다른 엔드포인트와 충돌하지 않도록 합니다.
• dir: ./dist는 React 애플리케이션의 빌드 버전 디렉터리입니다.

좋습니다. 정적 엔드포인트가 설정되었습니다. 이제 React 애플리케이션에 대한 몇 가지 종속성을 설치해 보겠습니다

• 반응 라우터 돔
• UUID
• 순풍 CSS

Select language for your applicatio : TypeScript
Template: Empty app
App Name : real-time-dashboard

그런 다음 아래 코드로 main.tsx를 업데이트하세요.

{
    "id":   "real-time-dashboard-<random-id>",
    "lang": "typescript"
}

다음으로 Tailwind CSS를 설정하고 파일 몇 개를 업데이트하겠습니다.

# create dashboard folder
mkdir dashboard

# switch to dashboard folder
cd dashboard

# create encore.service.ts file inside dashboard folder
touch encore.service.ts

tailwind.config.js의 콘텐츠 섹션 변경

import { Service } from 'encore.dev/service';

export default new Service('dashboard');

그리고 index.css에 다음 코드를 추가하세요.

# make sure you are in dashboard folder
touch dashboard.ts

이제 영업 대시보드를 위한 몇 가지 구성 요소를 만들어 보겠습니다.

• SalesTable: 판매 데이터를 테이블 형식으로 표시합니다.

# 1_first_migration.up.sql

CREATE TABLE sales (
    id BIGSERIAL PRIMARY KEY,
    sale VARCHAR(255) NOT NULL,
    total INTEGER NOT NULL,
    date DATE NOT NULL
);

여기에서는 대시보드 서비스 유형과 일치하고 유형 안전성을 보장하기 위해 생성된 클라이언트에서 유형을 가져옵니다.

• SalesMetrics: 총 판매량, 최저 판매량, 평균 판매량 등 일부 판매량을 표시합니다.

# dashboard.ts

import { SQLDatabase } from 'encore.dev/storage/sqldb';
import postgres from 'postgres';

const db = new SQLDatabase('dashboard', {
  migrations: './migrations',
});

const client = postgres(db.connectionString);

• RoleSelector: 사용자가 대시보드에 대한 역할을 선택할 수 있도록 다음 두 가지 옵션이 표시됩니다.
  • 뷰어: 판매 대시보드를 볼 수 있습니다
  • 관리자: 신규 매출을 확인하고 생성할 수 있습니다.

# dashboard.ts

...

// Map to hold all connected streams
const connectedStreams: Map<string, StreamOut<Sale>> = new Map();

interface HandshakeRequest {
  id: string;
}

interface Sale {
  sale: string;
  total: number;
  date: string;
}

interface ListResponse {
  sales: Sale[];
}

• GenerateSales: 판매 생성 버튼을 표시하고 판매 생성 논리를 포함합니다.

판매를 생성하려면 모의 데이터가 필요하므로 src/constant.ts 파일을 만들고 모의 데이터를 추가해 보겠습니다

# dashboard.ts
...

import { api, StreamOut } from 'encore.dev/api';
import log from 'encore.dev/log';

...

export const sale = api.streamOut<HandshakeRequest, Sale>(
  { expose: true, auth: false, path: '/sale' },
  async (handshake, stream) => {
    connectedStreams.set(handshake.id, stream);

    try {
      await client.listen('new_sale', async function (data) {
        const payload: Sale = JSON.parse(data ?? '');

        for (const [key, val] of connectedStreams) {
          try {
            // Send the users message to all connected clients.
            await val.send({ ...payload });
          } catch (err) {
            // If there is an error sending the message, remove the client from the map.
            connectedStreams.delete(key);
            log.error('error sending', err);
          }
        }
      });
    } catch (err) {
      // If there is an error reading from the stream, remove the client from the map.
      connectedStreams.delete(handshake.id);
      log.error('stream error', err);
    }
  }
);

# dashboard.ts
...
...

export const addSale = api(
  { expose: true, method: 'POST', path: '/sale/add' },
  async (body: Sale & { id: string }): Promise<void> => {
    await db.exec`
      INSERT INTO sales (sale, total, date)
      VALUES (${body.sale}, ${body.total}, ${body.date})`;

    await client.notify(
      'new_sale',
      JSON.stringify({ sale: body.sale, total: body.total, date: body.date })
    );
  }
);

여기에서는 getRequestClient를 가져온 다음 대시보드 서비스에서 addSale 엔드포인트를 호출합니다. 매우 간단하고 addSale은 유형이 안전하므로 허용되지 않는 속성을 전달하려고 하면 오류가 발생합니다.

다음으로 판매 지표, 최근 판매 및 전체 판매가 포함된 대시보드 보기를 표시하는 SalesDashboard 구성 요소를 만들어 보겠습니다.

# macOS
brew install encoredev/tap/encore

# Windows
iwr https://encore.dev/install.ps1 | iex

# Linux
curl -L https://encore.dev/install.sh | bash

SalesDashboard는 역할이라는 하나의 소품을 사용하여 생성 판매 구성 요소를 표시할지 여부를 결정합니다.

saleStream은 활성 스트림 참조를 보유하며 강력한 형식입니다.

encore app create

컴포넌트가 마운트되면 대시보드 서비스의 판매 엔드포인트를 사용하여 스트림 연결을 생성합니다. 그런 다음 소켓 열기 및 닫기 이벤트를 수신하고 이러한 이벤트를 기반으로 적절한 로직을 실행합니다.

saleStream.current에서 판매 데이터를 읽고 RecentSalesData 상태에 저장합니다.

구성요소가 마운트 해제되면 현재 스트림을 정리하고 닫습니다.

Select language for your applicatio : TypeScript
Template: Empty app
App Name : real-time-dashboard

이 코드는 대시보드 서비스의 listSales 엔드포인트를 사용하여 저장된 매출을 가져와 salesData 상태에 저장합니다.

{
    "id":   "real-time-dashboard-<random-id>",
    "lang": "typescript"
}

최근 매출 및 역대 매출 데이터를 계산하는 코드입니다.

# create dashboard folder
mkdir dashboard

# switch to dashboard folder
cd dashboard

# create encore.service.ts file inside dashboard folder
touch encore.service.ts

마지막으로 이 코드로 App.tsx 파일을 업데이트하세요.

import { Service } from 'encore.dev/service';

export default new Service('dashboard');

여기에서는 역할 쿼리 매개변수의 사용 가능 여부에 따라 SalesDashboard 및 RoleSelector 구성 요소를 표시합니다.

이제 프론트엔드 루트에서 아래 명령을 실행하여 React 애플리케이션을 빌드해 보겠습니다.

# make sure you are in dashboard folder
touch dashboard.ts

명령어를 성공적으로 실행하면 프론트엔드 디렉터리 내에 dist 폴더가 생성됩니다.

좋습니다. 이제 다음 섹션에서는 애플리케이션을 실행하고 처음부터 끝까지 테스트해 보겠습니다.

애플리케이션 실행

앙코르 애플리케이션 실행은 쉽습니다. 아래 명령을 사용하세요.

# 1_first_migration.up.sql

CREATE TABLE sales (
    id BIGSERIAL PRIMARY KEY,
    sale VARCHAR(255) NOT NULL,
    total INTEGER NOT NULL,
    date DATE NOT NULL
);

명령어를 성공적으로 실행하면 터미널에 다음과 같은 로그가 표시됩니다.

# dashboard.ts

import { SQLDatabase } from 'encore.dev/storage/sqldb';
import postgres from 'postgres';

const db = new SQLDatabase('dashboard', {
  migrations: './migrations',
});

const client = postgres(db.connectionString);

브라우저에서 http://127.0.0.1:4000에 접속하시면 아래와 같은 화면을 보실 수 있습니다.

다음으로 한 탭에서는 뷰어를 선택하고 다른 탭에서는 관리자를 선택하세요.

• 시청자

• 매니저

개발 대시보드를 확인하다가 판매 기록을 생성했는데, 데이터베이스에 저장되어 UI에서도 보입니다.

이제 관리자 보기에서 판매 생성 버튼을 클릭하고 대시보드의 두 탭이 실시간으로 업데이트되는 것을 지켜보세요.

요약

이 튜토리얼에서는 React와 Encore.ts를 사용하여 실시간 판매 대시보드를 만들었습니다. 앱은 새로운 판매 및 재고 품목으로 즉시 업데이트되어 빠른 결정을 돕습니다. 우리는 안전하고 원활한 코딩을 위해 TypeScript로 백엔드를 구축하기 위해 오픈 소스 프레임워크인 Encore.ts를 사용했습니다. Encore의 주요 기능은 다음과 같습니다.

1. 유형 안전성: 모든 API 엔드포인트와 데이터 구조가 안전한지 확인하여 실수를 줄이고 코드의 안정성을 높입니다.
2. 스트리밍 API: StreamIn, StreamOut 및 StreamInOut을 통해 실시간 데이터 스트리밍을 허용하여 클라이언트와 서버 간의 양방향 통신을 가능하게 합니다.
3. 로컬 개발 대시보드: 서비스 카탈로그, API 탐색기, 분산 추적과 같은 테스트 및 디버깅 도구를 제공하여 생산성을 높입니다.
4. 자동 클라이언트 생성: 요청/응답 유형을 정렬하여 TypeScript 또는 JavaScript로 프런트엔드 요청 클라이언트를 생성합니다.
5. 간소화된 마이크로서비스: 일반적인 복잡성 없이 여러 서비스가 포함된 앱을 구축하여 마이크로서비스를 더 쉽게 처리할 수 있는 방법을 제공합니다.

이러한 기능을 함께 사용하면 복잡한 앱을 더 쉽게 구축하고 관리할 수 있어 훌륭한 개발자 경험을 제공할 수 있습니다.

관련 링크

• GitHub의 스타 앙코르
• 이 예제의 소스 코드 찾기
• Discord 커뮤니티에 참여하세요

위 내용은 Encore.ts 및 React를 사용하여 실시간 대시보드를 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!