# Native

lkcbap12

클라우드 네이티브 >정의 클라우드의 이점을 최대로 활용할 수 있도록 애플리케이션을 구축하고 실행하는 방식 ** 퍼블릭, 프라이빗, 하이브리드 클라우드 환경에서 확장성 있는 애플리케이션을 만들고 운영할 수 있다. 컨테이너, 서비스 메시, 마이크로서비스, 불변의 인프라 스트럭처, 그리고 선언적 API가 전형적인 접근 방식에 해당한다. 회복성이 있고, 관리 편의성을 제공하며, 가시성을 갖는 느슨하게 결합된 시스템을 사용할 수 있다. 견고한 자동화와 함께 사용하면, 엔지니어는 최소한의 수고로 영향력이 크고 예측 가능한 변경을 할 수 있다. > 핵심요소 ![](https://velog.velcdn.com/images/lkcbap12/post/eaf87

just-do-justin

css 속성 align-items align-items 속성은 Flex 컨테이너 내의 모든 아이템들의 수직 정렬 방식을 설정합니다. 이 속성은 아이템들을 단일 행(row) 또는 열(column) 내에서 수직 정렬하는 데 사용됩니다. flex-start: 아이템들을 컨테이너의 시작 부분에 정렬합니다. flex-end: 아이템들을 컨테이너의 끝 부분에 정렬합니다. center: 아이템들을 수직 중앙에 정렬합니다. baseline: 아이템들을 텍스트의 베이스라인에 정렬합니다. stretch: 아이템들을 컨테이너의 높이에 맞게 늘립니다. align-content align-content 속성은 여러 행 또는 여러 열로 구성된 Flex 컨테이너 내에서 행 또는 열의 간격과 수직 정렬 방식을 설정합니다. 이 속성은 컨테이너 내의 여러 줄의 아이템들을 조작하는 데 사용됩니다. flex-start: 행 또는 열을 컨테이너의 시작 부분에 정렬합니다. fle

junhyungkwon

구글 플레이 스토어에 배포 배포하기위해서는 key가 필요한데 key를 먼저 생성해준다. key 생성 방법은 안드로이드 스튜디오 > Build > Generate Signed Bundle or APK > Create new를 통해서 key 생성 key를 생성한 후 jks파일 형식으로된것이 key이다.(파일을 잘 보관해놓아야된다) 위에서 key를 생성하기 전 단계에 apk, aab 둘중에 어떤 형식으로 생성할지 선택할 수 있다. 구글 플레이 스토어 콘솔 페이지에서 로그인 후 aab파일을 업로드 하여 배포할 수 있다. 쉽게 배포가 가능하니 플레이 스토어에 배포해보길 추천합니다.

gudcks0305

2가지 방법 Gradle 사용 두 가지 방법 모두 graalVm 을 사용한다. 주의점은 런타임 시점에서 yml 환경 값을 주입 받지 못하기 때문에 aws 파라미터 스토어를 사용 할 수 없다. 아래에 이것만 추가하면 nativeCompile 사용 가능하다. 1. bootBuildImage 1.1. build.gradle bootBuildImage 도커 이미지로 빌드 하는 경우 bootBuildImage 를 사용한다. m1 mac 에서 빌드하는데도 시간이 매우 오래 걸리며 cpu 사용량이 하늘을 찌른다. 피크 cpu 사용량이 99%가 넘어가며 메모리 사용량이 8기가 정도 된다. 허허... 심지어 msa 프로젝트라 각 서버의 의존성이 그리 크지 않은 상태임에도 불구하고 빌드 시간이 10분이 넘어간다. 사실 쓰고있는 시점에서도 빌드가 되지 않았다. 보아라 이 엄청난 사용량을... ![](https://velog.velcdn.com

recorror

0. react와 react-native의 차이 > 우선 react와 react-native의 차이에 대해 먼저 집고 넘어가고자 한다. react와 react-native의 가장 큰 차이라면 역시 웹이냐 앱이냐의 차이이다. react-native로 웹을 개발할 수도 있고 react로 웹앱을 개발해 앱처럼 쓸 수 도 있지만, 기본적인 부분을 따져보겠습니다. react : Virtual DOM을 통한 렌더링으로 Javascript를 이용해 HTML과 비슷한 문법을 이용해서 웹 애플리케이션을 구축하기 위한 라이브러리이다. react-native : react의 컴포넌트 기반 아키텍쳐를 활용, Javascript를 사용하여 모바일 애플리케이션을 개발하기 위한 프레임워크이다. 1. Basic Components > [공식홈페이지의 Basic Components에 대해 이야기해볼까 합니다.](https://reactnative.dev/docs/comp

smc9919

clone 메소드는 원본 객체의 필드값과 동일하게 새로운 객체를 생성해주는 메소드이다. 여기서 native라는 키워드가 있는데 자바에서 다른 언어를 사용할 수 이게 만들어주는 키워드이다. CloneNotSupportedException은 clone()을 사용하지 못하는 객체에서 사용했을 때 발생하는 예외이다. clone()은 Cloneable 인터페이스를 구현하면 사용할 수 있다. 이 인터페이스는 Serializable 처럼 비어있는 인터페이스이다. 구현하면 복사한 객체를 반환하고 하지 않으면 CloneNotSupportedException을 터트린다. 내가 일반적으로 생각하던 객체 생성은 생성자인데 이것은 매우 독특하다고 할 수 있다. 다음은 규약이다. 어떤 객체 x에 대하여 다음은 참이다. x.clone() ≠ x x.clone().getClass() == x.getClass() 다음 식들도 일반적으로 참이지만, 필수는 아니다.

pagkusd

찍먹은 그만 React를 공부할때 부터 앱에 관심이 있었다. 그래서, 흥미로운 포스트를 보면 한번씩 React native를 설치해보곤 했다. 그게 끝이었다 이번엔 실제로 앱을 만들어 배포까지 진행해 볼 계획이다. 이유는 크게 0가지다. React 친숙도 증가 Velog를 운영하며, 늦게나마 공부하는 법을 배우고 있고 남에게 설명하려면 더 많은 노력과 정확한 정보를 알아야 된다는 점을 알 수 있었다. 그래서, 다른 side project를 진행하며 React와 많이 친숙해졌다. 커리어 어느덧 퍼블리셔로서의 경력도 5년이 넘어가고있다. 자연스럽게 FE영역도 경험하고 BE영역도 작업 하게 되었다. 다행스러운건 내가 FE건 BE건 새로운 기술을 받아드리는데 거부감이 없다. 그래서, React가 주가 되고 react native에 대한 커리어를 쌓아 보고 싶다. 살에 와닿다 언제나 정정할 줄 알았던 부모님은 나이가 들며 하나씩 불편한게 생

tygerhwang

예제로 알아보는 네이티브 통신 (Platform Channel)하는 방법 flutter_bloc equatable 플랫폼 통신(IOS) - Method Channel 플랫폼 통신(IOS) - Event Channel 플랫폼 통신(Android) - Method Channel 플랫폼 통신(Android) - Event Channel

tygerhwang

앱 강제 종료 시키기 플랫폼 통신(IOS) - Method Channel 플랫폼 통신(Android) - Method Channel 이번 글에서는 앱을 강제 종료 시키는 방법에 대해서 알아 보도록 하겠다. Flutter를 사용해서 강제 종료 시키는 방법과 네이티브에서 강제종료 시키는 방법에 대해서 살펴보면서, 어떤 차이점이 있는지 살펴볼 예정이다. 앱 강제 종료는 주로 Android에서 시스템 뒤로가기 키로 인해서 처리하는 경우가 많고 IOS에서는 주로 처리하지 않는 추세였다. 하지만 IOS에서도 요세 앱을 강제 종료 시켜버리는 추세로 변화하고 있다. IOS는 Android 디바이스에 비해 메모리 용량이 크지 않아 시스템에 의해서 백그라운드 상태의 앱이

klucas

오늘 배운 일 React Native 101 : [5탄] 최근에 몸이 안 좋아서 블로그를 쓰지를 못했다. (하루종일 누워만 있었다 ㅠㅠ) 그나마 이제 몸의 기운이 생겨서 저번에 이어서 다시 공부하기로 마음 먹었다! > 이번엔 React Native 의 Layout System(레이아웃 시스템)에 대해 알아볼 것이다. Native 에서 레이아웃을 만들려면 Flexbox 라는걸 사용해야 한다. CSS 를 공부해봤으면 누구나 한번쯤은 들어봤을 것이다! Flexbox 는 웹에서 배운거랑 많이 흡사해서 어렵지는 않을것이다. **다른점은 Native 에서는 display: block, inline-block, grid 같은 것들이 없다! ** 오직 Flexbox 만 존재한다고 생각하면 된다.

tygerhwang

Launch / Splash Screen 만들기 Launch / App Icon 만들기 App Icoon Generator flutternativesplash 이번 글에서는 스플래시 스크린을 직접 만들어 보는 방법에 대해서 살펴보려고 한다. 스플래시 스크린은 앱 실행시 잠시 노출되는 영역의 스크린으로 스플래시 스크린이라고 하지만 런쳐 스크린이다. Flutter로 스플래시 스크린을 만드는 방법 중 가장 많이 사용하는 방법이 라이브러리를 통해서 생성하는 방법이다. 주로 flutternativesplash 라이브러리를 사용하여 스플래시 스크린, 앱 아이콘을 생성하는데, 이번 시간에는 라이브러리를 사용하지 않고 직접 이미지

akfls221

서론 시작은 Docker에 대한 학습이었다. Docker를 다루어 보고 싶었고, Docker 이미지를 활용하여 SpringBoot Application을 띄어보고 싶었다. 의식의 흐름처럼 생각하다보니, SpringBoot는 Version 3를 사용해보자, 그런데 SrpingBoot 3에서 GraalVM 기반의 Spring Native 공식 지원 한다는 내용을 보았고, 이 Native를 활용하면, 이미지를 통한 빠른 start time을 가져갈 수 있다는 대략적인 장점만 보고 Spring Native를 활용해서 Docker 이미지를 빌드하고, 띄어보자로 이번 학습을 결정지었다. GraalVm은? 공식문서 의 내용을 보자 > GraalVm은 Java 및 기타 JVM 언어로 작성된 애플리케이션의 실행을 가속화하는 동시에, JavaScript, Python 및 기타 여러 인기 언어에 대한 런타임을 제공하도록 설계된 고성능 JDK 입니다. > GraalVM은 Java 애플리

tygerhwang

Lifecycle(앱 상태) 이벤트 4편 Lifecycle(앱 상태) 이벤트 1편 Lifecycle(앱 상태) 이벤트 2편 Lifecycle(앱 상태) 이벤트 3편 Lifecycle(앱 상태) 이벤트 5편 JSONPlaceholder provider | Flutter Package [shared_preferen

tygerhwang

Lifecycle(앱 상태) 이벤트 1편 Lifecycle(앱 상태) 이벤트 2편 Lifecycle(앱 상태) 이벤트 3편 Lifecycle(앱 상태) 이벤트 4편 Lifecycle(앱 상태) 이벤트 5편 Intro Flutter로 앱을 개발하다 보면 앱의 상태에 대한 체크가 필요한 시점이 있다. 앱의 상태는 단순히 보면 실행 중, 백그라운드, 앱 종료 이렇게 나눌 수 있는데, Flutter에서는 4가지의 상태로 분류하여

klucas

오늘 배운 일 React Native 101 : [2탄] 최근 들어 앱을 구현하고 싶어 노마드코더 React Native 강의를 다시 듣기 시작했다. React Native 앱은 순수히 Javascript 로만 이루어지지 않는다. 어쩌면 앱을 만들 때, 가장 작은 부분을 차지한다. React Native 앱에서 가장 중요한 포인트는... Bridge 들을 통해서 코드가 운영체제와 통신을 할 수 있도록 하는 인프라들이다. 출처 : https://gparkkii.github.io/TIL/react-native

tygerhwang

WebView 사용하기 3편 WebView 사용하기 1편 WebView 사용하기 2편 이번 글에서는 IOS Native 코드인 swift를 사용해서 웹뷰를 오픈하는 방법에 대해서 작성해 보려고 한다. IOS에서는 웹뷰를 사용할 때 UiWebView와 WkWebView 두 개의 웹뷰를 제공하고 있는데, 신규로 배포하는 앱에서 UiWebView를 사용하게 되면 리젝된다는 얘기가 있던데 이 부분은 확인을 해봐야 할 것이다. 참고로 Flutter에서 제공하는 웹뷰 라이브러리는 대체적으로 WkWebView를 사용하고 있다. Swift 코드를 잘 모르기에 웹뷰를 띄우는 코드만 제공할 예정이다. Swift UiWebView AppDelegate Plat

tygerhwang

WebView 사용하기 2편 WebView 사용하기 1편 url_launcer | Flutter Package 이번에는 Launcher로 웹뷰를 사용하는 방법에 대해서 작성하려고 한다. Flutter로 개발을 했으면 Launcher 라이브러리는 자주 접해봤을 것이다. Launcher 라이브러리는 단순히 웹뷰를 띄우는 기능 외에도 전화, 메일, 앱 등을 오픈하는 기능을 제공하고 있어서 낯설지 않은 라이브러리이다. Flutter Launcher 라이브러리로 웹뷰를 띄우는 방식은 두 가지가 있는데, 앱 위에서 웹뷰를 띄우는 InApp 방식과 Safari, Chrome 등의 외부 앱으로 띄우는 OutApp 방식이 있다. 만약에 Flutter 뷰와 함께 사용하고 싶다면 이전 글에서 다뤘던 webvi

tygerhwang

WebView 사용하기 1편 WebView 사용하기 2편 webview_flutter | Flutter Package flutter_inappwebview | Flutter Package 이번 글에서는 Flutter로 WebView를 어떻게 사용해야 하는지에 대해서 간단하게 알아보도록 하겠다. 개발을 하다보면 Webview를 사용해야 할 경우가 많이 발생한다. 개인적으로 웹뷰를 자주 사용해 봤지만 Flutter에서 웹뷰는 그리 강력한 기능을 제공하지 못한다. 그래서 네이티브로 처리하는 경우도 종종 있다. 특히, FLutter View와 WebView를 같이 사용하는 경우에 정말 이슈가 많이 발생한다.. 간단한

dorong36

✅ the rules of native 가장 먼저 react-native는 웹사이트가 아님!! View 태그 html div 사용 불가 => View (container임!!) 우리는 모든 것을 View로 만들게 될 것임 항상 import 해줄것 Text 모든 텍스트는 Text 컴포넌트에 들어갈것 그냥 View에 넣거나 하면 무조건 에러남 style div처럼 style 넣을 수 있음 근데 다 가능하진 않음 그래도 거의 가능, 자동완성도 지원 StyleSheet.create 사용하거나 직접 넣어주기 StyleSheet.create 생략해도 들어가긴 하는데 자동완성이 안됨 Status Bar 기본 import에서 볼 수 있듯 외부 패키지에서 가져옴 이는 스마트폰 상단바(시계, 배터리, 와이파이 등)를 의미 style이 기본적으로 auto로 설정, 배경에 따라 색

projaguar

Intro 목표로 하는 연제의 마지막 React Native를 yarn workspace 적용 입니다. React Native는 폴더 내부의 node_modules를 사용하도록 설정 해야 합니다. yarn berry를 지원하지 않고, node_modules를 직접 참조할때가 많습니다. root의 node_modules를 참조하도록 설정 할 수는 있지만, 경험상 복잡하고 오류가 많았습니다. 이번 yarn berry workspace는 별도의 nohoist 설정없이, 그나마 간단한 방법으로 구성이 가능하여, 다시한번 도전 하였습니다. 수정 2023.03.17 전반적인 변경 React Native 앱 생성 React Native 앱 생성 먼저 Yarn Berry(v3) Workspace #1 - workspace 설정으로 워크스페이