본문 바로가기

프론트엔드111

Web APIs - window size & browser coordinate & scroll 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.. 2022. 4. 6.
배열에서 id 로 object를 찾는 방법 배열에서 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.. 2022. 3. 25.
자바스크립트로 구현한 Tree, BFS, DFS 자바스크립트로 구현한 Tree, BFS, DFSTreeclass 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도 노드.. 2022. 3. 12.
자바스크립트로 구현한 Max Heap 자바스크립트로 구현한 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까지의 정수를 저장한 최대 힙의 예시. 모든 부모노드들이 그 자식노드들보다 큰 값을 가진다. .. 2022. 3. 12.
자바스크립트로 구현한 hash table 자바스크립트로 구현한 hash tablehash table키를 값에 매핑할 수 있는 구조인, 연관 배열 추가에 사용되는 자료 구조이다. 해시 테이블은 해시 함수를 사용하여 색인(index)을 버킷(bucket)이나 슬롯(slot)의 배열로 계산한다.출처 : https://ko.wikipedia.org/wiki/%ED%95%B4%EC%8B%9C_%ED%85%8C%EC%9D%B4%EB%B8%94 해시 테이블 - 위키백과, 우리 모두의 백과사전 ko.wikipedia.orgclass HashTable{ constructor(table_length){ this.table = new Array(table_length); this.size = 0; } _hash(key){ .. 2022. 3. 11.
단일연결리스트로 구현한 Stack, Queue 단일연결리스트로 구현한 Stack, QueueStackfirst in first out// 단일연결리스트로 구현한 stackclass Node{ constructor(value, next){ this.value = value; this.next = next; }}class Stack{ _size = 0; constructor(){ this.head = null; // 가장 위에 있는(가장 나중에 있는) 노드 this._size = 0; } get size(){ return this._size; } push(value){ const new_node = new Node(value, this.. 2022. 3. 10.

티스토리툴바