본문 바로가기
반응형

개발739

리액트 - 커스텀 액션 추가하기 (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.
리액트 - Context API로 상태 관리하기 (Managing State with Context API) 리액트 전체 링크 참고 - 리덕스로 상태 관리하기 - Context API로 상태 관리하기 - recoil로 상태 관리하기 - SWR로 상태 관리하기 props로 useState에 정의된 값을 넘겨주면, 하위 컴포넌트에서 상태를 관리할 수 있다. 예시 코드는 다음과 같다. // 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.. 2024. 3. 15.
자바스크립트 - 길이가 같은 두 배열을 합치기 (Zip Array using Currying) 자바스크립트 전체 링크 길이가 같은 배열을 쌍으로 만들고 싶은 경우, 커링을 이용해서 배열을 합쳐보자. const zip = (...left) => (...right) => { return left.map((item, i) => [item, right[i]]); }; let arr1 = [1, 2, 3]; let arr2 = ["A", "B", "C"]; let result = zip(...arr1)(...arr2); console.log(result); // [ [ 1, 'A' ], [ 2, 'B' ], [ 3, 'C' ] ] 2024. 3. 15.
리액트 - Node 서버 작업 진행 상황 확인하기 (Checking Progress of Node Server Task) 리액트 전체 링크 다음과 같이 Node 서버에서 약 10초가 걸리는 작업이 있다고 가정하자. const express = require("express"); const router = express.Router(); let progress = 0; router.get("/progress", (req, res) => { res.json({ progress }); }); router.get("/performTask", (req, res) => { progress = 0; // 작업 초기화 progressInterval = setInterval(() => { progress += 1; console.log({ progress }); if (progress > 100) { progress = 100; clear.. 2024. 3. 15.
깃허브 데스크탑 - This diff contains a change in line endings from 'CRLF' to 'LF' 경고 처리하기 깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기) Git / GitHub 전체 링크  참고- 커맨드 창을 Git Bash로 변경하기 깃허브 데스크탑에서 아래와 같은 Warning이 나타나는 경우가 있다.This diff contains a change in line endings from 'CRLF' to 'LF'. 위 에러는 Windows의 CRLF(Carriage Return + Line Feed)와 Unix의 LF(Line Feed) 호환 때문에 발생하는 문제다.(Line Feed = 줄바꿈 문자) 먼저 Repository → Open in Git Bash를 눌러서 커맨드 창으로 이동하자. 아래와 같이 autocrlf를 true로 설정한다.true로 설정하면 파일을 저장할 때,.. 2024. 3. 13.
자바스크립트 - 2차원 배열에서 중복된 행 제거하기 자바스크립트 전체 링크 중복된 행을 체크해서 제거한다. const removeDuplicateRows = (array) => { // 중복 체크 let uniqueRows = {}; // 중복되지 않은 행만 포함하는 새로운 배열 let result = array.filter(function (row) { let rowStr = row.join(","); if (!uniqueRows[rowStr]) { uniqueRows[rowStr] = true; return true; } return false; }); return result; }; var array2D = [ [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], [11, 12, 13, 14, 15, 16, 17, 18, 19, 20], [1,.. 2024. 3. 7.
반응형