Never give up

플러터는 옛날에(?) 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를 완료시켜줄 수 있는 친구입니다 말로는 뭔지 조금 애매하니 예제와 함께 보도록 하겠습니다 본격적으로 시작하기전에 경고문구가 필요할거 같아서 한번 만들어봤습니다 (사실 예제 만들면서 이거 이렇게 쓰면 안되는데.. 하는 생각이 더 많..

기본적으로 우리가 사용하는 Rest API는 클라이언트에서 서버로 요청하는 형태로 단방향으로 클라이언트가 서버를 바라보는 형태인데 그 반대의 경우는 어떻게 처리해야될지 고민하다가 예전에 WebRTC문서를 읽을 때 SSE(Server Sent Event)에 관해 읽었던 기억이 있어서 찾아봤고, 약간 편법같지만 목적에 부합한다 생각해서 한번 예제를 만들어보게 되었습니다 시작하기 전에 무엇을 해결하기 위해 만들어졌을까 하는 생각을 하면서 찾아봤는데 1. 스포츠 중계처럼 서버가 클라리언트를 꾸준히 업데이트 해주지만 양방향 통신이 필요 없을 때 2. 알람을 줄 때 3. 서버가 특정 상황을 기다린 후 데이터를 전송해야될 때 이부분을 해결하기 위해 polling( + long polling), socket, sse ..