분류 전체보기
-
자바스크립트로 구현한 hash table프론트엔드/자료구조 알고리즘 2022. 3. 11. 16:38
자바스크립트로 구현한 hash table hash 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.org class HashTable{ constructor(table_length){ this.table = new Array(table_length); this.size = 0; } _hash(key){ let hash = 0; for(l..
-
단일연결리스트로 구현한 Stack, Queue프론트엔드/자료구조 알고리즘 2022. 3. 10. 11:52
단일연결리스트로 구현한 Stack, Queue Stack first in first out // 단일연결리스트로 구현한 stack class 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.head); this.head = new_node; this._size++; } pop(){ if(this...
-
user story프론트엔드 2022. 3. 2. 19:48
user story user story 란? 소프트웨어 개발 및 제품 관리에서 소프트웨어 시스템 기능에 대한 비공식적인 자연 언어 설명입니다. 최종 사용자 또는 시스템 사용자의 관점에서 작성되며 색인 카드, 포스트잇 메모에 기록되거나 프로젝트 관리 소프트웨어에서 디지털 방식으로 기록될 수 있습니다. 스토리는 사용자가 달성하고자 하는 것과 달성하고자 하는 이유를 명확하게 보여줍니다. https://en.wikipedia.org/wiki/User_story User story - Wikipedia From Wikipedia, the free encyclopedia Jump to navigation Jump to search Informal description of one or more features of..
-
flex-basis프론트엔드/css 2022. 2. 7. 23:50
flex-basis flex의 item 요소 속성 중 flex-basis에 대해 정리해 본다. flex-basis를 제대로 알게되면 반응형을 의도 대로 정확하게 구현할 수 있다. flex-basis 값에 따라(auto, 0, 단위값) flex item 요소의 크기가 어떻게 결정되는지 아래의 예제를 보자. See the Pen flex test by sunghee (@dimorin) on CodePen. 출처 : https://heropy.blog/2018/11/24/css-flexible-box/ CSS Flex(Flexible Box) 완벽 가이드 많은 경우 float, inline-block, table 등의 도움을 받아서 수평 레이아웃을 구성하지만 이는 차선책이며, 우리는 Flex(Flexible ..
-
노드 동적 생성과 DocumentFragment프론트엔드/javascript 2022. 2. 3. 20:22
노드 동적 생성과 DocumentFragment DocumentFragment 노드는 문서, 요소, 어트리뷰트, 텍스트 노드와 같은 노드 객체의 일종으로, 부모 노드가 없어서 기존 DOM과는 별도로 존재한다는 특징이 있다. DocumentFragment 노드는 컨테이너 요소와 같이 자식 노드들의 부모 노드로서 별도의 서브 DOM을 구성하여 기존 DOM에 추가하기 위한 용도로 사용한다. DocumentFragment는 활성화된 문서 트리 구조의 일부가 아니기 때문에 fragment를 변경해도 문서에는 영향을 미치지 않으며(reflow 포함) 성능에도 영향이 없다. https://developer.mozilla.org/ko/docs/Web/API/DocumentFragment DocumentFragment ..
-
프론트엔드 역사, 미래, 업무범위프론트엔드 2022. 1. 27. 23:35
프론트엔드 역사, 미래, 업무범위 프론트엔드에 대해 꼭 한 번 읽어봄직한 포스트가 있어 소개한다. 시니어 개발자가 말하는, 프론트엔드 역사와 미래 https://yozm.wishket.com/magazine/detail/1289/ 시니어 개발자가 말하는, 프론트엔드 역사와 미래 | 요즘IT 웹 프론트엔드는 웹 서비스 발전에서 막내 격으로 생긴 포지션입니다. 프론트엔드라는 영역이 갑자기 생겨난것은 아니지만 지금처럼 이렇게 선명하게 프론트엔드와 백엔드가 세분화된 배경에 yozm.wishket.com 시니어 개발자가 말하는, 프론트엔드 업무와 잘하는 프론트엔드 개발자란 https://yozm.wishket.com/magazine/detail/1294/ 시니어 개발자가 말하는, 프론트엔드 업무와 잘하는 프론트엔..
-
특수 문자 용어 정리프론트엔드 2022. 1. 26. 17:47
특수 문자 용어 정리 특수 문자의 정확한 발음 - 영어 발음과 한글 발음을 정리해 보았다. 기호 영어(발음) 한글 ` Grave(그레이브) - ~ Tilde(틸드) 물결표시 ! Exclamation(엑스클러메이션) mark 느낌표 @ At(엣) sign 골뱅이 # Number(넘버) sign, Sharp(샵) 샵, 우물 정 $ Dollar(달러) sign 달러 % Percent(퍼센트) sign 퍼센트 ^ Caret(캐럿) - & Ampersand(엠퍼센드) - * Asterisk(에스터리스크) 별표 - Hyphen(하이픈), Dash(대쉬) 마이너스 _ Underscore(언더스코어), Low dash(로대쉬) 밑줄 = Equals(이퀄) sign 이꼬르 “ Quotation(쿼테이션) mark 큰 따..
-
테이블 헤더 고정 sticky프론트엔드/css 2022. 1. 21. 19:19
테이블 헤더 고정 sticky thead 고정시키기 table의 tbody 내용이 많아지면, 스크롤에 넘어가지 않도록 thead를 고정시켜야 할 때 있다. thead 고정하는 방법 - datagrid 라이브러리 이를 구현하기 위해 datagrid 라이브러리를 사용하는 것이 가장 안정적이고 편하기도 하겠지만, 단순히 thead의 고정만을 위해 datagrid 라이브러리를 사용하는 것은 비효율적이다. thead 고정하는 방법 - 만으로 thead를 고정시키는 방법에 대해 서치를 해보면 몇 가지 방법이 나오는데, 모든 상황을 만족시키는 방법은 없다. 특히, table-layout 속성을 변형(fixed) 시키면서까지 헤더 고정 기능을 구현하는 방법은, 순수 이 가지고 있는 너무나 큰 장점들을 버리게 된다. (..