react14 [Babylon.js] Gimzo, GimzoManager를 pub/sub 패턴으로 관리하기 Babylon.js에서 gimzo를 다뤄야 할 때가 있습니다. 서버에서 저장된 메쉬 정보를 불러와 메쉬들을 그려준 뒤, React component에서 메쉬들의 정보를 띄워준다고 가정해 봅시다. 그리고 그 메쉬정보를 클릭하면 해당하는 메쉬에 gizmo가 부착되어야 하는 상황입니다. 이때 State와 GizmoManager를 동기화하기가 꽤 까다롭습니다. 이때 pub/sub 패턴을 적극 활용하면, 손쉽게 gizmo를 관리할 수 있습니다. 먼저 메쉬들과, 선택된 메쉬의 정보가 있는 zustand store를 하나 생성합니다. import { AbstractMesh, Nullable } from "@babylonjs/core"; import { create } from "zustand"; import { su.. 2023. 6. 25. React 좀 더 현명하게 사용하기 이제 프론트엔드 엔지니어로 일을 하게 된 지 경력 1년이 넘었는데, 그동안 알게 된 React에 관련된 편리한 꿀팁들을 작성해 보려 합니다. 지극히 주관적인 의견들이 들어가 있음을 미리 알려드립니다! 1. 재사용성, 확장성이 좋은 atomic component 만들기 어떤 프로젝트를 시작하던 atomic component를 잘 만드는 것은 중요합니다. material UI나 ant design처럼 잘 만들어진 컴포넌트 라이브러리를 사용하기도 하는데, 시간이 좀 들더라도 컴포넌트를 직접 만들어야 할 때가 있습니다. interface CustomButtonProps { text: string; onClick?: () => void; } const CustomButton = ({ text, onClick = .. 2023. 5. 8. 빌드 시 에러가 나는 경우, minify 옵션을 꺼보자. 개발환경에서 프론트엔드 앱을 구축하고, 빌드해보면 예상치 못한 에러들이 발생하곤 한다. 타입스크립트를 사용하여 컴파일 시점에 최대한 에러를 검출하려 해도 외부 라이브러리 등에서 런타임 에러가 발생할 수도 있다. 예컨대, 개발이냐 프로덕션이냐 개발환경에 따라 생성되는 코드가 꼭 같다고 말할 수는 없다. 보통 빌드 시 minify를 통해 파일의 용량을 줄여주는데, 이때 코드가 난독화되기 때문에 에러가 발생한 구문을 보아도 이게 정확히 어떤 코드인지 구분이 어렵다. 이럴 때는 minify 옵션을 끄고 빌드해보면 에러가 난 곳을 쉽게 찾을 수 있다. vite react의 빌드 명령어는 tsc && vite build다. vite build --minify false로 빌드한 후 다시 에러로그를 확인해보자 min.. 2022. 12. 11. [React/Typescript] 라이브러리없이 웹 캐싱 기능 구현하기 React Query같은 라이브러리를 쓰지 않고 내장된 Service Worker API를 통해 간단히 캐싱 기능을 구현할 수 있다. https://developer.mozilla.org/ko/docs/Web/API/Cache Cache - Web API | MDN Cache 인터페이스는 ServiceWorker 의 생명주기의 일부로 캐시 된 Request와 Response를 나타냅니다. developer.mozilla.org Cache 인터페이스들의 메서드는 위의 DOCS에서도 확인이 가능하고, 코드로도 쉽게 확인이 가능하다. 메서드들을 쉽게 사용하기 위해 유틸 함수 몇 개를 만들어보자. //utilities/cache.ts /** * 해당 이름을 가진 스토리지를 반환한다. * 만들어져 있다면, 만들어.. 2022. 10. 5. 이전 1 2 3 4 다음
