log weekly march 2024 angular frontend shopify

앱 삭제 기능 만들기

2024년 3월 20일 수요일

Today I Learend

날짜

2024년 3월 20일 수요일

내용

앱 삭제하는 경로를 추가했다. 오늘은 백엔드 작업을 많이 했다.

프론트

기존에 우리 서비스에서 사용하는 체크박스 클래스로 바꿔주었다. 앱을 삭제하는 버튼은 고객이 이유를 선택해야만 활성화되도록 구현하기 위해 ngIf 를 사용했다.

1
2

      <button *ngIf="uninstallReasons.length > 0" class="btn-enabled" mat-button (click)="onConfirm()">Delete App</button>
      <button *ngIf="uninstallReasons.length === 0" class="btn-disabled" mat-button disabled>Delete App</button>

각 사유들은 checkbox로 만들었고 체크되면 삭제 사유를 담는 배열에 추가시켰다.

1
2
3

<div class="checkbox-container" aria-label="Select a reason" [(ngModel)]="uninstallReasons">
  <alpha-checkbox (change)="updateUninstallReasons($event, 10)">Technical issues</alpha-checkbox>
</div>

처음 사유를 추가했을 때, 버튼이 활성화되었다. 하지만 체크를 비활성화하여 다시 사유를 선택하지 않게 되었을 때 버튼이 비활성화되지 않았다. 따라서 uninstallreason의 배열 상태를 추적하는 ChangeDetectorRef를 사용했다.

1
2
3
4
5
6
7
8
9

updateUninstallReasons(event: any, value: number): void {
    const checked: boolean = event.target.checked;
    if (checked && !this.uninstallReasons.includes(value)) {
      this.uninstallReasons.push(value);
    } else if (!checked && this.uninstallReasons.includes(value)) {
      this.uninstallReasons = this.uninstallReasons.filter(reason => reason !== value);
    }
    this.cdr.detectChanges();
  }

일단 기능은 잘 작동된다.

백

서버에서 처리해야 할 것은

  1. 프론트에서 전달 받은 삭제 사유를 저장
  2. Shopify 테마 내에 저장된 스크립트, 스니펫, 메타필드 등을 삭제
  3. 기존에 삭제 과정 진행
  4. Shopify에 앱 삭제처리하는 API 호출

알맞게 함수를 만들어줬다. 단, 2번은 시간이 다소 필요한 작업이다. Shopify 쪽에 요청을 보내야 하는 것 뿐 아니라, 모든 테마를 탐색해야 하기 때문이다. 스토어에서 테마를 변경할 경우 여러 테마에 우리 서비스의 스니펫들이 포함되어 있을 수 있다. 따라서 이 과정을 background_task로 처리했다. 4번은 API 문서에 생각보다 쉽게 작성되어 있어 해결할 수 있었다.

이것 저것 많이 만들었는데 생각보다 잘 작동했다. 아마 프론트 쪽 코드 리뷰만 잘 되면 될듯!

회고

프론트, 백 양 쪽 다하려니 정신이 하나도 없다.

CATALOG
    weekly