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..
GIS 강의 1강 개발 환경 구성 & 2강 기본 구성 요소와 코드 three.js의 기본 구성 요소 Renderer Scene을 화면에 출력해주는 렌더러 Scene 3차원 객체로 구성되는 장면. Light와 Mesh로 구성됨 Light 3차원 형상이 화면 상에 표시되기 위한 광원 Mesh Object3D의 파생 클래스. Geometry와 Material로 구성 Geometry: 형상을 정의 Material: 색상 및 투명도 등을 정의 Camera Scene을 바라보는 시점. 3차원의 Scene은 어느 시점에서 바라보느냐에 따라 다르게 보임. Camera로 이 시점을 정의할 수 있다. PRACTICE: 회전하는 파란색 정육면체 렌더링하기 id가 webgl-container인 div element 안에 3차..
1장. 깨끗한 코드 코드가 존재하리라 코드의 중요성과 역할을 강조한다. 프로그래밍이란, 기계가 실행할 정도로 상세하게 요구사항을 명시하는 작업 코드란, 프로그래밍으로 요구사항을 명시한 결과 궁극적으로 코드는 요구사항을 표현하는 언어 나쁜 코드 나쁜 코드, 즉 깨끗하게 정리되지 못한 코드의 영향을 기술한다. 이 파트를 읽으면서 굉장히 공감이 갔다. 개발자라면 누구나 한 번씩 느껴봤을 고행을 통해 왜 클린 코드가 중요한 지 한 번 더 강조한다. 나중은 결코 오지 않는다 시간에 쫓기다보면 ‘일단 동작만 하도록 짜고, 코드는 나중에 정리하자’라는 유혹에 빠질 때가 있다. 저자는 르블랑의 법칙에 빗대어 이를 날카롭게 꼬집는다. 결국 클린한 코드를 작성하는 원칙을 깊이 새겨놓는 것이 중요하다. 나쁜 코드는 팀의 생..