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관련한 것도 설치해주면 크게 문제없이 사용가능! 사용법은 부트스트랩과 거의 유..

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..

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..

현재 프로젝트 진행중인데 메인페이지에 아무래도 심심해서 애니메이션 효과를 주고싶다. 근데 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..

장바구니 추가기능, 이런 기능을 구현하려면 결국 reducer수정방법에 다라 dispatch를 이용해 데이터를 다시 전송해야한다. dispatch로 전송하는법과 reducer안에서 받은 데이터를 payload로 사용하는법을 알아보자 redux에서 데이터를 수정할때의 3단계 1.데이터 수정하는법 만들기 2.dispatch하기 3.dispatch에서 데이터를 함께 실어 보내기 let 초기값= [{id : 0, name : '멋진신발', quan : 2}, {id : 1, name : '멋진신발2', quan : 3}, {id : 2, name : '멋진신발3', quan : 5}, ] function reducer(state = 초기값, 액션){ //es6 신문법, 기본파라미터 문법 데이터 초기값을 그냥 넣..

기본적으로, 리액트에서도 클래스네임을 사용해서 원래 사용하던방식으로 CSS스타일링을 할 수 있다. 하지만 리액트만의 편리함이나 방식도 기록하자 먼저 설치부터 리액트의 styled-conponents를 이용하기위해 yarn add styled-components npm install styled-components 둘중하나로 설치를하고 import styled from 'styled-components' 이와같이 상단에 불러온다. 사용하고싶은 컴포넌트 상단에 불러오면 된다. let 박스 = styled.div` padding:20px; ` let 제목 = styled.h4` font-size:25px; color:${props=>props.색상} ` 사용법은 이와같이 `` 를 사용하면되고 저 박스와 제목이..

리액트에서 input창을 만들고싶다, 그리고 입력하고싶다 간단하게 해보자. 이와같이만 해줘도 인풋창이 생긴다! 지금은 인풋창에다가 글자를 입력해서 맨위에 추가하는 기능을 만들고싶다. 두가지를 해야한다 input창에서 onChange이벤트를주고 button에서 onClick이벤트를 줘야한다. let [글발행,글발행변경] = useState(''); 이와같은형태로 let[a,b] =useState()를 사용해준다. 문자열 형태로 state를 사용해줘서 input 창에서 입력 event가 발생할때마다 a에 저장이된다. 그리고 최종적으로 버튼을 클릭하면 맨위에 변경함수를 다시 사용해 deepcopy를 이용해 배열을 복사후 unshift로 추가해서 새로 추가해주는 형식을 사용한다. {글발행} {글발행변경(e.ta..

- 변경 자주하는 내역들 props로 전달하기 컴포넌트안에 props두개 전달 당연히 가능 { modal === true ? // 작명 = {전송할state} 보통 똑같이 쓴다. : null } - map함수 사용하면 첫번째 매개변수말고 index도 가지고 있다. { 글제목.map(function(글, i){ return( {/* 반복문이 돌때 안에 0,1,2가 반복되게 적기 map의 두번째 파라미터*/} { 누른제목변경(i)}} > {글} {따봉바꾸기(i)}}>🥰좋아요! {따봉[i]} {/* 따봉 함수로만들어서 파라매터 여기있는 i 전달해줘서 바꾸면 되겟다 체크 딥카피로 ㅇㅇ 해보쟈 */} 1월 10일 발행 ) }) } - props한 외부 컴포넌트 문법에서 사용하기 function Modal(prop..