전체 글
-
TIL-2024.03.02 - 3js - 기초 Scene, Camera, renderer> Frontend/ThreeJS 2024. 3. 2. 17:26
import * as THREE from "three"; window.addEventListener("load", () => { init(); }); const init = () => { // SECTION:: SCENE const scene = new THREE.Scene({}); // SECTION:: Camera const camera = new THREE.PerspectiveCamera( 75, //field-of-view > extent of the scene that is seen on the display at any given moment window.innerWidth / window.innerHeight, // aspect ratio > width of the element divide..
-
TIL-2024.03.01 - Three.JS 기초> Frontend/ThreeJS 2024. 3. 1. 21:50
------- Three.JS 기본 구성 요소 1) Scene(화면 구성 요소) > container that holds all the objects, lights, and cameras in a 3D environment. It serves as the canvas where you place your 3D elements. 2) Camera (카메라): 만들어진 scene을 camera에 담음 > The Camera determines the viewpoint through which you observe the scene. > There are different types of cameras, such as PerspectiveCamera and OrthographicCamera 3) Rendere..
-
TIL-2024.02.29 - 알고리즘 - 정렬 알고리즘> 기초/알고리즘 2024. 2. 29. 23:07
------- 정렬 알고리즘 설명: 데이터를 특정한 기준에 따라 정렬하는 알고리즘 종류: 버블 정렬 (Bubble Sort) 선택 정렬 (Selection Sort) 삽입 정렬 (Insertion Sort) 퀵 정렬 (Quick Sort) 합병 정렬 (Merge Sort) 버블 정렬 (Bubble Sort): 인접한 두 원소를 비교하여 순서대로 정렬하는 방식. 시간 복잡도는 O(n^2)로 비효율적인 알고리즘, 구현이 간단. 작은 데이터나 교환 횟수가 적은 경우에 적합. 예제: function bubbleSort(arr) { let len = arr.length; for (let i = 0; i ..
-
TIL-2024.02.28 - 알고리즘 - 다이나믹 프로그래밍> 기초/알고리즘 2024. 2. 28. 21:27
------- 다이나믹 프로그래밍 - 복잡한 문제를 여러 개의 작은 하위 문제로 나누어 해결하는 방법 - 각 하위 문제의 해결책을 저장하고 재사용함으로써 전체 문제의 해결책을 효율적으로 찾아냅니다 - 일반적으로, Bottom Up이 더 시간 효율적 핵심 원리: 중복된 하위 문제(Overlapping Subproblems): - 주어진 문제가 같은 작은 문제를 반복적으로 해결해야 할 때, 이를 중복된 하위 문제라 칭함 - 이러한 문제의 해결책을 한 번만 계산하고, 결과를 저장한 후 필요할 때마다 재사용함으로써 계산 시간을 대폭 감소 최적 부분 구조(Optimal Substructure): - 큰 문제의 최적 해결책이 그 문제의 하위 문제의 최적 해결책에서 파생될 수 있을 때, 이를 최적 부분 구조라 칭함 ..
-
TIL-2024.02.27 - JS - 실행 컨텍스트-4. 렉시컬 환경-3> 기초/Javascript 2024. 2. 27. 22:39
2.1.2 선언적 환경 레코드 생성 - let, const 전역 변수는 선언적 환경 레코드에 등록되고 관리. - let, const 로 선언한 전역 변수는 전역 객체의 프로퍼티가 되지않고, 개념적인 블록 내에 존재하게 되는데. 이를 전역 환경의 선언적 환경 레코드라 함. 2.2. this 바인딩 - 전역 환경 레코드의 내부 슬롯에 this가 바인딩. - 전역 코드에서 this 는 전역 객체를 가리키므로 전역 환경 레코드의 내부 슬롯에는 전역 객체가 바인딩. - 전역 코드에서 this를 참조하면 전역 환경 레코드의 내부슬록에 바인딩되어있는 객체가 반환. 2.3. 외부 렉시컬 환경에 대한 참조 결정 (상위 스코프와의 스코프 체인) - 외부 렉시컬 환경에 대한 참조는 현재 평가 중인 소스코드를 포함함는 외부 ..
-
TIL-2024.02.26 - JS - 실행 컨텍스트-3. 렉시컬 환경-2> 기초/Javascript 2024. 2. 26. 22:27
var x = 1; const y = 2; function foo(a){ var x = 3; const y = 4; function bar(b){ const z = 5; console.log(a + b + x + y + z); // 20 + 10 + 3 + 2 + 5 } bar(10); } foo(20); // 42 ------- 실행 컨텍스트의 생성과 식별자 검색 과정 ? (실행 컨텍스트 생성 및 코드 실행 결과 관리, 실행 컨텍스트를 통한 식별자 검색) 과정/순서: 1. 전역 실행 컨텍스트 생성 2. 전역 렉시컬 환경 생성 2.1. 전역 환경 레코드 생성 2.1.1. 객체 환경 레코드 생성 2.1.2. 선언적 환경 레코드 생성 2.2. this 바인딩 2.3. 외부 렉시컬 환경에 대한 참조 결정 (상..
-
TIL-2024.02.25 - JS - MAP과 예제> 기초/Javascript 2024. 2. 25. 22:55
------- map 객체와의 차이: - Map 객체는 키와 값의 쌍으로 이뤄진 컬렉션. 구분 객체 Map 객체 키로 사용할 수 있는 값 문자열 | 심벌 값 객체를 포함한 모든 값 이터러블 X O 요소 갯수 확인 Object.keys(obj).length map.size 생성: // 기본 생성 const map1 = new Map(['key1','value1'], ['key2','value2']) console.log(map1) // Map(2) {'key1' => value1','key2' => value2'} // 중복된 키 > 덮어써짐 const map1 = new Map(['key1','value1'], ['key1','value2']) console.log(map1) // Map(1) {'key..