본문 바로가기

frontend3

[Swiper] 라이브러리 포커스이동 swiper 라이브러리를 사용해서 팝업이미지들이 자동으로 재생되고 있음 키보드 tab을 눌렀을때 a링크에 포커스가 잡히면 해당 이미지가 화면에 나오도록 라이브러리와 스크립트 이용하기 . var timer = 4000; //4000 var mainSwiper = new Swiper( "#popupList", { slidesPerView: 1, autoplay: { delay: timer, disableOnInteraction: true, }, loop: true, allowTouchMove : true, effect: 'fade', fadeEffect: { crossFade: true, }, pagination: { el: ".swiper-pagination", loop: true, clickable: t.. 2023. 11. 17.
[React] Router 를 이용한 페이지 이동 npx create-react-app react-router0611 터미널 열어서 다운로드 해주기 npm install react-router-dom 다운로드 완료되면 package.json 에서 확인해야됨. App.js 클래스형 컴포넌트로 변경 import { Component } from 'react'; import './App.css'; class App extends Component{ constructor(props){ super(props) this.state ={ } } render(){ return( ) } } export default App; 2. 라우터 돔 임포트하고 주소 지정해주기 Home = / Profile = /profile import { Component } from 're.. 2023. 6. 11.
[React] map 메서드 map메서드를 이용한 컴포넌트 반복생성 map 메서드를 사용하기 전에는 화면에 띄울 데이터를 다 적어야 했음. render(){ return( ) } map() 메서드를 이용하면 하나의 코드로 몇번이고 화면에 자동으로 출력할 수 있음 . render(){ const result = this.state.personList.map( (data) => () ) return( {result} ) } 화면 출력해보면 위와 같은 결과를 볼 수 있음. **personList JSON배열 class App extends Component{ constructor(props){ super(props) this.state={ personList:[ //길이가 3인 JSON배열 {profile:lee, name:'이민호',a.. 2023. 5. 21.
728x90

티스토리툴바