mongez React File Manager를 만들어 봅시다. Chapter X: 활성 사이드바 노드 이제 파일 관리자에서 활성 노드를 가져와 SidebarNode의 현재 노드와 비교해 보겠습니다. 동일한 경우 활성 노드가 됩니다. 이제 파일 관리자의 현재 디렉토리 노드와 일치하는 경우 현재 노드가 활성 노드인 경우 이제 할 수 있습니다. 이제 노드가 동일한 경우 노드를 강조 표시하겠습니다. NavLink에는 active prop이 있으므로 이를 사용하여 노드를 강조 표시할 수 있지만 먼저 ... typescriptmongezjavascriptreact React 파일 관리자를 만들어 봅시다 12장: 진행률 표시줄, 스켈톤 및 오버레이 이제 디렉터리 사이를 탐색할 수 있지만 파일을 로드할 때 피드백이 없으므로 로드 진행률 표시줄을 추가해 보겠습니다. 따라서 모달은 파일 관리자를 격리된 레이아웃으로 표시하는 데 적합하지만 전체 페이지를 차지하도록 해야 하므로 모달을 제거해야 하고 모달에 대한 다른 래퍼 구성 요소를 만들 수 있습니다. 이제 홈 페이지를 정리하고 파일 관리자를 렌더링해 보겠습니다. 이전에 언급했듯이 매우 강력하... typescriptmongezjavascriptreact React 파일 관리자를 만들어 봅시다 13장: 파일 정리하기 이전 장에서 살펴본 것처럼 더 많은 구성 요소를 추가했으며 이러한 구성 요소 중 일부는 고유한 유형과 스타일을 가지고 있으므로 각 구성 요소에 대한 디렉토리를 생성해 보겠습니다. src/apps/front-office/file-manager/components/FileManager에 있는 모든 구성 요소를 components 디렉토리에 직접 내보낼 것입니다. I don't really lik... typescriptmongezjavascriptreact React 파일 관리자를 만들어 봅시다 14장: 파일 관리자 본문 그래서 사이드바와 로더의 이전 장에서 많은 작업을 수행했으며 이제 파일 관리자 본체에 약간의 노력을 기울일 때입니다. 이제 알다시피 오버레이는 파일 관리자 로딩 상태에 나타나므로 로딩이 발생할 때만 렌더링되는 별도의 구성 요소를 생성합니다. 이제 큰 부분인 노드 목록에 대한 시간이므로 모든 노드를 렌더링할 새 파일Content/NodesList.tsx을 생성하겠습니다. 우리는 모든 디렉터리 ... typescriptmongezjavascriptreact Typescript와 Mongez를 사용하여 Clean React Js 프로젝트를 만들어 봅시다. 3부: 프로젝트 앱 각 앱은 2개의 기본 파일인 ${app}-modules.json 및 ${app}-provider.ts 파일로 구성됩니다. src/shared/apps-list.ts 섹션에서 언급했듯이 app-modules.json은 세 가지 속성을 포함하는 앱 메타 데이터를 정의합니다. name : 앱 이름을 정의합니다. path : 앱의 기본 경로를 정의합니다. 예를 들어 관리자 앱인 경우 /admin로 ... typescriptmongezreact React와 Typescript를 사용하여 처음부터 파일 관리자를 만들어 봅시다 3장: 루트 디렉토리 가져오기 이제 기본 설정이 준비되었습니다. 파일 관리자를 위한 간단한 목업 API를 만들어 보겠습니다. file-manager-service.ts 디렉토리 아래에 file-manager/services를 생성한 다음 설정해 봅시다. 여기에서 파일 관리자에서 어떤 요청이 사용될 수 있는지 생각해 봅시다. 모든 요청을 나열하거나 최소한 기본 요청만 나열해 보겠습니다. 파일 업로드 디렉터리/파일 이름 변경... typescriptmongezreact React 파일 관리자를 만들어 봅시다. 6장: 디렉터리 및 파일 가져오기 이제 몇 가지 논리 작업을 시작하고 먼저 작업 흐름을 정의해 보겠습니다. 파일 관리자가 열리면 root 경로를 로드한 다음 사이드바에 해당 디렉토리를 나열하고 오른쪽에 해당 내용(파일 및 디렉토리)을 나열합니다. Loading 파일 관리자가 디렉토리를 로드 중인지 확인하는 상태입니다. currentDirectoryNode : 현재 로드된 디렉토리 노드를 포함하는 상태입니다. 이제 파일 관리자... typescriptmongezreact React 파일 관리자를 만들어 봅시다. 9장: FileManager 후크 및 컨텍스트 지난 기사에서 우리는 디렉토리 이름과 아이콘을 표시하기 위해 사이드바 노드를 업데이트했지만 먼저 파일 관리자 구성 요소 목록의 어느 곳에서나 액세스할 수 있는 파일 관리자를 얻는 방법이 필요합니다. 이에 대한 컨텍스트를 만들어 보겠습니다. 현재 파일 관리자를 쉽게 캡처할 수 있는 컨텍스트를 만들어 봅시다. contexts/FileManagerContext.tsx 파일을 만들고 다음 코드를 추... typescriptmongezreactjavascript React 파일 관리자를 만들어 봅시다 22장: 디렉터리 작업 만들기 이제 우리는 서버 부분을 완료했습니다. 이제 반응 프로젝트에서 구현할 것입니다. 지금까지는 createDirectory 작업의 코드였으므로 이제 서버에 요청을 보내겠습니다. 그러나 먼저 file-manager-service.ts 클래스 내부에서 요청을 만들어 보겠습니다. 이것이 file-manager-service.ts 클래스의 코드였습니다. 이제 먼저 return 메서드에서 자동으로 가져오... typescriptmongezreactjavascript 24- React File Manager Chapter XXIV: Create Directory 작업 완료 이제 createDirectory 작업이 제대로 작동하도록 모든 것이 준비되었습니다. createDirectory 작업에 토스트를 추가해 보겠습니다. 그래서 컴포넌트에서 사용할 수 있도록 새로운 Promise를 반환하고, toastLoading 함수를 사용하여 로딩 토스트를 보여주고, fileManagerService를 사용하여 서버에 요청을 한 다음, loader 요청이 성공한 경우 성공 ... typescriptmongezreactjavascript 25- React 파일 관리자 25장: 커널 트리 이제 트리 기반 커널을 만들어 내부에 모든 노드를 주입하겠습니다. 여기서 우리가 한 것은 정의된 모든 states이 여기에서 더 이상 필요하지 않기 때문에 제거한 것이며 모든 상태는 이제 Kernel 클래스 안에 있습니다. 이제 KernelTree 클래스 옆에 우리의 Kernel 클래스도 정의해 보겠습니다. 이제 KernelTree 클래스를 사용하도록 커널 클래스를 업데이트하겠습니다. 커널 ... typescriptmongezreactjavascript 26-React 파일 관리자 26장: 노드 감시자 그래서 우리는 아름다운 트리를 포함하도록 커널을 만들었습니다. 이제 트리의 변경 사항을 감시하도록 해야 새 노드가 추가되거나 제거될 때 트리를 업데이트할 수 있습니다. 이제 createDirectory 작업으로 돌아가서 디렉토리가 생성되면 커널 트리를 업데이트해야 합니다. 이제 우리는 커널 트리에게 이 노드가 속한 위치를 설정하도록 지시했습니다. 그러면 트리가 업데이트될 것입니다. 이제 트리... typescriptmongezreactjavascript
React File Manager를 만들어 봅시다. Chapter X: 활성 사이드바 노드 이제 파일 관리자에서 활성 노드를 가져와 SidebarNode의 현재 노드와 비교해 보겠습니다. 동일한 경우 활성 노드가 됩니다. 이제 파일 관리자의 현재 디렉토리 노드와 일치하는 경우 현재 노드가 활성 노드인 경우 이제 할 수 있습니다. 이제 노드가 동일한 경우 노드를 강조 표시하겠습니다. NavLink에는 active prop이 있으므로 이를 사용하여 노드를 강조 표시할 수 있지만 먼저 ... typescriptmongezjavascriptreact React 파일 관리자를 만들어 봅시다 12장: 진행률 표시줄, 스켈톤 및 오버레이 이제 디렉터리 사이를 탐색할 수 있지만 파일을 로드할 때 피드백이 없으므로 로드 진행률 표시줄을 추가해 보겠습니다. 따라서 모달은 파일 관리자를 격리된 레이아웃으로 표시하는 데 적합하지만 전체 페이지를 차지하도록 해야 하므로 모달을 제거해야 하고 모달에 대한 다른 래퍼 구성 요소를 만들 수 있습니다. 이제 홈 페이지를 정리하고 파일 관리자를 렌더링해 보겠습니다. 이전에 언급했듯이 매우 강력하... typescriptmongezjavascriptreact React 파일 관리자를 만들어 봅시다 13장: 파일 정리하기 이전 장에서 살펴본 것처럼 더 많은 구성 요소를 추가했으며 이러한 구성 요소 중 일부는 고유한 유형과 스타일을 가지고 있으므로 각 구성 요소에 대한 디렉토리를 생성해 보겠습니다. src/apps/front-office/file-manager/components/FileManager에 있는 모든 구성 요소를 components 디렉토리에 직접 내보낼 것입니다. I don't really lik... typescriptmongezjavascriptreact React 파일 관리자를 만들어 봅시다 14장: 파일 관리자 본문 그래서 사이드바와 로더의 이전 장에서 많은 작업을 수행했으며 이제 파일 관리자 본체에 약간의 노력을 기울일 때입니다. 이제 알다시피 오버레이는 파일 관리자 로딩 상태에 나타나므로 로딩이 발생할 때만 렌더링되는 별도의 구성 요소를 생성합니다. 이제 큰 부분인 노드 목록에 대한 시간이므로 모든 노드를 렌더링할 새 파일Content/NodesList.tsx을 생성하겠습니다. 우리는 모든 디렉터리 ... typescriptmongezjavascriptreact Typescript와 Mongez를 사용하여 Clean React Js 프로젝트를 만들어 봅시다. 3부: 프로젝트 앱 각 앱은 2개의 기본 파일인 ${app}-modules.json 및 ${app}-provider.ts 파일로 구성됩니다. src/shared/apps-list.ts 섹션에서 언급했듯이 app-modules.json은 세 가지 속성을 포함하는 앱 메타 데이터를 정의합니다. name : 앱 이름을 정의합니다. path : 앱의 기본 경로를 정의합니다. 예를 들어 관리자 앱인 경우 /admin로 ... typescriptmongezreact React와 Typescript를 사용하여 처음부터 파일 관리자를 만들어 봅시다 3장: 루트 디렉토리 가져오기 이제 기본 설정이 준비되었습니다. 파일 관리자를 위한 간단한 목업 API를 만들어 보겠습니다. file-manager-service.ts 디렉토리 아래에 file-manager/services를 생성한 다음 설정해 봅시다. 여기에서 파일 관리자에서 어떤 요청이 사용될 수 있는지 생각해 봅시다. 모든 요청을 나열하거나 최소한 기본 요청만 나열해 보겠습니다. 파일 업로드 디렉터리/파일 이름 변경... typescriptmongezreact React 파일 관리자를 만들어 봅시다. 6장: 디렉터리 및 파일 가져오기 이제 몇 가지 논리 작업을 시작하고 먼저 작업 흐름을 정의해 보겠습니다. 파일 관리자가 열리면 root 경로를 로드한 다음 사이드바에 해당 디렉토리를 나열하고 오른쪽에 해당 내용(파일 및 디렉토리)을 나열합니다. Loading 파일 관리자가 디렉토리를 로드 중인지 확인하는 상태입니다. currentDirectoryNode : 현재 로드된 디렉토리 노드를 포함하는 상태입니다. 이제 파일 관리자... typescriptmongezreact React 파일 관리자를 만들어 봅시다. 9장: FileManager 후크 및 컨텍스트 지난 기사에서 우리는 디렉토리 이름과 아이콘을 표시하기 위해 사이드바 노드를 업데이트했지만 먼저 파일 관리자 구성 요소 목록의 어느 곳에서나 액세스할 수 있는 파일 관리자를 얻는 방법이 필요합니다. 이에 대한 컨텍스트를 만들어 보겠습니다. 현재 파일 관리자를 쉽게 캡처할 수 있는 컨텍스트를 만들어 봅시다. contexts/FileManagerContext.tsx 파일을 만들고 다음 코드를 추... typescriptmongezreactjavascript React 파일 관리자를 만들어 봅시다 22장: 디렉터리 작업 만들기 이제 우리는 서버 부분을 완료했습니다. 이제 반응 프로젝트에서 구현할 것입니다. 지금까지는 createDirectory 작업의 코드였으므로 이제 서버에 요청을 보내겠습니다. 그러나 먼저 file-manager-service.ts 클래스 내부에서 요청을 만들어 보겠습니다. 이것이 file-manager-service.ts 클래스의 코드였습니다. 이제 먼저 return 메서드에서 자동으로 가져오... typescriptmongezreactjavascript 24- React File Manager Chapter XXIV: Create Directory 작업 완료 이제 createDirectory 작업이 제대로 작동하도록 모든 것이 준비되었습니다. createDirectory 작업에 토스트를 추가해 보겠습니다. 그래서 컴포넌트에서 사용할 수 있도록 새로운 Promise를 반환하고, toastLoading 함수를 사용하여 로딩 토스트를 보여주고, fileManagerService를 사용하여 서버에 요청을 한 다음, loader 요청이 성공한 경우 성공 ... typescriptmongezreactjavascript 25- React 파일 관리자 25장: 커널 트리 이제 트리 기반 커널을 만들어 내부에 모든 노드를 주입하겠습니다. 여기서 우리가 한 것은 정의된 모든 states이 여기에서 더 이상 필요하지 않기 때문에 제거한 것이며 모든 상태는 이제 Kernel 클래스 안에 있습니다. 이제 KernelTree 클래스 옆에 우리의 Kernel 클래스도 정의해 보겠습니다. 이제 KernelTree 클래스를 사용하도록 커널 클래스를 업데이트하겠습니다. 커널 ... typescriptmongezreactjavascript 26-React 파일 관리자 26장: 노드 감시자 그래서 우리는 아름다운 트리를 포함하도록 커널을 만들었습니다. 이제 트리의 변경 사항을 감시하도록 해야 새 노드가 추가되거나 제거될 때 트리를 업데이트할 수 있습니다. 이제 createDirectory 작업으로 돌아가서 디렉토리가 생성되면 커널 트리를 업데이트해야 합니다. 이제 우리는 커널 트리에게 이 노드가 속한 위치를 설정하도록 지시했습니다. 그러면 트리가 업데이트될 것입니다. 이제 트리... typescriptmongezreactjavascript