Never give up

이전 포스트에서 peer와 peer를 연결할 때 signaling server를 이용한다고 했는데 필자는 socket으로 구현을 해봤습니다 const ip = require('ip') const express = require('express'); const app = express(); const server = app.listen(9000, ip.address(), () => { const address = server.address() console.log(`[scoket] on ${address.address}:${address.port}`) }); const io = require('socket.io')(server, { cors: { origin: "*", } }) let userList = ..

최근에 Web RTC를 개발해볼 기회가 생겨서 한번 간단하게 예제를 만들어봤는데 이것저것 설명할 부분, 그리고 node, react, flutter 이렇게 3가지를 구현해서 각각 간단하게(?) 설명드리고자 포스트를 여러개로 나눴습니다 ---- 서론은 여기까지 하고 WebRTC(Web Real-Time Communication)은 별도의 서버를 사용하지않고 peer와 peer가 연결을 해서 음성, 영상 통화 및 데이터 등을 교환할 수 있는 기술입니다 자세한 설명은 MDN을 참고하시길 바랍니다 (링크 : https://developer.mozilla.org/ko/docs/Web/API/WebRTC_API) 먼저 WebRTC로 영상통화 구현을 위해 필요한 지식들은 크게 3가지로 1. STUN(Session T..

화면 이동을 tracking 하는 용도로 사용할 때 RouteObserver를 사용하면 간단합니다 void main() { runApp(MaterialApp( home: const MyApp(), navigatorObservers: [CommonRouteObserver()], )); } MaterialApp의 navigatorObservers에 등록을 해주고 RouteObserver를 상속받은 클래스의 기능을 정의해줍니다 class CommonRouteObserver extends RouteObserver { void _saveScreenView( {PageRoute? oldRoute, PageRoute? newRoute, String? routeType}) { debugPrint( '[track] sc..

먼저 UUID는 범용 고유 식별자로(쉽게 말해 특정 기기의 고유값)으로 개발을 할 때 어떤 기기에 어떤 패키지가 설치되어 있는지 등을 트래킹할 때 사용할 수 있는 고유 값 입니다 이전에 device info plus에서 가져다가 썼었는데, 필요 이상의 데이터를 가지고 왔었고 더군다나 4.0.0버전에서는 가장 필요한 친구(?)를 빼버렸습니다 Breaking change Remove AndroidId getter to avoid Google Play policies violations 구글 정책에 위반되는 부분을 피하려고 한다는데 관련 자료를 검색해보니 광고 ID관련한 부분 문제인거 같습니다 (링크 : https://support.google.com/googleplay/android-developer/ans..

이번에는 리액트로 파일 드래그 앤 드롭을 구현해봤습니다 계속 js만 써왔는데, 나중에 ts도 필요할 수도 있을거 같아서 일단 한번 사용해봤습니다 drag_drop.css /* 드래그 앤 드롭 */ .div_images { padding: 10px; font-size: 0.8em; color: grey; margin: 10px 0 10px 30px; box-shadow: 0 0 5px #cccccc; display: flex; flex-direction: column; justify-content: center; align-items: center; } .div_preview { display: flex; flex-direction: row; justify-content: center; padding: 1..

오늘은 전에 만들었던것들중 하나인 소셜 로그인 부분을 포스트 해보려고 합니다 로그인 별로 개발자 콘솔에서 설정까지 따로따로 포스트 하고 싶지만.. 귀찮아서1 다른 포스트도 밀린게 많아서 하나에 정리해봤습니다 추가로 설정부분은 다루지 않을예정이고, 페이지 디자인한 html과 css는 생략하겠습니다 (생략은 하되 github링크에 포함되어 있습니다) service/social_login.js import util from "util/util"; export default class SocialLogin { // 카카오 로그인 kakaoLogin() { const src = "https://developers.kakao.com/sdk/js/kakao.min.js" let kakaoScript = util.ch..

이번에는 특정 html element를 pdf로 만들어서 활용하는 예제를 만들어봤습니다 먼저 사용한 라이브러리는 2개로 jspdf : pdf를 만들 수 있는 라이브러리 (링크: https://www.npmjs.com/package/jspdf) html2canvas : html element를 canvas에 그려 이미지 파일로 만들 수 있는 라이브러리 (링크: https://www.npmjs.com/package/html2canvas) 찾다보니 html2pdf란 친구(?)도 있는데 9년전 업데이트 그리고 낮은 다운로드수로 일단 사용해보지는 않았습니다. 혹시 필요하신 분들을 위해 (링크: https://www.npmjs.com/package/html2pdf) 최근에 사용중인 라이브러리인데 페이지가 여러장인 ..

최근에 graphql사용하는 곳들이 생기면서 궁금해서 한번 예제를 만들어봤습니다 해당 예제는 apollo server, client로 만들었습니다 apollo-server : https://www.npmjs.com/package/apollo-server apollo/client : https://www.npmjs.com/package/@apollo/client 먼저 노드 서버쪽을 보면 server/index.js const ApolloServer = require('apollo-server').ApolloServer; const resolvers = require('./resolvers/index') const typeDefs = require('./typedefs/index') const server ..