javascript
-
[ JS ] .push()를 통한 배열 업데이트 - Cannot read properties of undefined (reading '0')Errors 2023. 3. 30. 01:03
에러 발생 상황 react 튜토리얼의 tic-tac-toe 제작 중 임의로 [...history, newSquare]을 history.push(newSquare)로 바꾸었을 때 발생 원인 [...history, newSquare]대신 history.push(newSquare)를 사용했으며, history가 초기화 되기 전에 호출되었습니다. [...history, newSquare]을 사용하는 경우 최소한 하나의 요소 이상은 초기화 되어 있으므로 에러가 발생하지 않으며, 추가적으로 조건문을 통한 초기화 여부 확인을 통해 에러를 방지할 수 있습니다.
-
[ 비선형 자료구조 ] heapify & heap sortComputer Science/자료 구조 2023. 3. 5. 02:06
heapify와 heap sort 힙은 모든 부모 노드가 자식 노드 이상(max-heap) 혹은 이하(min-heap)의 값을 가지는 완전이진트리이며, 주어진 배열이나 리스트를 힙 구조로 만드는 연산이 heapify입니다. heap sort는 정렬되지 않은 배열이나 리스트를 heapify 프로세스를 이용해 heap 자료구조로 변환한 뒤 root 노드의 값을 추출해 배열 혹은 리스트에 추가하는 과정을 모든 요소가 정렬될때까지 반복하는 알고리즘 입니다. heapify : 배열이나 리스트를 힙 구조로 재구성하는 연산 heap sort : 힙에서 root값을 반복적으로 추출해 정렬된 배열을 만드는 알고리즘 heapify heapify는 배열을 인자로 받아 힙의 특성에 맞게 재구성시키는 연산입니다. 이러한 hea..
-
[ 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 = docume..
-
[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에 대한 정보를 담고 있습니다. 매트릭스는 각 변환에 대한 정보를 담고..
-
[ 선형 자료구조 ] 연결 리스트 - Doubly Linked List(이중 연결 리스트)Computer Science/자료 구조 2023. 1. 3. 16:47
연결 리스트는 각각의 요소들이 "노드"에 저장되는 선형 자료 구조이다. 각 노드들은 다음 노드에 대한 참조값을 가지며 이를 "링크"라 한다. 이러한 노드들로 이루어진 연결 리스트는 노드의 link filed를 사용함으로써 데이터의 추가 및 삭제를 모든 리스트 인덱스에 대한 방문 및 재구성 없이 실행 가능하다. 연결 리스트는 스택, 큐, 그래프 등을 구현하는데 자주 사용되며, 그 종류로는 Singly linked list, Doubly linked list 등이 있다. 1. 기본 배경 지식 1) Node 연결 리스트를 구성하는 노드는 Data filed, Linke filed 두 가지 필드로 이루어진 묶음이다. Data filed는 node는 integer, character 등 노드가 보유할 실제 데이터..
-
[ 프로그래머스 / JS ] Lv.1 소수 찾기Algorithm/프로그래머스 2023. 1. 1. 19:32
1부터 입력받은 숫자 n 사이에 있는 소수의 개수를 반환하는 함수, solution을 만들어 보세요. 소수는 1과 자기 자신으로만 나누어지는 수를 의미합니다. (1은 소수가 아닙니다.) 제한사항 n은 2이상 1000000이하의 자연수입니다. 풀이 function solution(n) { let arr = new Array(n - 1).fill(2).map((ele, idx) => ele += idx); for (let i = 0; i < arr.length; i++) { if (arr[i] === 0) continue; for (let j = i + arr[i]; j ele).length } 실행에 걸린 최대 시간 : 102.07ms 사고과정 에라토스테네스의 체를 쓰자! 평가 개선점 알게된점 에라소트테네..
-
[ JS ] Date 객체와 메서드Javascript/이론 2023. 1. 1. 19:04
1. 객체 생성 1) 인수 없이 호출 현재 날짜 및 시간이 저장된 객체 반환 let date = new Date(); // Sun Jan 01 2023 17:54:39 GMT+0900 (한국 표준시) // 현재 날짜 및 시간이 저장된 객체 반환 2) 숫자 인수를 전달하여 호출 UTC 기준 1970년 1월 1일 0시 0분 0초에서 date 객체 생성시 전달한 arg 밀리초 후의 시점이 저장된 객체 반환 let date = new Date(24 * 3600 * 1000); console.log(date) // Fri Jan 02 1970 09:00:00 GMT+0900 (한국 표준시) // UTC 기준 1970년 1월 1일 0시 0분 0초에서 date 객체 생성시 전달한 arg 밀리초 후의 시점이 저장된 객..