개발
-
React Native: 공유 기능 구현하기, Share Component개발/리액트 네이티브 2021. 3. 5. 00:30
안-녕. 오늘은 공유하기를 만들어볼거야. share()라는 메서드를 이용하면 뚝딱 만들뚜이떠! share()에게 필요한 인자는 2개인데 content, options야. options은 써도되고 안써도되고... 🔸 바인드 시킬 버튼을 만들어보까 onShare()}>공유하기 '공유하기'를 클릭하면 onShare가 동작하게 해놨어. 🔸 이제 onShare를 만들꼬얌 const onShare = async () => { try { const result = await Share.share( { message: '공유에 보이는 메세지 이거를 복붙할 수도 있엉!', } ); if (result.action === Share.sharedAction) { if (result.activityType) { console..
-
React Native: 상태표시바 커스텀하기 (안드로이드, IOS)개발/리액트 네이티브 2021. 3. 4. 22:40
안녕! 오늘은 안드로이드 상태표시줄에 대해 알아볼거야! 상태표시줄, Status bar IOS는 상태표시줄 배경색 개념이 없지만 안드로이드는 지원해. (문제는 안드로이드'만' 지원을 한다는거 😂) IOS와 안드로이드에서 통일성있게 상태표시줄을 컴포넌트화 해보자. iPhone X, XS, XR +++에서 상태 표시 줄 배경색을 변경하려면 React Native의 SafeAreaView 구성 요소를 사용해야합니다. 따라서 iOS의 경우이 튜토리얼은 iPhone X 이하의 장치 (iPhone 8, 7, 6, 5 등)에서만 작동합니다. 1️⃣ src/styles/StatusBar.tsx import {View, StatusBar} from 'react-native'; const StatusBarComponent..
-
React Native Window 설치기개발/리액트 네이티브 2021. 3. 3. 01:19
CMD는 관리자 권한으로 실행 Chocolatey - 설치: @"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin" - 설치 확인: choco –version Nodejs - 설치: choco install -y nodejs.install - 관리자 모드로 CMD 재실행하고 버..
-
React Native: Rendering Base64 images with 'react-native-canvas'개발/리액트 네이티브 2021. 2. 14. 16:10
react-native-canvas handleCanvas = (canvas) => { const ctx = canvas.getContext('2d'); var img = new Image(); img.src = `data:image/jpeg;base64,${this.state.imageURI}` img.onLoad = function() { ctx.drawImage(img, 0, 0, 100, 100); } } Have you tried using addEventListener()? react-native-signature-canvas 링크 npm install --save react-native-signature-canvas base64 관련 속성: dataURL string default is ""..
-
BDD 방법론 예제개발/방법론 2021. 1. 30. 14:31
애자일 소프트웨어 개발 방법론에서 가장 널리 쓰이는 것들 - BDD(Behaviour-Driven Development) - TDD(Test-Driven Development) 테스트 케이스에 User Story 기법과 유사함. 그냥 쭉 읽어나가는 스토리 같은 자연어에 가깝게 작성 1. 행위를 표현할 수 있는 스토리 작성 2. (실패하는) 모든 스토리를 실행 3. 스토리 실행을 위한 첫 번째 스텝을 정의 4. 테스트에 성공하도록 어플리케이션 코드 작성 5. 시나리오가 통과될 때 까지 4,5 번 과정을 반복 6. 시나리오 통과 7. 애플리케이션 리팩토링 ! BDD는 행위기반의 사용자 스토리로부터 요구사항을 식별, 충족시키는 Outside-in 기법. # BDD의 행위 명세법 - Narrative - Rol..
-
React Native: Scrollable Tab View 구현하기개발/리액트 네이티브 2021. 1. 19. 13:43
탭 관련 라이브러리 없이 javascript와 react hooks로 스크롤러블 탭 뷰를 구현해보는게 목표. 구현 해보고 싶은 2가지 기능: 1. 탭 지원 2. 탭 뷰 스크롤 제스쳐 지원3. 탭 메뉴 애니메이션 처리 일단 탭 컴포넌트를 만들어서 사용할 때는 간단하게 사용하고 싶었다. }> 크게 부모 탭 컴포넌트가 감싸고 자식으로는 탭뷰를 넣는 구조가 좋을 것 같다고 생각했다.그럴라면 일단 필수적으로 React.Child를 활용해야했다. 에서 React.FC로 children 받으므로 children을 활용해보자! 탭 뷰 구성하는 함수 만들기:탭 뷰를 구성하는 작은 단위의 함수를 만들어주었다. 안에 들어있는 Child만큼 반복문을 돌려주며, 키 값을 만들어준 뒤 를 반환 시켜준다.const composeT..