공부/etc21 Three.js and TypeScript (2) Udemy의 Three.js and TypeScript 강의를 듣고 정리한 내용을 기록한다.8. Install Three.js Course Boilerplate 부터 9. Scene 까지.Three.js에서 필수적으로 고려해야 하는 3가지: Renderer, Scene, Camera 이다.앞으로의 강의에서는 이 3가지에 대한 개념을 먼저 짚고 넘어갈 것.중간중간 새롭게 등장하는 클래스들이 있는데, 이것들에 대해서도 나중에 살펴볼 것이다. Scene: Three.js에서 렌더링 되는 모든 것들이 존재하는 공간.카메라, 각종 3D 오브젝트들, 빛이 위치하는 공간.Three.js를 사용하기 위해 최소 한 개는 생성해야 할 필요가 있다. Scene 생성Scene 생성자를 통해 생성할 수 있다.import * a.. 2024. 11. 12. Three.js and TypeScript (1) Udemy의 Three.js and TypeScript 강의를 듣고 정리한 내용을 기록한다.1. Introduction ~ 7. Dat GUI 까지 들은 내용이 기록되어있다. 개발환경 구성하기실습 프로젝트 구성으로 Vite + TypeScript 를 사용한다. Three.js 설치yarn add -D three @types/three Three.js 모듈 Import 하기기본적으로 Three.js의 코어 부분은 3D 엔진에서 가장 중요한 컴포넌트들 (렌더러, 카메라, 텍스쳐 등)을 중점적으로 갖고 있다.코어를 가능한 한 작게 유지하고 빠르게 취급하기 위해 다른 모듈들을 별도의 경로에 빼두고 있다.따라서 사용하고 싶은 모듈이 있을 경우 이들을 따로따로 Import 해야 한다.import { OrbitCo.. 2024. 11. 9. 크롬 개발자 도구 코드 붙여넣기 이슈 개발을 하던 와중, 코드에 바로 도입하기 전 확인차 크롬의 개발자 도구 콘솔을 사용해 넣으려던 코드를 실행하려 했었다. 그런데 갑자기 아래와 같은 에러가 뜨며 입력한 코드가 실행되지 않는 현상이 발생했다.Warning: Don't paste code into the DevTools Console that you don't understand or haven't reviewed yourself.(하략) 여태까지는 이런 적이 없었는데? 싶어서 어떻게 해결하는지 알아봄과 동시에, 왜 갑자기 이런게 뜨기 시작했는지? 간단히 알아봤다.크롬의 Self-XSS 경고Self-XSS란? XSS(Cross Site Scripting) 공격은 웹페이지에 부적절한 악성 스크립트가 실행되는 공격이다. 예를 들어, 사이트 내.. 2024. 9. 8. [Electron] Electron에서 코드 변경사항 빠르게 적용하기 (feat. electron-reload) Electron을 사용하며 불편했던 것 중 하나는, 웹 개발을 하던 때와 달리 자동으로 변경사항이 적용되지 않는다는 것이었다. 때문에 코드를 고치고, 이미 열려있는 Electron 창을 닫고, 커맨드 창에서 다시 Electron을 실행하는 불편함이 있었다.이를 개선하기 위한 방법을 알아보고, 실제 적용해본 내용을 공유한다.electron-reload 적용하기 Electron에 자동 리로드를 추가할 때 자주 거론되는 방법. 공식 문서에서 설명하는 사용방법도 비교적 간단하다. 간단하다면 간단한데, 나는 프로젝트에서 타입스크립트를 사용하고 있어서 이런 저런 추가 설정을 더했고, 만족스럽지 못한 부분이 있다. // 설치npm install electron-reload npm 등으로 라이브러리를 설치하면 e.. 2024. 6. 30. [Electron] input이 focus되지 않는 이슈 해결하기 (+ IPC 통신을 곁들여서) 최근에 잠깐 Electron을 써볼 기회가 있었는데, 그 때 접한 이슈 해결방법에 대해 기록한다. 최근 Electron을 사용해 개발을 하던 중 이상한 이슈에 부딪혔다. 그것은 돌연히 input 태그가 먹통이 되면서 아무런 입력이 되지 않는 문제였다. 이 현상은 Electron에서 크롬 개발자 모드를 열거나 잠시 Electron 프로그램 창을 최소화 후 여는 것으로 해결이 되었지만, 매번 이와 같은 문제가 일어났을 때 개발자 모드를 열 수도 없는 노릇이었기에... 원인을 찾아 나섰다. 원인 - window.alert()의 호출 알고 보니 이 이슈는 꽤 오래된 이슈였다.(관련 GitHub 이슈) the input-box lose focus after call window.alert('...') · Is.. 2024. 5. 6. [피그마] 피그마 기능들 정리하기 지난 블로그 글에서, 피그마에서 개인적으로 유용하게 쓰는 기능들을 정리해보겠다고 언급했었다. 피그마를 많이 다뤄보진 않았지만, 다른 사람의 참고가 되었음 하는 마음에 몇 가지를 정리해본다. 컴포넌트(Component) 기능 다양한 곳에서 여러 번 사용되는 컴포넌트를 만들 때 사용된다. 하나의 컴포넌트로 묶으려는 요소들을 모두 선택한 후, 마우스 오른쪽 클릭하여 나오는 메뉴를 통해 컴포넌트를 만드는 것이 가능하다(혹은 맥 기준 Option + Command + K). '중복되는 요소는 그냥 복사 + 붙여넣기로 사용하면 되지 않나?' 라고 생각할 수 있지만, 그럴 경우 컴포넌트의 디자인을 수정해야 할 때 골치아플 수 있다. 복붙한 모든 컴포넌트의 디자인을 수정하던가, 하나를 수정하고 다른 자리의 컴포넌트들 .. 2024. 1. 28. 이전 1 2 3 4 다음
