Frontend

재질, side - Mesh의 앞 뒷면

Mesh의 앞 뒷면, side side 속성은 메시의 어느 면이 렌더링될지 결정하는 옵션이다. side는 메시의 앞면(front), 뒷면(back), 또는 양면(both)을 렌더링할 수 있도록 설정할 수 있다. 기본적으로는 앞면만 렌더링된다.  THREE.FrontSide (기본값)메시의 앞면만 렌더링한다.앞면은 메시의 노멀 벡터가 향하는 방향을 말하며, 일반적으로 메시의 바깥쪽이다.속도와 성능 면에서 유리하다.THREE.BackSide메시의 뒷면만 렌더링한다.메시의 노멀 벡터와 반대 방향을 향하는 면(일반적으로 안쪽)을 렌더링한다.때로는 내부를 볼 수 있는 특정한 효과나 필요한 시각적 연출을 위해 사용된다.THREE.DoubleSide메시의 앞면과 뒷면 모두를 렌더링한다.양면을 모두 렌더링하기 때문에,..

재질, flatShading - 각지게 표현

flatShading 속성  // MeshPhongMaterial, 상대적으로 덜 사실적 const material1 = new THREE.MeshPhongMaterial({ color: "orangered", shininess: 800, flatShading: true }); // MeshStandardMaterial, 고품질의 사실적인 렌더링 const material2 = new THREE.MeshStandardMaterial({ color: "orangered", roughness: 0.2, metalness: 0.3, flatShading: true }); flatShading 속성은 평면 셰이딩(Flat Shading)을 활성화할지 여부를 결정하..

React Router: push와 replace의 차이점

history.push와 history.replace는 둘 다 React Router에서 경로를 변경할 때 사용하는 메서드지만, 동작 방식에 중요한 차이가 있다.  1. history.push역사 기록에 새로운 항목을 추가한다.사용자가 새로운 페이지로 이동한 것처럼 브라우저의 뒤로 가기 버튼을 통해 이전 페이지로 돌아갈 수 있다.history.push('/new-route');s  특징브라우저의 기록 스택에 새로운 항목을 추가하기 때문에, 사용자가 뒤로 가기 버튼을 눌렀을 때 이전 페이지로 돌아갈 수 있다.페이지 탐색을 할 때 일반적으로 사용하는 방식이다.  2. history.replace현재 페이지의 URL을 대체한다.역사 기록을 덮어쓰기 때문에 브라우저의 뒤로 가기 버튼으로는 대체하기 전의 페이지로..

useLazyQuery, GraphQL 쿼리를 즉시 실행하지 않고 필요할 때 호출

useLazyQueryhttps://www.apollographql.com/docs/react/data/queries/#manual-execution-with-uselazyqueryuseLazyQuery는 Apollo Client에서 제공하는 React 훅으로, GraphQL 쿼리를 즉시 실행하지 않고, 필요할 때 호출할 수 있는 방법을 제공해 준다.일반적인 useQuery는 컴포넌트가 마운트 될 때 자동으로 쿼리를 실행하지만, useLazyQuery는 사용자가 명시적으로 실행할 때까지 대기하는 차이가 있다.  useLazyQuery를 사용할 때는 다음과 같은 형태로 사용된다:const [getQueryResult, { loading, data, error }] = useLazyQuery(MY_QUERY..