React 파일 관리자를 만들어 봅시다 22장: 디렉터리 작업 만들기

이제 우리는 서버 부분을 완료했습니다. 이제 반응 프로젝트에서 구현할 것입니다.

// src/store/actions/file-manager/createDirectory.ts
import Kernel from "../Kernel";

export default function createDirectory(kernel: Kernel) {
  return function create(
    directoryName: string,
    directoryPath: string = kernel.currentDirectoryNode?.path as string,
  ) {
    console.log("create directory", directoryName);
  };
}

지금까지는 createDirectory 작업의 코드였으므로 이제 서버에 요청을 보내겠습니다.

파일 관리자 서비스 업데이트

그러나 먼저 file-manager-service.ts 클래스 내부에서 요청을 만들어 보겠습니다.

// src/services/file-manager-service.ts
import endpoint from "@mongez/http";
import FileManagerServiceInterface from "../types/FileManagerServiceInterface";

export class FileManagerService implements FileManagerServiceInterface {
  /**
   * {@inheritDoc}
   */
  public list(directoryPath: string): Promise<any> {
    console.log(directoryPath);

    return endpoint.get("/file-manager", {
      params: {
        path: directoryPath,
      },
    });
  }

  /**
   * {@inheritDoc}
   */
  public createDirectory(directoryName: string, saveTo: string): Promise<any> {
    throw new Error("Method not implemented.");
  }
  ...
}

이것이 file-manager-service.ts 클래스의 코드였습니다. 이제 먼저 return 메서드에서 자동으로 가져오도록 반환 유형을 업데이트한 다음 createDirectory 메서드를 업데이트합니다.

// src/services/file-manager-service.ts
import endpoint from "@mongez/http";
import FileManagerServiceInterface from "../types/FileManagerServiceInterface";

export class FileManagerService implements FileManagerServiceInterface {
  /**
   * {@inheritDoc}
   */
  public list(directoryPath: string) {
    return endpoint.get("/file-manager", {
      params: {
        path: directoryPath,
      },
    });
  }

  /**
   * {@inheritDoc}
   */
  public createDirectory(directoryName: string, path: string) {
    return endpoint.post("/file-manager/directory", {
      path,
      name: directoryName,
    });
  }
}

이제 createDirectory 작업을 업데이트하겠습니다.

createDirectory 메서드 호출

이제 createDirectory 작업 및 호출createDirectory 메서드로 돌아가 보겠습니다.

// src/store/actions/file-manager/createDirectory.ts
import Kernel from "../Kernel";
import fileManagerService from "../services/file-manager-service";

export default function createDirectory(kernel: Kernel) {
  return function create(
    directoryName: string,
    directoryPath: string = kernel.currentDirectoryNode?.path as string,
  ) {
    fileManagerService.createDirectory(directoryName, directoryPath);
  };
}

이렇게 하면 서버에 대한 요청이 성공적으로 이루어지지만 아직 응답을 처리하지 않습니다.

또한 요청이 진행되는 동안 로딩 표시기를 표시할 수 있지만 다음 장에서 이에 대해 설명하겠습니다.

다음 장

다음 장에서는 Toasts 및 Loading 표시기 작업을 시작합니다.

기사 저장소

Github Repository에서 챕터 파일을 볼 수 있습니다.

Don't forget the main branch has the latest updated code.

지금 어디 있는지 말해줘

이 시리즈를 저와 함께 후속 조치하는 경우 현재 위치와 어려움을 겪고 있는 부분을 알려주시면 최대한 도와드리겠습니다.

살람.