글

git flow avh 실행 오류

 git flow avh 실행 오류가 발생할 때, $ git flow version /usr/local/Cellar/git-flow-avh/1.12.3/libexec/bin/gitflow-shFlags: line 158: _flags_fatal: command not found /usr/local/Cellar/git-flow-avh/1.12.3/libexec/bin/gitflow-shFlags: line 273: [: too many arguments 1.12.3 (AVH Edition) 검색을 해보니, 해결 방법은 아주 단순했다. $  rm  ~/.gitflow_export $ git flow version 1.12.3 (AVH Edition) 참고, https://hororolol.tistory.com/630?category=862104

adb 실행 중 발생하는 "$ADB_VENDOR_KEYS" 에러

adb 실행 중 발생하는  "$ ADB_VENDOR_KEYS" 에러 This adb server's $ADB_VENDOR_KEYS is not set Try 'adb kill-server' if that seems wrong. Otherwise check for a confirmation dialog on your device. Error while Installing APK 단말의 개발자 모드 연동에 문제가 발생한 것으로, 단말의 설정에서, 개발자 모드의 연결 정보를 삭제하고 다시 연결하면 된다. 즉, 케이블을 빼고, USB 디버깅 권한 승인 취소를 누르고,  USB 디버깅을 끄고 다시 켠다. 그리고 다시 케이블을 연결하면, 연결을 허용하고 디버깅을 허용하겠다는 말이 나온다.

NPM/Yarn script를 Platform(Windows, macOS, linux 등)으로 구분하여 동작하기

 NPM/Yarn script를 Platform(Windows, macOS, linux 등)으로 구분하여 동작하기 Platform이 다르면, 호출 명령이 차이가 있는 경우가 있고, path delimeter('⧵', '/') 문제가 종종 발생한다. - package.json ... "script": { "build": "cd android && ./gradlew assembleDebug", // Platform별로 하려면 "build.windows": "cd android && .\\gradlew assembleDebug", // Windows "build.macOS": "cd android && ./gradlew assembleDebug", // macOS "build.linux": "cd android && ./gradlew assembleDebug", // linux ... }, ... 위에서, "npm run build"를 Windows 에서 호출하면,  ... '.'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 와 같은, 오류가 발생하게 된다. 반대로, macOS/Linux에서는 문제 없이 실행될 것이다. 이를 문제 없이, Windows에서 호출하려면, "npm run build.windows"처럼 해줘야 하는데, 이는 굉장히 불편하고 복잡하다. 이를 해결하기 위해서, 좋은 방법 중 하나가, " run-script-os "를 사용하는 것을 추천한다. 아래와 같이 하면 된다. 1. run-script-os를 추가 (global ("...

React Native APK/AAB (Android) build script 추천

React Native APK/AAB (Android) build script RN에서 APK/AAB를 생성할 때, 여러 실패 끝에 나름대로 별 탈없이 진행할 수 있는 것은 아래와 같았다. APK 생성 전 - "android/app/src/main/res"에서 이전에 build 과정에서 생성된 파일을 삭제한다. npx rimraf android/app/src/main/res && git checkout HEAD~1 android/app/src/main/res * git을 사용하기 때문에, 위와 같은 잔꾀를 부렸다. 단, push되지 않은 파일은 삭제되버리기  때문에, 주의해야 한다. bundle 생성 react-native bundle --platform android --dev false --entry-file ./index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res * #2번으로 바로 하게 되면, APK내 이미지가 포함되지 않는 문제를 이르킨다. APK 생성 cd android && ./gradlew assembleDebug --stacktrace * AAB를 생성하기 위해서는, 아래와 같이 하면 된다. cd android && ./gradlew bundleDebug --stacktrace * 굳이, "--stacktrace"를 쓸 필요는 없다.

Xiaomi 70mai 블랙박스

Xiaomi 70mai 블랙박스 이 글은, 한국 재품들을 까기 위해서가 아니라, 가격에 걸맞는 완성도와 과도하지 않은 가격의 형성을 바라는 마음으로 쓰는 것이다. 최근에 차를 새로 구입하면서, 직접 설치할 까하는 고심하던 중에, 결국 신차 패키지 란 덤터기(일명 바가지) 로 인해, 틴팅과 블랙박스를 함께 하게되어, 70mai 블랙박스를 입양보내기 전에 그간의 소뇌에 대해 기술하게 되었다. 나는 전방은 70mai Dash Cam Pro(d05)와 후방은 70mai Smart Dash Cam (Midrive d01) 를 가지고 있다. 이렇게 구성한 이유는, 1번 가격 측면 (어줍잖은 한국산 제품이 3, 4 ~ 50만원대를 유지), 2번 기능 측면 (이 가격에 있을 것 다 있고, 기능적 허상-QHD 등, 실상 전혀 필요없는 오버스펙(over-spec)에 의한 가격 뻥튀기-이 있고), 3번 내구성 측면 (한번도 고장이나거나, 이상 동작하거나 하지 않음), 때문이다. 국산 제품들에 간간히 실망하는 지점은, 그 기능에 대한 하드웨어에 대한 과도한 오버스펙과 그를 통한 과도한 금액, 실상 까보면, 본판은 중국산-ODM, OEM-인 경우도 많기 때문이다. 그럼에도 불구하고, 내구성과, 소프트웨어 디자인 측면에서도 솔직히 구리다. 난 70mai 제품 2개를 10만원 남짓을 마련해서, 메모리 San Disk Ultra 64G 로 구성했다.  L자형 전선, 깔끔한 체결 부위 및 메모리 삽입부가 제품의 훌륭한 완성도를 보여준다. 심지어 유리에 붙이고 떼어 낼때, 틴팅에 상처나, 찌꺼기가 남지 말라고, 추가로 투명 스티커까지 제공해주고 있다. 그럼 장점만 있나? 아니다. 단점도 있다. 한국어가 안된다. 음성 안내가 한국어가 아니고 영어다. (중국 내수용은 중국어, 하지만, 영어로 변경 가능) UI가 한국어가 아니다. (중국 내수용은 중국어, 하지만, 영어로 변경 가능하고, 글로벌 버전은 일어도 가능) 그런데, 실제 이것이 문제가 되지 않는다. 그렇지만, 최소한 중국어는 쉽게 ...

React에 Redux 대신 Effector를 써보자!

React에 Redux 대신 Effector를 써보자! " Effector "가 react-material-ui-datatable에서 사용되는 것을 보고, 이것은 무엇일까 싶어서, 한번 훌터봤다. 개인적인 소감으로는 Redux보다 훨씬 직관적이고, 코드(파일 구성 및 코드 생성)가 간결했다. 우선, Redux로 counter 예제를 구현했다. 같은 코드를 Effector로 구현했다. 동작 상황을 확인하기 위해,  Redux에는 reducer에 console 로 log를 출력했다. 대신, Effector에는 "watch"를 이용하여 출력했다. 이부분도 훨씬 간결하다. (혹시, Redux 출력이 잘못이라면, 지적 부탁한다.) 코드를 보자면, "event 생성 -> store 생성, 필요하면 watch -> component에 event 등록"으로 이뤄져 있고, Redux 대비, 파일의 분화, store의 추적 등이 용이합니다. import React from "react" ; import { createEvent , createStore } from "effector" ; import { useStore } from "effector-react" ; const increment = createEvent ( "increment" ); const decrement = createEvent ( "decrement" ); const resetCount = createEvent ( "reset count" ); const counter = createStore ( 0 ) . on (increment, count => count + 1 ) . on (decre...

Next.js에서 자연스러운 Page Transition 방법

Next.js에서 자연스러운 Page Transition 방법 react-spring  과 "next-page-transitions"을 이용한 두가지 방법을 아래와 같이 예제로 구현했다다. 아래는, react-spring을 사용한 예제이다. 조금 시간을 두고 기다리면 결과를 볼 수 있다. 여기에서, "About", "Hello Day" 등을 클릭하면, 화면(page)이 겹치며(overlapped) 바뀌는 것을 알 수 있다. 아래는, Next.js의  Page Transition 은 " react-transition-group " 사용한 예제이다. 차이가 구분이 되는가? 둘다, 비슷해보이지만, next-page-transitions은 실제로 화면이 겹쳐지지 않고, 앞 페이지가 사라짐과 동시에 뒷 페이지를 나타내게 되어서 실제 DOM이 교체되어 버리기 때문에, 겹치며 사라지는 기능이 아니다. 반면, react-spring을 사용한 예제는, 앞 페이지가 뒷 페이지가 나타나서도 일시적으로 존재하는 구조로 되어, 겹치며 사라지는 화면을 구현할 수 있다. 실제 겹치며 사라지는 형태가 아니라, 페이지의 fade-in/out 정도와 같은 animation으로 충분하다면, 무엇을 사용하든 큰 문제가 되지 않는다. * 출처 - react-spring:  https://codesandbox.io/s/react-spring-nextjs-routes-q80c6 - next-page-transitions:  https://github.com/zeit/next.js/tree/canary/examples/with-next-page-transitions