프로그래밍/Jetpack Compose22 [Jetpack Compose] KSP 를 활용하여 자동으로 NavHost Composable 코드 생성하기 (1/2) Jetpack Compose 환경을 사용중인 안드로이드 앱 개발자라면 Navigation 을 통해 화면 이동하는 방식을 사용하고 있을 것이다.이 Navigation 을 사용할 때는 위와 같이 유저와의 상호작용이 발생하였을 때 NavController 를 통해서 스택을 Pop 하여 화면을 뒤로가기 하거나 스택에 Push 하여 새로운 화면으로 이동하는데, 이러한 작업들을 진행하기 위해서 가장 먼저 필요한 것은 NavHost 에 Composable 함수를 통해 앱 내 화면들을 등록하는 것이다. @Composablefun TestScreen( val controller = rememberNavController()) { ... NavHost(navController = controller, startDes.. 2024. 12. 13. [Jetpack Compose] Compose UI Action 으로 인한 Lambda 최소한으로 줄여보기 [MVI 패턴] Compose 를 쓰는 사람이라면 Compose 에서 State Hoisting (상태 끌어올리기) 이라는 기법이 존재한다는 것을 알고 있을 것이다.State Hoisting 을 통해 최소한의 부분에서 리컴포지션을 유발하도록 하고 함수의 재사용과 테스트 용이성을 증대시킬 수도 있다. 하지만 이러한 State Hoisting 으로 인해서 우리의 함수에는 엄청난 수의 Lambda 를 전달해주는 상황들이 벌어지고, 이로 인해 코드의 복잡성이 증대하게 되는데 이번 시간에는 이러한 문제를 해결하기 위한 방법을 작성해보려 한다.# 예시하나 간단한 로직을 만들어보자.뷰모델에서 MutableStateFlow 를 작성하고, 이를 컴포저블에서 구독한 뒤 버튼을 클릭했을때 뷰모델의 StateFlow 를 업데이트 해주는 로직.. 2024. 10. 21. [Jetpack Compose] enabledEdgeToEdge 사용 시 ImePadding 에 SystemBarsPadding 가 추가로 적용되는 문제 해결법 개인 프로젝트를 진행하면서, 지금까지 잘 사용하지 않았던 EnabledEdgeToEdge 를 사용해보기로 하였다.이를 사용하면 기존에 사용했던 accompanist-systemUiController 를 사용하지 않고, 그저 enabledEdgeToEdge 의 파라미터로 색상을 넘겨주면 된다고 하여 진행하였지만, enabledEdgeToEdge 를 사용하면서 한 가지 문제가 생겼다. 바로 ImePadding 을 사용 시 SystemBar 만큼의 Padding 이 추가되는 문제가 생겼다는 것이다.이것을 해결하기 전, 예시를 보여주기 위한 코드를 설명할 것인데 해결 방법만 필요하다면 스크롤을 내려 해결 방법만 봐주면 된다. # 해결 방법을 알아보기 전, 해결법 적용 전 후 차이를 알아보기 위해 테스트용 코드를.. 2024. 10. 8. [Jetpack Compose] UI Test + API Test 를 동시에 진행하는 통합 계측테스트 진행 시 API 수신 기다리는법 앱 통합 테스트를 진행하면서 한 가지 문제가 생겼다.UI Test 를 진행하는 스크린 단에서는 MainThread 가 실행되는데, API 를 호출하고 처리하는 비즈니스 로직단에서는 ViewModelScope 를 호출하여 IO Thread 를 사용하는 것이다. @Testfun testMain(){ ComposeTestRule.onNodeWithText("API 호출").performClick() ComposeTestRule.onNodeWithTag("API 수신 성공 버튼").assertIsEnabled()}@Composablefun main(){// 클릭 시 API 호출// API 는 viewModelScope 에서 돌아감Text(modifier = Modifier.clickable { API.. 2024. 10. 7. [Jetpack Compose] LazyVerticalStaggeredGrid - Place was called on a Node Which was placed already 에러 해결법 개인 서비스 상용화를 위해 프로젝트 개발을 진행하던 도중, 한 가지 문제가 생겼다. 바로 위처럼 Place was called on a Node Which was placed already 라는 에러가 발생한 것인데, 내가 커스텀 한 레이아웃 컴포저블도 아니고 구글에서, 그것도 Stable 인 LazyVerticalStaggeredGrid 에서 자꾸 에러가 발생하였다. 그런데 이상한 것이 있었다.스크롤을 할 때 이러한 현상이 발생하는데, 이상하게 어쩔 때는 에러가 발생하고 어쩔 때는 발생하지 않는 것이다.이 현상을 찾느라 1시간을 소비한 결과 발생 타이밍을 하나 알 수 있었다. 키보드가 올라오고, 빠르게 위아래로 스크롤링하면 해당 Exception 이 발생하는 것이었다.하지만 의문이 들었다.Place w.. 2024. 10. 5. [Jetpack Compose] Figma 와 Text 높이 일치시키기 (includeFontPadding, lineHeightStyle) 회사에서 프로젝트를 진행하는데 분명 Figma 와 동일하게 작업했음에도 Text UI 가 차이가 나는 부분들이 존재했다.몇 번을 확인해봐도 Figma 에서 제공해주는 Style, Padding 등이 모두 동일했는데 왜 이러한 일이 벌어지는지 몰랐다. # IncludeFontPadding 을 꺼보니 해결 ...? 처음에는 IncludeFontPadding 설정을 끄는 것이 왜 해결 방법이 되었는지 몰라 인터넷을 이곳저곳 뒤적거린 결과 한 가지 사실을 알게 되었다. Figma 나 Jeplin 등과 같은 디자인 툴에서는 Text 를 사용할 때 안드로이드의 IncludeFontPadding 과 같은 기능이 설정되어 있지 않기 때문에, False 로 설정해줘야 안드로이드 환경에서도 디자인 툴의 UI 와 같이 통일.. 2024. 9. 26. 이전 1 2 3 4 다음
