본문 바로가기
반응형

react205

리액트 - 파일 다운로드 경과 확인하기 (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.
React Material - 비동기 함수 로딩 중 보여주기 (Mui Loading CircularProgress with Async Function) 리액트 전체 링크 참고 - 파일 브라우저에서 파일 다운로드하기 - 파일 다운로드 경과 확인하기 - 파일 다운로드 경과 로딩 과정 보여주기 3초 뒤에 끝나는 비동기 함수가 있다. 이 함수가 시작되고 끝나기까지 로딩 중이라는 표시를 만들어보자. function asyncFunction() { return new Promise(function (resolve, reject) { setTimeout(function () { resolve(); }, 3000); }); } 먼저 Mui의 모달을 추가한다. import React, { useState } from "react"; import Box from "@mui/material/Box"; import Button from "@mui/material/Button.. 2023. 7. 9.
리액트 - 키보드 이벤트를 감지하여 복사 방지하기 (Detect Copy Keyboard Event) 리액트 전체 링크 키보드 입력을 감지해서 특정 이벤트를 방지해보자. 키보드를 누르면 다음 함수가 호출되도록 한다. const keyDown = (event) => { const code = event.keyCode; let charCode = String.fromCharCode(code).toUpperCase(); if (event.ctrlKey && charCode === "C") { event.preventDefault(); alert("복사 금지!!"); } }; event의 keyCode에는 키보드에 해당하는 아스키 코드 숫자가 들어간다. 예를 들어 C 키를 누르게 되면 67이 리턴된다. String의 fromCharCode 메서드를 이용하면 아스키 코드에 해당하는 숫자를 문자로 변경한다. 참고로.. 2023. 7. 6.
리액트 CSS - pre 태그로 입력한 그대로 보여주기 리액트 전체 링크 참고 - ㄱ 한자 1 특수 문자로 공백 추가하여 띄어쓰기 아래와 같이 content를 div 태그에 넣어보자. 입력한 대로 출력되지 않는다. import React from "react"; import "./App.css"; const content = `int sum = 0; for(int i = 0; i { return {content}; }; export default App; pre 태그를 이용하면 입력한대로 보여주는 것이 가능하다. import React from "react"; import "./App.css"; const content = `int sum = 0; for(in.. 2023. 6. 28.
리액트 CSS - styled-components로 타이핑 효과 만들기 (Make Simple Typing Effect with styled-components) 리액트 전체 링크 참고 - https://styled-components.com/ - styled-components로 타이핑 효과 만들기 - module.css로 CSS 스타일 관리하기 - classnames로 CSS 스타일 조건부 렌더링하기 아래 링크를 참고하여 타이핑 애니메이션 효과를 그대로 리액트에 재현해보자. https://dabblet.com/gist/b04ab9f41084b0a66960 코드는 다음과 같다. App.js import React from "react"; import "./App.css"; const App = () => { return ( Blood StrawBerry ); }; export default App; App.css @keyframes typing { from { .. 2023. 6. 27.
리액트 - SweetAlert2로 모달, 팝업 만들기 리액트 전체 링크 참고 - https://sweetalert2.github.io/ SweetAlert를 이용하면 간단하게 모달과 팝업을 이용할 수 있다. npm install sweetalert2 --legacy-peer-deps 예제는 다음과 같다. import React from "react"; import Button from "@mui/material/Button"; import Swal from "sweetalert2"; const App = () => { return ( Swal.fire("Good job!", "You clicked the button!", "success") } > Basic { Swal.fire("The Internet?", "That thing is still aroun.. 2023. 6. 26.
리액트 - 깃허브 RESTful API로 파일 편집기 만들기 (Simple GitHub Code Management with React) 깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기) 리액트 전체 링크Git / GitHub 전체 링크 참고- RESTful API로 파일의 SHA 구하기- RESTful API로 파일 읽기- RESTful API로 파일 쓰기- 깃허브 RESTful API 한글 깨짐 현상 해결하기- Toast UI 에디터로 깃허브 마크다운 저장하기- https://mui.com/material-ui/react-text-field/- https://mui.com/joy-ui/react-textarea/ 리액트로 깃허브의 파일을 불러와서 수정하고 저장해보자.즉, 파일 형상 관리가 되도록 React에서 GitHub RESTful API를 적용시켜보자.Simple UI with Mui Mui로 간단하게 아래의.. 2023. 6. 23.
유니티 AR - 이미지 타겟팅 : 책을 누르면 구매 URL로 이동하기 (Touch a Book to Move to URL with Image Targeting in Vuforia) Unity 전체 링크 참고 - 유니티 AR 뷰포리아 튜토리얼 - 유니티 프로젝트에 뷰포리아 라이센스 키 적용하기 - 이미지 타겟팅으로 오브젝트 띄우기 From DataBase - 이미지 타겟에 버추얼 버튼 추가하기 이미지 타겟팅과 Virtual Button을 이용해 책을 누르면 구매할 수 있는 URL로 이동하도록 해보자. 링크를 참고하여 Database를 추가한다. 버추얼 버튼은 Type이 From Database인 경우만 가능하다. Add Virtual Button을 클릭해 버튼을 추가하자. 그리고 이름을 적당히 짓고, Sensitivity는 LOW로 설정한다. 버튼의 크기를 책과 비슷하게 만든다. URL로 이동하기 위해서는 Application의 OpenURL 메서드를 사용하면 된다. Applicat.. 2023. 6. 21.
리액트 - 줄 번호가 있는 Text Area 예제 (Add Line Numbers to HTML) 리액트 전체 링크 아래와 같이 텍스트 공간에 줄 번호를 추가해보자. 아래 링크의 코드를 리액트로 나타내기만 하였다. https://webtips.dev/add-line-numbers-to-html-textarea How to Quickly Add Line Numbers to HTML Textarea Learn how you can easily add line numbers to any HTML textarea using 10 lines of JavaScript code, a couple of DOM elements and some CSS. webtips.dev TextAreaWithLineNumber.css .editor { display: inline-flex; gap: 10px; font-family.. 2023. 6. 21.
반응형

티스토리툴바