개발공부 임고미

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

문자열 자르기! substr, substring 먼저 각자의 반환 값을 알아보면, substring( start, end ) : start인덱스부터 end인덱스 전까지 출력 substr( start, end ) : start인덱스부터 end개의 문자 출력 (end가 어울리는 이름은 아니지만... 비교하려고 굳이 end로 적었습니다) 1) substring (0,3) : 0부터 3전까지니까 인덱스 2번인 N까지 출력되는걸 확인할 수 있습니다. 2) substr(0,3) : 0부터 3개 출력할꺼니까, N까지 출력되는걸 확인할 수 있다. 3) 원본 문자열은 바뀌지 않는다. ! end를 적지 않는경우엔? 끝까지로 인식 제가 더 많이 쓰는건 ? substring을 더 많이 쓰는것같습니다, 찾고자하는 문자가 몇글자..

가끔 안드로이드에서는 터치가 잘 되는데 아이폰에서는 꾸욱 누르거나 2번씩 터치해야 터치가 먹을때가 있다. js를 통해 하는법은 addEventListener에서 click 을 걸어주는게 아니라 touchstart로 걸어주는것이다 그런데 이렇게 되면 아이폰에선 잘 될지 몰라도 안드로이드에선 너무 민감하게 반응하므로 스크롤 와중에 클릭이 되는경우도 발생한다. (- 디바이스 분기를 태워도 되긴하는데,,,, 굳이...?) 개선방법은 간단했다 클릭이 필요한 컨텐츠에 다음 css를 추가해주면 된다. cursor: pointer; 모바일이라 커서가 보일일이 없어 잘 사용안했었는데 아이폰 대응하면서 위대함을 알았다..

* 해당 작업은 react라이브러리로 페이지 작업하다 확인한 이슈임니당 결론 : safari에서 window.open 쓸땐 함수에 함수에 함수 타지 말고, 직접적으로 넣어주자 ---------- 상황 : 하이브리드앱 (웹앱) 만드는 중에 앱, 웹, 모바일 웹 을 구분해서 alert 을 띄워야 하는상황이 있었습니다 먼저 구분은 1. 모바일 앱 : 웹단에서 구분할 수 없으므로 안드로이드, IOS에서 작업해서 넘겨줘야합니다 (따라서 확인값만 알면 구분할 수 있습니다.) 2. 이 외 //pc구분 export const isPc = /win16|win32|win64|mac|macintel/i.test( window.navigator.userAgent ); //safari구분 export const isSafari..

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를 걸어, 어떤 객체를 기준으로 등장할지를 조정할 수 있습..