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 ..

전에 언급한 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하는것과..

이번에는 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 ..

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

axios는 fetch에 비해 여러가지 장점이 있습니다 response timeout 구형 브라우저 지원 json 변환과정 생략 가능 기타 등등 그래서 아마 대부분의 개발자분들이 사용하실텐데 공통적으로 셋팅하면 좋은 부분들을 예제와 함께 준비해봤습니다 src/service/api.ts import axios, { AxiosInstance, AxiosRequestConfig } from "axios"; export default class Api { private instance: AxiosInstance; constructor(baseURL = '', timeout = 30000) { this.instance = axios.create({ baseURL, timeout, }); this.instance...

이전에 html을 pdf로 만드는 간단한 예제는 해봤는데 (https://devmemory.tistory.com/98) 수정 가능한 doc file을 만들어야 될 필요가 있어서 한번 만들어 봤습니다 App.tsx const Main = () => { let text: string const downloadDoc = (e: React.MouseEvent, isDownload: boolean) => { e.preventDefault() if (text === undefined) { const quill = document.querySelector('#div_quill > .ql-editor') text = `${quill?.innerHTML}` } const doc = makeDoc(text, 'test')..