공부 기록장

Jetpack Compose는 기존의 명령형 xml을 대신하고 Android를 위한 현대적인 선언형 UI 프레임워크이다.Compose는 명령형으로 변형하지 않고도 앱 UI를 렌더링할 수 있게 하는 선언형 API를 제공하여 앱 UI를 더 쉽게 작성하고 유지관리할 수 있도록 지원한다. 선언형 UI를 통해 UI를 더 직관적이고 유지보수하기 쉽게 만드는 한편, 재구성(Recomposition) 매커니즘을 통해 성능을 최적화한다.  1. 선언형 UI의 개념UI를 어떻게 업데이트할지 명령하는 대신, 어떤 상태가 되었을 때 UI가 어떻게 보여야 하는지를 선언하는 방식이다.  Jetpack Compose에서는 UI 상태에 따라 화면을 구성하는 컴포저블 함수들이 실행되며, 앱의 상태가 변경될 때마다 필요한 부분만 다시 ..

BUNDLE  ./index.android.js error: Error: Unable to resolve module missing-asset-registry-path from C:\Users\pineone\Desktop\workSpace\RoundNoteCli\node_modules\@react-navigation\elements\lib\commonjs\assets\back-icon-mask.png: missing-asset-registry-path could not be found within the project or in these directories:   node_modules > 1 | �PNG   2 |    3 |   4 | IHDR2���gAMA��                     ..

Android OS에서 녹음 기능 구현하기Expo 라이브러리의 여러 모듈을 활용하여 녹음 및 파일 저장 기능을 구현할 수 있다.우선 공식 문서를 읽어볼 것을 권한다.https://docs.expo.dev/versions/latest/sdk/audio/ AudioA library that provides an API to implement audio playback and recording in apps.docs.expo.dev   1. 권한 요청 및 패키지 설치expo install expo-avexpo install expo-media-library // 미디어 파일 관리expo install expo-file-system // 파일 시스템에 접근하여 파일 생성, 읽기, 쓰기, 이동, 삭제  useE..

CLI 환경에서 linear-gradient 라이브러리를 설치하고, web과 android 두 OS를 모두 빌드하는 과정에서 다음과 같은 에러가 발생했다Module parse failed: Unexpected token (8:36)You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.react-native-linear-gradient는 주로 모바일 환경에서 사용되기에 TypeScript 주석을 Webpack이 처리하지 못해서 발생하는 문제라고 한다.해결방법은 간단하다웹 환경에서 react-native-linear-gradient를 사용하지 않도록 설..

React Native에서 녹음 버튼의 애니메이션을 적용해보도록 하자 React Native1. 상태와 값 설정하기const animatedValue = useState(new Animated.Value(1))[0];animatedValue의 값 1은 애니메이션에서 시작 시의 기본 상태를 나타난다. 이 값은 아래에 나오는 Animated.timing 메소드에서 toValue를 어떻게 설정하느냐에 따라 달라진다.예를 들어서, animatedValue가 0에서 3 사이의 값일 때 해당 범위로 매핑된다. 2. Pulse 애니메이션 시작하기 const startPulseAnimation = () => { console.log('Pulse animation started.'); Animated..

문제 원인MVVM 디자인 패턴을 따라서 앱 제작을 하던 중 두 Fragment간 ViewModel의 인스턴스 공유 문제가 발생했다.private val homeViewModel: HomeViewModel by viewModels()나는 처음엔 Fragment의 각각에 위 코드를 작성하면 같은 ViewModel을 사용할 것이라고 생각했다. 하지만 by viewModels()를 사용하면 각 Fragment가 고유한 ViewModel 인스턴스를 생성하기 때문에 LiveData가 변경되더라도 Fragment에서 감지하지 못했다. 이는 각각의 Fragment가 서로 다른 ViewModel 인스턴스를 참조하고 있었기 때문이다. 해결 방법해결 방법은 간단했다.private val homeViewModel: HomeV..

ViewPager2를 이용해서 이미지 슬라이드를 만들다 보면 다양한 속성들이 필요하다. clipToPadding : ViewHolder에서 슬라이딩 시 설정된 패딩 값을 무시하고 뷰가 보여지게 한다.clipChildren : 부모 뷰가 자신에게 할당된 영역 외에 다른 영역으로 확장되어 보여질 수 있게 한다.offscreenPageLimit : 슬라이드 시 앞뒤 페이지 데이터를 미리 로드한다.setpageTransformer : 페이지 간 간격을 커스텀 변환을 통해 설정한다. => 페이지 전환 시 효과를 주는 데 사용setPadding : 설정된 패딩 값이 커질수록 뷰가 서로의 영역에 침범하는 범위가 넓어진다.orientation : ViewPager2의 페이지 스크롤 방향을 수평 또는 수직으로 설정한다...

1. XML과 Jetpack Compose Jetpack Compose는 기본 Android 어플리케이션을 빌드하기 위한 현대적이고 완전히 선언적인 UI 도구 키트이다. Kotlin 프로그래밍 언어 기능을 사용하여 Android에서 UI 개발을 단순화하고 가속화한다. 선언적 UI : Jetpack Compose 에서 UI는 선언적으로 정의된다. UI의 모양과 기능을 설명하면 프레임워크가 UI 렌더링과 시간 경과에 따른 UI 변경 관리를 담당한다. Kotlin 기반 : Kotlin을 기반으로 하는 Jetpack Compose는 강력하고 간결하며 표현력이 풍부한 구문을 허용하여 코드를 더 읽기 쉽고 작성하기 쉽게 한다 반면 XML은 전통적으로 Android에서 UI 레이아웃을 디자인하는 데 사용되었다. XM..

위와 같이 문자열 태그로 제목을 만들기 위해 다음과 같이 코드를 작성했다. private List createTagMenuItems2() { List menuList = new ArrayList(); menuList.add(new TagMenuItem("#로맨스")); menuList.add(new TagMenuItem("#드라마")); menuList.add(new TagMenuItem("#학원/액션")); menuList.add(new TagMenuItem("#옴니버스")); menuList.add(new TagMenuItem("#판타지/SF")); menuList.add(new TagMenuItem("#공포/스릴러")); menuList.add(new TagMenuItem("#개그")); menuL..

Listof 와 MutableListOf val immutableList = listOf("item1", "item2") // 변경 불가능 val mutableList = mutableListOf("item1", "item2") // 변경 가능 listOf는 Immutable(불변성)이기에 변경 불가능한 목록을 생성한다. mutableListof는 Mutable이기에 변경 가능한 목록을 생성하며 항목 추가/제거와 같은 수정을 허용한다. 인덱싱 인덱스는 컬렉션 내 요소의 위치를 나타내는 숫자 값이다. 인덱싱을 사용하면 목록이나 배열과 같은 컬렉션 내의 요소에 효율적으로 액세스, 수정 또는 제거 할 수 있다. 천번째 요소는 0부터 시작하며 마지막 인덱스는 size of the collection - 1이다...