구현 동기 필수값, 글자수 제한, 이메일 형식, 전화번호 형식 등 간단한 검사만 필요하다. 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줄 정도인 파일로도 커다란 시스템을 구축할 수 있다. 일반적으로 큰 파일보다 작은 파일이 이해하기 쉽다. 신문 기사처럼 작성하라 신문 기사의 흐름을 보면 첫 문단에 전체 기사 내용을 요약한다. 글을 읽어 내려갈수록..

6강 사용자 정의 지오메트리 three.js가 제공하는 지오메트리 외에도 직접 정의하는 지오메트리를 만들어보자 geometry는 three.js에서 BufferGeometry 클래스를 통해 정의한다. BufferGeometry에 정의할 수 있는 속성 position: geometry를 구성하는 3차원 좌표에 대한 정점(Vertex) normal: 각 정점에 대한 수직 벡터 color: 각 정점에 대한 색상 uv: 각 정점에 대한 텍스쳐 맵핑 좌표 Vertex index: position 속성으로 지정된 정점에 대한 인덱스 배열 mesh를 구성하는 면의 최소 단위는 삼각형이고 이 삼각형은 3개의 정점으로 구성된다. 이 삼각형을 구성하는 3개의 정점에 대한 position 속성에서의 정점 인덱스 번호가 Ve..

5강 재질 part4 - 텍스쳐2 [three.js] Material에 텍스쳐를 입혀보자 5강 재질 part3 - 텍스쳐 map 속성 텍스쳐 객체를 지정하면 지오메트리의 표면에 지정된 텍스쳐의 이미지가 옷처럼 입혀짐 메쉬의 모든 material에 적용할 수 있다 텍스쳐 객체 이미지나 동영상 등을 tech-hayo.tistory.com 저번 시간에는 Material의 map 속성으로 이미지를 텍스쳐로 만들어 입히고, 이 텍스쳐의 여러 가지 속성을 다뤄보았다. 이번 시간에는 다양한 map을 통해 더 세밀하게 텍스쳐를 고도화하는 방법을 배워본다. 준비하기 연습하기 전, 사용할 텍스쳐 이미지를 준비해야 한다. 여기에서 텍스쳐 이미지를 다운로드한다. [Glass Window 002 Glass Window 002..

핵심 요약 주석이 필요하다는 것은 코드가 명확하게 짜여있지 않다는 뜻이다. ⇒ 주석을 잘 작성하는 것보다 코드의 표현력을 개선해서 주석을 제거하려고 노력하는 것이 바람직하다. 주석으로 나타내려는 설명을 함수나 변수로 표현하라. 코드가 이미 표현하고 있는 정보를 주석으로 중복 설명하지 마라. 소스 코드 관리 시스템이 줄 수 있는 정보를 주석으로 표현하지 마라. 주석 근처에 있는 코드에 대한 정보만 기술하라. 전역적인 정보나 다른 위치에 있는 코드에 의존하는 정보는 기술하지 않는다. 4장 주석 주석을 사용하는 이유는 코드로 의도를 표현하지 못했기 때문이다. 주석은 순수하게 선하지 못하다. 프로그래머들이 주석을 유지하고 보수하기란 현실적으로 불가능하기 때문이다. 따라서 주석은, 거짓말을 자주 한다. 오래될수록..

5강 재질 part3 - 텍스쳐 map 속성 텍스쳐 객체를 지정하면 지오메트리의 표면에 지정된 텍스쳐의 이미지가 옷처럼 입혀짐 메쉬의 모든 material에 적용할 수 있다 텍스쳐 객체 이미지나 동영상 등을 통해 생성된다 TextureLoader를 통해 변환할 수 있다 UV 좌표 텍스쳐 맵핑은 지오메트리에 UV 좌표로 맵핑되어 있다. 0과 1 사이의 값을 가진다. U: 수평 방향에 대한 축, V: 수직 방향에 대한 축 three.js의 uv 좌표 (0,0)은 좌측 하단이고, (1,1)은 우측 상단이다. PRACTICE: MeshStandardMaterial에 텍스쳐 적용하기 가장 많이 사용되는 MeshStandardMaterial에 적용해 보자 이미지로 텍스쳐 객체 생성하기 이미지가 네트워크에서 성공적으..