Frontend

Cypress testing libray 설치

Cypress testing libray 설치https://testing-library.com/docs/cypress-testing-library/intronpm install --save-dev cypress @testing-library/cypress  설치 후 Element 사용 가능react testing Libray에서 사용했던 getByText와 같은 걸 사용해 element를 가져 올 수 있다.getByText, getByRow, getByContainer를 사용할 수 있게 된다.  types에 추가하기// cypress/tsconfig.json{ "compilerOptions": { "allowJs": true, "baseUrl": "../node_modules", "ty..

Cypress, 실제 사용 환경에 가까운 테스트

CypressCypress는 Jest가 아닌 mocha를 사용한다.웹 애플리케이션을 테스트하기 위한 JavaScript 기반의 엔드투엔드(E2E) 테스팅 프레임워크이다.컴퓨터에 설치되는 데스크톱 응용 프로그램으로 브라우저에서 실행되는 모든 것에 대한 빠르고 쉽고 안정적인 테스트를 도와준다.브라우저에서 사용자의 동작을 흉내 내어 실제 사용 환경에 가까운 테스트를 할 수 있게 해준다.https://www.cypress.io/  설치npm install cypress다운로드하는데 시간이 약간 길 수 있음  프레임워크 열기npx cypress open반드시 [name].cy.ts 의 형태를 준수cypress open 해서 테스트 파일을 읽어 올 수 있다.  cypress를 typescript로 구성하기// cy..

Raycaster, 클릭한 Mesh 감지하기

마우스 이벤트 추가const mouse = new THREE.Vector2();/* 이벤트 */window.addEventListener("resize", setSize);canvas.addEventListener("click", (e) => { console.log("📢 [ex02_eventClick.js:85]", e);});// 이벤트 콘솔 결과PointerEvent { clientX: 300, clientY : 200}마우스로 클릭한 위치 표시 - clientX, clientY  threejs에 맞게 좌표를 변환해야 한다./* 2D 화면상의 마우스 위치 만들기 */const mouse = new THREE.Vector2();/* 이벤트 */window.addEventListener("resiz..

Raycaster, 특정 방향의 광선(Ray)에 맞은 Mesh 판별하기

(준비) Line으로 선 만들고 메쉬 배치하기 Geometry를 이용해 광선을 시각적으로 보기레이캐스터에서 쏘는 광선은 눈에 보이지 않기 때문에 시각적으로 보이도록 광선과 동일한 위치에 geometry를 이용해 광선 그리면 된다.   /* Mesh 만들기 : Geometry를 이용해 광선을 시각적으로 보기 */ // 선의 시작점과 끝점을 정의 const lineMaterial = new THREE.LineBasicMaterial({ color: "yellow" }); const points = []; points.push(new THREE.Vector3(0, 0, 100)); // 모니터 바깥 방향 (화면에서 앞쪽) points.push(new THREE.Vector3(0, 0, -100));..