count rolling 아래코드는 나름 여기저기서 쓰이는 거 같아서 필받아서 함 코딩 해봤다 크로스 브라우징 및 단위테스트는 안해봤다. 그닥 최적화하기가...... 귀찮음.. 까먹을까바 걍 올려놓는다..... - html -style -javascript //jQuery 기반으로 작업했다. function DisitCal() { var _container=null; var _th=0; this.getContainer=function(){ return _container; } this.setContainer=function( cont ){ _container=$( cont ); } this.getHeight=function(){ return _th; } this.setHeight=function(th){..
코드 카피가 급 필요해서 예전에 썼었는데..... 다시 쓸 일이 있어서 코딩하려는데 생각이 안나는 ㅠㅠ 마흔이 넘으니 이젠 나의 메모리가 한계에 부딪치는.... 삽질 후 정리해 본다. HTML btn btn-default btn-primary btn-success btn-info btn-warning btn-danger btn-link 코드카피 JS let selectNodeCopy = targetEle => { //선택영역이 있다면 제거하고 시작 if (window.getSelection) { window.getSelection().removeAllRanges(); } //textarea let textAreaEle = document.getElementById("codeTextView"); // //..
디스트럭처링이란 - 객체 구조( structure )를 제거( de ) 한다는 의미가 있다. - 디스트럭처링은 객체의 구조를 분해 후 할당이나 확장과 같은 연산을 수행한다. 자료형에 따라 다음과 같은 방식으로 나뉜다. 1. 객체 디스트럭처링 2. 배열 디스트럭처링 1. 객체 디스트럭처링 - 객체 리터럴에서 변수명에 대응하는 속성값을 추출해 변수로 할당하는데 유용하다. 이렇게 객체의 속성값을 변수에 할당하는 것을 디스트럭처링 할당이라고 한다. let { id, name } = { id: 123, name:"gogo" }; console.log(id) // 123 console.log(name) // gogo 디스트럭처링 할당 표현식은 { id, name }과 같다. 디스트럭처링 할당 시 표현식 내부와 id..
숫자가 단계적으로 카운트 되는 것을 간만해 작업해 보았다. 핵심은 배열의 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에서 데이터 스트림 처리 - 사용자가 키를 입력할 때마다 결과값 처리의 경우. 데이터가 생성되고 생성된 데이터는 연산자에 의해 데이터가 처리되고 나서 구독될지 말..
README.md 요새는 대체로 작업할 때 git을 많이 쓰게 된다. 그러다 보니 readme.md 파일에 많은 정보를 기재하고 그것을 가지고 가이드로써 전달한다. 예전처럼 산출물에 대한 가이드를 html table 코딩하여 전달하지 않게 되었다. 물론 Task list는 테이블 형식이긴 하다. 하지만 안타깝게도 그러한 추세에도 마크다운 형식의 파일을 원하지 않는 곳도 있고 하기에 결국 ppt파일이나 html 로 작업목록을 작성해 전달해야 할때가 있다. 그렇다고 이러한 방식을 접을 순 없다...... 찾아보니 역시역시!!!!!!!!!!!!!!!!!!!!!!! markdown -> html 변환작업을 해주는 라이브러리가 있으니 그것은 바로 markedjs 백문이 불여일견. 작성된 README.md 파일을 ..
1. 오픈 그래프 오픈그래프 프로토콜은 페이스북에서 처음 만들어졌으며, Dublin Core, link-rel canonical, Microformats, 그리고 RDFa로부터 영감을 받았다. 오픈그래프는 어떤 HTML 문서의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓은 프로토콜이며 페이스북에 의하여 기존의 다양한 메타 데이터 표기 방법을 참조하여 만들어졌다. 그 간편함으로 인하여 현재는 그 창시자인 페이스북은 물론이고, 네이버 블로그, 카카오톡 등에서도 널리 사용하고 있다. 미리보기를 통해 보는 제목, 설명, 이미지는 이렇게 HTML 문서의 head에 표기된 오픈그래프 프로토콜에 의해서..
1. CSS note: CSS 코드의 작성 및 규칙사항 CSS 파일을 압축하고, 최종 파일에서 주석, 공백, 줄바꿈을 제거한다. ( 유지 보수 및 수정 사항 전달 등에 있어서 주석 처리 예외 ) CSS 파일을 압축하면 클라이언트에게 더 적은 데이터를 전송하게 되며, 콘텐츠가 더 빨리 로드. CSS 파일을 압축하는 것은 중요한 이유는 대역폭과 리소스 사용을 줄이고자 하는 모든 부분에 있어서 도움이 된다. preload preload 를 통해 브라우저가 페이지의 콘텐츠를 보여지기 전에 CSS 파일을 로드할 수 있다. rel 속성의 값을 preload 로 주고, as="style" 를 태그에 넣는다. 참고 URL : 리소스 우선순위 지정 1-1. Syntax Lint 의 사용을 권장! css class 이름은..
- Total
- Today
- Yesterday
- react
- Aptana
- git checkout -b
- vue-router
- 반복문
- 내장요소
- React.StrictMode
- 아이콘 폰트 만들기
- svg 폰트
- Angular
- anime.js
- cordova
- 코도바
- Vue3
- CSS
- 리프래시토큰
- RefreshToken
- 자바스크립트
- JsDoc
- icon font
- 태그
- git
- 앵귤러
- svg icon font
- svg모션
- IntrinsicElements
- react-router-dom
- for of 구문
- interceptors
- Intrinsic
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |