Never give up

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

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

마지막으로 완성된 예제와 삽질 포인트 그리고 깃헙 링크와 함께 마무리 하도록 하겠습니다 필자가 작업하면서 마주친 삽질 포인트 1. 상대방의 media가 연결이 안될 때 iceCandidate가 잘 연결되었는지 확인이 필요합니다 sveltekit으로 개발할 때, npm run을 했을 때 서브된 ip가 여러개가 나온것을 확인했습니다 정상적으로 하나의 ip에서 작동되고 있는지 확인이 필요합니다 2. 소리가 echo처럼 울릴 때 본인의 미디어 사운드를 끕니다 안그러면 계속해서 울리고 더 심해지면 귀가 아파질 정도였습니다.. 3. media 를 전달 하거나 전달 받을 때, on/off할 때 media를 track하는 부분에 조금 더 신경을 써야됩니다 turn on/off과정에서 이전 track을 확실하게 초기화 ..

먼저 사용한 패키지는 3가지입니다 1. flutter_webrtc : webRTC를 사용하기 편하도록 개발해놓은 패키지 2. socket_io_client : 소켓연결 3. vibration : 전화 온것같은 효과(?) 여기서 상태관리는 어디있냐 라는 의문이 들 수 있는데 해당 예제에서는 기본으로 제공하는 setState, ValueListenableBuilder로 구현했습니다 main.dart import 'package:flutter/material.dart'; import 'package:web_rtc/view/webrtc_main_view.dart'; void main() { runApp(const MaterialApp(home: WebRTCMainView())); } models // iceCa..

web은 svelte로 개발하고 react로 옮겨서 다시 작업을 했습니다 하다보니 svelte가 정말 편하구나.. 싶었던 순간이 많았던것 같습니다 상태관리 라이브러리는 사용하지 않았고 socket io로 소켓 통신을 처리했습니다 src/main/index.tsx import React from "react"; import useWebRTCHook from "src/hooks/useWebRTCHook"; import BtnArea from "./BtnArea"; import CallPopup from "./CallPopup"; import UserListArea from "./UserListArea"; import VideoArea from "./VideoArea"; import styles from '...