숫자가 단계적으로 카운트 되는 것을 간만해 작업해 보았다. 핵심은 배열의 Array.prototype.unshift(), Array.prototype.shift() 그리고 setTimeout() 이다. HTML - 테스트 할 숫자 두개정도 준비한다. 0 0 CSS - 폰트사이즈 및 스타일링은 대충 알아서 적절히 한다. .min, .max{line-height:1.4;font-size:30px;font-weight:bold;color:#333;} JS - 카운트 모션 함수와 그 모션이 여러개 일 경우를 감안한 함수를 작성한다. function counterUp( settings ){ var $settings = settings; var $target =$settings.ele; var countUpData..
1. RxJs 데이터스트림 "데이터 스트림이란 대체적으로 시퀀스 값( 1, 2, 3, 4.....)과 같이 연속된 데이터" 데이터 스트림의 형태는 규칙과 범위의 혼합. 1. 규칙이 있고 제한 범위가 있는 스트림 - 1, 2, 3, 4, 5 2. 규칙이 있고 제한 범위가 없 스트림 - 1, 2, 3, 4, 5...... 3. 규칙이 없고 제한 범위가 있는 스트림 - 1, 12, 55, 102, 201 4. 규칙이 없고 제한 범위가 없는 스트림 - 1, 12, 55, 102, 201...... 형태는 다르지만 연속된 값이라는 공통점이 있다. RxJs에서 데이터 스트림 처리 - 사용자가 키를 입력할 때마다 결과값 처리의 경우. 데이터가 생성되고 생성된 데이터는 연산자에 의해 데이터가 처리되고 나서 구독될지 말..
swiper - 여러 모로 도움이 많이 되는 슬라이더 중 하나이다. 이젠 거의 Swiper 만 쓰는 것 같기도 하다. slick 을 쓰다 swiper 를 더 많이 쓰게되는 이유는 1. 커스텀 할 수 있는 설정 옵션이 많다. 2. 모바일 터치 슬라이드가 자연스럽다. 아래는 예제만 따로 모아둔 swiper 홈페이지 url 이다. - https://swiperjs.com/demos/ Swiper Demos swiperjs.com html Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9 Slide 10 CSS javasscript
gulp 플러그인 설치 목록 import gulp from 'gulp'; import babel from 'gulp-babel'; import browserify from "browserify"; import vinylSourceStream from 'vinyl-source-stream'; import buffer from 'vinyl-buffer'; import ts from 'gulp-typescript'; import tsify from 'tsify'; import sourceMaps from 'gulp-sourcemaps'; ts 번들을 위한 설정. const bundler = () =>{ return browserify({ basedir: '.', debug: true, //tsify는 번들된 ..
jQuery -->Vanilla JS ( pure javascript ) 전환하기 여태까지 jQuery 를 잘 써오고 있다. 음~제목과 다른 전개이지만~ 왠지 앞으로도 계속 쓸 것 같다. 구차한 이야기는 생략하겠지만 그 만큼 이 바닥 시장이 더럽다. 빠르게 요구함은 물론이거니와 레거시 코드의 운영도 만만치 않기 때문이다. 머 변명일 수도 있겠지만 빠른 퇴근과 스트레스를 받지 않으려면.... 어쩔 수 없는 현실이기도 하다. 지금도 가슴으로는 '아 이거 이렇게 하면 무겁게 돌아갈 텐데.....' 라고 고민하곤 하지만 시계를 보곤 음... 아니지 걍 있던데로 하자 라고 마음을 다 잡곤 한다. 여튼 서두가 길었는데.. 타이틀 대로 간혹 순수 자바스크립트으로만 코딩할 때가 있는데.. 그 때를 위해 나름 정리해 둘..
아래 코드는 youtube api 에서 공식적으로 제공하는 코드 이다. https://developers.google.com/youtube/iframe_api_reference?hl=ko iframe 삽입에 대한 YouTube Player API 참조 문서 | YouTube IFrame Player API Embed a YouTube player in your application. developers.google.com var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; fir..
git checkout temp - 브랜치 이동 git checkout {새로운 로컬 Branch 이름} git checkout -b develop master - master을 기준으로 로컬에 새로운 브랜치를 생성합니다 git checkout -b develop origin/develop - 원격 브런치가 이미 존재 할 경우 원격 브런치를 기준으로 로컬 브랜치를 만드는 방법 ( checkout 명령에 -b 옵션을 넣으면 브랜치 작성과 체크아웃을 한꺼번에 실행 ) git checkout -b {새로운 로컬 Branch 이름} {원격 저장소 별칭}/{원격 Branch 이름} git push origin develop - local 브랜치를 remote로 push하기 git pull origin master..
소스 포맷 및 공백 협업할 때 겪는 소스 포맷(Formatting)과 공백 문제는 미묘하고 난해하다. Git에는 이 이슈를 돕는 몇 가지 설정이 있다. core.autocrlf 윈도에서 개발하는 동료와 함께 일하면 줄 바꿈(New Line) 문자에 문제가 생긴다. 윈도는 줄 바꿈 문자로 CR(Carriage-Return)과 LF(Line Feed) 문자를 둘 다 사용하지만, Mac과 Linux는 LF 문자만 사용한다. Git은 커밋할 때 자동으로 CRLF를 LF로 변환해주고 반대로 Checkout할 때 LF를 CRLF로 변환해 주는 기능이 있다. core.autocrlf 설정으로 이 기능을 켤 수 있다. 윈도에서 이 값을 true로 설정하면 Checkout할 때 LF 문자가 CRLR 문자로 변환된다: $..
- Total
- Today
- Yesterday
- git checkout -b
- 자바스크립트
- Intrinsic
- svg모션
- CSS
- react
- 태그
- 코도바
- RefreshToken
- vue-router
- 내장요소
- for of 구문
- React.StrictMode
- git
- 아이콘 폰트 만들기
- svg icon font
- interceptors
- 앵귤러
- icon font
- cordova
- Angular
- react-router-dom
- JsDoc
- svg 폰트
- anime.js
- IntrinsicElements
- Vue3
- 반복문
- 리프래시토큰
- Aptana
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |