본문 바로가기
반응형

React17

React Css애니메이션(keyframe,건배효과,짠효과) https://flykimjiwon.tistory.com/74 좌우 흔들리는 건배효과 (cheers!) 이 그림을 사용해서 좌우로 흔들리는 건배효과를 만들고싶었다. 채팅창에서 버튼을클릭하면 모든 사용자에게 보여주고 싶었기 때문! 우선 작업을 하는건 둘째치고 기본적인 베이스에서 저그림 flykimjiwon.tistory.com 위와같이 버튼을누르면 모든창에서 짠효과가 발동하게, 건배효과가 발동하게 만들었다. 기본은 html,css 베이스로만들었고 그걸 리액트에 적용시켰다. Cheers.css .ch{ position: relative; animation-name: example; animation-duration: 1s; animation-iteration-count: infinite; /* 이거무제한키워.. 2022. 2. 14.
React Mui 버튼,링크 밑줄없애기 https://stackoverflow.com/questions/37669391/how-to-get-rid-of-underline-for-link-component-of-react-router How to get rid of underline for Link component of React Router? I have the following: How do I get rid of the blue underline? The code is below: Team 1 2022. 2. 11.
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.
AOS(Animate On Scroll Library) 스크롤 애니메이션 효과 라이브러리 현재 프로젝트 진행중인데 메인페이지에 아무래도 심심해서 애니메이션 효과를 주고싶다. 근데 CSS공부하기엔? 아니 공부는 이미했지만 하나하나 세세하게 효과를 주기엔 너무 시간이 없어서 급한대로 찾아보니 편하게 애니메이션 효과를 줄 수 있는 라이브러리가 있었다. 쉽게 설치해서 사용할 수 있게 라이브러리화 되어있어 기록해본다. https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io 여기 들어오면 사용법도 매우쉽게 되어있다. yarn add aos npm install aos --save 둘중하나 골라서 설치해주고 download받아서 d.. 2022. 1. 24.
반응형