React 파일 관리자를 만들어 봅시다 18장: Api를 React에 연결

이전 장에서 목록 요청을 완료했으므로 이제 React 프로젝트에서 구현해 보겠습니다.

도트 환경 파일 업데이트

React 프로젝트의 루트 디렉터리에서 .env 파일을 열고 업데이트합니다.

# Disable ESlint error
ESLINT_NO_DEV_ERRORS=true

# App Name
REACT_APP_NAME="file-manager"

# App Description
REACT_APP_DESCRIPTION=

# App Code Name
REACT_APP_CODE_NAME="fm"

# Branch Name
REACT_APP_BRANCH_NAME="main"

# App default locale code
REACT_APP_DEFAULT_LOCALE_CODE=en

# App Fallback locale code
REACT_APP_FALLBACK_LOCALE_CODE=en

# App default direction
REACT_APP_DEFAULT_DIRECTION=ltr

# App Primary Color
REACT_APP_PRIMARY_COLOR=#000

# App API URL
#  👇🏻 Put only the base url here
REACT_APP_API_URL=http://localhost:8001

# App API Key
REACT_APP_API_KEY=

Please note that CRA does not reload the server on .env file changes, you need to restart the server manually.

이제 반응 서버를 시작하고 file-manager-server.ts 파일로 이동하겠습니다.

// src/apps/front-office/file-manager/Kernel/file-manager-server.ts
👉🏻 import endpoint from "@mongez/http";
import FileManagerServiceInterface from "../types/FileManagerServiceInterface";

export class FileManagerService implements FileManagerServiceInterface {
  /**
   * {@inheritDoc}
   */
  public list(directoryPath: string): Promise<any> {
    // 👇🏻 update the endpoint url
    // the params key will convert the request uri into query string
    // i.e /file-manager?path=/home
    return endpoint.get("/file-manager", {
      params: {
        path: directoryPath,
      },
    });
  }

블러디 코르스

이제 브라우저에서 사용해 봅시다.

Don't forget to run the server first in the backend server directory by running yarn start.

bloody CORS 때문에 아무 것도 얻지 못할 것입니다. 수정하겠습니다.

CORS 수정

cors 패키지를 설치하고 src/index.ts 파일에서 업데이트하겠습니다.
yarn add cors
유형도 추가합시다
yarn add -D @types/cors
이제 색인 파일로 가져오겠습니다src/index.ts.

// imported express server
👉🏻 import cors from "cors";
import express, { Express } from "express";
import listRoutes from "./routes";

// port to run the server
const port = 8001;

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

// 👇🏻 allow cors
app.use(cors());

// list call our routes list
listRoutes(app);

// start the Express server
app.listen(port, () => {
  console.log(`⚡️[server]: Server is running at http://localhost:${port}`);
});

이제 다시 시도해 보겠습니다. 지금 작동해야 합니다.

진행률 표시줄의 작은 수정

진행률 표시줄이 채워진 다음 0 값으로 돌아가는 것이 정말 마음에 들지 않으므로 진행률 값이 0인 경우 스타일을 업데이트하고 표시 여부를 숨기도록 하겠습니다.

// LoadingProgressBar

  return (
    <Progress
      size="lg"
      value={progress}
      striped
      styles={{
        root: {            
          ❌ backgroundColor: progress === 0 ? "white" : undefined,
          ✅ visibility: progress === 0 ? "hidden" : undefined,
        },
      }}
      label={progress > 0 ? `${progress}%` : undefined}
      color={mapProgressColor()}
      animate
    />
  );

다음 장

다음 장에서는 추가create directory 버튼과 같은 좋은 작업을 생성할 수 있도록 도구 모음에서 작업을 시작합니다.

기사 저장소

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

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

지금 어디 있는지 말해줘

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

살람.