5강 재질 (part1 ~ 2) Material은 지오메트리와 함께 Object3D 객체를 생성하기 위한 필수 요소 Object의 세 가지 파생 클래스 (Mesh, Line, Points) 각각을 위한 클래스로 분류되어 제공된다 Material 모든 material 파생 클래스는 부모 클래스인 Material의 속성을 사용할 수 있다 const material = new THREE.MeshBasicMaterial({ // Material의 속성값 (기본값으로 설정) visible: true, transparent: true, opacity: 1, depthTest: true, depthWrite: true, side: THREE.FrontSide, // MeshBasicMaterial의 속성값 color..

시작하기 전에 3차원 공간 상에 놓이는 Object3D의 파생 클래스는 3가지가 있다. Mesh: 삼각형 면으로 구성된 객체 Line: 선형 객체 Points: 점 이 3D 오브젝트가 3차원 공간 상에 놓이기 위해서는 다음 값을 필요로 한다. Position: 위치 Rotation: 회전 Scale: 크기 이 값들은 4x4 크기의 행렬 정보로 변환된다. 목표 xyz 공간 상에 여러 3D 객체를 구성하는 코드를 작성해 본다. 공간 구성에 Scene Graph를 이용한다. 태양과 지구, 달의 자전과 공전을 구현한다. Scene Graph로 3D 공간 구성하기 scene graph를 코드로 작성하는 것 = 3차원 객체를 공간상에 구성한다는 것 ** 화살표는 부모 → 자식을 뜻한다 부모-자식 관계로 각 Obje..

Contributor가 되기로 한 이유 2년 전, 처음 리액트를 접했을 때 닳고 닳도록 읽었던 리액트 공식 문서가 개편되었다. React The library for web and native user interfaces react.dev 주니어라고 하기도 뭐 했던 학부생 시절, 한글로 친절하게 번역되어있는 공식 문서는 든든한 스승님이 되어주었다. 리액트를 주 스택으로 다루는 2년 차 프론트엔드 개발자가 된 지금, 내가 받았던 친절을 돌려주고자 한국어 번역에 참여하였다. 2년 전의 나와 비슷한 개발자들에게 친절한 가이드가 될 수 있도록 최대한 간단 명료하고 자연스러운 어투로 번역하려고 노력했다. 개편된 리액트 공식 문서 내가 맡은 부분은 useCallback 레퍼런스 파트인데, 다른 사람들이 어떻게 번역..

3장 함수 함수는 프로그램의 가장 기본적인 단위이다. 이 장에서는, 의도를 분명하게 표현하는 함수를 만드는 방법 프로그램 내부를 직관적으로 파악할 수 있도록 함수를 쉽게 읽고 이해할 수 있도록 만드는 방법 에 대해서 알아본다. 작게 만들어라! 함수는 작을수록 더 좋다. 그래야 읽고 이해하기 쉬워진다. 조건문, 반복문 등에 들어가는 블록은 한 줄이어야 한다. 즉, 중첩 구조가 생길 만큼 함수가 커져서는 안 된다. 함수에서 들여 쓰기 수준은 2단을 넘어서면 안 된다. 한 가지만 해라! 함수는 한 가지를 해야 한다. 그 한 가지를 잘해야 한다. 그 한 가지만을 해야 한다. 여기에서 ‘한 가지를 한다’가 의미하는 것은 추상화 수준이 하나인 단계만 수행한다는 것이다. 단순히 다른 표현이 아니라 의미 있는 이름으로..

보호되어 있는 글입니다.

3강 Geometry BufferGeometry Geometry는 기본적으로 BufferGeometry를 상속받는다. Geometry의 형상을 정의하기 위한 데이터는 총 6가지이다. Geometry의 형상을 정의하기 위한 데이터 정점: xyz 축에 대한 좌표 정점 인덱스: 3차원 오브젝트의 면을 구성하는 정점에 대한 인덱스 수직 벡터: 정점에 대한 수직 벡터 정점 색상: 벡터 정점의 색상 텍스쳐 맵핑을 위한 UV 좌표 사용자 정의 데이터 3차원 시각화는 이 여섯 가지 데이터가 GPU에 전달되면서 처리된다. ❓UV 좌표란 UV 좌표는 텍스쳐 이미지를 3차원 오브젝트에 입히기 위한 변환 기준. 3D 모델의 표면을 2차원 좌표로 전개하면 UV 좌표가 된다 좌표값은 0 ~ 1 사이의 값만 가질 수 있다. thr..

좋은 이름으로 절약하는 시간은 좋은 이름을 짓기 위해 고민하는 시간보다 훨씬 더 크다. 이 장에서는 이름을 잘 짓는 간단한 규칙을 몇 가지 소개한다. 의도를 분명히 밝혀라 의도가 들어나는 이름은 코드 이해와 변경을 쉽게 만든다. 따로 주석이 필요하다면 의도가 분명하지 않다는 의미다. 이름을 짓기 위해 다음 질문에 모두 답해야 한다. 변수 또는 함수, 클래스의 존재 이유는? 수행하는 기능은? 사용 방법? 예시 // 🔴 Bad const getTheme = (theList: number[][]) => { const list1: number[][] = [[]]; theList.forEach((x) => { if (x[0] === 4) { list1.push(x); } }); return list1; }; 이 ..

Next.js 13 버전에서 추가된 4가지 기능 Next.js 13 버전에서는 App Directory가 추가되었다. 이전 버전에서 pages 폴더에 대응되는 것으로, 다음과 같은 기능을 지원한다. Layouts: state를 유지하고 비용이 많이 드는 리렌더링을 피하면서 라우트 사이에 UI를 쉽게 공유할 수 있음. Server Components: 서버에서 렌더링되는 컴포넌트를 명시적으로 구현할 수 있음. Streaming: 유저는 로딩 상태를 즉시 확인할 수 있으며, UI가 단계적으로 렌더링됨. 원한다면 App Directory 내에 컴포넌트 파일, 테스트 파일, 스타일 파일 등 라우트가 아닌 파일이 존재해도 된다. 이전 버전에서 pages 폴더 안에는 무조건 NextPage Dynamic Rout..