Camera는 Scene의 모습을 사용자에게 어떤 위치와 어떤 각도로 보여줄 것인지 결정합니다. 일반적으로 Camera( ) 객체 자체로 선언하지 않고 이를 상속받은 하위 camera 객체들로 선언합니다.PerspectiveCamera( )원근감에 의한 투시가 적용되어, 사람이 보는 눈과 동일한 시야를 제공하는 카메라입니다.import * as THREE from 'three';const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);fov 화각. 증가할수록 카메라에 담기는 영역이 많아집니다.aspect가로/세로 비율입니다. 일반적으로 화면의 비율과 맞추기 위해 window.innerWidth / window.innerHeight로 설정합니다..

Scene은 물체, 광원, 카메라 등 사용자들에게 보여질 모든 요소를 담는 배경공간입니다.import * as THREE from 'three';const scene = new THREE.Scene();속성값속성값기능입력값기본값background전체적인 배경색상 : THREE.Color(hex)또는텍스쳐 : THREE.Texture( )nullbackgroundBlurriness배경 흐림float (0 - 1)0backgroundIntensity배경 텍스쳐의 세기float1backgroundRotation배경 회전Euler(0, 0, 0)environment환경 매핑THREE.Texture( )nullenvironmentIntensity환경 색상 세기float1environmentRotation환경 매..

Three.js는 3차원 입체 구조를 2차원 캔버스를 통해 사용자에게 보여주는 역할을 합니다.이를 위해서는 몇가지 요소가 필요합니다. 우선 보여줄 사물들을 담아 둘 특정한 공간(Scene)이 필요합니다. 그리고 이 공간을 사용자가 화면으로 볼 시야를 제공해줄 카메라(Camera)가 있어야 하고, 이 공간을 카메라에 비치는 2차원 이미지로 바꿔주는 기능(Renderer)까지 있어야 사용자가 3차원 공간을 볼 수 있습니다.1. SceneScene은 3차원 물체들이 들어갈 공간 그 자체입니다. 미리 정의된 Scene( ) 객체를 통해 선언할 수 있습니다.import * as THREE from 'three';const scene = new THREE.Scene();Scene에는 Camera를 포함하여 광원, ..

Tailwindcss의 theme은 사용자가 직접 색상, 글꼴, 크기 등을 지정하여 변수처럼 사용할 수 있게 하는 기능입니다. 이렇게 정의된 변수를 theme variable이라고 합니다. Theme은 기본적으로 css 파일(보통 최상단인 index.css에 작성합니다)에서 다음과 같이 선언함으로서 사용할 수 있습니다.@theme { --[분류]-[variable 이름]: [variable 값];} 분류에는 색상, 글꼴 등 스타일의 종류가 들어가며, 이름은 자유롭게 설정이 가능합니다. 예를 들어 다음과 같이 설정할 수 있습니다.@theme { --color-main: #3a4578; // 색상 : main = #3a4578 --text-size-title: 7...

Zustand는 프레임워크 독립적인 상태관리 라이브러리중 하나입니다. Store라는 개념을 이용하여 불필요한 props전달을 최소화합니다. 다음과 같이 설치합니다.npm install zustand ※ Zustand는 현재 프레임워크 독립 라이브러리이나, 처음에는 React 전용 라이브러리로 개발되었습니다. 따라서 아래는 React를 기준으로 서술하였습니다.create( )Store를 생성하는 함수입니다. 속성값과 메소드를 포함한 객체를 반환하며, Store 안에서 속성값은 State, 메소드는 Action이라고 표현합니다. 기본적으로 set과 get 두 가지 매개변수를 받습니다. get 함수는 자기 자신 Store 객체를 반환합니다. set 함수는 Store의 값을 설정할 수 있습니다. 만약 인수로 콜..

Prop Drilling일반적으로 애플리케이션을 구성할 때는 다음과 같이 최상단의 App 컴포넌트부터 시작해 하위 컴포넌트를 포함시키는 구조를 사용합니다. 그런데 만약 최상단의 App 컴포넌트와 최하단의 Comp3 컴포넌트가 같은 상태값을 공유하여 사용해야 한다면, Comp1를 통해 해당 값은 props로 전달해주어야 합니다. 이 과정에서 Comp1은 불필요한 props가 늘어나게 됩니다. 하위 컴포넌트인 Comp3과 Comp5가 상태값을 공유하는 경우에도 동일하게 불필요한 props 전달이 이루어집니다. 이렇게 컴포넌트 간 공유해야 하는 상태값이 많아질수록, 자신은 사용하지 않으면서 넘겨주어야 하는 props의 수가 많아지게 됩니다. 이렇게 불필요한 props가 많아지는 현상을 Prop Drilling..

Tailwind CSS는 CSS-in-JS 프레임워크의 일종으로, CSS 대신 클래스명을 제공하여 간단한 문자열 만으로도 HTML 스타일이 구현되는 유틸리티 우선 CSS 프레임워크(utiliy-first-css framework)입니다. Tailwind CSS의 장점이라고 하면 기존의 많은 분량을 차지하는 CSS 스타일을 극단적으로 줄여 코드를 가볍게 만들 수 있다는 것입니다. this is css style this is tailwind style 단점은, 스타일이 커질수록 가독성이 떨어진다는 것입니다.const inputLineStyle = ` border-b border-gray bg-transparent text-2xl text-gray w-full h-16 p..

Solid-Meta와 Solid-Router를 사용합니다.App.tsximport Pages from './pages';const App: Component = () => { return ( );};/Pages/index.tsxconst Pages = () => { return ( {/* ... */} )}export default Pagesindex.tsx 파일이 있다면 다른 곳에서 Pages 폴더만 호출해도 index.tsx가 기본 파일로 호출되기 때문에, Pages 컴포넌트를 불러올 수 있습니다.