기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.
# JavaScript를 사용하여 App Studio에서 표현식 작성
AWS App Studio에서 JavaScript 표현식을 사용하여 애플리케이션의 동작과 모양을 동적으로 제어할 수 있습니다. 한 줄 JavaScript 표현식은 이중 중괄호, 내에 작성되며 자동화`{{ }}`, UI 구성 요소 및 데이터 쿼리와 같은 다양한 컨텍스트에서 사용할 수 있습니다. 이러한 표현식은 런타임에 평가되며 계산을 수행하고, 데이터를 조작하고, 애플리케이션 로직을 제어하는 데 사용할 수 있습니다.
App Studio는 앱 구성 내에서 JavaScript 구문 및 유형 확인 오류를 감지하기 위한 SDK 통합뿐만 아니라 Luxon, UUID, Lodash의 세 가지 JavaScript 오픈 소스 라이브러리에 대한 기본 지원을 제공합니다.
**중요**
App Studio는 타사 또는 사용자 지정 JavaScript 라이브러리 사용을 지원하지 않습니다.
## 기본 구문
JavaScript 표현식에는 변수, 리터럴, 연산자 및 함수 호출이 포함될 수 있습니다. 표현식은 일반적으로 계산을 수행하거나 조건을 평가하는 데 사용됩니다.
다음 예를 참조하세요.
+ `{{ 2 + 3 }}`는 5로 평가됩니다.
+ `{{ "Hello, " + "World!" }}`는 "Hello, World\$1"로 평가됩니다.
+ `{{ Math.max(5, 10) }}`는 10으로 평가됩니다.
+ `{{ Math.random() * 10 }}`는 [0\$110) 사이의 난수(십진수 포함)를 반환합니다.
## 보간
JavaScript를 사용하여 정적 텍스트 내에서 동적 값을 보간할 수도 있습니다. 이는 다음 예제와 같이 이중 중괄호 안에 JavaScript 표현식을 묶어 달성합니다.
```
Hello {{ currentUser.firstName }}, welcome to App Studio!
```
이 예제에서 `currentUser.firstName`는 현재 사용자의 이름을 검색한 다음 인사말 메시지에 동적으로 삽입되는 JavaScript 표현식입니다.
## 연결
다음 예제와 같이 JavaScript에서 `+` 연산자를 사용하여 문자열과 변수를 연결할 수 있습니다.
```
{{ currentRow.FirstName + " " + currentRow.LastName }}
```
이 표현식은 `currentRow.FirstName` 및의 값을 사이의 공백`currentRow.LastName`과 결합하여 현재 행의 전체 이름을 생성합니다. 예를 들어 `currentRow.FirstName`가 `John`이고 `currentRow.LastName`가 `Doe`인 경우 표현식은 로 확인됩니다`John Doe`.
## 날짜 및 시간
JavaScript는 날짜 및 시간 작업을 위한 다양한 함수와 객체를 제공합니다. 예제:
+ `{{ new Date().toLocaleDateString() }}`: 현재 날짜를 현지화된 형식으로 반환합니다.
+ `{{ DateTime.now().toISODate() }}`: 날짜 구성 요소에 사용할 수 있도록 현재 날짜를 YYYY-MM-DD 형식으로 반환합니다.
### 날짜 및 시간 비교
`=`, `>`, `<``>=`, 또는 등의 연산자를 사용하여 날짜 또는 시간 값을 비교`<=`합니다. 예제:
+ `{{ui.timeInput.value > "10:00 AM"}}`: 시간이 오전 10시 이후인지 확인합니다.
+ `{{ui.timeInput.value <= "5:00 PM"}}`: 시간이 오후 5시 이전인지 확인합니다.
+ `{{ui.timeInput.value > DateTime.now().toISOTime()}}`: 시간이 현재 시간 이후인지 확인합니다.
+ `{{ui.dateInput.value > DateTime.now().toISODate()}}`: 날짜가 현재 날짜 이전인지 확인합니다.
+ `{{ DateTime.fromISO(ui.dateInput.value).diff(DateTime.now(), "days").days >= 5 }}`: 날짜가 현재 날짜로부터 최소 5일인지 확인합니다.
## 코드 블록
표현식 외에도 여러 줄의 JavaScript 코드 블록을 작성할 수도 있습니다. 표현식과 달리 코드 블록에는 중괄호가 필요하지 않습니다. 대신 코드 블록 편집기 내에서 JavaScript 코드를 직접 작성할 수 있습니다.
**참고**
표현식이 평가되고 해당 값이 표시되는 동안 코드 블록이 실행되고 해당 출력(있는 경우)이 표시됩니다.
## 전역 변수 및 함수
App Studio는 JavaScript 표현식 및 코드 블록 내에서 사용할 수 있는 특정 글로벌 변수 및 함수에 대한 액세스를 제공합니다. 예를 들어 `currentUser`는 현재 로그인한 사용자를 나타내는 전역 변수이며와 같은 속성에 액세스`currentUser.role`하여 사용자의 역할을 검색할 수 있습니다.
## UI 구성 요소 값 참조 또는 업데이트
구성 요소 및 자동화 작업에서 표현식을 사용하여 UI 구성 요소 값을 참조하고 업데이트할 수 있습니다. 구성 요소 값을 프로그래밍 방식으로 참조하고 업데이트하면 사용자 입력 및 데이터 변경에 응답하는 동적 대화형 사용자 인터페이스를 생성할 수 있습니다.
### UI 구성 요소 값 참조
UI 구성 요소의 값에 액세스하여 동적 동작을 구현하여 대화형 데이터 기반 애플리케이션을 생성할 수 있습니다.
표현식의 `ui` 네임스페이스를 사용하여 동일한 페이지에서 UI 구성 요소의 값 및 속성에 액세스할 수 있습니다. 구성 요소의 이름을 참조하여 해당 값을 검색하거나 상태에 따라 작업을 수행할 수 있습니다.
**참고**
`ui` 구성 요소의 범위가 해당 페이지로 지정되므로 네임스페이스에는 현재 페이지에만 구성 요소가 표시됩니다.
App Studio 앱에서 구성 요소를 참조하기 위한 기본 구문은 입니다`{{ui.componentName}}`.
다음 목록에는 `ui` 네임스페이스를 사용하여 UI 구성 요소 값에 액세스하는 예제가 포함되어 있습니다.
+ `{{ui.textInputName.value}}`: *textInputName*이라는 텍스트 입력 구성 요소의 값을 나타냅니다.
+ `{{ui.formName.isValid}}`: *formName* 형식의 모든 필드가 제공된 검증 기준에 따라 유효한지 확인합니다.
+ `{{ui.tableName.currentRow.columnName}}`: *tableName*이라는 테이블 구성 요소의 현재 행에 있는 특정 열의 값을 나타냅니다.
+ `{{ui.tableName.selectedRowData.fieldName}}`: *tableName*이라는 테이블 구성 요소에서 선택한 행의 지정된 필드 값을 나타냅니다. 그런 다음 `ID` (`{{ui.tableName.selectedRowData.ID}}`)와 같은 필드 이름을 추가하여 선택한 행에서 해당 필드의 값을 참조할 수 있습니다.
다음 목록에는 구성 요소 값을 참조하는 보다 구체적인 예제가 포함되어 있습니다.
+ `{{ui.inputText1.value.trim().length > 0}}`: 선행 또는 후행 공백을 잘라낸 후 *inputText1* 구성 요소의 값에 비어 있지 않은 문자열이 있는지 확인합니다. 이는 사용자 입력을 검증하거나 입력 텍스트 필드의 값을 기반으로 다른 구성 요소를 활성화/비활성화하는 데 유용할 수 있습니다.
+ `{{ui.multiSelect1.value.join(", ")}}`: *multiSelect1*이라는 다중 선택 구성 요소의 경우이 표현식은 선택한 옵션 값의 배열을 쉼표로 구분된 문자열로 변환합니다. 이는 선택한 옵션을 사용자에게 친숙한 형식으로 표시하거나 선택 항목을 다른 구성 요소 또는 자동화에 전달하는 데 유용할 수 있습니다.
+ `{{ui.multiSelect1.value.includes("option1")}}`:이 표현식은 값 *option1*이 *multiSelect1* 구성 요소에 대해 선택한 옵션 배열에 포함되어 있는지 확인합니다. *option1*을 선택하면 true를 반환하고, 그렇지 않으면 false를 반환합니다. 이는 조건부로 구성 요소를 렌더링하거나 특정 옵션 선택에 따라 작업을 수행하는 데 유용할 수 있습니다.
+ `{{ui.s3Upload1.files.length > 0}}`: s3Upload1이라는 Amazon S3 파일 업로드 구성 요소의 경우이 표현식은 파일 배열의 길이를 확인하여 파일이 업로드되었는지 확인합니다. *s3Upload1* 파일이 업로드되었는지 여부에 따라 다른 구성 요소 또는 작업을 활성화/비활성화하는 데 유용할 수 있습니다.
+ `{{ui.s3Upload1.files.filter(file => file.type === "image/png").length}}`:이 표현식은 PNG 이미지 파일만 포함하도록 *s3Upload1* 구성 요소에 업로드된 파일 목록을 필터링하고 해당 파일의 수를 반환합니다. 이는 업로드된 파일 유형에 대한 정보를 검증하거나 표시하는 데 유용할 수 있습니다.
### UI 구성 요소 값 업데이트
구성 요소의 값을 업데이트하거나 조작하려면 자동화 `RunComponentAction` 내에서를 사용합니다. 다음은 `RunComponentAction` 작업을 사용하여 *myInput*이라는 텍스트 입력 구성 요소의 값을 업데이트하는 데 사용할 수 있는 구문의 예입니다.
```
RunComponentAction(ui.myInput, "setValue", "New Value")
```
이 예제에서 `RunComponentAction` 단계는 *myInput* 구성 요소에 대한 `setValue` 작업을 호출하여 새 값인 *새 값을* 전달합니다.
## 테이블 데이터 작업
테이블 데이터 및 값에 액세스하여 작업을 수행할 수 있습니다. 다음 표현식을 사용하여 테이블 데이터에 액세스할 수 있습니다.
+ `currentRow`: 테이블 내의 현재 행에서 테이블 데이터에 액세스하는 데 사용됩니다. 예를 들어 테이블 작업의 이름을 설정하거나, 작업에서 시작된 자동화로 행의 값을 보내거나, 테이블의 기존 열에서 값을 사용하여 새 열을 생성합니다.
+ `ui.tableName.selectedRow` 및 `ui.tableName.selectedRowData`는 모두 페이지의 다른 구성 요소에서 테이블 데이터에 액세스하는 데 사용됩니다. 예를 들어 선택한 행을 기반으로 테이블 외부에서 버튼 이름을 설정합니다. 반환되는 값은 동일하지만 `selectedRow`와 간의 차이점`selectedRowData`은 다음과 같습니다.
+ `selectedRow`:이 네임스페이스에는 각 필드의 열 헤더에 표시된 이름이 포함됩니다. 테이블에 표시되는 열의 값을 참조할 `selectedRow` 때를 사용해야 합니다. 예를 들어 테이블에 개체의 필드로 존재하지 않는 사용자 지정 또는 계산된 열이 있는 경우입니다.
+ `selectedRowData`:이 네임스페이스에는 테이블의 소스로 사용되는 개체의 필드가 포함됩니다. `selectedRowData`를 사용하여 테이블에 표시되지 않지만 앱의 다른 구성 요소 또는 자동화에 유용한 개체의 값을 참조해야 합니다.
다음 목록에는 표현식의 테이블 데이터에 액세스하는 예제가 포함되어 있습니다.
+ `{{ui.tableName.selectedRow.columnNameWithNoSpace}}`: 테이블에서 선택한 행의 *columnNameWithNoSpace* 열 값을 반환합니다.
+ `{{ui.tableName.selectedRow.['Column Name With Space']}}`: 테이블에서 선택한 행의 *공백이 있는 열 이름* 열의 값을 반환합니다.
+ `{{ui.tableName.selectedRowData.fieldName}}`: 테이블에서 선택한 행의 *fieldName* 엔터티 필드 값을 반환합니다.
+ `{{ui.tableName.selectedRows[0].columnMappingName}}`: 동일한 페이지의 다른 구성 요소 또는 표현식에서 선택한 행의 열 이름을 참조합니다.
+ `{{currentRow.firstName + ' ' + currentRow.lastNamecolumnMapping}}`: 여러 열의 값을 연결하여 테이블에 새 열을 생성합니다.
+ `{{ { "Blocked": "🔴", "Delayed": "🟡", "On track": "🟢" }[currentRow.statuscolumnMapping] + " " + currentRow.statuscolumnMapping}}`: 저장된 상태 값을 기반으로 테이블 내 필드의 표시 값을 사용자 지정합니다.
+ `{{currentRow.colName}}`, `{{currentRow["First Name"]}}``{{currentRow}}`, 또는 `{{ui.tableName.selectedRows[0]}}`: 행 작업 내에서 참조된 행의 컨텍스트를 전달합니다.
## 자동화 액세스
자동화를 사용하여 App Studio에서 서버 측 로직 및 작업을 실행할 수 있습니다. 자동화 작업 내에서 표현식을 사용하여 데이터를 처리하고, 동적 값을 생성하고, 이전 작업의 결과를 통합할 수 있습니다.
### 자동화 파라미터 액세스
UI 구성 요소 및 기타 자동화의 동적 값을 자동화에 전달하여 재사용 가능하고 유연하게 만들 수 있습니다. 이는 다음과 같이 `params` 네임스페이스가 있는 자동화 파라미터를 사용하여 수행됩니다.
`{{params.parameterName}}`: UI 구성 요소 또는 기타 소스에서 자동화로 전달된 값을 참조합니다. 예를 들어는 *ID*라는 파라미터를 참조`{{params.ID}}`합니다.
#### 자동화 파라미터 조작
JavaScript를 사용하여 자동화 파라미터를 조작할 수 있습니다. 다음 예를 참조하세요.
+ `{{params.firstName}} {{params.lastName}}`: 파라미터로 전달된 값을 연결합니다.
+ `{{params.numberParam1 + params.numberParam2}}`: 두 개의 숫자 파라미터를 추가합니다.
+ `{{params.valueProvided?.length > 0 ? params.valueProvided : 'Default'}}`: 파라미터가 null이거나 정의되지 않았으며 길이가 0이 아닌지 확인합니다. true인 경우 제공된 값을 사용하고, 그렇지 않으면 기본값을 설정합니다.
+ `{{params.rootCause || "No root cause provided"}}`: `params.rootCause` 파라미터가 false(null, undefined 또는 빈 문자열)인 경우 제공된 기본값을 사용합니다.
+ `{{Math.min(params.numberOfProducts, 100)}}`: 파라미터 값을 최대값(이 경우 )으로 제한합니다`100`.
+ `{{ DateTime.fromISO(params.startDate).plus({ days: 7 }).toISO() }}`: `params.startDate` 파라미터가 인 경우 `"2023-06-15T10:30:00.000Z"`이 표현식은 시작 날짜 1주일 후의 날짜`"2023-06-22T10:30:00.000Z"`인 로 평가됩니다.
### 이전 작업의 자동화 결과에 액세스
자동화를 통해 애플리케이션은 데이터베이스 쿼리, APIs와의 상호 작용 또는 데이터 변환 수행과 같은 서버 측 로직 및 작업을 실행할 수 있습니다. `results` 네임스페이스는 동일한 자동화 내에서 이전 작업에서 반환된 출력 및 데이터에 대한 액세스를 제공합니다. 자동화 결과 액세스에 대한 다음 사항에 유의하세요.
1. 동일한 자동화 내에서 이전 자동화 단계의 결과에만 액세스할 수 있습니다.
1. *action1* 및 *action2*라는 작업이 순서대로 있는 경우 *action1*은 결과를 참조할 수 없으며 *action2*는 에만 액세스할 수 있습니다`results.action1`.
1. 이는 클라이언트 측 작업에서도 작동합니다. 예를 들어 `InvokeAutomation` 작업을 사용하여 자동화를 트리거하는 버튼이 있는 경우입니다. 그런 다음 자동화에서 파일이 PDF로 표시되는 경우 PDF 뷰어가 있는 페이지로 `results.myInvokeAutomation1.fileType === "pdf"` 이동하는 등의 `Run If` 조건이 있는 탐색 단계를 수행할 수 있습니다.
다음 목록에는 `results` 네임스페이스를 사용하여 이전 작업의 자동화 결과에 액세스하는 구문이 포함되어 있습니다.
+ `{{results.stepName.data}}`: *stepName*이라는 자동화 단계에서 데이터 배열을 검색합니다.
+ `{{results.stepName.output}}`: *stepName*이라는 자동화 단계의 출력을 검색합니다.
자동화 단계의 결과에 액세스하는 방법은 작업 유형과 반환되는 데이터에 따라 달라집니다. 작업마다 속성 또는 데이터 구조가 다를 수 있습니다. 다음은 몇 가지 일반적인 예제입니다.
+ 데이터 작업의 경우를 사용하여 반환된 데이터 배열에 액세스할 수 있습니다`results.stepName.data`.
+ API 호출 작업의 경우를 사용하여 응답 본문에 액세스할 수 있습니다`results.stepName.body`.
+ Amazon S3 작업의 경우를 사용하여 파일 콘텐츠에 액세스할 수 있습니다`results.stepName.Body.transformToWebStream()`.
사용하는 특정 작업 유형에 대한 설명서를 참조하여 반환되는 데이터의 모양과 `results` 네임스페이스 내에서 액세스하는 방법을 이해합니다. 다음 목록에는 몇 가지 예가 포함되어 있습니다.
+ `{{results.getDataStep.data.filter(row => row.status === "pending").length}}`: *getDataStep*이 데이터 행 배열을 반환하는 `Invoke Data Action` 자동화 작업이라고 가정하면이 표현식은 상태 필드가와 같은 행만 포함하도록 데이터 배열을 필터링`pending`하고 필터링된 배열의 길이(개수)를 반환합니다. 이는 특정 조건에 따라 데이터를 쿼리하거나 처리하는 데 유용할 수 있습니다.
+ `{{params.email.split("@")[0]}}`: `params.email` 파라미터에 이메일 주소가 포함된 경우이 표현식은 @ 기호에서 문자열을 분할하고 @ 기호 앞에 있는 부분을 반환하여 이메일 주소의 사용자 이름 부분을 효과적으로 추출합니다.
+ `{{new Date(params.timestamp * 1000)}}`:이 표현식은 Unix 타임스탬프 파라미터(`params.timestamp`)를 가져와 JavaScript Date 객체로 변환합니다. 타임스탬프가 초 단위라고 가정하므로 1000을 곱하여 `Date` 생성자가 예상하는 형식인 밀리초로 변환합니다. 이는 자동화에서 날짜 및 시간 값을 사용하는 데 유용할 수 있습니다.
+ `{{results.stepName.Body}}`: *stepName*이라는 `Amazon S3 GetObject` 자동화 작업의 경우이 표현식은 파일 콘텐츠를 검색하며,이 내용은 **이미지** 또는 **PDF 뷰어**와 같은 UI 구성 요소에서 검색된 파일을 표시하는 데 사용할 수 있습니다. 이 표현식은 구성 요소에 사용할 자동화의 **자동화 출력**에서 구성해야 합니다.