본문 바로가기
반응형

React44

리액트 라이어게임 구현한 첫번째, 그리고 두번째 화면은 다음과 같다. 1.라우터를 사용해 다른 페이지로 자료를 props로 전달해 만든방식 2.한페이지내에서 modal로 동작하는방식 2가지를 만들었다. 영상채팅방에서 부가기능으로 쓰려고 로직만 짜려고 만들다가 설명을위해 아예 만들어버리는게 편할거 같아서 만들었는데 추후 어디 이식해서 사용하기 좋을거같다. 물론 급하게 대충만들어서 useState도 막 짜놓긴했지만 필요할때 가져다 사용하면 좋을거같다. - 배열랜덤셔플 - 타이머함수 두가지를 다른곳에서 가져와서 사용했기에 그역시도 나중에 참고하면 좋을듯한 로직이다! https://github.com/flykimjiwon/react-Liargame 2022. 2. 10.
MUI 사용법, 세팅 (내가보는쿡북) https://mui.com/getting-started/installation/ Installation - MUI Install MUI, the world's most popular React UI framework. mui.com https://mui.com/styles/basics/ @mui/styles - MUI The legacy styling solution of MUI. mui.com 맨위에 2개는 MUI관련 세팅 페이지들이다. 1)npm이나 yarn으로 우선 리액트 프로젝트내에 설치해준다. 2)index.html 에 CDN넣어준다. 3)그리고 style관련해서 문제가 생기거나 필요해지면 위에 2번재링크의 style관련한 것도 설치해주면 크게 문제없이 사용가능! 사용법은 부트스트랩과 거의 유.. 2022. 2. 4.
openVidu React-demo https://docs.openvidu.io/en/stable/demos/openvidu-call-react/ openvidu-call-react - OpenVidu Docs From here you can search these documents. Enter your search terms below. docs.openvidu.io 들어가자마자 화상방 + 채팅이있는 구성으로 되어있다. 지금 프로젝트 진행하는데 딱 필요한 구성! 위페이지들어가면 1~5까지 순서가 나오는데 해보니까 2번의 sudo코드는 안먹히고..? 윈도우에서는 관리자권한으로 실행하거나 다른 방법이 있는거같은데 여튼 3번부터 진행해도 충분했고 잘 진행되었다. (노드와 도커는 깔려있는 상태) 이와같이 2개의 터미널을 띄워야하고 접속은 300.. 2022. 2. 4.
openvidu React-tutorial https://docs.openvidu.io/en/stable/tutorials/openvidu-insecure-react/ openvidu-insecure-react - OpenVidu Docs From here you can search these documents. Enter your search terms below. docs.openvidu.io 위와같이 클라이언트 사이드에서 작동하는 React화된 Openvidu 튜토리얼을 해봤다. 프로젝트중이라 어딜 수정해서 커스텀해야할지 봐야하기 때문 튜토리얼 링크에보면 1) Clone the repo: git clone https://github.com/OpenVidu/openvidu-tutorials.git -b v2.20.0 2) You will ne.. 2022. 2. 4.
npm start,yarn start 오류 (React proxy관련) Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. options.allowedHosts[0] should be a non-empty string https://stackoverflow.com/questions/70374005/invalid-options-object-dev-server-has-been-initialized-using-an-options-object Invalid options object. Dev Server has been initialized using an options object that does not match the A.. 2022. 2. 3.
React 내가 다시 볼 쿡북 React 내가 다시볼 쿡북 기본설치 node.js설치 -https://nodejs.org/ko/ vscode설치 -https://code.visualstudio.com/ yarn설치 -https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable `npm install --global yarn` `yarn --version` 1.프로젝트생성 `npx create-react-app 프로젝트명` 2.프로젝트실행 `npm start` `yarn start` 3.터미널에 뜨는 warning 없애기 `*/\* eslint-disable \*/*` 상단에 넣어주기 4.useState사용 `import {useState} from 'react'` let [a,b.. 2022. 1. 18.
반응형

티스토리툴바