본문 바로가기

반응형

프론트엔드

(9)
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..
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로 발행하고 나온 데..
TypeScript Props 설정 타입스크립트를 사용해서 공통으로 사용되는 영역을 컴포넌트화해서 사용하는 경우 컴포넌트의 props 타입을 설정해야 한다. 사용되는 props가 정확하게 정해져 있는 경우도 있지만 어떤 prop이 나중에 추가될지 모르는 경우도 있다. 특히 input, textarea, button 등의 요소에는 많은 속성이 존재하고 필수로 입력해야 하는 속성과 상황에 따라 추가할 수 있는 필수는 아닌 속성이 존재한다. 위와 같은 상황에서 props의 타입을 지정할 때 아래와 같이 설정해줄 수 있다. interface Props { id: string; label: string; name: string; type: string; [key: string]: any; } const Input = ({id, label, name..

반응형