Weeeeey Weeeeey

Custom event란 js의 내장 이벤트(click, change...)가 아닌 사용자가 생성한 이벤트 Event / CustomEvent 생성자를 사용해 생성 const selectEvent = new CustomEvent('select', { bubbles: true, detail: '메뉴 클릭이당' }); const itemList = document.querySelectorAll('.item'); for (const item of itemList) { item.addEventListener('click', () => item.dispatchEvent(selectEvent)) } document.addEventListener("select", (e) => alert(e.detail)); //각 ..

Three.js 는 크게 Scene, Camera, Render 로 나뉨 Scene : 렌더링 할 모든 객체와 광원을 저장하는 공간. (Scene이 없다면 어떠한 객체도 표시 못함) Camera: Scene 객체를 어떻게 촬영하여 보여줄 것인지 결정 Render: Scene과 Camera 객체를 넘겨 받아 렌더링 한다. three.js 불러오기 Option1 :install with NPM and a build tool npm init # three.js npm install --save three # vite npm install --save-dev vite npx vite Option2: import from a CDN 2. Scene 생성 렌더링 할 모든 객체와 광원을 저장하는 공간. let sce..

mdn 문서 webGL 용어 정리 Getting started with WebGL - Web API | MDN WebGL은 플러그인을 사용하지 않고 OpenGL ES 2.0 기반 API를 이용하여 브라우저의 HTML canvas에 렌더링하여 3D 웹 콘텐츠 제작을 가능하게 합니다. WebGL 프로그램은 컴퓨터의 그래픽 처리 장치(GPU)에서 developer.mozilla.org OpenGL 2.0 기반 API을 이용하여 브라우저의 HTML canvas에 렌더링하여 3D 웹 콘텐츠 제작을 가능하게 한다. 다른 HTML 요소들과 혼합될 수 있고, 페이지나 배경의 다른 부분과 합성 될 수 있음 아래는 3D그래픽 기본 개념 3D 모델링: 3D 그래픽은 3차원 모델링을 통해 시작합니다. 3D 모델은 공간 내에서..

mdn docs 기본 애니메이션 - Web API | MDN 요소는 자바스크립트로 제어하는 것이므로, 애니메이션도 쉽게 만들 수 있습니다. 복잡한 애니메이션을 만드는 것은 추가 작업이 더 필요하고, 앞으로 그에 대한 페이지도 머지 않아 추 developer.mozilla.org 도형은 한번 만들어 놓으면 그 모습 그대로 있다는 것이 애니메이션 제작 할 때의 제약일 것. 도형을 움직이고자 하면 그 도형이 그러지기 전에 그려진 모든 것을 다시 그려야 함. 기본 단계 캔버스 비우기 - 그리려는 도형이 캔버스를 가득 채우는 것이 아니라면, 이 전에 그려진 모든 도형을 지운다. clearRect() 사용 캔버스 상태를 저장 - 캔버스 상태에 영향을 주는 (스타일 변경, 모양 변형 등의) 설정값을 바꾸려고 하고, ..

mem web docs 는 src,alt 속성이 없다는 점만 제외하면 요소처럼 보임. canvas 요소에는 width와 height 속성만 있음.( 만약 렌더링이 왜곡된 것처럼 보인다면 width,height을 css가 아닌 태그에서 명시적으로 지정해준다.) 대체로 id 속성을 사용해서 스크립트 내에서 구분을 쉽게 해주는 것이 좋다. margin, border 같은 스타일 지정 해 줄 수 있지만 실제 캔버스 위에 그리는 것에 영향 없음. 스타일링 따로 지정 안하면 투명으로 설정되어 있음. (border 지정해주라는) canvas 지원 하지 않는 브라우저에서는 대체 컨텐츠나 이미지 파일 보여주기 가능 current stock price: $3.15 +0.15 canvas는 고정 크기의 드로잉 영역을 생성하..

linear-gradient() CSS 함수 (en-US)는 두 개 이상의 색상이 직선을 따라 점진적으로 변화되는 선형 그라데이션 그림을 생성합니다. 그 결과는 데이터 유형의 객체이며, 이는 의 특별한 종류 중 하나입니다. /* 45도 경사를 기준으로 파란색에서 시작해서 빨간색으로 변화하는 그라데이션 */ linear-gradient(45deg, blue, red); /* 오른쪽 아래에서 왼쪽 위로, 파란색에서 시작해서 빨간색으로 변화하는 그라데이션 */ linear-gradient(to left top, blue, red); /* 색이 중지되는 지점을 명시. 아래에서 위로 시작하여, 파란색에서 시작한 뒤 총 길이의 40% 지점에서 초록색으로 변화하고, 마지막에는 빨간색으로 변화하는 그라데이션 */ li..

수학 함수인 calc(), min(), max(), clamp() 을 사용하면 덧셈, 뺄셈, 곱셈 및 나눗셈이 있는 수학 표현식을 구성 요소 값으로 사용할 수 있다. 1. min(), max() 값의 인수 목록을 제공하고 브라우저는 각각 가장 작은 값/큰 값을 결정 함. eg. min(1rem,50%,10vw)의 경우 브라우저는 상대 단위 중 가장 작은 단위를 계산하고 해당 값을 실제 값으로 사용. 2. clamp()를 사용하러면 (최솟값, 계산할 값, 최대값) 을 입력한다. font-size: max(0.5vw, 50%, 2rem)), calc()와 함께 사용하거나(i.e. font-size: max(calc(0.5vw - 1em), 2rem)), 구성하여 사용할 수 있습니다((i.e. font-siz..

테스트란? 내가 작성한 코드가 내가 의도한 대로 동작하는 지 검사 하는 것 종류 자동화 테스트 - 코드로 작성, 반복적 수동 테스트 - 브라우저에서 직접 접근 Static Test 테스트 도구 - Typescript, exlint 구문 오류와 타입 오류를 감지해 줘서 런타임 에러를 방지 할 수 있다. Unit Test 하나의 함수, 메소드, 클래스, 모듈 등이 의도한 대로 작동하는 지 테스트 input에 대한 올바른 output 테스트 도구 - jest, mocha, react-testing-library Intergration Test 여러 개의 모듈, 컴포넌트 등이 상호작용하며 잘 동작하는지 테스트 비지니스 로직과 연관 된 테스트 도구 - react-testing-library, Enzyme 등 E2..