Oracle JET 가상 DOM 앱에서 데이터 레코드 삭제

소개

이 사용지침서에서는 Oracle JET(Oracle JavaScript Extension Toolkit) 가상 DOM 앱을 사용하여 기존 데이터 레코드를 삭제하고 변경사항을 REST 서비스에 제출하는 방법을 보여줍니다.

목표

이 자습서에서는 기존 데이터 레코드를 삭제하고 변경 사항을 REST 서비스에 제출하는 방법에 대해 알아봅니다.

필수 조건

작업 1: 삭제 버튼 생성

  1. JET-Virtual-DOM-app/src/components/ActivityItem 디렉토리로 이동하고 편집기에서 ItemActionsContainer.tsx 파일을 엽니다.

  2. Props 유형 별칭에서 추가 delete 속성을 정의합니다.

    type Props = {
    create: () => void;
    edit: () => void;
    itemSelected: Partial<Item>;
    delete: () => void;
 };

  3. <oj-button id="updateButton" 요소를 찾아 아래에 oj-button 요소를 추가합니다. onojAction 속성을 {props.delete}로 설정하고 disabled 속성을 hideActions로 설정합니다.

    return (
   <div>
      <oj-button id="createButton" onojAction={props.create}>Create</oj-button>
      <oj-button id="updateButton" disabled={hideActions} onojAction={props.edit}>Update</oj-button>
      <oj-button id="deleteButton" disabled={hideActions} onojAction={props.delete}>Delete</oj-button>
   </div>

  4. ItemActionsContainer.tsx 파일을 저장합니다.

    코드는 이 final-ItemActionsContainer.tsx.txt 파일과 유사해야 합니다.

작업 2: 레코드 삭제 처리

Fetch API 및 HTTP DELETE 메소드를 사용하여 REST 서비스에서 레코드를 삭제합니다. RESTDataProvider의 mutate 메소드를 사용하여 RESTDataProvider 인스턴스를 업데이트합니다.

  1. JET-Virtual-DOM-app/src/components/ActivityItem 디렉토리로 이동하고 편집기에서 ActivityItemContainer.tsx 파일을 엽니다.

  2. ActivityItemContainer 함수에서 레코드를 업데이트하는 이전 코드 아래에 deleteItem라는 메소드를 생성합니다.

    이 메소드는 사용자로부터 항목 삭제 확인을 요청하고, 확인을 성공하면 REST 서비스로 전송하는 DELETE 요청을 생성합니다. DELETE 작업이 성공하면 메소드가 RESTDataProvider mutate 이벤트를 호출하여 항목이 삭제되었음을 데이터 제공자 소비자에게 알립니다.

    const deleteItem = async () => {
  const really = confirm("Do you really want to delete this item?");
  if (really) {
    // Create and send request to REST service to delete item
    const request = new Request(`${restServerURLItems}${itemData.id}`, {
       method: "DELETE",
     });
    const response = await fetch(request);
    // Call  mutate method to notify dataprovider consumers that an 
    // item has been removed
    if (response.status === 200) {
      const removedRowKey = itemData.id;
      const removedRowMetaData = { key: removedRowKey };

      props.data?.mutate({
        remove: {
          data: [itemData.id],
          keys: new Set([removedRowKey]),
          metadata: [removedRowMetaData],
         },
       });
      } 
      else {
          alert(
             "Delete failed with status " 
             + response.status + " : " + response.statusText
          );
     }
  console.log("Deleted item.");
  } 
  else {
    console.log("OK, we canceled that delete.");
   }
  };

  3. return 문에서 ItemActionsContainer 요소를 delete 속성으로 업데이트합니다.

     <div id="container">
     <h3>Activity Items</h3>
       <ItemActionsContainer edit={openEditDialog} delete={deleteItem} itemSelected={activityItemValue} create={openCreateDialog} />
       . . . 
 </div>

  4. ActivityItemContainer.tsx 파일을 저장합니다.

    코드는 이 final-delete-ActivityItemContainer.tsx.txt 파일과 유사해야 합니다.

작업 3: 가상 DOM 앱 실행 및 레코드 삭제

  1. 터미널 창에서 가상 DOM 앱을 실행합니다. 
    npx ojet serve

  2. 앱에서 야구 활동을 누른 다음 SureFire 볼(세트 4) 항목을 누릅니다.

  3. 삭제 단추를 누릅니다. 확인 창이 열립니다.

  4. 확인을 누릅니다.

    섹션이 새로 고쳐지고 항목이 삭제되었습니다.

  5. 실행 중인 가상 DOM 앱을 표시하는 브라우저 창 또는 탭을 닫습니다.

  6. 터미널 창에서 Ctrl+C을 누르고 프롬프트가 표시되면 y를 입력하여 Oracle JET 툴링 일괄 처리 작업을 종료합니다.

작업 4: (선택 사항) 복원된 앱에서 가상 DOM 앱 실행

제공된 코드에서 완료된 Oracle JET 가상 DOM 앱을 실행하려는 경우 다운로드한 아카이브 파일에서 앱을 복원할 수 있습니다. "스트립 및 압축된" Oracle JET 가상 DOM 앱으로 작업하려면 추출된 앱 내에서 Oracle JET 툴링, 필수 라이브러리 및 모듈을 포함한 프로젝트 종속성을 복원해야 합니다.

  1. JET-Virtual-DOM-app-final.zip 파일을 다운로드하고 완성된 앱의 내용을 JET-Virtual-DOM-app-final 디렉토리로 추출합니다.
  2. 터미널 창에서 JET-Virtual-DOM-app-final 디렉토리로 이동하고 Oracle JET 가상 DOM 앱을 복원합니다. 
    npm install
  3. 확인을 기다립니다. 
    Success: Restore complete

    앱이 실행 준비되었습니다.

  4. 가상 DOM 앱을 실행하고 브라우저에서 테스트합니다. 
    npx ojet serve

  5. 실행 중인 가상 DOM 앱을 표시하는 브라우저 창 또는 탭을 닫습니다.

  6. 터미널 창에서 Ctrl+C을 누르고 프롬프트가 표시되면 y를 입력하여 Oracle JET 툴링 일괄 처리 작업을 종료합니다.

다음단계

이 자습서에서는 가상 DOM 웹 앱 구축에 대한 이 학습 경로에서 모듈 REST 서비스를 사용하여 CRUD 작업을 완료합니다.

End-to-End Testing in Oracle JET 모듈의 학습 경로 Set up a Test Environment in Oracle JET에서 다음 자습서로 진행할 수 있습니다.

또한 가상 DOM 학습 경로의 기본 페이지로 돌아가 가상 DOM 앱 구축 및 기타 학습 경로의 모든 모듈에 접근할 수 있습니다.

추가 학습 자원

docs.oracle.com/learn에서 다른 랩을 탐색하거나 Oracle Learning YouTube 채널에서 더 많은 무료 학습 콘텐츠에 액세스하세요. 또한 education.oracle.com/learning-explorer를 방문하여 Oracle Learning Explorer가 되십시오.

제품 설명서는 Oracle Help Center를 참조하십시오.