공학도의 잡다한 시선

RallyDestinations 이번 코드랩에서 배울 내용 Basics of using Jetpack Navigation with Jetpack Compose Navigating between composables Integrating a custom tab bar composable into your navigation hierarchy Navigating with arguments Navigating using deep links Testing navigation 샘플 프로젝트는 네비게이션이 되고 있지만, 사실 컴포즈 네비게이션을 사용한 구현이 아니다. 이를 컴포즈 네비게이션으로 구현해보자. Migrating to Compose Navigation 점진적으로 마이그레이션을 해보자! 의존성 추가 해주기..

AdvancedStateAndSideEffectsCodelab 1. 어떤 내용을 배울까? Introduction 젯팩 컴포즈의 State 와 Side Effects 에 대한 고급 개념을 실습해봤다. 로직이 사소하지 않은 stateful 한 컴포저블의 state holder 를 만드는 방법을 다룬다. 컴포즈 코드에서 코루틴과 suspend 함수를 사용하는 방법과 어떻게 다양한 유즈케이스를 위해 side effects 를 트리거하는지 알아 보았다. 미완성된 프로젝트 하나를 통해 점차적으로 개선하면서 완성하여 아래와 같은 앱을 완성하려고한다. 참고로 코드랩에 기본적인 테스트 코드가 작성되어 있기 때문에, 코드랩 중간 중간 테스트를 돌려보면서 잘 돌아가나 보도록 하자. (시간 나면 해보기) Displaying ..

1. What you'll learn How to use several basic Animation APIs 2. Getting set up gradle 버전 업 경고가 뜰 시, 업그레이드 해주어도 무방하다. (시간이 부족하면 skip) 3. Animating a simple value change animate*AsState 를 통해 간단한 값 변화가 일어나는 에니메이션을 줄 수 있다. 코드랩의 경우 색상 변경 이므로 animateColorAsState 를 사용할 수 있다. return value 는 State 이므로 by 델리 게이터를 사용할 수 있다. val backgroundColor by animateColorAsState(if (tabPage == TabPage.Home) Purple100 e..

pathway1-2: MigrationCodelab 정리 (스터디) 기존 뷰 기반 레이아웃을 컴포즈 레이아웃으로 마이그레이션 하는 방법을 알아보자. view-based → compose 컴포즈로 대체할 뷰 기반 레이아웃을 모두 주석 처리해주자. (xml 기준이다.) 주석으로 대체한 부분에는 아래와 같이 컴포즈 뷰를 삽입해주자. (xml 에 마이그레이션 하는 것이기 때문에 어쩔 수 없이 얘도 뷰가 되는 듯하다.) 안드로이드 뷰 에서 컴포즈 사용하기 composeView.setContent { // You're in Compose world! MaterialTheme { PlantDetailDescription() } } 기존 방식의 안드로이드 뷰(액티비티 등) 에서 컴포즈 레이아웃을 사용하는 방법이다. 본..

커스텀 테마를 사용하는 방법을 알아보자. 커스텀 테마 사용하기 먼저 JetnewsTheme 라는 이름으로 테마를 사용할 것이므로 테마를 아래와 같이 정의 해준다. @Composable fun JetnewsTheme(content: @Composable () -> Unit) { MaterialTheme(content = content) } MaterialTheme 를 단순 감싸고 있으며, 이후에 MaterialTheme 의 생성자 옵셔널한 파라미터를 전달하면서 테마를 커스텀하는 방식으로 사용할 수 있다. @Composable fun Home() { val featured = remember { PostRepo.getFeaturedPost() } val posts = remember { PostRepo.ge..

컴포즈에서 상태는 어떻게 정의하고 사용하는지 알아보는 코드랩을 진행하였다. 코드를 보면서 전체적인 이해를 해보도록 하자. Composable 에서의 상태 @Composable fun WaterCounter(modifier: Modifier = Modifier) { val count = 0 Text( text = "You've had $count glasses.", modifier = modifier.padding(16.dp) ) } Composable 함수 (WaterCounter 함수)를 사용하여 새 파일 WaterCounter.kt 를 생성 한다. @Composable fun WellnessScreen(modifier: Modifier = Modifier) { WaterCounter(modifier)..

[Android] This annotation should be used with the compiler argument '-opt-in=kotlin.RequiresOptIn' 해결하기 Jetpack Compose 사용하여 개발을 할 때 실험 적인 기능, 일부 베타 기능을 사용할 때 아래와 같은 어노테이션을 적용하여 사용하게 된다. @OptIn(ExperimentalMaterial3Api::class) 위 어노테이션 적용 후 빌드, 컴파일은 문제 없이 잘 되지만, 경고가 발생하여 좀 거슬렸다. 이를 제거하기 위해 app 수준 build.gradle 에 아래와 같은 옵션을 추가해준다. android { //... tasks.withType(org.jetbrains.kotlin.gradle.tasks.Kot..

1. Google Developers Jetpack Compose Codelab 2021 이번에 GDG Korea Android 에서 진행했던 행사인 DevFest 2021 Android Compose 코드랩 행사를 참여한 후기를 기록한다 Jetpack Compose 는 네이티브 UI 를 빌드하기 위한 Android 의 최신 툴킷으로, UI 개발을 간소화하고 가속화할 수 있다. 위에서 처럼 compose 는 즉 UI 를 기존 보다 쉽게 디자인, 개발, 빌드 할 수 있는 최신 라이브러인데, 기존 성능문제를 해결하면서도 쉬운 개발이 가능한.. 그런 멋진 녀석이다. (여기서는 보다 자세한 설명은 생략한다) 최근 이직하게된 회사에서 안드로이드 앱 개발 직무를 맡고 있기도하고 평소에 관심이 많은지라 이번 행사의 ..