본문 바로가기
반응형

분류 전체보기1062

리액트 - recoil로 상태 관리하기 (Managing State with recoil) 리액트 전체 링크 참고 - 리덕스로 상태 관리하기 - Context API로 상태 관리하기 - recoil로 상태 관리하기 - SWR로 상태 관리하기 리액트는 props를 넘겨서 하위 컴포넌트에서도 state를 관리할 수 있다. 예시 코드는 다음과 같다. // ParentComponent.js import React, { useState } from "react"; import ChildComponent from "./ChildComponent"; const ParentComponent = () => { const [value, setValue] = useState(0); return ( Parent Component setValue(value + 1)}>Parent + {`Parent value : $.. 2024. 3. 22.
리액트 - useNavigate로 Toast UI Editor 이동하기 (Toast UI Editor with Chonky Browser) 리액트 전체 링크 참고 - Toast UI로 에디터 만들기 - RESTful API로 파일 읽기 - URL query string 받아오기 - 파일 브라우저 만들기 - chonky 기본 설정 확인하기 - 액션 추가하고 다크 모드 구현하기 - 커스텀 액션 추가하기 - Chonky 파일 맵 만들기 - 리포지토리의 폴더 정보 저장하기 - 깃허브 리포지토리를 파일 브라우저로 불러오기 - useNavigate로 Toast UI Editor 이동하기 아래 결과는 링크에서 확인할 수 있다 이제 마크다운(.md) 파일을 더블 클릭하면 선택된 파일을 Toast UI Editor에서 열어보자. 이미 파일을 여는 액션이 정의되어 있으므로 targetFile.name의 확장자가 .md인 경우에 대해 코드를 추가한다. cons.. 2024. 3. 16.
리액트 - 깃허브 리포지토리를 파일 브라우저로 불러오기 (Chonky Browser with GitHub Repository) 리액트 전체 링크 참고 - RESTful API로 파일 읽기 - RESTful API로 파일 이름 변경하기 - 파일 브라우저 만들기 - chonky 기본 설정 확인하기 - 액션 추가하고 다크 모드 구현하기 - 커스텀 액션 추가하기 - Chonky 파일 맵 만들기 - 리포지토리의 폴더 정보 저장하기 - 깃허브 리포지토리를 파일 브라우저로 불러오기 - useNavigate로 Toast UI Editor 이동하기 이전 글에서 만든 chonky_map.json을 이용해서 리포지토리의 정보를 파일 브라우저로 불러오자. chonky_map.json을 얻기 위해 ChonkyLoader 컴포넌트를 만들고, map file을 props로 넘긴다. chonkyMap이 없는 경우(= undefined)는 렌더링 하지 않는다.. 2024. 3. 16.
깃허브 액션 - 리포지토리의 폴더 정보 저장하기 (Chonky File Map) 깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기) Git / GitHub 전체 링크 리액트 전체 링크 Node JS 전체 링크 참고- RESTful API로 파일 읽기- RESTful API로 파일 쓰기- 로또 번호 수집해서 json으로 저장하기 - 파일 브라우저 만들기- chonky 기본 설정 확인하기- 액션 추가하고 다크 모드 구현하기- 커스텀 액션 추가하기 - Chonky 파일 맵 만들기- 리포지토리의 폴더 정보 저장하기- 깃허브 리포지토리를 파일 브라우저로 불러오기- useNavigate로 Toast UI Editor 이동하기 이전 글에서 구현한 Chonky File Map을 깃허브 액션을 이용해서 리포지토리에 저장해 보자. Chonky 브라우저가 깃허브의 리포지토리에 대한.. 2024. 3. 16.
Node JS - Chonky 파일 맵 만들기 (Make Chonky File Map) 리액트 전체 링크 Node JS 전체 링크 참고 - 파일 브라우저 만들기 - chonky 기본 설정 확인하기 - 액션 추가하고 다크 모드 구현하기 - 커스텀 액션 추가하기 - Chonky 파일 맵 만들기 - 리포지토리의 폴더 정보 저장하기 - 깃허브 리포지토리를 파일 브라우저로 불러오기 - useNavigate로 Toast UI Editor 이동하기 Chonky 브라우저에서 사용하는 예시 demo.json은 다음과 같다. 1) 최상위 폴더의 ID인 rootFolderId가 필요하다. 2) fileMap에서 전체 폴더/파일에 대한 정보가 있다. 3) 폴더의 경우, isDir과 childrenIds, childrenCount 정보가 있다. 4) 파일의 경우, size와 isHidden 정보가 있다. 5) 폴.. 2024. 3. 16.
리액트 - 커스텀 액션 추가하기 (Add Custom Actions) 리액트 전체 링크 참고 - https://chonky.io/docs/2.x/file-actions/custom-actions - 파일 브라우저 만들기 - chonky 기본 설정 확인하기 - 액션 추가하고 다크 모드 구현하기 - 커스텀 액션 추가하기 - Chonky 파일 맵 만들기 - 리포지토리의 폴더 정보 저장하기 - 깃허브 리포지토리를 파일 브라우저로 불러오기 - useNavigate로 Toast UI Editor 이동하기 다음과 같이 커스텀 액션을 추가해 보자. 액션 정의하기 myCustomAction.js를 만들고 defineFileAction과 ChonkyIconName을 import 하자. import { defineFileAction, ChonkyIconName } from "chonky"; .. 2024. 3. 16.
리액트 - 액션 추가하고 다크 모드 구현하기 (Add ChonkyActions for Dark Mode) 리액트 전체 링크 참고 - 파일 브라우저 만들기 - chonky 기본 설정 확인하기 - 액션 추가하고 다크 모드 구현하기 - 커스텀 액션 추가하기 - Chonky 파일 맵 만들기 - 리포지토리의 폴더 정보 저장하기 - 깃허브 리포지토리를 파일 브라우저로 불러오기 - useNavigate로 Toast UI Editor 이동하기 현재 ChonkyBrowser.js의 fileActions에 CreateFolder와 DeleteFiles Action만 추가되어 있다. const fileActions = useMemo( () => [ChonkyActions.CreateFolder, ChonkyActions.DeleteFiles], [] ); 아래와 같이 다른 액션도 추가해 보자. const fileActions .. 2024. 3. 16.
리액트 - chonky 기본 설정 확인하기 (Default ConfigOptions) 리액트 전체 링크 참고 - https://chonky.io/docs/2.x/basics/default-config - 파일 브라우저 만들기 - chonky 기본 설정 확인하기 - 액션 추가하고 다크 모드 구현하기 - 커스텀 액션 추가하기 - Chonky 파일 맵 만들기 - 리포지토리의 폴더 정보 저장하기 - 깃허브 리포지토리를 파일 브라우저로 불러오기 - useNavigate로 Toast UI Editor 이동하기 Chonky 파일 브라우저에서 제공하는 기본 옵션은 다음과 같다. export type ChonkyConfig = Pick< FileBrowserProps, | 'fileActions' | 'onFileAction' | 'thumbnailGenerator' | 'doubleClickDelay'.. 2024. 3. 16.
리액트 - 파일 브라우저 만들기 (React File Browser with chonky) 리액트 전체 링크 참고 - https://chonky.io/docs/2.x/ - https://chonky.io/storybook/2.x/?path=/story/file-browser-demos--mutable-virtual-file-system - Mui로 파일 브라우저 만들기 (React File Browser with Mui) - 파일 브라우저 만들기 - chonky 기본 설정 확인하기 - 액션 추가하고 다크 모드 구현하기 - 커스텀 액션 추가하기 - Chonky 파일 맵 만들기 - 리포지토리의 폴더 정보 저장하기 - 깃허브 리포지토리를 파일 브라우저로 불러오기 - useNavigate로 Toast UI Editor 이동하기 아래 결과는 링크에서 확인할 수 있다 chonky를 이용해서 파일 브라우저.. 2024. 3. 16.
반응형

티스토리툴바