예방이의 개발일기

* 참고 문서 https://swiperjs.com/swiper-api#autoplay Swiper API Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com Autoplay를 모듈에 작성해준다. - disableOnInteraction -> 내가 만약 임의로 페이지를 넘겼을 때 (기본값이 true) true : 자동 재생이 멈춤 (재생버튼이 있으면 재생버튼을 눌러줘야지 다시 autoplay가 된다) false : 내가 임의로 넘긴 페이지부터 자동재생이 계속된다. 자동 재생 버튼 컴포넌트 만들기 아래 stackoverflow..

리액트에서 Swiper 모듈 사용하기 * 일단 Swiper를 npm install 했다는 전제하에 1. swiper를 import 해준다. import React, { useRef, useState } from 'react'; import { Swiper, SwiperSlide } from 'swiper/react'; import SwiperCore, { Autoplay, FreeMode, Pagination, Navigation, A11y, } from 'swiper'; 2. swiper 컴포넌트 사용하기 swiper props로 공식문서를 확인하면서 필요한 것을 추가하면된다. https://swiperjs.com/swiper-api Swiper API Swiper is the most modern f..

import React, { useState } from 'react'; function ProductItem({ name, rank, onClick }) { const isSelected = rank > 0; const remainingCount = 3 - rank; const countText = isSelected ? `(${rank}/3)` : ``; const buttonLabel = isSelected ? '취소' : '상품 비교'; return ( {name} {countText} {buttonLabel} {!isSelected && remainingCount === 0 && ( 3개 이상 선택할 수 없습니다. )} ); } export function App(props) { const [r..

리액트를 웹사이트에서 연습해보자 This is a static template, there is no bundler or bundling involved! JSX를 사용하기 위해서 // 바벨을 추가해주고 // 타입을 지정해줘야한다!!

리액트 시작하기 1. 코드 플레이그라운드 사용하기 CodeSandbox: Online Code Editor and IDE for Rapid Web Development Optimized for frameworks Custom environments built specifically for React, Vue, Angular, and many more. codesandbox.io CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io..

참고하면 좋은 사이트 1. 리액트 공식 사이트 https://ko.reactjs.org/docs/getting-started.html 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 주요개념 탭안에 내용 참고하면 좋음 2. CRA 공식 사이트 https://create-react-app.dev/ Create React App Set up a modern web app by running one command. create-react-app.dev 3. 리액트 1도 모르는 사람을 위한 튜토리얼 https://velopert.com/3613 누구든지 하는 리액트: 초심자를 위한 리액트 핵심 강좌 | VELOPERT.L..