이전에 작성한 글에서 NavHostController를 사용해 한 화면에서 다른 화면으로 이동하는 방법을 알아봤다.https://small-stepping.tistory.com/926 Compose Navigation 경로 정의 및 NavHostController이번에 작성하고 있는 글은 Jetpack Compose의 Navigation 튜토리얼 부분이다.  https://developer.android.com/courses/pathways/android-basics-compose-unit-4-pathway-2?hl=ko#codelab-https://developer.android.com/codelabs/basic-android-kotlismall-stepping.tistory.com Compose를 사..

이번에 작성하고 있는 글은 Jetpack Compose의 Navigation 튜토리얼 부분이다.  https://developer.android.com/courses/pathways/android-basics-compose-unit-4-pathway-2?hl=ko#codelab-https://developer.android.com/codelabs/basic-android-kotlin-compose-navigation Jetpack Compose의 Navigation  |  Android Basics Compose - Navigation in Jetpack Compose  |  Android DevelopersNavigation 구성요소를 사용하여 화면이 더 많은 복잡한 앱을 빌드하는 방법과 여러 컴포저블..

ViewModel의 단위 테스트 작성 이전에 만든 Unscramble 게임 앱에 단위 테스트를 추가하는 과정이었는데, Unscramble 앱은 사용자가 글자가 뒤섞인 영어단어를 추측하고 추측이 맞았을 때, 포인트를 얻는 간단한 방식의 단어 게임이었다. 이 앱을 기준으로 ViewModel의 단위 테스트 작성법을 알아보고자 한다. https://github.com/google-developer-training/basic-android-kotlin-compose-training-unscramble GitHub - google-developer-training/basic-android-kotlin-compose-training-unscrambleContribute to google-developer-traini..

JetpackCompose의 튜토리얼 codelabs을 하면서 자동 테스트와 ViewModel의 단위 테스트 작성을 해보게 되었다.내가 해본 테스트라곤 학부생 토이프로젝트 수준이었기 때문에 코드를 작성해보고 테스트로 변수 부분을 바꿔가며 에뮬레이터나 기기에 연결해 직접 부딪혀 LogCat에서 잡고 수정하는 것이었다.   자동 테스트란? 소프트웨어의 테스트는 소프트웨어가 예상대로 작동하는지 확인하는 구조화된 방법이다. 자동 테스트는 개발자가 작성한 코드의 또 다른 부분이 올바르게 작동하는지 확인하는 코드이다. 테스트는 앱 개발 프로세스에서 중요한 부분으로, 앱 테스트를 일관되게 실행하여 앱을 공개적으로 출시하기 전에 앱의 기능 동작과 사용성을 확인할 수 있다. 변경사항이 도입될 때 테스트를 통해 기존 코드..

앱 아키텍처는 클래스 간에 앱 책임을 할당하는 데 도움이 되는 가이드라인을 제공한다. 앱 아키텍처가 잘 디자인되어 있다면 앱을 확장하고 더 많은 기능을 추가하는데 도움이 된다. 아키텍처는 팀 공동 작업을 간소화시킬 수도 있다. 가장 일반적인 아키텍처 원칙은 관심사 분리와 모델에서 UI 만들기이다.관심사 분리란, 디자인 원칙은 각각 별개의 책임이 있는 여러 함수 클래스로 앱을 나눠야 한다는 원칙이다.모델에서 UI 만들기란, 모델에서 UI를 만들어야한다는 원칙으로, 모델은 앱의 데이터 처리를 담당하고 앱의 UI 요소 및 앱 구성요소와 독립되어 있으므로 앱의 수명 주기 및 관련 문제에 영향을 받지 않는다. 아키텍처 원칙에 대한 더 자세한 내용은 다음을 참고하라.https://developer.android.c..

Compose는 리컴포지션 중에 상태를 기억하지만, 구성 변경 중에는 이 상태를 유지하지 않는다.그렇기에 상태를 유지하기 위해서는 remeberSaveable을 사용해야 한다. https://small-stepping.tistory.com/880 Jetpack Compose에서의 StateJetpack Compose에서의 State란?상태는 어떤 타입이든 될 수 있다. Int, Float, Double, Boolean, String, 여러 값을 포함한 data class 등Jetpack Compose에서는 이 상태 값이 변경될 때마다 UI는 업데이트 된다.  Composesmall-stepping.tistory.com 이전에 공부했던 상태를 저장하는 remember와 mutableStateOf()는 상태..

Jetpack Compose에서도 마찬가지로 애니메이션을 구현할 수 있다. 애플리케이션에서 애니메이션을 구현해야하는 이유는 무엇일까? 앱의 현재 상황에 관한 시각적인 단서를 준다.앱의 완성도를 높히며, 세련된 느낌을 준다.사용자의 경험을 끌어올려 상호작용을 극대화시킨다.외에도 우리는 애니메이션을 앱에 구현함으로써 얻는 이점을 위해 애니메이션을 구현하고자 한다. https://developer.android.com/develop/ui/compose/animation/introduction?hl=ko Compose의 애니메이션  |  Jetpack Compose  |  Android DevelopersCompose의 애니메이션은 사용하기 쉬우며 앱에서 훌륭한 상호작용을 제공합니다.developer.andro..

해당 튜토리얼 진행시 다음과 같은 코드와 마주하게 되었다. @Composablefun WoofApp(dogs: List) { Scaffold( topBar = { WoofTopAppBar() } ) { LazyColumn(contentPadding = it) { items(dogs) { dogs -> DogItem( dog = dogs, modifier = Modifier.padding(dimensionResource(R.dimen.padding_small)) ) } } }} Scaffold(..

위 사진에서 사진이 들어간 Box의 Top, Bottom, Left, Right에 Custom Shadow를 부여하고자 한다.XML의 경우 drawable에서 shadow_corner 와 같은 느낌으로 따로 shape 정하고, 일일히 색을 겹쳐가며 만들어본 기억이 존재한다. https://github.com/hwisulee/CRCS/blob/main/CRCS/app/src/main/res/drawable/background01.xml CRCS/CRCS/app/src/main/res/drawable/background01.xml at main · hwisulee/CRCS기업연계프로젝트인 캡스톤 디자인 팀 프로젝트에 의해 제작한 CRCS(CropRemoteControlSystem) 어플리케이션 - hwisu..

Jetpack Compose에서의 State란?상태는 어떤 타입이든 될 수 있다. Int, Float, Double, Boolean, String, 여러 값을 포함한 data class 등Jetpack Compose에서는 이 상태 값이 변경될 때마다 UI는 업데이트 된다.  Compose가 상태 변경을 인식하는 방법은 무엇일까?@Composablefun Somting() { var check by remember { mutableStateOf(false) } Text("Check is $check")} 상태를 담는 객체를 사용해 값을 추적한다. 예를 들어 위와 같은 코드가 존재할 때, 하나씩 살펴보면 다음과 같다.by = kotlin delegates 키워드로써, 사용 시 객체 자체를 반환하..