본문 바로가기
반응형

개발/React176

리액트 - Toast UI로 에디터 만들기 (React Editor with Toast Editor 3.0) 리액트 전체 링크 참고 - https://www.npmjs.com/package/@toast-ui/react-editor - https://nhn.github.io/tui.editor/latest/tutorial-example01-editor-basic - https://nhn.github.io/tui.editor/latest/ToastUIEditorCore - Toast UI로 에디터 만들기 - 글자색 변경 플러그인 추가하기 - 테이블 병합 플러그인 추가하기 - 에디터 저장하고 초기화하기 - Toast UI 에디터로 깃허브 마크다운 저장하기 - Toast UI 에디터로 이미지를 포함한 깃허브 마크다운 저장하기 - Socket.IO로 Toast UI Editor 동시 편집하기 React에서 토스트 UI .. 2023. 7. 30.
리액트 - Indexed DB로 깃허브 RESTful API PUT 최신 정보 유지하기 리액트 전체 링크 Git / GitHub 전체 링크 참고 - 깃허브 RESTful API 한글 깨짐 현상 해결하기 - 두 날짜 사이의 시간 차이 구하기 - Indexed DB로 로컬에 데이터 저장하기 깃허브 RESTful API 한글 깨짐 현상 해결하기를 참고해서 아래 코드를 실행해보자. import React, { useState } from "react"; import Button from "@mui/material/Button"; import Stack from "@mui/material/Stack"; import { TextField } from "@mui/material"; import { Textarea } from "@mui/joy"; import { Octokit } from "@octok.. 2023. 7. 22.
리액트 - Indexed DB로 로컬에 데이터 저장하기 (How to use Indexed DB in React) 리액트 전체 링크 참고 - 로컬 스토리지 사용 방법과 세션 스토리지 비교 Indexed DB는 로컬 스토리지보다 사용이 까다롭지만, 데이터 용량이 큰 장점이 있다. 로컬 스토리지로 감당이 불가능한 경우는 Indexed DB를 이용해보자. 템플릿 만들기 데이터 (ID, name, email, age)를 add, get, delete + print all data 기능을 만들어보자. 아래와 같이 템플릿을 간단히 만들어보자. 코드는 아래를 참고하자. import React, { useEffect, useState } from "react"; import Button from "@mui/material/Button"; import Stack from "@mui/material/Stack"; import { Te.. 2023. 7. 22.
리액트 - 깃허브 마크다운 스타일 적용하기 (Github Markdown Style) 깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기) 리액트 전체 링크 참고- 깃허브 RESTful API로 파일 편집기 만들기- 깃허브 RESTful API 한글 깨짐 현상 해결하기- 마크다운을 HTML로 변환하기- Toast UI 에디터로 깃허브 마크다운 저장하기- https://github.com/remarkjs/react-markdown#plugins- https://uiwjs.github.io/react-markdown-preview/ 위 링크에서 아래 마크다운 테이블을 만들어보자.정상적으로 만들어지지 않는다. 이 경우 플러그인을 여러 개 설치해야 하는데 너무 번거롭다.아래 링크가 github style대로 마크다운을 잘 적용해준다.https://uiwjs.github.io/r.. 2023. 7. 12.
React Material - Mui Table 세로 줄 변경하기 (Enable Column Ordering) 리액트 전체 링크 참고 - column ordering - 로컬 스토리지 사용 방법과 세션 스토리지 비교 - Mui Table 옵션 설정하기 (Customizing Material React Table) 위 링크에 이어서 세로 줄을 변경하고 로컬 스토리지에 저장해서 순서를 유지해보자. 아래 코드를 보완해보자. import React, { useMemo } from "react"; import MaterialReactTable from "material-react-table"; //nested data is ok, see accessorKeys in ColumnDef below const data = [ { name: { firstName: "John", lastName: "Doe", }, address:.. 2023. 7. 12.
리액트 - 마크다운을 HTML로 변환하기 (Convert Markdown to HTML in React) 리액트 전체 링크 참고 - 깃허브 RESTful API로 파일 편집기 만들기 - 깃허브 RESTful API 한글 깨짐 현상 해결하기 - 깃허브 마크다운 스타일 적용하기 - Toast UI 에디터로 깃허브 마크다운 저장하기 마크다운으로 만든 내용을 HTML로 변환해서 react에 보여주자. 먼저 react-markdown을 다운로드 받는다. npm install react-markdown 깃허브 파일 편집기를 참고하여 코드를 아래와 같이 수정한다. 먼저, repo와 path는 아래와 같이 초기화한다. const [repo, setRepo] = useState("auto-test"); const [path, setPath] = useState("README.md"); 여기서 불러올 내용은 아래 링크의 RE.. 2023. 7. 10.
리액트 - 깃허브 RESTful API 한글 깨짐 현상 해결하기 리액트 전체 링크 참고 - 깃허브 RESTful API로 파일 편집기 만들기 - 마크다운을 HTML로 변환하기 - Toast UI 에디터로 깃허브 마크다운 저장하기 위의 링크를 참고하여 한글이 포함된 README.md 파일을 불러오자. https://github.com/bloodstrawberry/auto-test/blob/main/README.md repository와 filePath를 바꿔서 불러오기 버튼을 누르면 파일이 깨지는 것을 알 수 있다. base64에 대해 한글이 포함된 경우는 코드를 아래와 같이 보완해야 한다. // setContents(atob(result.data.content)); setContents(decodeURIComponent(escape(window.atob(result... 2023. 7. 10.
React Material - 파일 다운로드 경과 로딩 과정 보여주기 (Mui Loading Circular Progress with File Download) 리액트 전체 링크 참고 - 파일 브라우저에서 파일 다운로드하기 - 비동기 함수 로딩 중 보여주기 - 파일 다운로드 경과 확인하기 파일 다운로드 경과 확인하기에서 로그로 출력하였던 내용을 비동기 함수 로딩 바 보여주기에서 사용한 Modal과 Circular Progress에 적용해보자. percentage를 useState로 관리하는 코드를 추가하고, finally에 Modal을 닫도록 설정하면 된다. axios .get(`http://192.168.55.120:3002/downloadFile?filePath=${filePath}`, { responseType: "arraybuffer", onDownloadProgress: (event) => { const per = Math.round((event.loa.. 2023. 7. 9.
리액트 - 파일 다운로드 경과 확인하기 (Check File Download Process) 리액트 전체 링크 참고 - 파일 브라우저에서 파일 다운로드하기 - 파일 다운로드 경과 로딩 과정 보여주기 파일 다운로드가 얼마나 진행되었는지 확인해 보자. 먼저 Node Server에서 구현한 내용에 파일 사이즈를 헤더의 content-length에 추가한다. let stats = fs.statSync(req.query.filePath); let fileSize = stats.size; ... res.setHeader("content-length", fileSize); 전체 코드는 다음과 같다. //downloadFile.js const express = require("express"); const router = express.Router(); const fs = require("fs"); const.. 2023. 7. 9.
반응형

티스토리툴바