개발공부 임고미

결론 : //X const CustomButtom = styled(CommonButton) ``; //O const CustomButtom = styled(props => ) ``; 평소에는 위와 같은 방식으로 하면 잘 작동되는데 안되는경우가 잇다. CustomButton이 CommonButton보다 먼저 생성되는경우이다. 위의 경우에는 styled components component cannot create styled-component for component: undefined. 라는 문구가 뜬다. 이때 위와 같은 방법으로 props을 받았을떄로 컴포넌트를 생성해주면 위의 에러를 맞이하지 않고 잘 해결할 수 있다.

loopedSlides: 1 을 넣어주면 된다 var swiper = new Swiper('.swiper-container', { speed: 300, spaceBetween: 50, width:300, loop:true, loopedSlides: 1, pagination:{ el:".swiper-scrollbar", }, }) }); 다른 해법 github.com/nolimits4web/swiper/issues/2629 In loop mode, duplicate slides are not being updated when the contents of the original slides change · Issue #2629 · nolimits4 This is a (multiple allowed): bug..

스와이퍼 페이지네이션을 커스텀해서 슬라이드를 이동시키려 했으나, 내가 클릭한것이 아닌 다른 페이지가 active가 되는 현상을 발견했다. 해결 : touchEventsTarget: 'wrapper' 이거 한줄 추가해주면 말끔히 해결된다! var swiper = new Swiper('.swiper-container', { // loop:true, // autoHeight: true, effect: 'fade', touchEventsTarget: 'wrapper', pagination: true, hashNavigation: { replaceState: true, watchState: true }, pagination: { el: '.swiper-pagination', clickable: true, rend..

1. wrapper 사이즈 : 100%; 2. ifram 사이즈 : 100%; document 사이즈 기준 100% 가 되므로, 특정 사이즈를 기준으로 맞추고 싶다면 한번 더 감싸주어야 합니다. import React, { useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; import styled from 'styled-components'; import Button from '../components/Button'; import ReactPlayer from 'react-player'; // import { library } from '@fortawesome/fontawesome-svg-core' // impor..

공식 사이트 : michalsnik.github.io/aos/ github : github.com/michalsnik/aos 사용방법이 매우 간단해 공식문서에 들어가면 금방 익힐 수 있습니다. 1. 적용하기 //css //js //INITIALIZE AOS //global세팅을 해줄수도 있습니다. AOS.init({ // Global settings: }) 2. 사용하기 1 ) 모션 -> 공식문서에 들어가 원하는 모션을 찾아 적용하면 됩니다. 2 ) api 보충설명 data-aos : 원하는 모션을 적어줍니다. data-aos-offset : offset 을 적용해서 나타나는 시점을 조정 할 수 있습니다. data-aos-anchor: anchor를 걸어, 어떤 객체를 기준으로 등장할지를 조정할 수 있습..

공식문서 : greensock.com/docs/v3/GSAP/Timeline 타임라인이 트윈맥스의 꽃입니당! 어렵지 않으니 꼭 잘 읽어보세요! 타임라인은, 연결되는 모션을 만들어줄때 유용하게 사용할 수 있습니다. 만약, timeline을 사용해주지 않고 연결된 모션을 만든다고 생각한다면 delay를 이용해 모션 끝나는 시간을 계산해 delay를 주어 연결된 모션을 만들어야할것입니다! 트윈맥스에서도 마찬가지로, timeline을 사용하지 않고, 일반 gsap을 사용해서 만든다면 delay를 이용해야합니다. // WITHOUT Timelines (only using tweens with delays): gsap.to("#id", {x: 100, duration: 1}); gsap.to("#id", {y: 5..

공식 사이트 트윈 : greensock.com/docs/v3/GSAP/Tween 1. callbackScope( onStart, onUpdate, onComplete 등) 주로 쓰는것 : onComplete tween이 완료될때 실행시킬 함수가 있는경우 사용합니다. 2. delay (지연) 지연을 주고 싶을때 사용합니다. 3. duration (기간) 얼마나 걸릴지 결정해줍니다. 설정해주지 않는다면 0.5가 기본값입니다. 4. repeat (반복) 말그대로 반복을 의미합니다. Default는 0 이며, 반복하고 싶은 숫자를 넣어주면 됩니다. 무제한으로 실행시키고싶으면 -1 을 넣어줍니다. 5. yoyo 참고 : css animation 효과인 animation-direction: alternate; 와 ..

트윈맥스 컨트롤하기 : greensock.com/docs/v3/GSAP/Tween Tween 인스턴스를 제어하기 위해선 변수에 할당해야합니다. 가능한 제어는 여러가지가있습니다. 세팅 const test = document.querySelector('.test'); let tween = gsap.to(test, {duration: 4, rotation: 360}); 1. play ( 실행 ) 트윈맥스는 기본적으로 즉시 실행됩니다. 따라서, 단순 실행이 목적이라면 따로 인스턴스를 제어할 필요가 없습니다! . play(from : Number , suppressEvents : Boolean ) : self from : 재생 시작하는 시간 (1초부터 보여줘! 0초부터 보여줘!!!) suppressEvents: ..