Skip to main content

페이지

페이지는 Hops에서 사용자 인터페이스를 구성하는 기본 단위입니다.
각 페이지는 다양한 컴포넌트들을 조합하여 만들어지며, 워크플로우를 통해 데이터를 처리하고 표시할 수 있습니다.

페이지 제목​

페이지 제목은 페이지 상단에 표시되는 텍스트입니다. 상단에 있는 이름을 클릭 하면 페이지 이름을 변경할 수 있습니다. page-title

페이지 이름​

페이지는 고유한 이름을 가지고 있습니다. 이름은 페이지 내에 있는 워크플로우 혹은 다른 컴포넌트에서 참조할 수 있으며 아래와 같은 규칙을 가집니다.

  • 영어 소문자 혹은 대문자로 시작
  • 영어 소문자, 대문자, 숫자, 언더스코어(_)로만 구성
  • 띄어쓰기 불가
  • camelCase 권장
  • 예시) customerList, customerDetail

page-name

페이지 변수 이해하기​

페이지 변수는 페이지 내에서 전역적으로 사용할 수 있는 값으로, 다음과 같은 상황에서 유용하게 활용됩니다:

  • 페이지 간 데이터 전달
  • 워크플로우에서 동적 값 사용
  • SQL 쿼리의 파라미터로 활용
  • 컴포넌트 간 상태 공유

페이지 변수 설정 방법​

  1. 페이지 사이드바에서 "변수 추가" 버튼을 클릭하여 새로운 변수 생성
  2. 변수의 이름과 기본값을 설정

page-variable

페이지 변수 사용하기​

페이지 변수는 다음과 같은 방식으로 사용할 수 있습니다:

  1. 워크플로우에서 사용:
-- SQL 스텝의 WHERE 절에서 사용
SELECT * FROM customer
WHERE name LIKE '%{{ page.name }}%'

page-sql

// JavaScript 스텝에서 사용
const userName = page.userName;

page-js

  1. 컴포넌트 프로퍼티에서 사용:
{{page.name}} // 템플릿 텍스트에서 사용

page-component

화면 구성하기​

제공되는 컴포넌트를 활용하여 화면을 구성할 수 있습니다. /를 입력하여 컴포넌트를 검색하고 화면에 추가할 수 있습니다.

page-component