React/React Components5 반응형 웹 디자인: Swiper를 이용한 슬라이드 개수 조정하기 https://swiperjs.com/react Swiper React Components Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 기종마다 다양한 뷰포트를 가지고 있기때문에, 조금 더 나은 반응형 웹 디자인을 위해 Swiper를 이용해서 이미지를 랜더링 시키는 경우, slidesPerview옵션을 이용하여 한 화면에 몇개의 Slide를 보여줄 건지 지정할 수 있습니다. 이번에는 slidesPerview를 적절히 사용할 수 있는 방법에 대해 설명합니다. 기본적인 React-swiper 구조 // Import Swi.. 2023. 5. 30. React-pdf로 pdf viewer 만들기 React로 PDF 뷰어를 만들기위한 라이브러리 중 react-pdf 를 사용하여 웹에서 pdf viewer를 만들어보았습니다. https://www.npmjs.com/package/react-pdf react-pdf Display PDFs in your React app as easily as if they were images.. Latest version: 7.0.1, last published: 4 days ago. Start using react-pdf in your project by running `npm i react-pdf`. There are 606 other projects in the npm registry using react-pdf. www.npmjs.com 이 라이브러리는 웹에.. 2023. 5. 29. React에서 약관 동의를 위한 체크박스 만들기: 단계별 가이드 회원가입에 필요한 이용약관 동의같은 체크박스 그룹의 상태 관리 방법에 대해서 글을 다뤄보려고 합니다. 먼저, 고려해야할 부분은 1. 이용약관 전체동의 시 체크박스 모두 선택될 것 2. 체크박스가 전체 체크 되었을때 - 전체 동의를 다시 눌렀을때 체크 박스 모두 해제 - 체크박스가 한 개 이상 해제 되었을때 전체동의 체크박스 해제 3. 하위 체크 박스를 하나씩 선택해서 전체 체크되었을때 전체동의 체크박스에 체크 로 크게 3가지 케이스로 나눌 수 있습니다. 상태 초기화 const [allAgreed, setAllAgreed] = useState(false); const [agreements, setAgreements] = useState({ termsAgreed: false, personalInfoAgree.. 2023. 5. 16. react-select로 국가코드 선택 selectBox 만들기 Select 컴포넌트를 불러와 사용합니다. Select는 React-Select 라이브러리에서 제공하는 컴포넌트로, 셀렉트 박스를 사용할 때 편리하게 사용할 수 있도록 구현된 컴포넌트입니다. https://react-select.com/homeReact-SelectA flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete and ajax support.jedwatson.github.io react-select 구현 방법1. react-select 설치npm i --save react-select 또는 yarn add react-select 2. 사용할 컴포넌트에 import하기import Select fr.. 2023. 5. 15. 이전 1 2 다음 LIST
