Frameworks

Solid.js 란? Svelte에서 영감을 얻는 javascript 프로젝트로 (2022) React.js 코드(JSX)를 작성하면, 이를 js코드로 컴파일 해주는 컴파일러 (SPA 만들기) 필요성 React 개발자가, Svelte를 따로 배우지 않고도, Svelte의 보다 빠른 실행 속도를 가지고 있다 ㄷㄷ Svelte 사용법 설치 # js npx degit solidjs/templates/js my-app # ts npx degit solidjs/templates/ts my-app # tailwindcss npx degit solidjs/templates/ts-tailwind my-app cd my-app npm i 실행 npm run dev 폴더 구조 및 설명 index.html - 실제 렌더링 ..

1. websafe_svg Android, iOS, 웹에서 SVG 처리 websafe_svg | Flutter Package Simple abstraction to be able to use SVGs in Android, iOS, and Web. pub.dev 2. flutter_staggerd_grid_view 화면 레이아웃을 자유롭게 나눠줌 ( Grid 스타일 ) flutter_staggered_grid_view | Flutter Package Provides a collection of Flutter grids layouts (staggered, masonry, quilted, woven, etc.). pub.dev

Bloc, Cubit이란? Flutter에서 [UI]와, 데이터를 관리하는 [함수] 부분을 분리하여 관리하는 방법 차이점 [Bloc만 가능한 기능] 터미널에서, State를 변경한 Event를 로그로 남길 수 있다. Event가 발생하면, 특정 시간동안 기다렸다가 함수를 실행할 수 있음 ( 우리가 지정 ) Bloc 스트림 형식의 데이터를 처리한다. 이벤트(event)와 상태(state) 사이에 데이터 흐름을 처리. [ 과정 ] 1. UI에서 이벤트를 발생시킨다 2. Bloc이 이벤트를 감지한다. 3. 해당 이벤트에 맞는 함수를 실행하고, 내부 상태를 변경한다. 4. 변경된 상태를 UI에 반영한다. Cubit Bloc을 사용해 만들어진 더 간편버전 내부에 함수를 정의하고, 이를 통해 상태를 변경시킨다. [..

Flutter란? Google이 만든 Dart언어를 사용한, 멀티 플랫폼 개발 프레임워크 Flutter 특징 IOS, Android, MacOS, Windows, Linux, 사물인터넷, 임베디드 앱 개발 가능! ( 멀티 플랫폼의 의미 ) ( React는 임베디드 개발 불가능 ) Flutter 엔진을 사용해, 앱의 여러가지 요소를 "커스터마이징"할 수 있고, 아주 강력하다. Flutter 프로젝트 시작하기 Window Chocolatey로 다운 ( 해당 방법 사용하면, 아래 내용 건너뛰어도 됌 ) choco install flutter Flutter SDK 다운 Windows install How to install on Windows. docs.flutter.dev 프로젝트 폴더속에, 압축해제 환경 변..

Dart 란? Google에서 개발한 멀티 플랫폼 프로그래밍 언어 특징 1. 하나의 언어로, Android, IOS, Windows, MacOS, Linux 앱을 만들 수 있다!! ( 멀티 플랫폼 ) 2. 개발시에, 코드를 작성한 결과를 바로바로 화면에 보여준다 ( Just In Time - React와 동일 ) - 결과를 테스트 하려고, 전체 코드를 컴파일 하지 않아도 돼서, 개발 시간 단축! 3. 개발자가 null값을 참조하면, 컴파일러 하기전에 에러를 감지한다. - 앱 실행중에 ( 런타임 환경 ) 에러가 발생한다면, 그 에러는 컴파일 후에 발견할 수 있으므로 발견이 어렵다. - 에러를 초기에 감지하여 빠른 수정이 가능! 4. 이를 만든 Google의 앱 개발 도구인 Flutter와 연동성이 좋고, ..

👉 react-native-reanimated 란? 빠르고 부드러운 애니메이션을 만들어주는 React Native 라이브러리 특징 React Native 메인 스레드가 아닌, UI 스레드에서 실행된다. 원리 React Native에서, app 코드는 메인 스레드 외부(UI스레드)에서 실행된다. - js가 할일이 많은 경우 프레임 드롭 방지 - 터치에 대한 즉각적인 반응 불가능 ( 메인스레드에서 수행된 사항을, 바로바로 반영할 수 없다. ) 가상머신을 사용해, UI스레드에서 동기적으로 실행할 수 있는 작은 JS코드인 "Worklet"을 만들어 사용한다. 메인 스레드에 가해지는 로드에 대해 신경쓰지 않아도 된다. 이벤트가 발생할때, 터치 이벤트에 즉시 응답하고 동일한 프레임 내에서 UI를 업데이트 할 수 있다.

1. Certificates Apple의 특정 소프트웨어를 실행하기 위해 허가를 받아야 한다. 2. App ID Apple에서 나의 앱을 구분할 수 있도록 id를 만들어야 한다. 3. Device 테스트할 Apple기기를 등록해야 한다. ( 최대 100개 ) 4. Provisioning Profiles Apple 기기에서 개발자를 신뢰 할 수 있도록, 위의 3가지 정보를 하나로 묶어주어야 한다.

👉 Native UI란? 네이티브 코드를 사용한 UI 필요성 React Native에서 지원하지않는 기능을 컴포넌트로 만들어 사용가능 👉 Android UI XML 형식으로 작성하며, 이를 클래스와 연동시켜준다. 레이아웃 만들기 View 클래스 만들기 레이아웃을 React Native에서 사용하도록 함

👉 네이티브 모듈이란 React Native에서 지원하지 않는, Android,IOS 만의 전용 기능을 가진 코드 👉 Android 네이티브 모듈만들기 ( Java ) Android Studio > ReactNative 프로젝트 / android 폴더 열기 모듈 클래스 만들기 // app/java/com.nativemoduleworkshop/ToastModule.java package com.nativemoduleworkshop; import android.widget.Toast; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.bridge.ReactContextBaseJavaModule; import ..