네이티브

ReactNative 0.74 release notes [번역글]

Yoga 3.0이 추가되었고 새로운 아키텍쳐에서 브릿지는 기본적으로 없습니다. onLayout을 배치 없데이트 하고, yarn3가 새로운 프로젝트에서는 기본적인 패키지 매니저로 사용합니다 deprecated된 API들을 제거하였고 PushNotificationIos에 대대적인 변화와 PropTypes를 제거하였습니다. 안드로이드에서는 sdk23(android 6.0)이 최소 지원 버전입니다. 하이라이트Yoga 3.0새로운 아키텍처: 브릿지를 기본으로 사용하지 않음새로운 아키텍쳐: onLayout의 배치 업데이트Yarn3주목할만한 변화Android 최소 버전 적용(Android 6.0)PushNotificationIos Api의 변화PropTypes의 제거Flipper React native Plugin의..

RN 용어사전(번역 글)

용어사전 Dev Menu개발자 메뉴(development 빌드에서 가능한)는 다양한 개발과 디버깅 액션을 제공합니다. Dev Menu 문서를 확인해보세요 Fabric RendererReact Native는 web을 위한 React로서의 React 프레임워크 코드와 같게 동작합니다. 그러나 React Native는 Dom node들 대신에 일반적인 platform view들을 render 그려줍니다. 이것은 Fabric Renderer에 의해 가능합니다. Fabric은 React에게 각각의 플랫폼을 알려주고 host view의 인스턴스들을 관리합니다. Fabri Renderer는 javascript로 존재하고 타겟팅된 interface는 c++ 코드로 만들어 집니다. React의 reneder에 관해선 이..

ReactNative와 프로젝트 의존성들을 쉽게 upgrade하는 법(번역 + 의견)

프로젝트 라이브러리들을 최신으로 유지하는것의 중요성은 알고 있지만 updgrade를 성공적으로 적용하는 것의 어려움은 제때 upgrade하는 것의 장애물이 됩니다 안드로이드와 ios와 같이 한 군데 이상의 플랫폼을 제공하고 있다면 가끔 그 노력은 두배 이상이 듭니다 다행히도, 이러한 과정을 단순화 시켜주는 새로운 도구들이 출시되었습니다 Microsoft는 올리고 싶은 ReactNative 버전에 따라 어떤 라이브러리들이 업데이트 되어야 하는지 체크해주는  align-deps 를 출시하였습니다. align-deps는 잘못된 버전으로 인하여 일어나는 크래시들을 고치거나 프로젝트 라이브러리들의 이슈와 readme들을 찾아다녀야 하는 많은 수고로움을 덜어줍니다 ReactNativeCommuity는 이전 RN 버..

Ios webview에서 javascript를 통해 ios 기능 호출하기 ℡

WKWebView와 UiWebView의 차이점 원래 UiWebView가 존재하였지만 ios8에서 WKWebView가 등장하였습니다. 이 과정에서 UiWebView는 deprecated 되었습니다. WKWebView는 UiWebView 보다 성능이 좋고 효율적으로 동작합니다. WKWebView는 javascript를 비동기 적으로 처리합니다. Javascript와 네이티브 코드 간의 통신은 비동기 적으로 처리되고 일반적으로 더 빠르게 실행이 됩니다. 하지만 WKWebView에서는 쿠키를 직접 관리해야 합니다. 쿠키 설정이 필요해서 쿠키를 설정하는 스크립트를 시작시에 실행시켜 주어서 원했던 동작을 구현했던 경험이 있습니다. (이 부분은 좀 더 develop 예정입니다.) Ios의 Webview를 이용할때 w..

Android webview에서 javascript로 함수 호출하기 ℡

Android에서 WebView의 용도는 무엇인가요? WebView는 어플리케이션 내부에 웹 페이지를 보여주는 view 입니다. 안드로이드 에서는 'Acitivity 내부에서 웹 브라우저나 온라인 컨텐츠를 보여주기 위한 기반이 되는 클래스'라고 설명이 되어있습니다. 웹 페이지를 보여주기 위해 웹킷 렌더링 엔진을 사용하고 history를 통한 앞으로 가기 뒤로가기 메소들르 포함하고, zoom in,out, text 찾기외 다양한 것을 포함하고 있습니다. 어플리케이션에 Webview를 추가하기 위해서는 xml Layout file에 요소를 추가하여야 합니다. WebChromeClient를 통해 chrome 핸들러를 추가할 수 있습니다. alert, preload, confirm등의 표시와 액션을 제어할 수 ..

Android splash image 띄우기 (Renewal)

2022.03.01 - [네이티브/IOS] - ios splash image 띄우기 에 스플래시 이미지에 대한 간략한 설명이 있습니다. 먼저 읽으신다면 어떠한 이유에서 사용하는지 간략히 알수 있을 것입니다. ios splash image 띄우기 앱이 시작될때 스플래시 이미지를 노출시킬수 있습니다. 스플래시 이미지를 사용하는 이유는 다양할 것입니다. 1. 앱이 켜지자 마자 스플래시 이미지가 노출되므로 반응이 빠르다라는 느낌을 dkrnfls.tistory.com Android의 기능을 이용하여 splash image를 띄워보겠습니다. splash image를 띄우는 법은 다양하게 있을수 있습니다. 여기서 소개하는 방식은 그중 하나 입니다. 1. Splash Activity 생성 2. 앱 실행시 실행되는 in..

Ios splash image 띄우기 (Renewal)

앱이 시작될때 스플래시 이미지를 노출시킬수 있습니다. 스플래시 이미지를 사용하는 이유는 다양할 것입니다. 1. 앱이 켜지자 마자 스플래시 이미지가 노출되므로 반응이 빠르다라는 느낌을 줄수도 있고(앱의 반응성) 2. 스플래시 이미지를 노출시켜주는 동안 앱에 필요한 데이터를 불러올 수도 있습니다. 3. 앱의 간략한 정보를 제공하려도 사용할 수 있을 것입니다. 이러한 스플래시 이미지는 어떻게 노출시켜줄 수 있을까요? 앱을 웹뷰로 만든다면 웹에서 이미지를 전체화면으로 노출시켜줄수 있을것이고 네이티브의 기능을 이용하여 띄어줄수도 있을것입니다. 저는 좀 더 빠른 반응을 위하여 네이티브의 기능을 이용하는것을 선호합니다. 아래는 ios에서 splash image를 노출시켜주는 방법에 관한 내용입니다. 1. 필요한 이미..

Android 웹뷰 alert, confirm 띄우기

안드로이드 웹뷰 에서는 alert 와 confirm을 따로 커스텀 하지 않아도 띄워주긴 합니다. 아래의 내용은 좀 더 입맛에 맞게 브라우저에서 alert와 confirm을 띄워줄 때 액션을 다루기 위한 내용 입니다. WebView webview; WebChromeClient webClient = new WebChromeClient() { // 여기에서 메서드들을 override 해주면 됩니다 } webview.setWebChromeClient(webClient); 은 WebChromeClient의 객체를 생성해주는 부분인데 이 클래스 안에 정말 많은 기능들이 숨어있습니다. (제가 봤을때는 19개의 메소드가 있었고 alert, confirm, prompt, geolocation 승인 등등 다양한 내용이 있..

Ios 웹뷰 alert, confirm 띄우기

웹뷰에서 javascript로 된 alert와 confirm을 띄우려면 코드를 추가해주어야 합니다. alert와 confirm의 경우 각각 webview에 정의되어 있는 인스턴스 메소드들을 선언해주어야 합니다. viewController 내부에 선언해주면 됩니다. UIAlertController에서 preferredStyle을 커스텀 해줄수 있습니다. .alert와 .actionSheet 두개의 형식이 있습니다. 원하는 형식을 선택해서 보여주고 싶은 형식을 보여주면 됩니다! alert func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, ..

Ios 웹뷰 쿠키 native에서 세팅

ios의 웹뷰에서 쿠키를 세팅해주고 싶었습니다. ios에서는 안드로이드 같이 cookie만 관리해주는 도구를 찾지 못했습니다. 그래서 찾은 방법은 웹뷰가 실행될때 js script를 실행시켜주자 였습니다. 브라우저에서 setCookie(key, value)를 통해 특정 도메인에 원하는 쿠키 값을 세팅해줄수 있습니다. 이걸 웹뷰가 실행될때 실행시켜주자는 생각이였습니다. var webView: WKWebView! override func viewDidLoad() { ~~~~~ let config = WKWebViewConfiguration() let atDocumentStartScript = WKUserScript(source: "alert('start')", injectionTime: .atDocument..