본문 바로가기
반응형

개발/React175

리액트 - 깃허브 리포지토리를 파일 브라우저로 불러오기 (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.
리액트 - 커스텀 액션 추가하기 (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.
리액트 - 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.
리액트 - crypto-js로 문자열 암호화/복호화하기 (Encrypting/Decrypting String) 리액트 전체 링크 아래 결과는 링크에서 확인할 수 있다. AES (Advanced Encryption Standard) - 대칭키 암호화 알고리즘으로, 동일한 키를 사용하여 데이터를 암호화하고 복호화한다. SHA256 (Secure Hash Algorithm 256-bit) - 단방향 해시 알고리즘으로, 임의의 데이터를 고정된 길이의 해시 값으로 변환한다. - 한 번 해싱된 데이터는 원본 데이터로 복원할 수 없다. crypto-js crypto-js를 이용하면 위에서 설명한 AES와 SHA256을 간단히 사용할 수 있다. 먼저 AES를 사용하기 위해 적절히 키를 만들자. const SECRET_KEY = "YOUR_SECRET_KEY"; 사용 예시는 다음과 같다. import CryptoJS from ".. 2024. 2. 28.
리액트 - module.css로 CSS 스타일 관리하기 리액트 전체 링크 참고 - styled-components로 타이핑 효과 만들기 - module.css로 CSS 스타일 관리하기 - classnames로 CSS 스타일 조건부 렌더링하기 아래 컴포넌트를 실행시켜 보자. input에서 my_input 클래스의 스타일을 설정한다. import React from "react"; import "./CssTest.css"; const CssTest = () => { return ( ); }; export default CssTest; CssTest.css에서 my_input 클래스의 background-color는 blue로 설정하였다. .my_input { border: 0; margin : 10px; padding: 10px; border-radius: 10.. 2024. 2. 21.
반응형

티스토리툴바