Frontend/React

loop : 자동 순환되게 설정을 했는데 처음 페이지 진입하면 마지막 페이지 부터 보여줌 구글 검색해 봤는데... 약간 Swiper 에러 같음 가뜩이나 pagination을 fraction타입으로 설정해놔서 3/3 -> 1/3 이런식으로 작동한다. initialSlide={1} 이라고 선언하니까 정상작동함 api 문서 설명에는 Index number of initial slide. 이렇게 작성되어있어서 0이라고 작성했는데 작동을 안함 알고보니 마지막 페이지가 swiper-duplicate? 라고 class가 주어져있고 젤 상단에 있어서 그랬던 것이였음 그래서 그 바로 뒤 index인 1을 주니까 1페이지부터 잘보여줬다.

공식문서에 보면 get started 에서 css import하는 방식을 // import Swiper and modules styles import 'swiper/css'; import 'swiper/css/navigation'; import 'swiper/css/pagination'; 위와 같이 작성하면 된다고 적혀있는데 이상하게 위와 같이 import하면 안된다? 이유는 나도 모르겠다... 해결방법은 import "swiper/swiper-bundle.css"; 이렇게 import하면 잘된다!! 공식문서 get started https://swiperjs.com/get-started Getting Started With Swiper Swiper is the most modern free mobile..

* 참고 문서 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..