본문 바로가기

반응형

전체 글

(20)
RN - Native Component 만들기 Native Component 만들기 이번에 RN 프로젝트에 tmap을 붙이는 작업을 하게되었다. tmap api 공식문서를 확인해보니 js(web), java(android), swift(ios), object C(ios)를 지원하고 있어서 js(web)를 통해서 개발할 경우 웹뷰를 띄워서 사용해야해서 native component를 만들어서 사용할 예정이다. Android Android Native UI Components · React Native 공식문서를 참고하여 만들었다. tmap 사이트에 접속하여 jar 파일을 다운로드 받는다. 공식문서의 가이드를 차례로 따라 하면서 sdk를 설치하고 개발준비를 마친다. 공식문서에는 안나와 있지만 android > app > src > main > Andro..
Hackle 사용기 이번에 새로 들어간 회사에서 A/B테스트를 위해 핵클이란 라이브러리르 사용한다해서 처음 접하게 되었다. https://hackle.io/ko/ 핵클: A/B 테스트, 기능 플래그 및 이상 징후 탐지 플랫폼 hackle.io Hackle이란 A/B테스트를 위한 기능 뿐 아니라 다양한 방법으로 사용자 액션을 분석해서 대시보드 형태로 정보를 제공도 해준다. 많은 기능을 제공하는 것 같지만 모든 기능을 전부다 사용하지는 못 했고 간단한 기본 기능만 사용했다. 공식 문서에 사용방법이 자세하게 잘 나와있어서 위 공식문서를 보면서 천천히 따라 했다. 설치방법 npm install --save @hackler/react-native-sdk # or yarn add @hackler/react-native-sdk reac..
RxJS - 연산자 4 유용한 연산자들 sequenceEqual Operator 타이밍에 관계없이, 두 스트림 발행물들의 순서와 값 동일 여부 반환 두 스트림이 끝나는 시점이 달라도 같은 값을 같은 순서로 발행하면 true 를 발행한다. const { from, fromEvent } = rxjs const { sequenceEqual, mergeMap, map, take } = rxjs.operators const num$ = from([3, 1, 4, 7, 5, 8, 2]) const key$ = fromEvent(document, 'keyup').pipe( map(e => Number(e.code.replace('Digit', ''))), take(7), sequenceEqual(num$) ).subscribe(consol..
RxJS - 연산자 3 스트림을 결합하는 연산자들 스트림 결합 연산자 merge : 두 스트림을 순서관계없이 병합 const { merge, interval, fromEvent } = rxjs const { map } = rxjs.operators const interval$ = interval(1000).pipe(map(_ => 'interval')) const click$ = fromEvent(document, 'click').pipe(map(_ => 'click')) merge(interval$, click$).subscribe(console.log) const { merge, interval } = rxjs const { map, take } = rxjs.operators const intv1$ = interval(10..
RxJS - 연산자 2 시간을 다루는 연산자들 시간을 다루는 연산자 1 delay : 주어진 시간만큼 지연 발행 const { interval, fromEvent } = rxjs const { delay, tap, take } = rxjs.operators interval(1000).pipe( take(5), tap(x => console.log(x + ' 발행시작')), delay(1500) ).subscribe(x => console.log(x + ' 발행완료')) 1.5초씩 지연됐다가 차례대로 발행이 완료된다. timestamp : 타임스탬프 const { fromEvent } = rxjs const { timestamp, pluck, map } = rxjs.operators fromEvent(document, 'clic..
React-Hook-Form React Hook Form 사용하기 쉬운 유효성 검사를 통해 성능이 뛰어나고 유연하며 확장 가능한 form입니다. Home 설치 npm install react-hook-form or yarn add react-hook-form 설치시 에러가 날 수 있다 ⇒ react-hook-form이 현재 react 16 or 17 버전만 지원 에러가 난다면 ⇒ 설치 명령어 뒤에 --legacy-peer-deps 옵션을 붙여 준다. 현재는 18버전도 지원 위 라이브러리 없이 form 형식을 구현한다면 각각의 사용자 입력 요소마다 value, errorMsg state가 필요하고 handleFunc이 필요하다. 또한 form요소의 onSubmit 함수에는 각각의 사용자 입력 요소별로 validation check 로..
RxJS - 연산자 1 산수 관련 Operator count, max, min, reduce const { of } = rxjs const { count, max, min, reduce } = rxjs.operators const obs$ = of(4, 2, 6, 10, 8) obs$.pipe(count()).subscribe(x => console.log('count: ' + x)) // 총 몇개가 있는지 갯수를 발행 obs$.pipe(max()).subscribe(x => console.log('max: ' + x)) // 가장 큰 값을 발행 obs$.pipe(min()).subscribe(x => console.log('min: ' + x)) // 가장 작은 값을 발행 obs$.pipe( reduce((acc, x) =>..
RxJS 기초 개념 공부 Reactive X 반응형 프로그래밍 함수형 프로그래밍은 선언형 프로그래밍의 성질을 가진다. 반응형 프로그래밍은 함수형 프로그래밍의 골격을 갖추고 있다. Reactive X는 크게 3 요소로 구성된다. Observable 일련의 값들을 발행한다. 관찰될 수 있는 것, 관찰되는 대상이란 의미이다. Stream은 Observable이 발행하는 연속된 값들의 흐름이다. pipe라는 배관을 타고 흐른다. Operators 연산자 순수함수들 Observer 관찰자 파이프만 쳐다보며 값을 기다리다가 나온 결과로 최종 작업을 실행한다. 반응형 프로그래밍에서 중요한것은 소프트웨어에서 구현하고자 하는 것을 이 스트림 즉, 흐름들로 재해석할 수 있어야 한다. 흐름들을 Observable로 발행하고 나온 데..

반응형