전체 글
-
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 ""..
-
브라우저 렌더링 되짚기카테고리 없음 2021. 1. 30. 20:42
1. HTML 마크업 처리 -> DOM 트리 빌드 2. CSS 마크업 처리 -> CSSOM 트리 빌드 3. DOM 및 CSSOM을 결합 -> 렌더링 트리 형성 4. 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태 계산 5. 개별 노드를 화면에 페인팅 # 브라우저 기본 구조 1. 사용자 인터페이스: 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분 2. 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어 3. 렌더링 엔진*: 요청한 콘텐츠를 표시 - HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시 4. 통신: HTTP 요청과 같은 네트워크 호출에 사용 5. UI 백엔드: 콤보 박스와 창 같은 기본적인 장치를 그..
-
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..