전체 글
-
TIL-2024.03.19 - JS - 이벤트 버블링 & 캡처링> 기초/Javascript 2024. 3. 19. 20:57
목표: 이벤트 캡처링 이벤트 버블링 이벤트 캡처링과 버블링 막는 방법 이벤트 캡처링(Event Capturing): 캡처링은 이벤트가 DOM 트리의 상위 요소에서 하위 요소로 향하는 단계 (상위 > 하위) 이벤트가 발생한 요소의 부모 요소부터 시작하여 해당 요소의 가장 최상위 요소인 document까지 이벤트가 전파. 예를 들어, 버튼 요소를 클릭하면, 이 클릭 이벤트는 가장 상위 요소인 document까지 전파되는데, 이 단계에서 이벤트는 이벤트 리스너에 의해 캡처링 단계에서 포착될 수 있습니다. // index.html Click me // main.js document.getElementById('outer').addEventListener('click', function(){ console.log..
-
TIL-2024.03.18 - Google.com & 변수> 기초/면접 참고자료 2024. 3. 18. 10:27
목표: Google.com을 치면 일어나는 일 Var, Let, Const & 실행 컨텍스트 GOOGLE.COM 을 치면 일어나는 일, 페이지 로딩 과정 구글을 치면 일어나는 일 1. url 창에 주소입력 2. DNS 조회: 도메인 네임을 IP 주소로 전환하기 위해 DNS 서버 조회 (like 전화번호부) 3. IP 주소 획득: IP 주소에 해당하는 브라우저 반환 4. Google 서버 요청: Google 서버 연결 요청 5. 서버 응답: 브라우저 요청을 받고, 웹페이지의 데이터 & 파일 (JS & CSS) 등을 받음 6. 페이지 로딩: 받은 데이터를 해석하여 웹페이지 로딩 연계질문 1. 페이지 로딩 과정 1. 로딩: 웹 페이지 로딩 시, 부라우저는 HTML & CSS 파일을 로드 2. DOM 트리 생성..
-
TIL-2024.03.17 - 3js - 3D 케릭터 만들기 - 2. Raycaster> Frontend/ThreeJS 2024. 3. 18. 01:10
목표: 1.Raycaster 란? 2.Raycaster 적용 Raycaster 란? 설명 레이캐스터는 가상의 광선이 씬(Scene) 안에서 물체와 교차하는지를 감지하는데 사용. 이 광선은 보통 카메라(Camera) 위치에서 특정 방향으로 뻗어나가는 것과 동일. 사용처 마우스 클릭과 같은 상호작용 이벤트 처리: - 사용자가 마우스를 클릭하면, 레이캐스터를 사용하여 마우스 클릭 지점과 씬 안의 객체 간의 교차점을 찾기. - 이를 통해 사용자가 클릭한 객체를 감지하고 해당 객체에 대한 작업을 수행. 충돌 감지(Collision Detection): - 레이캐스터를 사용하여 특정 객체나 지역과 광선이 교차하는지를 감지. - 이는 게임이나 시뮬레이션 등에서 객체 간의 충돌을 감지하고 처리하는 데 사용. 동작 원리..
-
TIL-2024.03.16 - 3js - 3D 케릭터 만들기 - 1> Frontend/ThreeJS 2024. 3. 18. 01:05
목표: gltfLoader를 통한 모델 불러오기 progressive bar - LoadingManager를 사용하여, 3D 모델 불러오는 중, 프로그레시브 바 표현 캐릭터 애니메이션 및 컨트롤 추가 gltfLoader를 통한 모델 불러오기: /*GLTF Loader*/ const gltfLoader = new GLTFLoader(loadingManager); // GLTF 로더를 생성합니다. const gltf = await gltfLoader.loadAsync("./models/character.gltf"); // GLTF 모델을 비동기적으로 로드합니다. const model = gltf.scene; // GLTF 모델의 씬을 가져옵니다. model.scale.set(0.1, 0.1, 0.1); //..
-
TIL-2024.03.15 - 3js - 3D 공간 만들기> Frontend/ThreeJS 2024. 3. 17. 18:03
목표: Cube Map Texture를 활용한 3차원 공간 표현 1.1) Texture Loader 1.2) Cube Texture Loader 360도 Panorama Texture를 활용한 3차원 공간 표현 envMap Cube Map Texture를 활용한 3차원 공간 표현: 1. Texture Loader /* 1. Cube Map Texture 를 활용한 3차원 공간 - 1. TextureLoader */ /* OrbitControls */ const control = new OrbitControls(camera, renderer.domElement); control.minDistance = 5; control.maxDistance = 100; /* Texture Loader */ const t..
-
TIL-2024.03.14 - 3js - Interactive Card - 1. 카드 모형 만들기> Frontend/ThreeJS 2024. 3. 14. 15:37
목표: Card Class Shape Geometry Extrude Geometry Orbit Controls 컨트롤 설정 GSAP을 이용한 애니메이션 구현 Card Class - card.js import * as THREE from "three"; class Card { constructor({width, height, color}) { const shape = new THREE.Shape() const geometry = new THREE.ShapeGeometry(shape); const material = new THREE.MeshStandardMaterial({color, side: THREE.DoubleSide}); // 정면만 렌더링 const mesh = new THREE.Mesh(geom..
-
TIL-2024.03.13 - JS - 엑셀 다운로드 (Excel Download in Vue)> Frontend/JS 2024. 3. 13. 11:15
목표: 버튼을 클릭 시, 저장된 값을 엑셀로 다운로드 하는 기능 1. yarn add xlsx 를 통한 외부 라이브러리 다운로드 (버전 0.18.5) yarn add xlsx@0.18.5 2. template에 button tag 생성하고, fnDownloadExcel를 바인딩 ... 중략 ... 다운로드 ... 중략 ... 3. Script Setup에 fnDownloadExcel , fnExtractProperties 등을 작성 4. 결과
-
TIL-2024.03.12 - 3js - Fonts - 3> Frontend/ThreeJS 2024. 3. 12. 23:46
목표: 마우스 인터렉티브 Shadow 후처리 (EffectComposer) 마우스 인터렉티브: /* Mouse Interaction : 커서의 움직임에 따라 spotLight도 움직임 */ window.addEventListener("mousemove", (event) => { const x = ((event.clientX / window.innerWidth) - 0.5) * 5; const y = -((event.clientY / window.innerHeight) - 0.5) * 5; // ThreeJS 와 y 좌표 다름 spotLight.target.position.set(x, y, -3); }); Shadow: renderer.shadowMap.enabled = true; // 그림자 맵 활성화 ..