💻 개요 Re-rendering 은 리액트 가 컴포넌트를 새로운 데이터로 업데이트 하는 과정으로, 이 과정이 있어야 에플리케이션을 사용자의 행동(버튼 클릭 등)에 반응하게끔 만들 수 있습니다. 이 글에서는 re-rendering 이 발생하는 이유와 불필요한 re-rendering 을 막을 수 있는 기본적인 방법 몇가지를 살펴보겠습니다. 💻 컴포넌...

💻 문제 React 와 같은 프론트엔드 개발도구는 뷰(view) 를 구성하는 도구이기 때문에, 원칙상 view 와 연관되어 있는 코드(view code) 만 존재해야 합니다. 하지만, view 와 연관되어 있지 않는 코드(non-view code) 가 존재하게 되면 서비스의 규모가 커짐에따라 가독성이 떨어지게 되고, 유지보수도 어려워 지게됩니다. ...

💻 개요 React Query 는 현재 서버 상태(Server State) 를 관리하기 위한 라이브러리로 많이 사용되고 있습니다. 이 글에서는 React Query 가 무엇이며, 사용하기 위해 기본으로 가지고 있는 설정값과 알아야할 용어들에 대해 살펴보겠습니다. 💻 React Query 란? React Query 는 비동기 상태 관리자(Async...

💻 Ray Casting 이란? Ray Casting 은 가상의 광선(ray)을 쏴서, 어떤 물체와 교차하는지 확인하는 기술입니다. 해당 기법을 사용하여, 충돌 감지, 물체의 선택 및 상호작용, 가려진 면 판별등을 구현할 수 있습니다. 💻 Raycaster 만들기 Raycaster( origin : Vector3, direction : Ve...

Primitive Geometry 를 이용하여 만들기 어려운 모델들은 3D 에디터를 활용하여 만든 후, 임포트해야 합니다. 이 글에서는 모델의 형식 및 특징과 모델을 불러오는 방법을 살펴보겠습니다. 💻 형식(확장자) 3D 모델의 확장자의 종류는 다양합니다. 여러종류의 포멧들을 몇가지 기준으로 분류하면 다음과 같습니다. 3D 에디터 ...

💻 그림자를 만드는 원리 three.js 에서는 그림자를 만들기 위해 Shadow Map 을 이용합니다. Shadow Map 이란 그림자 정보를 저장할 texture 를 의미하며, 만들어지는 과정과 이를 이용해 그림자를 렌더링하는 과정은 다음과 같습니다. scene 을 렌더링하기 직전에, light 의 시점에서 렌더링을 먼저 합니다....

three.js 사용하는 light 는 Object3D 를 상속받은 Light 클래스를 상속받습니다. Light 의 종류와 특징을 살펴보겠습니다. 💻 AmbientLight AmbientLight(color: Integer, intensity: Float) AmbientLight 는 scene 안에 있는 모든 mesh 들 에게 균일하게 적...

💻 material 이란? Material 은 물체의 시각적 특성(색상, 광택, 반사, 불투명도 등)을 결정짓는 역할을 합니다. 💻 material 의 종류 three.js 에는 여러종류의 material 이 있으며, 각각의 material 들은 Material 클래스를 상속받습니다. 따라서 material 끼리 공통된 속성이 존재합니다. Ma...

💻 texture 란? texture 는 보통 geometry 의 표면을 감쌀 수 있는 이미지를 의미하며, 보통 포토샵과 같은 프로그램으로 만듭니다. 여러 종류가 존재하며, 각 texture 마다 geometry 에 적용되는 효과가 다릅니다. 💻 texture 종류 👨‍💻 Albedo (Diffuse / Color) Albedo 는 가장 흔한 ...

💻 Geometry 란? three.js 에서 geometry 는 3차원 공간에서의 좌표들을 의미하는 정점들(vertices)과 그 정점들을 연결해 만든 삼각형 모양의 면(face)들로 이루어진 모양(shape) 입니다. 보통 geometry 는 mesh 를 구성하지만, 점으로 된 도형을 구성할 수도 있습니다. 또한 하나의 정점(vertex)은 좌표...

크기를 지정해주지 않은 canvas 는 300 X 150 의 크기를 기본값으로 갖습니다. 뷰포트를 채우게끔 canvas 크기를 조정하는 두가지 방법을 살펴보고, 각 방법들에서 반응형으로 동작할 수 있게 구현하는 방법을 살펴보겠습니다. 💻 뷰포트(viewport) 채우기 👨‍💻 CSS 만 활용하기 <canvas class="canvas"&gt...

three.js 에는 여러가지 종류의 Camera 가 있습니다. 대부분의 Camera 는 Object3D 를 상속받으며, Camera 클래스는 추상 클래스(abstract class) 입니다. 💻 PerspectiveCamera PerspectiveCamera 는 원근투영(perspective projection)을 사용하는 camera 입니다. ...

💻 애니메이션의 원리 사람이 움직이는 물체를 볼때, 초당 평균 150장의 스냅샷(snapshot) 을 찍은 후 해당 사진들을 연결시켜 움직인다고 인식하게 됩니다. 애니메이션에서는 이 스냅샷들은 프레임(frame)이라고 정의합니다. 왼쪽에서 오른쪽으로 위치를 이동하는 물체가 있다고 가정해 보겠습니다. 앞에서 언급했듯이, 물체를 이동시키기 위해서는 매...

💻 Transform 속성 CSS 의 transform 속성 값으로 translate, scale, rotate 를 지정해 줌으로써 이동, 확대/축소, 회전의 효과를 줄 수 있습니다. three.js 도 CSS 와 마찬가지로 비슷한 효과를 낼 수 있습니다. three.js 의 Object3D 클래스를 상속받는 모든 객체들(mesh, camera 등...

💻 WebGL 이란? WebGL (Web Graphics Library)은 OpenGL 에 기반한 웹 표준 API로, 해당 API를 사용하여 canvas 에 2D 나 3D 그래픽을 렌더링할 수 있습니다. WebGL 을 사용한 코드는 GPU 상에서 병렬적으로 처리되어 성능면에서 뛰어나다는 장점이 있습니다. 💻 Render Pipeline Web...