Never give up

최근에 이미지 사이즈 처리용도로 개발 해놓은 유틸을 만들었고 정리 + 포스팅용도 예제코드를 간단하게 만들어봤습니다 예제 필요없이 변환 부분만 필요하신 분들은 바로 아래 util부분만 확인하시면 되겠습니다 src/utils/imageResizeUtil.ts export interface ImgSize { width: number; height: number; } export interface ImgInfo extends ImgSize { src: string; } const imageResizeUtil = () => { const readImageInfo = async (img: File | string): Promise => { if (typeof img === "string") { const size ..

플러터는 옛날에(?) package를 올려봤는데 웹 개발 시작하고 나서 라이브러리도 한번 만들어보고 싶다 라는 생각으로 이것저것 개발해봤는데 상대적으로 오래돼서 그런지 주제를 정하기가 쉽지 않았던거 같습니다 전 회사에서 개발하면서 라이브러리로 만들려고 했었던걸 미루다 미루다 이제야 업로드하게 되었습니다 서론이 길었는데 라이브러리 명은 feat에 적어놓은 것처럼 userevent-tracker입니다 (링크 : https://www.npmjs.com/package/userevent-tracker) 말 그대로 유저 이벤트를 트래킹 하는데 현재 페이지 이동 여부, 클릭, os, browser info 등등을 수집하고 있고 이 데이터들을 서버에 저장해놨다가 통계에 사용하면 좋을거 같습니다 현재 로컬 스토리지에 저..

전에 언급한 Fiber를 한번 사용해봤는데 생산성이 어마어마하게 올라갈 수 있겠다는 생각이 들었습니다 그럼 바로 예제로 들어가보겠습니다 index.tsximport { Canvas } from "@react-three/fiber";import React from "react";import Box from "./Box";import Camera from "./Camera";const FiberExample = () => { return ( );};export default FiberExample;Fiber에 정의되어있는 Canvas 태그 내부에 Camera, light, Box(mesh) 등을 넣어주면 되는데 scene에 add하는것과..

GLTF는 크로노스 그룹에서 만든 표준으로 모델, 애니메이션, 바이너리, 텍스쳐 등을 지정해주는 파일 포맷으로 json 형태로 되어있는 파일입니다(링크 : https://ko.wikipedia.org/wiki/GlTF) 크로노스 그룹에서 샘플로 만들어놓은것을 토대로 한번 예제를 만들어봤습니다(샘플 : https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0) use_gltf.tsimport { useEffect, useRef } from "react";import * as Three from "three";import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";imp..

이번에는 mesh에 이벤트를 넣어주는 작업을 해봤는데 html에서 사용하던 onClick이나 mouseEnter 같은 이벤트를 따로 걸어줄 수 없어서 eventListener를 걸어서 사용했고, 3d에서는 조금 더 복잡한 방법으로 사물의 위치를 추적해야되는거 같습니다 그래서 raycaster를 사용할텐데 자세한 내용은 아래 링크를 참고해주세요(링크 : https://threejs.org/docs/#api/en/core/Raycaster) 화면부분은 간단한 div에 ref만 할당하는 부분으로 동일합니다 use_raycasting.tsimport { useEffect, useRef } from "react";import * as Three from "three";const useRaycasting = () ..

이번에는 계기판을 한번 만들어봤는데 계기판을 영어로 뭐라 표현하면 좋을까 고민하다가 그냥  게이지로 했습니다 index.tsximport React, { useEffect } from 'react';import util from 'src/util/common_util';import CommonBtn from 'src/components/common_btn/common_btn';import { useGauge } from 'src/custom_hooks';const Gauge = () => { const { ref, setValue, resetCamera } = useGauge(); useEffect(() => { const interval = setInterval(() => { ..

Three.js를 다시 시작한 기념(?)으로 간단한 예제들로 시작을 했고 추후에 참고가 되기를 바라며 포스팅을 시작합니다(사실 필자가 까먹을거 대비용으로..) 먼저 공홈에 나와있는 기본 예제+@를 시작으로 하면서 개념들을 집고 넘어갈 예정입니다(기본 예제 링크 : https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene) index.tsximport React from 'react';import { useBasic } from 'src/custom_hooks';const BasicExample = () => { const { ref } = useBasic(); return ( );};export ..

오늘은 Dart에서 사용하는 Completer를 typescript에서도 사용해봤습니다 (dart completer 링크 : https://api.flutter.dev/flutter/dart-async/Completer-class.html) 공식 문서에 따르면 A way to produce Future objects and to complete them later with a value or error 이 친구를 간단하게 설명하자면 내가 원하는 시점에 다른 곳에서 Promise를 완료시켜줄 수 있는 친구입니다 말로는 뭔지 조금 애매하니 예제와 함께 보도록 하겠습니다 본격적으로 시작하기전에 경고문구가 필요할거 같아서 한번 만들어봤습니다 (사실 예제 만들면서 이거 이렇게 쓰면 안되는데.. 하는 생각이 더 많..