본문 바로가기

분류 전체보기

 (265)
[React] react-scroll 라이브러리를 이용한 클릭시 스크롤 이동 구현 https://www.npmjs.com/package/react-scroll react-scroll A scroll component for React.js. Latest version: 1.8.9, last published: 4 months ago. Start using react-scroll in your project by running `npm i react-scroll`. There are 640 other projects in the npm registry using react-scroll. www.npmjs.com 설치하기 (Reat+TS 를 이용해 구현 중이라 둘 다 설치하였다.) npm i react-scroll //React npm i @types/react-scroll //TypeS..
[React] Top Button 만들기 (클릭시 최상단으로 이동) 클릭시 화면의 최상단으로 이동하는 코드이다. behavior = auto , smooth behavior는 두가지로 나뉘는데 auto = 위치로 바로 데려다 주고 smooth는 부드럽게 끌어올린다. export default function TopBtn() { const handleClick = () => { window.scrollTo({ top: 0, behavior: 'smooth', }); }; return ( ); } https://velog.io/@jahommer/React-Top%EB%B2%84%ED%8A%BC-scroll-to-top%EB%A7%8C%EB%93%A4%EA%B8%B0 React - Top버튼 (scroll to top)만들기 탑 버튼을 만들기 전에 구글링으로 검색하여 여러 방..
[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
[JavaScript] 입력한 숫자에 따라 배열을 생성하는 함수 만들기 React 코드를 작성 중, 배열을 [1,2,3] 처럼 먼저 만들어 놓고 map을 돌리는 것은 비효율적이라고 생각이 되었다. 14개를 만들때 하나하나 다 입력하고, 나중에 숫자가 더 커진다면 ?😵 그래서 처음 빈 배열을 담은 변수를 생성한 후, 입력한 숫자에 따라 배열을 만들어 내도록 하였다. 아래 코드에서 arrayLists 에 14를 매개변수를 넣는다면 입력한 숫자만큼 배열이 생겨난다. let arr = []; const arrayLists = (n) => { for (var i = 0; i < n; i++) { arr.push(...[i]); } console.log(arr); }; //매개변수 숫자만큼 배열 생성 arrayLists(14); ▼ 콘솔창 출력화면 그리고 arr.map 을 통해 반복되..
[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) 공식문서에서 찾아..
[Javascript] 객체(object)의 키(key)와 값(value)을 배열로 얻기 http://www.gisdeveloper.co.kr/?p=11005 Javascript 객체(object)의 키(key)와 값(value)을 배열로 얻기 – GIS Developer 만약 다음과 같은 자바스크립트 객체가 있다고 할 때.. const obj = { a: 'Dip2K', b: 30, c: true, d: {} }; obj 객체를 구성하는 전체 키를 배열로 얻는 코드는 다음과 같습니다. console.log(Object.keys(obj)); // Array www.gisdeveloper.co.kr 만약 다음과 같은 자바스크립트 객체가 있다고 할 때 const obj = { a: 'Dip2K', b: 30, c: true, d: {} }; obj 객체를 구성하는 전체 키를 배열로 얻는 코드는 ..
[Javascript] 심볼(Symbol) (feat. 객체 key) javascript 심볼(Symbol) https://jsdevlog.tistory.com/entry/javascript-%EC%8B%AC%EB%B3%BCSymbol-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0 javascript 심볼(Symbol) 알아보기 ES6에서 새로 추가된 자료형인 심볼(symbol) 타입은 Symbol() 함수를 통해 할당받을 수 있습니다. new Symbol()을 통한 호출은 TypeError가 발생합니다. Symbol()로부터 반환되는 모든 값을 고유하며, 객체 프 jsdevlog.tistory.com ES6에서 새로 추가된 자료형인 심볼(symbol) 타입은 Symbol() 함수를 통해 할당받을 수 있습니다. new Symbol()을 통한 호출은 Ty..

티스토리툴바