반응형 Next.Js4 [React] Drag & Drop 기능 구현하기 (react-beautiful-dnd example) 구현해야 하는 기능 중 드래그 & 드롭 기능이 필요해졌다. 관련 라이브러리를 여러가지 찾다보니 React-dnd에 애니메이션이 첨가된 React-beautiful-dnd라이브러리를 사용하게 됐다. 그래서 오늘은 간단하게 기능을 구현해보고 라이브러리를 체득해보자 설치 먼저 프로젝트에 설치부터 해보자. npm install react-beautiful-dnd 참고로 프로젝트는 React Next.js를 사용해서 구현해볼 것이다. react-beautiful-dnd를 사용하려면 두가지 설정을 필수로 해야한다. strictMode끄기 requestAnimationFrame실행 후 랜더링하기 프로젝트 루트에 next.config.js에서 strictMode를 아래와 같이 꺼주면 되며 /** @type {impor.. 2023. 9. 11. React,Next.JS에서 Table Element를 Excel파일로 다운로드하기 (feat. XLSX) 회사업무를 하다보니 엑셀파일과 연동하는 기능이 필요했다. 객체를 단순히 엑셀화하기보다 화면에 렌더링 된 table을 읽어 엑셀로 뽑을 수 있다면 좋겠다는 생각을 했다. 관련 라이브러리를 찾다보니 가장 많은 사용자를 가지고 있으며 자유도가 높은 SheetJS의 xlsx 라이브러리를 채택했다. 관련 문서는 https://www.npmjs.com/package/xlsx를 참고하여 진행했다. 1. 설치 "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgz" 설치법이 조금 다른것같다. 원래라면 npm install xlsx와 같은 명령어를 했겠지만 package.json에서 위 url을 dependencies에 넣고 npm install을 해준다. 다음으로는.. 2023. 8. 21. Library React Swiper 응용하기 (module, props...) 기본편 보러가기 Library React Swiper 슬라이드 가능한 컴포넌트 만들기 React Library 중 하나인 React Swiper를 사용해보고자 한다. 업무 중에 생각보다 많이 쓰이기에 한번 정리하고 넘어가야 할것 같다. 오늘은 기본적인 사용법과 문법에 대해 알아보자. 1. Package Install npm 3pdev.tistory.com 기본편에서 말했듯 React Swiper는 여러가지 모듈, props, style등을 활용해 자유도를 높였다. 먼저 모듈부터 살펴보자. Navigation 모듈은 슬라이더에 이전/다음 버튼을 추가한다. 클릭하면 슬라이더가 넘어간다. import SwiperCore, { Navigation } from 'swiper'; import 'swiper/css/.. 2023. 3. 29. Library React Swiper 슬라이드 가능한 컴포넌트 만들기 React Library 중 하나인 React Swiper를 사용해보고자 한다. 업무 중에 생각보다 많이 쓰이기에 한번 정리하고 넘어가야 할것 같다. 오늘은 기본적인 사용법과 문법에 대해 알아보자. 1. Package Install npm install swiper or yarn add swiper 2. 기본 문법 import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; import { IListItem } from 'src/common/view-model/list.view-model'; interface IProps{ list : IListItem[]; } /** * 스와이퍼 슬라이드 이미지 * @param props.list i.. 2023. 3. 27. 이전 1 다음 반응형
