목록전체 글 (89)

개발공부 임고미

[Antd] 스타일이 안들어오는 경우 & craco로 스타일 적용

1. 앤트디 적용했는데 스타일이 안들어오는 문제를 확인했다.. import 'antd/dist/antd.css'; 했더니 스타일이 적용되긴 되었다. 2. 커스텀하려고 craco 로 세팅 다운 받아야하는 라이브러리 2가지는 "@craco/craco": "^5.5.0", "craco-antd": "^1.19.0", 버전을 함께 올려놓은 이유는, craco-antd를 사용하기 위해선 caraco를 로드해야하는데 craco 버전 이슈가 있어서 5.5.0으로 세팅하였다. package.json의 스크립트 부분을 수정해 줘야합니다. "scripts": { "start": "craco start", "build": "react-scripts build", "test": "react-scripts test", "eje..
리액트/앤트디(Antd) 2021. 7. 22. 11:08
[CSS/JS]아이폰 터치 감도 올리는법?

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

* 해당 작업은 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..
퍼블리싱/html css js 2021. 7. 13. 10:16
[StyledComponent] 스타일드 컴포넌트 활용하기

간단한 스타일을 줄때 활용했는데 제대로 활용해보기 위한 정리 styled component 의 API Reference 와 Getting start 부분을 참고해 작성 1. 활용가능 : 태그 or 컴포넌트(tag / component) //태그 : .button const Button = styled.button` background: palevioletred; border-radius: 3px; border: none; color: white; ` //컴포넌트 : (ComponentName) const TomatoButton = styled(ComponentName)` background: tomato; ` 2. 조건에 따른 스타일링 (props) //props로 background를 받아와서 색을 넣..
리액트/라이브러리 2021. 3. 22. 14:09
[Swiper] loop 모드일때 duplication 이 제대로 안될때

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..
퍼블리싱/라이브러리 2021. 3. 11. 13:38
[swiper] 스와이퍼 pagination 버그

스와이퍼 페이지네이션을 커스텀해서 슬라이드를 이동시키려 했으나, 내가 클릭한것이 아닌 다른 페이지가 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..
퍼블리싱/라이브러리 2021. 3. 2. 10:51
[Youtube API] player 사이즈 반응형 맞추기

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..
퍼블리싱/라이브러리 2021. 2. 7. 21:32
[AOS]간단한 스크롤 모션에 좋은 라이브러리!

공식 사이트 : 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를 걸어, 어떤 객체를 기준으로 등장할지를 조정할 수 있습..
퍼블리싱/라이브러리 2020. 12. 31. 15:55
Prev 1 2 3 4 5 6 7 ··· 12 Next