소개

비즈니스 로직 이 뒤에서 앞으로 점점 더 이동 함에 따라 Frontend Engineering의 전문 지식 이 더욱 중요해졌습니다. 으로 프론트 엔드 엔지니어 처럼, 우리가보기 라이브러리에 의존 반작용 생산성. 뷰 라이브러리 는 데이터를 관리하기 위해 Redux 와 같은 상태 라이브러리에 의존 합니다. React와 Redux는 함께 UI 업데이트 가 데이터 변경에 반응 하는 반응 형 프로그래밍 패러다임을 구독합니다 . 점점 백엔드가 단순히 API 서버 역할을하여 데이터를 검색하고 업데이트하는 데만 엔드 포인트를 제공합니다. 실제로 백엔드는 데이터베이스를 "전달" 합니다.프론트 엔드 엔지니어가 모든 컨트롤러 로직을 처리하기를 기대합니다. 마이크로 서비스 와 GraphQL의 인기가 높아지면서 이러한 추세가 입증되었습니다.

이제 HTML과 CSS에 대한 미학적 이해 외에도 프론트 엔드 엔지니어는 JavaScript도 마스터해야합니다. 클라이언트의 데이터 저장소가 서버에있는 데이터베이스의 "복제본"이됨에 따라 관용적 데이터 구조에 대한 자세한 지식이 중요해집니다. 실제로 엔지니어의 경험 수준은 특정 데이터 구조를 사용하는 시기 와 이유 를 구별하는 능력에서 추론 할 수 있습니다 .

나쁜 프로그래머는 코드에 대해 걱정합니다. 좋은 프로그래머는 데이터 구조와 그 관계에 대해 걱정합니다.

— Linus Torvalds, Linux 및 Git 제작자

높은 수준에서 기본적으로 세 가지 유형의 데이터 구조가 있습니다. 스택 및 큐 는 항목이 삽입 및 제거되는 방식 만 다른 배열과 유사한 구조입니다. 연결리스트 , 나무 , 그리고 그래프 와 구조입니다 노드 유지 참조를 다른 노드로. 해시 테이블 은 데이터를 저장하고 찾기 위해 해시 함수 에 의존 합니다.

복잡성의 측면에서, Stacks그리고 Queues간단하고 구성 될 수 있습니다 Linked Lists. Trees그리고 Graphs그들이 연결리스트의 개념을 확장하기 때문에 가장 복잡하다. Hash Tables안정적으로 수행하기 위해 이러한 데이터 구조를 활용해야합니다. 효율성 측면에서 연결 목록 은 데이터 기록 및 저장 에 가장 적합 하며 해시 테이블 은 데이터 검색 및 검색 에 가장 적합 합니다.

이유 와 시기 를 설명하기 위해이 문서는 이러한 종속성의 순서를 따릅니다. 의 시작하자!

스택

틀림없이 StackJavaScript 에서 가장 중요한 것은 우리가 실행할 때마다 범위 를 밀어 붙이는 호출 스택 입니다. 프로그래밍 방식 으로 두 가지 원칙적인 작업 : 및 . Push 는 배열 의 맨 위에 요소를 추가 하고 Pop 은 동일한 위치에서 요소를 제거 합니다. 즉, 스택 은“Last In, First Out”프로토콜 (LIFO)을 따릅니다.functionarraypushpop

아래는 Stackin 코드 의 예입니다 . 스택의 순서를 반대로 할 수 있습니다 . 하단이 상단이되고 상단이 하단이됩니다. 따라서 각각 및 대신 배열 unshift및 shift메서드를 사용할 수 있습니다 .pushpop

항목의 수가 증가함에 따라, push/ pop보다는 점점 더 성능이 좋은됩니다 unshift/ shift모든 항목이 후자 그러나 이전하지에 색인화 할 필요가 있기 때문이다.

열

JavaScript는 비 차단 작업 을 지원할 수 있는 이벤트 기반 프로그래밍 언어입니다 . 내부적으로 브라우저 만 관리하는 하나의 스레드를 사용하여 전체 자바 스크립트 코드를 실행하는 이벤트 큐 하는 대기열 과 이벤트 루프를 할 듣고 등록을 위해 . 단일 스레드 환경에서 비동기 성을 지원하려면 (CPU 리소스를 절약하고 웹 경험을 향상시키기 위해) 호출 스택 이 비어 있을 때만 대기열 에서 빼고 실행합니다 . 이 이벤트 기반 아키텍처 에 의존하여 다른 작업을 차단하지 않는 비동기 코드의 "동기식"실행을 허용합니다.listenerseventslistener functions Promises

프로그래밍, Queues두 가지 기본 작업과 단지 배열은 다음과 같습니다 unshift및 pop. 취소] 대기열에의 받는 항목 끝 배열의, 동안 팝 의 대기를 해제 으로부터를 시작 배열의. 즉, 대기열 은 "선입 선출"프로토콜 (FIFO)을 따릅니다. 방향이 반전되면, 우리는 대체 할 수 unshift와 pop와 push와 shift각각.

Queuein 코드 의 예 :

연결된 목록

배열과 마찬가지로 Linked Lists데이터 요소를 순차적으로 저장합니다 . 인덱스를 유지하는 대신 연결 목록은 다른 요소에 대한 포인터 를 유지합니다 . 첫 번째 노드 를 머리 라고 하고 마지막 노드 를 꼬리 라고합니다 . A의 단독으로 링크 된 목록 , 각 노드는 단 하나의 포인터가 다음 노드를. 여기서 머리 는 목록의 나머지 부분을 시작하는 곳입니다. A의 이중 연결리스트 의 포인터 이전 노드는 유지됩니다. 따라서 우리는 꼬리 에서 시작 하여 머리를 향해 "뒤로"걸을 수도 있습니다 .

연결된 목록에는 포인터 만 변경할 수 있기 때문에 상수 시간 삽입 및 삭제 가 있습니다. 배열에서 동일한 작업을 수행하려면 후속 항목을 이동해야하므로 선형 시간이 필요합니다. 또한 연결 목록은 공간이있는 한 커질 수 있습니다. 그러나 자동으로 크기가 조정되는 "동적"어레이조차도 예상치 못한 비용이 발생할 수 있습니다. 물론 항상 트레이드 오프가 있습니다. 연결 목록에서 요소를 조회하거나 편집하려면 선형 시간에 해당하는 전체 길이를 걸어야 할 수 있습니다. 그러나 배열 인덱스의 경우 이러한 작업은 간단합니다.

배열과 마찬가지로 연결 목록은 스택으로 작동 할 수 있습니다 . 삽입 및 제거를위한 유일한 장소 인 헤드를 갖는 것만 큼 간단합니다. 연결된 목록은 대기열 로도 작동 할 수 있습니다 . 이중 연결 목록을 사용하면 꼬리에서 삽입이 발생하고 머리에서 제거가 발생하거나 그 반대의 경우도 가능합니다. 요소의 다수의 경우, 큐를 구현하는이 방법을 사용하기 때문에 어레이 이상이다 확대됨 shift과 unshift어레이의 시작 동작이 다시 인덱스 모든 후속 요소 선형 시간을 필요로한다.

연결된 목록은 클라이언트와 서버 모두에서 유용합니다. 클라이언트에서 Redux 와 같은 상태 관리 라이브러리 는 링크 된 목록 방식으로 미들웨어 로직을 구성합니다. 액션 이 디스패치 되면 리듀서 에 도달하기 전에 모든 것이 방문 될 때까지 한 미들웨어에서 다음 미들웨어로 파이프됩니다 . 서버에서 Express 와 같은 웹 프레임 워크 는 유사한 방식으로 미들웨어 로직을 구성합니다. 때 요청이 수신 될 때까지, 다음에 한 미들웨어 파이프되어 응답이 발생한다.

Doubly-Linked Listin 코드 의 예 :

나무

A Tree는 계층 구조의 많은 하위 노드 에 대한 참조를 유지한다는 점을 제외하면 연결 목록 과 같습니다 . 즉, 각 노드는 상위를 하나만 가질 수 있습니다. 문서 객체 모델 (DOM)은 루트와 같은 구조 노드 그에 나뭇 가지 와 노드, 모든 친숙한에 추가하는 세분] html 태그 . 후드, 아래 프로토 타입 상속 및 구성 반작용 구성 요소 또한 트리 구조를 생성합니다. 물론, DOM의 메모리 내 표현으로서 React의 Virtual DOM 은 트리 구조이기도합니다. htmlheadbody

이진 검색 트리 의 각 노드는 더 이상 가질 수 있기 때문에 특별한없는 두 아이 . 왼쪽 아이 인 값이 있어야합니다 보다 작은 그동안, 또는 부모와 같은를 바로 아이가 이 있어야 더 큰 값을 . 이러한 방식으로 구조화되고 균형을 이루면 각 반복에서 분기의 절반을 무시할 수 있기 때문에 로그 시간 에서 모든 값을 검색 할 수 있습니다. 삽입 및 삭제 는 로그 시간에서도 발생할 수 있습니다. 또한 가장 작은 값 과 가장 큰 값 은 각각 가장 왼쪽 과 가장 오른쪽 leaf 에서 쉽게 찾을 수 있습니다 .

트리를 통한 순회는 수직 또는 수평 절차 에서 발생할 수 있습니다 . 에서, 깊이 우선 탐색 (DFT)의 수직 방향의 재귀 알고리즘은 반복되는 하나 이상의 고급이다. 노드는 pre-order , in-order 또는 post-order 로 이동할 수 있습니다 . 잎을 검사하기 전에 뿌리를 조사해야한다면 사전 주문을 선택해야합니다 . 하지만 뿌리보다 먼저 잎을 탐색해야한다면 주문 후 를 선택해야합니다 . 이름에서 알 수 있듯이 순서대로 노드를 순차적으로 탐색 할 수 있습니다 . 이 속성은 이진 검색 트리를 정렬에 최적으로 만듭니다 .

에서, 너비 우선 탐색 수평 방향 (BFT), 반복적 인 방식은 재귀 하나 이상의 고급이다. 이를 위해서는 a queue를 사용 하여 각 반복에서 모든 자식 노드를 추적해야합니다. 그러나 이러한 대기열에 필요한 메모리는 사소하지 않을 수 있습니다. 나무의 모양이 깊이보다 넓 으면 BFT가 DFT보다 나은 선택입니다. 또한 BFT가 두 노드 사이에서 취하는 경로는 가능한 가장 짧은 경로입니다.

Binary Search Treein 코드 의 예 :

그래프

트리가 둘 이상의 부모를 자유롭게 가질 수있는 경우 Graph. 가장자리 함께 그래프로 접속 노드가 될 수 있음을 지시 하거나 방향성이 가중 또는 비가 중 . 방향과 가중치가 모두있는 간선은 벡터 와 유사합니다 .

Mixins 및 다 대다 관계 를 가진 데이터 개체 형태의 다중 상속은 그래프 구조를 생성합니다. 소셜 네트워크와 인터넷 자체도 그래프입니다. 자연에서 가장 복잡한 그래프는 인간의 뇌로, 신경망 은 기계에 초 지능 을주기 위해 복제를 시도합니다 .

Graphin 코드 의 예 :

TK

해시 테이블

해시 테이블은 사전 형 구조 그 쌍이다 키 에 값 . 각 쌍의 메모리 위치 hash function는 키 를 받아들이고 쌍을 삽입하고 검색해야하는 주소를 반환하는에 의해 결정됩니다 . 두 개 이상의 키가 동일한 주소로 변환되면 충돌이 발생할 수 있습니다. 견고 함을 위해, getters그리고 setters모든 데이터를 복구 할 수 있도록 이러한 이벤트를 예측하고 데이터를 덮어 씁니다 없습니다. 일반적으로 linked lists가장 간단한 솔루션을 제공합니다. 매우 큰 테이블도 도움이됩니다.

주소가 정수 시퀀스라는 것을 알고 있다면 간단히 Arrays키-값 쌍을 저장 하는 데 사용할 수 있습니다 . 더 복잡한 주소 매핑을 위해, 우리는 사용할 수 있습니다 Maps또는 Objects. 해시 테이블에는 평균적 으로 일정한 시간 의 삽입 및 조회가 있습니다. 충돌 및 크기 조정으로 인해이 무시할 수있는 비용은 선형 시간으로 증가 할 수 있습니다. 그러나 실제로는 해시 함수가 충분히 영리하여 충돌 및 크기 조정이 드물고 저렴하다고 가정 할 수 있습니다. 키가 주소를 나타내므로 해싱이 필요하지 않으면 간단한 object literal것으로 충분할 수 있습니다. 물론 항상 트레이드 오프가 있습니다. 키와 값 간의 단순한 대응, 키와 주소 간의 단순한 연관성 은 데이터 간의 관계 를 희생 합니다. 따라서 해시 테이블은 데이터 저장에 적합하지 않습니다 .

트레이드 오프 결정이 스토리지보다 검색을 선호하는 경우 조회 , 삽입 및 삭제에 대한 해시 테이블의 속도와 일치하는 다른 데이터 구조는 없습니다 . 따라서 모든 곳 에서 사용된다는 것은 놀라운 일이 아닙니다 . 데이터베이스에서 서버, 클라이언트, 해시 테이블 , 특히 해시 함수 는 소프트웨어 애플리케이션의 성능과 보안에 매우 중요합니다. 데이터베이스 쿼리 의 속도는 정렬 된 순서 로 레코드를 가리키는 인덱스 테이블을 유지하는 데 크게 의존합니다 . 이러한 방식으로 이진 검색 을 로그 시간 으로 수행 할 수 있으며 특히 빅 데이터의 경우 큰 성능을 얻을 수 있습니다 .

클라이언트와 서버 모두에서 인기있는 많은 라이브러리는 성능을 최대화하기 위해 메모 화 를 사용 합니다. 입력 및 출력 의 기록을 해시 테이블에 보관함으로써 함수는 동일한 입력에 대해 한 번만 실행됩니다. 인기있는 Reselect 라이브러리는이 캐싱 전략을 사용 mapStateToProps하여 Redux 지원 애플리케이션의 기능 을 최적화 합니다 . 사실, 후드, 자바 스크립트 엔진은 또한라는 해시 테이블을 이용하여 힙을 모두 저장 variables하고 primitives우리가 만듭니다. 호출 스택의 포인터 에서 액세스 합니다.

인터넷 자체도에 의존하는 해시 알고리즘 안전하게 기능. 인터넷의 구조는 모든 컴퓨터 가 상호 연결된 장치 의 웹 을 통해 다른 컴퓨터와 통신 할 수 있도록 되어 있습니다. 장치가 인터넷에 로그인 할 때마다 데이터 스트림이 이동할 수 있는 라우터 가됩니다 . 하지만 양날의 검입니다. 분산 아키텍처 수단은 네트워크의 모든 장치에 경청하고 중계하는 데 도움이 데이터 패키지와 변조 할 수 있습니다. MD5 및 SHA256과 같은 해시 기능은 이러한 중간자 공격 을 방지하는 데 중요한 역할을 합니다. HTTPS를 통한 전자 상거래는 이러한 해싱 기능을 사용하기 때문에 안전합니다.

인터넷에서 영감을받은 블록 체인 기술 은 프로토콜 수준에서 웹 구조 를 오픈 소스로 만듭니다. 해시 함수를 사용하여 모든 데이터 블록 에 대해 변경 불가능한 지문 을 생성함으로써 기본적으로 전체 데이터베이스가 웹에 공개 되어 누구나보고 기여할 수 있습니다. 구조적으로 블록 체인은 암호화 해시의 이진 트리의 단일 링크 목록입니다. 해싱은 너무나 비밀 스럽기 때문에 금융 거래 데이터베이스는 누구나 공개적 으로 생성하고 업데이트 할 수 있습니다 ! 놀라운 의미는 돈 자체 를 창출 할 수있는 놀라운 힘 입니다. 한때 정부와 중앙 은행에서만 가능했던 것이 이제는 누구나 안전하게 자신의 통화를 만들 수 있습니다 ! 이것은 Ethereum 의 설립자이자 Bitcoin 의 가명 설립자에 의해 실현 된 핵심 통찰력 입니다.

점점 더 많은 데이터베이스가 개방형으로 이동함에 따라 모든 저수준 암호화 복잡성을 추상화 할 수있는 프런트 엔드 엔지니어의 필요성도 더욱 복잡해질 것입니다. 앞으로의 주요 차별화 요소 는 사용자 경험 입니다.

Hash Tablein 코드 의 예 :

이러한 데이터 구조 등을 사용하는 알고리즘 연습 은 JavaScript 알고리즘 : 40 개의 문제, 솔루션 및 설명을 확인하십시오.

결론

논리가 서버에서 클라이언트로 점점 더 이동함에 따라 프런트 엔드 의 데이터 계층 이 가장 중요해집니다. 이 계층을 적절히 관리하려면 논리가 기반을 둔 데이터 구조를 숙지해야합니다. 하나의 속성에 대한 최적화는 항상 다른 속성을 잃는 것과 같기 때문에 모든 상황에 완벽한 데이터 구조는 없습니다. 일부 구조는 데이터 저장에 더 효율적이고 다른 구조는 검색 성능이 더 뛰어납니다. 일반적으로 하나는 다른 하나를 위해 희생됩니다. 극단적으로 연결 목록 은 스토리지에 최적이며 스택 및 큐로 만들 수 있습니다 ( 선형 시간). 다른 어떤 구조도 해시 테이블 의 검색 속도 ( 일정 시간) 와 일치 할 수 없습니다 . 나무 구조는 중간 어딘가 ( 대수 시간)에 있으며 그래프 만이 자연의 가장 복잡한 구조 인 인간의 뇌 ( 다항식 시간 )를 나타낼 수 있습니다 . 록 스타 엔지니어의 특징 인시기를 구별 하고 그 이유를 명확히 설명 할 수 있는 기술을 보유하고 있습니다.

이러한 데이터 구조의 예는 모든 곳 에서 찾을 수 있습니다 . 데이터베이스에서, 서버, 클라이언트, 심지어 자바 스크립트 엔진 자체에, 이러한 데이터 구조는 본질적으로 무엇인지 구체화 에 와 떨어져 살아있는 "객체"에 실리콘 칩의 "스위치". 디지털 일 뿐이지 만 이러한 사물이 사회에 미치는 영향은 엄청납니다. 이 기사를 자유롭고 안전하게 읽을 수있는 능력은 인터넷의 멋진 아키텍처와 데이터 구조를 증명합니다. 그러나 이것은 시작에 불과합니다. 앞으로 수십 년 동안 인공 지능과 분산 형 블록 체인은 인간이된다는 의미와 우리 삶을 지배하는 기관의 역할을 재정의 할 것입니다. 실존 적 통찰력과 제도적 탈 중개 화는 마침내 성숙 된 인터넷의 특징이 될 것입니다.

보다 공정한 미래로 우리를 전환하기 위해 우리 는 인공 뉴런 의 HeartBank® 채널 네트워크에서 우리 Kiitos 에게 블록 체인에서 돈을 발행 할 수있는 능력과 인간의 상태를 공감할 수있는 능력을 부여합니다. 로부터 익명 덕분에 우리가 포기하고 서면으로받을 Kiitos , Kiitos의 우리에 대해 배운다 친절 함 과 그 효과를 우리의 신체의 자유와 자유를 보존하는 점진적이고 신비로운 과정에서, 우리 사이에 경제적 불평등을 줄일 수있는 방법으로 우리를 보상. 단지 우리가 볼 수 있다면 아마도 자연의 궁극적 인 그래프 구조는 인간의 뇌,하지만 인간의 ❤️없는 심금 우리 모두를 연결합니다.

블록 체인에 관심이 있으 십니까? Ethereum을 배우고 우리를 위해 일하십시오!