본문 바로가기
반응형

개발/React176

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.
리액트 - 줄 번호가 있는 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.
리액트 - POST 방식으로 서버에 폼 데이터 전송하기 (Send Form Data to Server with POST) 리액트 전체 링크 참고 - POST로 데이터 전송 받기 (with Node JS) 리액트에서 id와 password를 입력해서 포스트 방식으로 Node JS에 데이터를 보내보자. 입력할 input id와 passworld 2개, 그리고 제출을 위한 input을 만든다. method에서 post 방식을 지정하고, action에서 데이터를 전송할 서버 URL을 넣는다. (로컬 Node Server IP) 제출 버튼을 누르면 그대로 서버에 전송된다. 위의 HTML 태그를 js 코드로 작성하면 아래와 같다. 동적으로 form을 만들고 submit하면 다시 제거하는 방식을 사용하면, 리액트 상에서 form을 감출 수 있다. const submit = () => { const form = document.creat.. 2023. 6. 19.
React Material - Mui Tree View 더블 클릭으로 펼치기 (Expanded Tree View with Double Click) 리액트 전체 링크 참고 - 유니티 더블 클릭 구현하기 - withStyles로 TreeView css 커스터마이징 하기 트리 뷰에서 폴더를 클릭해서 파일 브라우저를 갱신했을 때, 트리 뷰가 접히거나 펼쳐지기 때문에 조금 정신이 없어보인다. 따라서 화살표는 클릭을 할 때, 라벨은 더블 클릭을 할 때만 트리 뷰가 펼쳐지거나 접히도록 해보자. 아쉽게도 TreeView에 onDoubleClick을 추가하더라도, onNodeToggle이 먼저 발생하기 때문에 이 시점에서 이미 트리 뷰가 펼쳐지게 된다. 따라서 onNodeToggle에 유니티 더블 클릭처럼 타이머를 추가하여 더블 클릭 효과를 구현한다. withStyles로 라벨 구분하기 라벨을 구분하기 쉽게 withStyles로 TreeItem을 아래와 같이 커스.. 2023. 6. 19.
반응형

티스토리툴바