본문 바로가기

전체 글301

(postCSS: css-module) classNames 여러개 지정하기 (라이브러리: classnames) Alternate bind version (for css-modules) github.com/rtsao/csjs/wiki/How-to-apply-multiple-classnames-to-an-element github.com/JedWatson/classnames#classnames 0. INSTALL npm install classnames yarn add classnames 1. IMPORT import classNames from 'classnames' 2. USAGE #1 import classNames from "classnames/bind"; var styles = { foo: 'abc', bar: 'def', baz: 'xyz' }; var cx = classNames.bind(styles);.. 2020. 11. 2.
Swiper [필수] INSTALL npm i swiper (npm으로만 인스톨 가능) [필수] IMPORT import { Swiper, SwiperSlide } from 'swiper/react' import SwiperCore, { Pagination, Autoplay } from 'swiper'; [필수] SWIPER CORE(부가기능 사용여부: pagination, autoplay 등) SwiperCore.use([ Pagination, Autoplay ]); [필수] CODE {BannerItems.map(item => { return ( ) })} 사용컴포넌트: Swiper, SwiperSlide PROPS: wrapperTag, spaceBetween, slidesPerView, autoplay, sp.. 2020. 11. 2.
flag를 활용한 트릭 let flag = true; // swiper 초기에는 동작하므로 true ★let / const / var이용 시 주의!! 위 경우는 flag가 전역에서 사용되어지고, 값이 바뀌어야 하기 때문에 const를 사용해서는 안된다. 전역에서 사용되어지는 변수 이기 때문에 함수/문법(if, for 등)에서 let / const / var 앞에 사용하지 않아도 된다. const pauseBtn = $(".main_banner .pagination_wrapper .btn_pause"); pauseBtn.click(function(){ flag = !flag; // 참이면 거짓으로 바꾸고 거짓이면 참으로 바꿈 controlSwiper(); }); function controlSwiper(){ if(flag == .. 2020. 10. 30.
Ref 전달하기 클래스 컴포넌트에서: formRef = React.createRef(); inputRef = React.createRef(); 함수형 컴포넌트에서: const inputRef = useRef(); 2020. 10. 29.
REST(REpresentational State Transfer) REST(REpresentational State Transfer) meetup.toast.com/posts/92 www.youtube.com/watch?v=iOueE9AXDQQ www.youtube.com/watch?v=RP_f5dMoHFc Q. 어떻게 인터넷에서 정보를 공유할 것인가? (communication) A. 정보들을 하이퍼 텍스트로 연결한다 - 표현형식: HTML - 식별자: URI(Uniform Interface) - 전송방법(Request): HTTP(post / get / put / delete) ㄴ운송장과 같다. 형식에 맞추어 request하면 response가 온다. Q. REST란? (Descriptive) A. 분산 하이퍼 미디어 시스템(웹)을 위한 아키텍쳐 스타일(제약조건의 .. 2020. 10. 28.
API 키 설정하기 (Google Developer) google에서 youtube api 검색(YouTube Data API | Google Developers) → get started → APIs Console로 이동 → 프로젝트 생성 → API라이브러리로이동 → YouTube Data API v3 → Enable → CREATECREDENTIAL → [step1] 사용할 API지정 → [step2] 사용할곳: Webbrowser(Javascript) → [step3] Public data → API key 생서됨 2020. 10. 28.

티스토리툴바