9강 그림자 three.js는 동적으로 그림자를 렌더링 할 수 있다. 내부적으로 텍스쳐 맵핑을 통해 그림자를 위한 이미지를 생성하고, 이 이미지를 이용해 그림자를 시각화 해보자. 그림자를 렌더링하기 위한 세 가지 객체 설정 1. Renderer 객체 renderer.shadowMap.enabled = true 2. 광원 그림자를 제공하는 광원 DirectionalLight PointLight SpotLight 이 광원들은 모두 shadow.camera 속성을 갖는다. 이 속성이 그림자에 대한 텍스쳐 이미지를 생성하는 데 사용된다. 그림자를 줄 것인지에 대한 여부를 다음처럼 설정할 수 있다. light.castShadow = true; // 활성화 3. 모델 그림자를 표현하는 모델에 다음 코드를 추가한다...
자료 추상화 구현을 감추기 위해서는 추상화가 필요하다 Getter와 Setter가 아닌, 추상 인터페이스를 제공해 사용자가 구현을 모른 채 자료와 핵심을 조작할 수 있어야 한다. 자료를 세세하게 공개하기보다는 추상적인 개념으로 표현하는 편이 좋다 자료/객체 비대칭 객체와 자료 구조의 정의는 본질적으로 상반된다. 객체: 추상화 뒤로 자료를 숨긴 채 자료를 다루는 함수만 공개한다. 자료 구조: 자료를 그대로 공개하며 별다른 함수는 제공하지 않는다. 사소해 보이지만 이 차이가 미치는 영향은 매우 크다. 예제를 통해 둘의 차이점을 자세히 알아보자 도형 클래스를 자료 구조로 구현 - 절차적인 도형 class Square { topLeft: Point; side: number; } class Rectangle { ..
8강 카메라 카메라는 Camera 클래스를 상속받는다. 두 가지 종류가 있다. PerspectiveCamera: 원근감(거리감)을 표현한다. 가까이 있는 물체가 멀리 있는 물체보다 상대적으로 크게 보이도록 렌더링 OrthographicCamera: 원근감(거리감) 없이 표현한다. 물체의 원래 크기대로 렌더링된다. 이 두가지 카메라의 차이점을 알아보자 PerspectiveCamera 카메라를 정의하기 위해서 4개의 인자값이 필요 **절두체: 4개의 값을 통해 구성된 (아래 그림의 연두색) 육면체 이 절두체 안에 존재하는 물체가 카메라를 통해 보여지고 화면에 렌더링된다. fovy: 절두체 높이 방향의 각도 (단위: degree) aspect: 절두체 가로 길이를 세로 길이로 나눈 비율 zNear, zFar:..
구현 동기 필수값, 글자수 제한, 이메일 형식, 전화번호 형식 등 간단한 검사만 필요하다. joi나 yup 같은 외부 라이브러리 없이 구현하고 싶다. (복잡한 기능은 필요 없다.) 메서드 체이닝을 직접 구현해보고 싶다 이러한 동기로 입력의 유효성을 검사하는 유틸리티를 직접 구현해 보기로 했다. 요구사항 메서드 체이닝으로 체이닝 된 순서대로 유효성을 검증한다. 확장성을 위해 직접 정의한 메서드로 유효성을 검증할 수 있어야 한다. 입력 필드 컴포넌트에서 입력 시마다 유효성을 자동으로 검증한다. 구현하기 Validator 클래스 유효성을 검증하는 Validator 클래스를 생성한다. 클래스의 메서드로 유효성을 검증하는 로직을 구현한다. 각 메서드는 항상 this를 리턴해서 체이닝이 가능하도록 한다. type ..
7강 광원 AmbientLight, HemisphereLight: 환경광, 주변광 DirectionalLight, PointLight, SpotLight, RectAreaLight: 단순한 주변광이 아닌 빛의 방향성을 가지는 광원 생성자에서 광원의 색상과 세기를 받음 준비하기 광원을 이해하기 위한 연습에 사용할 Scene을 다음 씬그래프로 구성한다. AmbientLight scene에 존재하는 모든 물체에 대해서 단일 색상으로 렌더링 되도록 한다. Usage: 대부분의 경우 세기값을 매우 약하게 지정해서 장면에 추가하여 광원의 영향을 받지 못하는 물체도 살짝 보이도록 하는 데 사용된다. HemiphereLight AmibientLight와는 다르게 빛에 대한 색상값이 하나가 아니라 두 개이다. 하나는 위..
1차 스프린트 목표 우리는 유기견 봉사 및 커뮤니티 플랫폼 웹 서비스 출시를 목표로 프로젝트를 진행하고 있다. 우리 팀은 디자이너 1명, PM 1명, 프론트엔드 개발자 3명, 백엔드 개발자 2명으로 이루어져 있다. 개발 기간은 5월 28일부터 8월 5일까지이고, 이 기간을 총 3개의 스프린트로 나누어 진행하기로 하였다. 1차 스프린트 기간: 2023.5.28 ~ 2023.6.18 (총 3주) 작업 범위 공통 컴포넌트 개발 랜딩 페이지 로그인/회원가입 - 개인 봉사자 로그인/회원가입 - 보호소 파트너 보호소 정보 수정 TPM.. 그게 뭔데 다른 개발 팀원보다 경력이 있고 스타트업에서 주도적으로 일도 해봤고 시간적 여유도 있고 등의 이유로 TPM을 맡게 되었다. TPM이란 게 굉장히 생소했지만 다음과 같은 ..
5장 형식 맞추기 프로그래머는 깔끔한 형식에 맞춰 코드를 짜야한다. 코드 형식을 맞추기 위한 규칙을 정하고 이를 착실히 따라야 한다. 필요하다면 규칙을 자동으로 적용하는 도구를 활용한다. 이 장에서는 코드를 깔끔하고, 일관적이며, 질서 정연하게 형식을 맞추는 방법에 대해 알아본다. 형식을 맞추는 목적 코드는 사라질지라도 개발자의 스타일과 규율은 사라지지 않는다. 코드 형식은 의사소통의 일환이며, 코드의 가독성은 앞으로 바뀔 코드 품질에 큰 영향을 미친다. 적절한 행 길이를 유지하라 대부분 200줄 정도인 파일로도 커다란 시스템을 구축할 수 있다. 일반적으로 큰 파일보다 작은 파일이 이해하기 쉽다. 신문 기사처럼 작성하라 신문 기사의 흐름을 보면 첫 문단에 전체 기사 내용을 요약한다. 글을 읽어 내려갈수록..