Never give up

화면 이동을 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 ..

해당 포스트는 npx Create-React-App 없이 개발을 해볼 용도로 만들어봤고 정말 기본적인 프리셋(?)만 설정해서 사용하는 방법을 여기저기 찾아보면서 정리해봤습니다 (본 목적은 나중에 헷갈릴 때 찾아볼 용도로...) 1. 폴더를 만들고 내부에서 npm init -y를 입력해서 package.json파일을 만들어줍니다 해당 방법으로 node 프로젝트라는 정의(?)를 해줍니다 2. react, react-dom 설치 React 라이브러리와 DOM과 연결시켜주는 react-dom을 설치해줍니다 3. babel 설치 babel은 transpiler로 es6 이상을 es5 형식에 맞게 변환을 해주는 역할을 합니다 preset-react는 jsx를 js형태로 사용할 수 있도록 해주는 프리셋이고, pre..

간만에(?) 개발하던 웹 소스를 봤는데 createStore가 deprecated되었더군요.. 밑에 내용을 확인해보니 redux toolkit에 있는 configureStore로 하라고 해서 사용법을 찾아봤습니다 (링크: https://redux-toolkit.js.org/) 필자가 사용하던 createStore와 reducer가 configureStore, createSlice로 대체됐습니다 createStore -> configureStore reducer -> createSlice src/store.js import { configureStore } from "@reduxjs/toolkit" import counter from "slices/counter" import dialog from "sli..