React 파일 관리자를 만들어 봅시다 21장: 서버에서 디렉토리 만들기

그래서 우리는 UI 부분을 마쳤습니다. 이제 경로를 만들고 서버에 구현한 다음 React 프로젝트에서 구현하겠습니다.

// src/controllers/file-manager/createDirectory.ts
import { Request, Response } from "express";

/**
 * Create a directory
 */
export default async function createDirectory(
  request: Request,
  response: Response
) {
  //
}

이것이 디렉토리 생성에 대한 마지막 코드였습니다. 이제 요청에서 디렉토리 이름과 그 안에 해당 디렉토리를 생성할 경로를 가져와야 합니다.

// src/controllers/file-manager/createDirectory.ts
import fs from "@mongez/fs";
import makeNode from "app/utils/node";
import { dataPath } from "app/utils/paths";
import { Request, Response } from "express";

/**
 * Create a directory
 */
export default async function createDirectory(
  request: Request,
  response: Response
) {
  // Get the directory name that will be created, also get the path of the directory
  const { name, path } = request.body;

  // now validate the name and path
  if (!name) {
    return response.status(400).json({
      error: "Directory name is required",
    });
  }

  if (!path) {
    return response.status(400).json({
      error: "Directory path is required",
    });
  }

  // check if the path is located in the directory path
  const fullPath = dataPath(path);

  // check if the directory exists
  if (!fs.isDirectory(fullPath)) {
    return response.status(400).json({
      error: "The path is not a directory",
    });
  }

  // check if the directory already exists
  const directoryPath = path + "/" + name;

  const directoryFullPath = dataPath(directoryPath);

  if (fs.isDirectory(directoryFullPath)) {
    return response.status(400).json({
      error: "The directory already exists",
    });
  }

  // now create the directory
  fs.makeDirectory(directoryFullPath);

  // return the directory as node

  return response.json({
    node: makeNode(directoryPath),
  });
}

여기에서 우리가 한 것은 다섯 가지입니다.

이름과 경로가 유효한지 확인했습니다.

경로가 디렉토리인지 확인했습니다.

디렉토리가 이미 있는지 확인했습니다.

디렉토리를 만들었습니다.

디렉토리를 노드로 반환했습니다.

여기서 언급하고 인정해야 할 또 다른 사항은 익스프레스 서버에 json 데이터를 수신할 것임을 알려야 하므로 src/index.ts 파일에 다음 코드를 추가해야 한다는 것입니다.

// src/index.ts
...

// create express app
const app: Express = express();

// 👇🏻 tell express to receive json data
app.use(express.json());

이제 React 프로젝트에서 빠르게 시도하고 홈페이지를 열고 홈페이지 구성 요소 위에 다음 코드를 추가할 수 있습니다.

Don't forget to restart the backend server if you was running it while you're developing.

// HomePage.tsx
import endpoint from "@mongez/http";

endpoint.post("/file-manager/directory", {
  path: "/",
  name: "new-directory",
});

그런 다음 응답을 확인하십시오. 노드로서의 디렉토리여야 합니다.



디렉토리에 두 개의 슬래시//new-directory가 있는 것을 볼 수 있습니다. 이는 경로가 /이고 다른 슬래시/를 추가하여 두 개의 슬래시를 복제하기 때문입니다.

이 문제를 관리하기 위해 작은 패키지를 설치해 보겠습니다.
yarn add @mongez/concat-route
이제 함수를 다시 업데이트해 보겠습니다.

// src/controllers/file-manager/createDirectory.ts

// 👇🏻 import the package
import concatRoute from "@mongez/concat-route";
import fs from "@mongez/fs";
import makeNode from "app/utils/node";
import { dataPath } from "app/utils/paths";
import { Request, Response } from "express";

/**
 * Create a directory
 */
export default async function createDirectory(
  request: Request,
  response: Response
) {
  // Get the directory name that will be created, also get the path of the directory
  const { name, path } = request.body;

  // now validate the name and path
  if (!name) {
    return response.status(400).json({
      error: "Directory name is required",
    });
  }

  if (!path) {
    return response.status(400).json({
      error: "Directory path is required",
    });
  }

  // check if the path is located in the directory path
  const fullPath = dataPath(path);

  // check if the directory exists
  if (!fs.isDirectory(fullPath)) {
    return response.status(400).json({
      error: "The path is not a directory",
    });
  }

  // check if the directory already exists
  // 👇🏻 use the package to concat the path and name instead of adding them manually
  const directoryPath = concatRoute(path, name);

  const directoryFullPath = dataPath(directoryPath);

  if (fs.isDirectory(directoryFullPath)) {
    return response.status(400).json({
      error: "The directory already exists",
    });
  }

  // now create the directory
  fs.makeDirectory(directoryFullPath);

  // return the directory as node

  return response.json({
    node: makeNode(directoryPath),
  });
}

이제 서버를 다시 시작하고 new-directory-2 생성을 다시 시도합니다.



훨씬 더 나은, makeNode 기능에서 동일한 기능을 사용합시다.

// src/utils/node.ts
// import the Node type from the client directory xD
import concatRoute from "@mongez/concat-route";
import { isDirectory, size } from "@mongez/fs";
import { Node } from "./../../../client/src/apps/front-office/file-manager/Kernel/Kernel.types";
import { dataPath } from "./paths";

export type { Node };

/**
 * Generate a node object to the given path,
 * the given path should be relative to the data directory
 */
export default function makeNode(path: string, children?: string[]): Node {
  // get the full path of the node
  const fullPath = dataPath(path);

  const node: Node = {
    path,
    name: path.split("/")?.pop() || "/",
    isDirectory: isDirectory(fullPath),
    size: size(fullPath),
  };

  if (node.isDirectory) {
    node.children = (children || []).map((child) =>
      // 👇🏻 we need to check if the path is the root then we will just append it to the child
      // if its not the root then we need to append `/` to the path and then append the child
      // 👉🏻 the old one makeNode((path === "/" ? path : path + "/") + child)
      // 👇🏻 more readable and cleaner
      makeNode(concatRoute(path, child))
    );
  }

  return node;
}

다음 장

다음 장에서는 createDirectory 작업의 반응 프로젝트에서 요청을 할 것입니다.

기사 저장소

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

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

지금 어디 있는지 말해줘

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

살람.