무찌르자 단팥빵 무찌르자 단팥빵

TOAST UI DateRangePicker 날짜 초기화 날짜 범위 선택 라이브러리 중 디자인이 이쁘고 사용성이 좋은 TOAST UI DateRangePicker가 있다. 특별히 선택된 날짜를 초기화 하는 기능을 구현할 때, 공식 document 에 나온 예제나 API 설명만으로는 기능 구현에 어려움이 있었는데, 얼마간 삽질 후 얻은 '초기화' 방법을 여기에 소개한다. close ~ close 선택된 날짜 초기화 방법을 간략히 얘기하자면, 1. default 상태에선 초기화 버튼이 보이지 않다가 2. 날짜가 입력되면 초기화 버튼이 보인다. - change:start, change:end 이벤트 일어나면 getStartDate(), getEndDate() 를 통해 날짜가 입력됐는지 파악 3. 초기화 버튼을..

SPA에서 History API 이해 주소 내역은 하나의 목록이다. 뒤로가기, 앞으로가기는 목록 안에서 이동하는 것이다. 따라서, 목록에 새로운 주소를 추가하면 페이지를 이동한 셈이 된다. 목록에 주소를 추가하기 위한 메소드(history.pushState(). history.replaceState())가 HTML5에서 생겼다. 예제를 만들고 테스트하며 목록에 주소를 추가하는 메소드 history.pushState(), historyreplaceState()를 비교하자. 아래 예제를 book 폴더 아래에 만든다. pushState replaceState ①'pushState' 버튼을 클릭하면, 페이지가 새로 갱신되지 않지만 주소만 바뀌고, 뒤로가기 버튼이 활성화된다. 주소 목록에 새로운 주소가 추가된다...

transform-origin : 요소 변환의 기준점을 설정 transform-style : 3D 변환 요소의 자식 요소도 3D 변환을 사용할지 설정 flat : 자식 요소의 3D 변환을 사용하지 않음 default preserve-3d : 자식 요소의 3D 변환을 사용함 perspective : 하위 요소를 관찰하는 원근 거리를 설정 persepective 속성은 관찰 대상의 부모(조상) 요소에 적용하여 하위 요소들을 관찰하는 원근거리를 설정, 기준점 설정 perspective-origin transform:perspective() 변환함수는 관찰대상에 직접 적용하여 그 대상을 관찰하는 원근 거리를 설정, 기준점 설정 transform-origin perspective-origin : 원근 거리의 기준..

Web APIs - window size & browser coordinate & scroll Web API 중 유용한 기능(사이즈, 좌표, 스크롤) 세 가지를 정리해 본다. 1. window size window.screen.width // 모니터 사이즈 window.outerWidth //브라우저 사이즈(주소창, 탭 포함) window.innerWidth // 페이지 사이즈 document.documentElement.clientWidth // 문서 사이즈(스크롤바 제외한 영역) window가 resize 될 때마다 window.outer, window.inner, documentElement.clientWidth 값이 업데이트 된다. 2. browser coordinate element.getBou..

배열에서 id 로 object를 찾는 방법 "Find object by id in an array of JavaScript objects stackoverflow에서 id를 매치하여 object를 찾는 방법에 대해 굉장히 좋은 글을 발견해 내용을 이 곳에 옮겨본다. 테스트 방법 id로 특정 object를 찾는 방법에 총 11가지 방법을 사용하여 속도 테스트를 하였다. 총 11가지 방법은 다음과 같다. A : find B : findIndex C : filter D : reduce E : for F : $.each G : $.grep H : $.map I : _.find J : cache K : map L :object {} 테스트 결과 Conclusions for solutions which use pr..

구글링 1. exact match 키워드 문장 내 단어를 하나 하나 매치하지 않고, 키워드 문장 전체를 매칭하여 검색하는데 사용한다. 오류 메시지를 검색할 때 유용하다. 사용 방법 "검색할 내용" 사용 예시 "Error with Permissions-Policy" 2. exclude 특정 키워드를 검색 결과에서 제외시키고 검색할 때 사용한다. 제외하고자 하는 단어 앞에 '-'을 붙인다. 사용 방법 - 제외시키고자 하는 키워드 사용 예시 implement quick sort - python 3. 특정 사이트에서 찾기 특정 사이트내에서 검색할 때 사용한다. 사용 방법 site:url 사용 예시 css center vertical site:codepen.io 4. 특정 날짜 범위에서 찾기 특정 날짜 범위에서 ..

자바스크립트로 구현한 Tree, BFS, DFS Tree class Node{ constructor(data){ this.data = data; //노드의 정보 this.children = []; // 자식'노드'가 들어있는 배열 } addChild(data){ this.children.push(new Node(data)); } removeChild(data){ this.children = this.children.filter(child => child.data === data ? false: true); } } class Tree{ constructor(){ this.root = null; // root도 노드이다. } } const t = new Tree(); t.root = new Node('a')..

자바스크립트로 구현한 Max Heap 힙(heap)은 최댓값 및 최솟값을 찾아내는 연산을 빠르게 하기 위해 고안된 완전이진트리(complete binary tree)를 기본으로 한 자료구조(tree-based structure)다. 힙에는 두가지 종류가 있으며, 부모노드의 키값이 자식노드의 키값보다 항상 큰 힙을 '최대 힙', 부모노드의 키값이 자식노드의 키값보다 항상 작은 힙을 '최소 힙'이라고 부른다. 출처 : https://ko.wikipedia.org/wiki/%ED%9E%99_(%EC%9E%90%EB%A3%8C_%EA%B5%AC%EC%A1%B0) 힙 (자료 구조) - 위키백과, 우리 모두의 백과사전 1부터 100까지의 정수를 저장한 최대 힙의 예시. 모든 부모노드들이 그 자식노드들보다 큰 값을 ..