전체 글
-
[ JS ] rotate3d 값 얻기Javascript/이론 2023. 2. 8. 13:55
JS를 통해 요소의 rotate3d 프로퍼티를 얻기 위해서 만든 클래스입니다. 1. Constructor constructor에서는 transform property를 얻고자 하는 요소를 parameter로 두었습니다. 따라서 클래스 성성시 요소를 받아 요소의 matrix3d 데이터를 저장합니다. class Transform { constructor(ele) { this.ele = ele; this.matrix3d = window .getComputedStyle(ele) .getPropertyValue("transform") // column priority .split("(")[1] .split(")")[0] .split(",") .map((ele) => Number(ele)); } } 2. Metho..
-
[ JS ] JS에서의 Attribute와 PropertyHTML & CSS/이론 2023. 2. 8. 11:54
자바스크립트에서 attribute와 property는 자주 동일한 의미로 사용되지만 실제론 약간의 차이를 가집니다. 먼저 attribute의 경우 html 문서에 정의된 속성이라 할 수 있으며, 각 속성의 기본값을 제공합니다. 즉, 아래 코드의 input의 경우 type, id, value는 input 요소의 attribute라고 할 수 있으며 정적입니다. property의 경우 attribute에 할당된 현재의 값이며 html dom tree에 정의되어 있습니다. property는 attribute와 달리 js를 통해 조작가능한 동적인 값입니다. 아래 js 코드에서는 input 요소의 value property를 통해 value에 접근하고 변경합니다. const input = document.query..
-
[Computer Graphics] 3D 변환 행렬과 행렬 분해Computer Graphic 2023. 1. 31. 17:27
1. 3D 변환 행렬의 구성 3D 공간에서의 변환은 보통 4x4 매트릭스를 통해 이루어집니다.(homogenous coordinate라고 표현하며 하나의 행렬을 통해 여러 종류의 연산을 나타낼 수 있다는 장점을 가집니다.) OpenGL에서는 아래 이미지와 같이 4x4 매트릭스를 이차원 배열이 아닌 16개의 원소를 갖는 1차원 배열을 통해 구현하며, column-primary layout을 취합니다. 즉, 배열의 첫번째 네 원소가 매트릭스의 첫번째 열(A00 - A03)에 대응됩니다. 3d 변환 행렬은 네 개의 열벡터로 이루어지며,. 앞 부분의 세 열벡터는 rotation과 scale에 대한 정보를, 마지막 열벡터는 translation에 대한 정보를 담고 있습니다. 매트릭스는 각 변환에 대한 정보를 담고..
-
[ 비선형 자료구조 ] 우선순위 큐(Priority Queue) & 힙(Heap)Computer Science/자료 구조 2023. 1. 20. 15:46
1. 우선순위 큐(priority queue) 1) 개념 FIFO 규칙을 따르는 일반적인 큐와는 다르게, 데이터간 우선순위를 할당하고 우선순위에 따른 보다 효율적인 삽입, 삭제등의 연산을 구현한 추상 자료구조를 우선순위 큐라한다. 따라서, 우선순위 큐에선 높은 우선순위를 지닌 요소가 비교적 낮은 요소보다 앞서 디큐, 접근된다. 2) 특징 우선순위 큐는 배열 운영 체제, 네트워크 라우팅 알고리즘, 데이터 압축 알고리즘 등에서 널리 사용되, 연결리스트 등을 이용해 구현 가능하지만 삽입, 삭제 연산의 시간복잡도 측면에서 힙을 사용하는 것이 효율적이기 때문에 일반적으로 힙을 사용해 구현한다. (배열이나 연결 리스트를 사용할 경우 우선순위가 중간쯤 위치한 데이터의 삽입 시 배열의 경우 대상 인덱스 이후의 모든 데..
-
[ 비선형 자료구조 ] 트리 순회Computer Science/자료 구조 2023. 1. 19. 17:36
1. pre-order traversal (전위 순회) [root - 왼쪽 자식 노드 - 오른쪽 자식 노드] 순으로 순회하는 방식이다. 이 방식에 따르면 A-B-D-E-C-F-G 순으로 트리를 순회하며, 자바스크립트로 구현한 코드는 아래와 같다. fucntion preOrder(root) { if (!root) return; console.log(root.data); preOrder(root.left); preOrder(root.right); } 2. in-order traversal (중위 순회) [왼쪽 자식 노드 - root - 오른쪽 자식 노드] 순으로 순회하는 방식이다. 이 방식에 따르면 D-B-E-A-F-C-G 순으로 트리를 순회하며, 자바스크립트로 구현한 코드는 아래와 같다. fucntion ..
-
[ 비선형 자료구조 ] 트리Computer Science/자료 구조 2023. 1. 18. 07:23
트리 1. 개념 트리는 그래프의 한 종류로서 각 노드가 특정 값을 저장하고 하나 이상의 자식 노드에 대한 참조값을 가지고 있는 자료구조이다. 트리를 구성하는 노드들은 계층구조로 이루어져있으며 최상위 노드를 root라 한다. 트리는 일반적으로 파일 시스템, 데이터 베이스, 의사결정 알고리즘 등에서 사용된다. 2. 용어 root : 부모 노드가 존재하지 않는 노드, 최상위 노드 (A) node : 데이터와 다음 노드에 대한 주소값을 저장한 자료구조 leaf : 자식노드가 존재하지 않는 노드, 최하위 노드 (H, I, E, J, K, L) parent : 하나 이상의 자식 노드를 가진 노드 (A, B, C, D, F, G) child : 다른 노드의 자손인 노드 (B, C, D, E, F, G, H, I, J..
-
그래프의 탐색 - BFS, DFSAlgorithm/이론 2023. 1. 11. 17:03
1. 너비 우선 탐색(BFS) 1) 개념 너비 우선 탐색(BFS, Breadth-First Search)란 루트 노드 부터 시작해 인접한 노드를 우선적으로 탐색하는 방법이다. 이름 그대로 넓게 탐색하는 방법이며, 두 노드 사이의 최단 경로를 구하는 문제를 해결하는데 효과적이다. BFS의 구현과 이해는 Queue와 그래프에 대한 이해를 바탕으로 한다. 이에 대한 내용은 아래 글을 참고하면 된다. [ 선형 자료구조 ] 스택(Stack) & 큐(Queue) 1. Stack 1) 개념 스택은 LIFO(last-in-first-out), 즉, 후입선출 원칙을 따르는 선형 자료구조이다. 따라서 데이터의 출입은 한 방향에서만 이루어지고, 이름에 걸맞게 쌓아가는 구조를 가진다. 데이터에 ojhallae.tistory...
-
[ 비선형 자료구조] 그래프Computer Science/자료 구조 2023. 1. 11. 07:15
그래프 1) 개념 그래프는 정점(vertex)와 간선(edge)으로 이루어진 대상 간의 관계를 표현하는 자료구조이다. 2) 용어 정리 정점(vertex) / 노드 : 데이터가 저장되는 공간 간선(edge) / link / branch : 정점을 연결하는 선 인접 정점(adjacent vertex) : 직접 연결된 정점 단순 경로(simple path) : 방복되는 정점/간선 없이 이루어진 경로 차수(degree) : 무방향 그래프에서 하나의 정점에 연결된 정점의 수 진출 차수(out-degree) : 방향 그래프에서 정점을 기준으로 나가는 간선의 수 진입 차수(in-degree) : 방향 그래프에서 정점을 기준으로 들어오는 간선의 수 경로 길이(path length) : 경로를 구성하는 간선의 수 cyc..