본문 바로가기
반응형

JavaScript71

[Javascript] Treeview 트리뷰 작업을 하다 보면 메인메뉴 또는 사이드 메뉴를 꾸며야하는 경우가 있다. 물론 기존에 만들어진 Plugin이나 module들을 받아서 적용시키면 간편하게 구현할 수 있겠지만 이 포스트에서는 간단히 Treeview를 만드는 코드를 보여주려고 한다. 구현할 때 고려해야할 점은 두가지다. 1. 클릭이벤트 캐치 2. toggle() 메소드 사용 아래 코드를 참고하기를 바란다. 1. HTML Tree View Simple TreeView Click on the arrow(s) to open or close the tree branches. Continent Europe Africa Asia Western Asia Southeast Asia Eastern Tea South Korea Japan China 2. JS .. 2023. 11. 27.
[Javascript] 정렬(2) - 버블 정렬 (Bubble sort) 1. 버블 정렬(Bubble Sort) 단순히 인접한 두 원소를 확인하여, 정렬이 안되어 있다면 위치를 서로 변경 서로 인접한 두 원소를 비교하는 형태가 거품과 같다고 하여 붙여진 이름 시간 복잡도 O(N²)로 비효율적인 정렬 알고리즘 중 하나 1-1. 동작방식 각 단계에서는 인접한 두 개의 원소를 비교하여, 필요시 위치를 변경 첫째와 둘째를 비교, 둘째와 셋째를 비교하는 방식 한 번의 단계가 수행되면, 가장 큰 원소가 맨 뒤로 이동 따라서, 그 다음 단계에서는 맨 뒤로 이동한 데이터는 정렬에서 제외 * 각 단계를 거칠 때마다 가장 큰 값을 하나씩 확실하게 결정하는 것으로 이해할 수 있다. 1-2. 시간 복잡도 최악의 경우 시간 복잡도 O(N²)을 보장 이미 정렬된 배열에 대해서 모든 비교가 필요하므로,.. 2023. 11. 27.
[Javascript] 정렬(1) - 선택 정렬(sorting) 1. 선택정렬 (selection sort) 매 단계에서 가장 작은 원소를 선택해서 앞으로 보내는 정렬 방법 앞으로 보내진 원소는 더 이상 위치가 변경되지 않는다. 시간 복잡도 O(N²)로 비효율적인 정렬 알고리즘 중 하나 1-1. 동작 방식 각 단계에서 가장 작은 원소 선택 현재까지 처리되지 않은 원소들 중 가장 앞의 원소와 위치를 교체 1-2 시간 복잡도 매 단계에서 가장 작은것을 선택하는 데에 약 N번의 연산이 필요 (선형 탐색) 결과적으로 약 N개의 단계를 거친다는 점에서 최악의 경우 O(N²)의 시간 복잡도를 가진다. ex) 정렬할 배열 2 4 3 1 9 8 6 7 5 1단계 1 4 3 2 9 8 6 7 5 2단계 1 2 3 4 9 8 6 7 5 3단계 1 2 3 4 9 8 6 7 5 4단계 1.. 2023. 11. 27.
[Javascript] 자료구조 - 그래프(Graph) 그래프(Graph) 사물의 정점(vertex)과 간선(edge)으로 나타내기 위한 도구 그래프는 두가지 방식으로 구현 1. 인접 행렬(adjacency matrix) : 2차원 배열을 사용하는 방식 (각각 노드에서 노드로 움직일 때 드는 비용) 인접행렬 - 무방향 무가중치 그래프 모든 간선이 방향성을 가지지 않는 그래프를 무방향 그래프라고 한다. 모든 간선에 가중치가 없는 그래프를 무가중치 그래프라고 한다. 무방향 비가중치 그래프가 주어졌을 때 연결되어 있는 상황을 인접 행렬로 출력 인접 행렬 - 방향 가중치 그래프 모든 간선이 방향을 가지는 그래프를 방향 그래프라고 한다. 모든 간선에 가중치가 있는 그래프를 가중치 그래프라고 한다. 방향 가중치 그래프가 주어졌을 때 연결되어 있는 상황을 인접 행렬로 출.. 2023. 11. 24.
[Javascript] 자료구조 - 트리(Tree), 우선순위 큐(Priority Queue) 트리(Tree) : 가계도와 같이 계층적인 구조를 표현할 때 사용할 수 있는 자료구조 트리 용어 정리 루트 노드(root node) : 부모가 없는 최상위 노드 단말 노드(leaf node) : 자식이 없는 노드 트리에서는 부모와 자식 관계가 성립 형제관계가 존재 - 루트 또는 부모가 같을때 같은 층에 존재하는 노드와의 관계 깊이(depth) : 루트 노드에서의 길이 길이 : 출발 노드에서 목적지 노드까지 거쳐야 하는 간선의 수 트리의 높이(height)는 루트 노드에서 가장 깊은 노드까지의 길이 이진 트리(Binary Tree) - 최대 2개의 자식을 가질 수 있는 트리 포화 이진 트리(Full Binary Tree) - 리프 노드를 제외한 모든 노드가 두 자식을 가진 트리 완전 이진 트리(Comple.. 2023. 11. 24.
[Javascript] 자료구조 - 큐(Queue) 큐(Queue) : 먼저 삽입된 데이터가 먼저 추출되는 자료구조 => 탐색 활용빈도에서 많이 사용 연결리스트로 큐 구현 큐를 연결리스트로 구현하면, 삽입과 삭제에 있어서 O(1)을 보장할 수 있다. 연결 리스트로 구현할 때는 머리(head)와 꼬리(tail) 두개의 포인터를 가진다. 머리(head) : 남아있는 원소 중 가장 먼저 들어온 데이터를 가리키는 포인터 꼬리(tail) : 남아있는 원소 중 가장 마지막에 들어온 데이터를 가리키는 포인터 삽일할 때는 꼬리 위치에 데이터 추가 삭제할 때는 머리 위치에서 데이터 삭제 큐 동작 속도 비교 (배열 vs 연결 리스트) 다수의 데이터를 삽입 및 삭제할 때에 대해 수행 시간을 측정 단순히 배열 자료형을 이용할 때보다 연결 리스트를 사용할 때 수행 시간 관점에서.. 2023. 11. 24.
반응형

티스토리툴바