Aaron[에런]/Topic Keyword Articles8 [Topic #자료구조 02] Singly Linked List 구현 with JavaScript // node.js class Node { constructor(data) { this.data = data; this.next = null; } } module.exports = Node; // singly-linked-list01.js const Node = require('./node'); // Singly Linked List 01 - Head만 가지고 있는 경우 class SinglyLinkedList01 { // S.C: O(1) constructor() { this.head = null; this.cnt = 0; } // T.C: O(1) insertHead(item) { const node = new Node(item); this.cnt += 1; node.next = this.head; .. 2022. 9. 6. [Topic #React 01] map 순수 함수 사용 시 key prop은 unique id로 설정! 두 번째 토픽 키워드 주제는 React 입니다. React에서 map 함수를 이용하여 리스트의 원소 렌더링 시 key prop을 index가 아니라 unique id 사용을 권장합니다. key는 React가 DOM 요소를 식별하기 위해 사용하는 유일한 값입니다. React는 key를 가지고 기존 트리와 이후 트리의 자식들이 일치하는지 확인합니다. 리스트 중간에 항목을 insert/delete/reorder 등 작업 시 React는 정확히 어떤 프로퍼티가 매핑되어 있는지 인식을 못할 수 있습니다. (예측 불가능 초래 가능) 인덱스를 key로 사용하면 배열이 재배열 될 때 컴포넌트의 state와 관련된 문제가 발생할 수 있습니다. (배열이 변경되면 효율적으로 리렌더링 못할 수 있음) 컴포넌트의 인스턴스는 k.. 2022. 4. 30. [Topic #자료구조 01] Array를 이용한 List 구현 with JavaScript 첫 번째 토픽 키워드 주제는 자료구조입니다. JavaScript 언어를 활용하여 Array를 이용한 List 구현을 해보겠습니다. 구현을 시작하기 전에 먼저 간단히 Array와 List를 비교하겠습니다. Array는 보통 '정적인 배열이다' 라고 해서 처음부터 사이즈가 정해져 있는 크기의 배열입니다. 그래서 만약 처음에 사이즈를 100으로 잡아놓은 배열이 꽉차게 되면 더 이상 요소를 넣을 수 없게 됩니다. 이때 요소를 더 넣게(Push) 된다면 그 배열이 가지고 있는 사이즈가 넘쳐서 오버 플로 (overflow) 라고 합니다. 만약 요소가 하나도 없는 배열에서 요소를 빼는(Pop) 연산을 한다면 그것은 언더 플로 (underflow)가 됩니다. 스택을 이용한 연산이었다면 우리가 많이 들어본 스택 오버 플.. 2022. 1. 7. [토픽 키워드] 게시판 소개 '토픽 키워드'라는 이름의 새로운 카테고리 게시판을 만들었습니다. 이 카테고리에서는 키워드 중심으로 하나의 토픽을 구성해서 정말 유익한 좋은 내용들을 전달하려고 합니다. 주제는 정말 다양하게 진행할 예정입니다. 웹 개발의 기본인 HTML, CSS, JS 부터 React, Vue 같은 라이브러리/프레임워크도 다루며 다양한 여러 컴퓨터 사이언스 이론들도 다루려고 합니다. 실무적인 부분도 다룰 수 있으면 함께 접목하여 소개하려고 합니다. 또 많은 사람들이 간과하는 중요한 내용들이나 제가 또 학습하고 경험하면서 깨달은 내용들, 좋은 개발자로 성장하기 위해서 꼭 알아야 하는 개념 등 다양하게 작성하려고 합니다. 제 블로그 상단 메뉴로 만들어 놓은 미디엄 블로그로 연결되는 링크가 있습니다. 기회가 된다면 범위를 넓.. 2022. 1. 6. 이전 1 2 다음 반응형