본문 바로가기
반응형

react205

React Material - Mui Tree View로 파일, 폴더 뷰 만들기 (Mui Directory Tree View) 리액트 전체 링크 참고 - mui tree view - glob으로 파일, 폴더 목록 찾기 - Mui Tree View로 파일, 폴더 뷰 만들기 - Mui Tree View로 파일, 폴더 뷰 만들기 (with Node JS) - Mui로 파일 브라우저 만들기 - 파일 브라우저 만들기 (with Node JS) - 파일 브라우저에서 파일 다운로드하기 mui tree view를 이용해 파일/폴더 뷰를 만들어보자. 먼저 @mui/lab을 설치한다. $ npm install @mui/lab mui tree view를 참고하면 가장 먼저 나오는 예시 코드는 다음과 같다. import React from "react"; import TreeView from "@mui/lab/TreeView"; import Expa.. 2023. 4. 28.
React Material - Mui Table 옵션 설정하기 (Customizing Material React Table) 리액트 전체 링크 참고 - 예제 확인 링크 - install - basic example - column options - Mui Table 세로 줄 변경하기 테이블을 사용하기 위해 npm으로 mui table을 설치하자. npm install material-react-table 가장 기본적인 예제로 만들어진 MaterialReactTable을 사용해보자. 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', .. 2023. 4. 12.
React Material - 아이콘으로 버튼 만들기 (Make Button with Icons) 리액트 전체 링크 참고 - 예제 확인 링크 - mui icons - mui react button 아이콘을 사용하기 위해 mui icons를 설치한다. npm install @mui/icons-material 예시로 휴지통 아이콘을 추가해보자. 휴지통 아이콘을 사용하기 위해서는 아래의 import 구문이 필요하다. import DeleteIcon from "@mui/icons-material/Delete"; 매번 이러한 import 구문을 외울 필요는 없다. material에서 사용 가능한 아이콘은 링크에서 검색할 수 있기 때문이다. 위에서 사용한 휴지통 아이콘(= delete)을 검색해보자. 해당 아이콘을 클릭하면 import 예시와 아이콘 설정에 대한 예시도 나오게 된다. 이제 화장실 아이콘을 imp.. 2023. 4. 8.
React Material - 버튼 색깔, 아웃라인 변경하기 (Change Mui Button Color on Hover) 리액트 전체 링크 참고 - 예제 확인 링크 - mui react button - mui react palette Material의 팔레트를 보면 기본 색상은 다음과 같다. 버튼의 종류(variant)는 크게 text, contained, outlined로 나뉜다. import React from "react"; import Stack from "@mui/material/Stack"; import Button from "@mui/material/Button"; const ButtonTest = () => { return ( Primary Secondary Error Warning Info Success Primary Secondary Error Warning Info Success Primary Secon.. 2023. 4. 7.
리액트 - WebGL로 빌드된 유니티 전체 화면으로 변경하기 (Entering Fullscreen Unity WebGL in React) 리액트 전체 링크 Unity 전체 링크 참고 - 리액트에서 Unity 오브젝트 컨트롤하기 - Unity에서 리액트로 이벤트 호출하기 Unity에서 리액트로 이벤트 호출하기에서 코드를 추가 전체 화면이 되도록 하는 코드를 추가하자. useUnityContext에서 requestFullscreen을 추가한다. const { unityProvider, sendMessage, // unity 함수를 호출하기 위한 sendMessage 추가 addEventListener, // unity -> react 통신 removeEventListener, // unity -> react 통신 requestFullscreen, // 전체 화면 UNSAFE__detachAndUnloadImmediate: detachAndUn.. 2023. 3. 25.
유니티 - Unity에서 리액트로 이벤트 호출하기 (Communication from Unity to React) Unity 전체 링크 리액트 전체 링크 참고 - 유니티 WebGL + React 라우터 적용하기 - 리액트에서 Unity 오브젝트 컨트롤하기 - https://react-unity-webgl.dev/docs/api/event-system 리액트에서 Unity 함수를 호출하였으므로, 반대로 Unity에서 React의 state를 변경해보자. 유니티 구현 OnMouseOver를 추가하여 왼쪽으로 클릭하면 속도가 빨라지게, 오른쪽으로 클릭하면 느려지게 구현한다. private void OnMouseOver() { if(Input.GetMouseButtonDown(0)) { Debug.Log("Left, Speed Up"); unitySpeedUp(5.0f); return; } if (Input.GetMouse.. 2023. 3. 25.
유니티 - 리액트에서 Unity 오브젝트 컨트롤하기 (Communication from React to Unity) Unity 전체 링크 리액트 전체 링크 참고 - 유니티 WebGL + React 라우터 적용하기 - Unity에서 리액트로 이벤트 호출하기 - https://react-unity-webgl.dev/docs/api/send-message 유니티 WebGL을 React에서 빌드하였다면, 이제 리액트에서 유니티의 오브젝트를 움직여보자. 먼저 큐브에 있는 스크립트는 아래와 같이 수정한다. 천천히 회전하고 있는 큐브를 리액트에서 멈추거나 다시 움직이게 할 예정이다. using System.Collections; using System.Collections.Generic; using UnityEngine; public class Test : MonoBehaviour { bool rotating = true; flo.. 2023. 3. 23.
깃허브 데스크탑 - 유니티 WebGL + React 라우터 적용하기 깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기) Git / GitHub 전체 링크Unity 전체 링크리액트 전체 링크 참고 - gh-pages로 HTML 배포하기- gh-pages로 유니티 WebGL 배포하기- gh-pages로 리액트 프로젝트 배포하기- 유니티 WebGL을 React에 배포하기- gh-pages로 배포된 프로젝트에 리액트 라우터 적용하기 리액트에 배포한 유니티 WebGL에 리액트 라우터를 적용해보자. 코드를 아래와 같이 수정한다. index.jsimport React from 'react';import ReactDOM from 'react-dom/client';import './index.css';import App from './App';import report.. 2023. 3. 22.
깃허브 데스크탑 - 404 에러를 수정한 Broswer Router로 gh-pages 배포하기 깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기) Git / GitHub 전체 링크리액트 전체 링크 참고- 리액트 프로젝트 추가하기 (new repository)- gh-pages로 리액트 프로젝트 배포하기- gh-pages로 배포된 프로젝트에 리액트 라우터 적용하기- Hash Router로 gh-pages 배포하기- 404 에러를 수정한 Browser Router로 gh-pages 배포하기- Github Desktop에서 리액트 프로젝트 받아오기 Browser Router의 새로고침 문제를 Hash Router로 해결하였지만, URL에 #이 생겨서 보기 싫을 수 있다. gh-pages가 Hash Router를 권고하지만 URL에 #이 있는 것이 싫다면, 404 에러를 처리해주면 된.. 2023. 3. 22.
반응형

티스토리툴바