본문 바로가기

React

 (115)
[React] Youtube 영상 넣기 Youtube 사이트 영상을 넣고 싶을 때는 해당 영상의 공유버튼을 클릭하면 아래 사진의 퍼가기가 나온다. 퍼가기를 클릭. 그럼 아래와 같이 iframe태그가 나오는데 이를 이용하면 된다. 예전에는 embed태그를 사용하였지만 현재는 iframe태그를 사용한 영상 추가 방법이 사용된다. embed는 소스를 자체적으로 불러와서 재생시키는 태그로, 해당 페이지에서 직접 플레이를 하게 되지만, iframe은 설정한 크기의 공간을 만들어 놓고, 그 안에 다른 사이트나 다른 페이지의 소스를 불러와서 보여주는 역할만 하는 것이다. iframe에 사용할 attribute 정보 src : YouTube 주소 frameborder : YouTube를 표시할 때 외곽선 값 allowfullscreen : 전체화면을 허용할..
[React] map 배열 중 일부분만 만들기 React 를 이용하여 map을 돌린 컴포넌트를 만들 던 중, 사용하는 파일에서 부모요소를 구분하기 위해 배열 중 일부분만 map을 돌리고 싶었다. 따라서 인덱스인 idx를 받아와서 조건문을 만들었다. 해당 인덱스에 해당할 경우 생성된다. Props로 해당 조건문의 최소 숫자와 최대 숫자를 받아올 수 있도록 설정했다. export default function HistoryItem({ minNum, maxNum }) { .. const { arr } = useArray(9); return ( {arr.map( (item, idx) => minNum
[React] Swiper Tab 클릭 시 슬라이드 처음으로 이동하기 [React, TypeScript] Swiper를 이용하여 이미지 슬라이더를 구현하였다. map 을 사용하여 반복되는 코드를 축약하였고, Tab 을 클릭하면 useState를 통해 값이 바뀌며 해당 이미지 슬라이더들이 바뀌도록 하였다. 그러던 중 Tab을 클릭시 그 전 Tab의 위치에서 이미지슬라이더의 이미지만 바뀌는 오류를 발견하였다. Tab을 클릭했을 때 이미지 슬라이더를 다시 처음 슬라이더로 세팅하고 싶었다. Swiper 에 있는 API를 활용하여 이를 해결할 수 있었다. 해결 방법은 다음과 같다. 1. import import SwiperCore from 'swiper'; 2. Swiper 라이브러리의 컴포넌트에 onSwiper props에 해당 함수를 넣는다.(setState) 공식문서에서 찾아..
[블록체인] 메타마스크 MetaMask 시작하기(로그인) https://docs.metamask.io/guide/getting-started.html#basic-considerations Getting Started | MetaMask Docs Getting Started To develop for MetaMask, install MetaMask in the browser of your choice on your development machine. Download here (opens new window). A quick note... This guide assumes intermediate knowledge of HTML, CSS, and JavaScript. Once MetaMask is docs.metamask.io Kaikas 가 MetaMask 를 ..
[블록체인] 메타마스크 MetaMask 설치 하기 (계정 생성): PC 크롬 https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?hl=ko MetaMask 브라우저의 이더리움 지갑 chrome.google.com 크롬 확장프로그램 위 사이트에서 설치하고 계정없을시 계정 생성하면 된다.
[블록체인] 클레이튼 지갑 KaiKas 시작하기(로그인) Caver js https://docs.kaikas.io/02_api_reference/02_caver_methods Caver Methods - Kaikas Docs Unlike caver.klay.sendTransaction, this does not send transaction to blockchain. Instead it returns RLP encoded signed transaction. This is useful for transactions that require multiple signatures(eg. fee delegated tx) where you have to get the signed raw docs.kaikas.io caver-js는 개발자가 Klaytn 노드와 상호 작용할 ..
[블록체인] 클레이튼 지갑 KaiKas 설치 하기 (계정 생성): PC 크롬 https://www.cryptocoin.kr/entry/%ED%81%B4%EB%A0%88%EC%9D%B4%ED%8A%BC-%EC%A7%80%EA%B0%91-KaiKas-%EC%84%A4%EC%B9%98-%ED%95%98%EA%B8%B0-PC-%ED%81%AC%EB%A1%AC 클레이튼 지갑 KaiKas 설치 하기 : PC 크롬 비트코인에서 부터 시작 하면, 초기의 코인 지갑은 PC설치형 이었습니다. PC에서 클라이언트를 설치 하면 코인주소가 생성되고, 해당 주소로 거래를 시작 할 수 있었죠. 그래서, 종이로 만든 지갑 www.cryptocoin.kr 위 블로그 내용) 비트코인에서 부터 시작 하면, 초기의 코인 지갑은 PC설치형 이었습니다. PC에서 클라이언트를 설치 하면 코인주소가 생성되고, 해당 주소로..
[React] MUI Drawer onMouseEnter 무이 마우스 올렸을 때 setState MUI Drawer 를 사용 중, Left 왼쪽 메뉴에 고정되어있는 것을 hover시에도 적용시키고 싶을 때 state를 이용하고 싶었다. onClick만 있는 줄 알았는데 onMouseEnter, onMouseLeave 도 적용할 수 있었다. (mui에서 hover 로 검색해서 나옴) 아래와 같은 형식 onMouseEnter={() => { onOpen(); isOnButton.current = true; }} onMouseLeave={() => { isOnButton.current = false; }} https://mui.com/joy-ui/react-menu/ React Menu component - Joy UI Menus display a list of choices on temporary su..

티스토리툴바