프로그래밍/Jetpack Compose22 [Jetpack Compose] Canvas 를 이용하여 원을 그리고 진행률을 나타내보기 요즘 한참 코딩 테스트 문제들을 푸느라 다른 공부들을 안해왔었는데, 문득 과거 면접 주제 중 하나였던 Canvas 를 이용하여 원을 그리고 그 안에서 진행율을 변화시켜주는 코드를 만들라던 문제가 생각나 이를 주제로 글을 하나 작성해보려고 한다.# Canvas 란?들어가기에 앞서 Canvas 에 대해 간단히 설명해보려고 한다.Canvas 란 Jetpack Compose 에서 직접 그래픽을 그릴 수 있는 도화지라고 보면 된다.이러한 Canvas 를 통해 개발자는 자신이 희망하는 그래픽을 생성하고, 이를 통해 UI 구성 중 하나로 사용할 수 있다. 이러한 Canvas 를 통한 그림 그리기 방법으로는 아래와 같은 방식들이 존재한다.drawLine() - 직선 그리기drawRect() - 사각형 그리기drawCi.. 2025. 5. 4. [Jetpack Compose] Composable Annotation 과 Composer, Slot Table, Memoization 에 대해 알아보자 최근 면접을 본 곳에서 Jetpack Compose 관련 질문을 엄청나게 받았다.해당 면접에서는 다른 기술들에 대해서는 대체적으로 물어보지 않고 Jetpack Compose 와 Coroutine 에 대해서만 물어보셨는데 대체적으로 내가 알지 못하거나, 실무에서는 적용하지만 이론적으로는 모르는 부분들에 대해서 많은 질문을 받았기에 꽤나 당황스러운 부분들도 있었다.아마 내가 이론적으로 Jetpack Compose 와 Coroutine 의 실행 과정에 대해 제대로 알고 있었다면 당황하지 않았을텐데하는 아쉬움이 있다. 이러한 마음에 며칠전부터 다시 읽고 있는 Jetpack Compose Internals 책의 일부 내용과 Composer 와 Slot Table 에 대해 자세히 설명되어 있는 블로그 글이 있어 이.. 2025. 2. 25. [Jetpack Compose] Mockk + Hilt.test 라이브러리를 활용하여 UI Test 를 진행해보자. 흔히 TDD (Test-Driven Development) 나 BDD (Behavior-Driven Development)라고 말하는 개발 방법을 알고 있을 것이다.테스트 기법 중 하나인데, 이러한 테스트를 진행하기 위해서 우리는 Unit Test, UI Test, Integration Test 등을 진행해야한다. Integration Test 의 경우 실제 앱 환경과 동일하게 전체 모듈을 아우르는 App Module 에서 테스트를 진행하면 되므로 의존성 관련 문제가 없겠지만, 각 모듈별로 테스트를 진행해야하는 Unit Test, UI Test 에서는 의존성 문제가 생길 때가 많다. Android Clean Architecture 로 예를 들자면 Presentation -> Domain 의존 관계를 .. 2025. 2. 21. [Jetpack Compose] Paging3 라이브러리를 활용하여 페이징 및 페이징 데이터 업데이트하는 법을 알아보자 # Paging3 라이브러리?Android Jetpack 에는 Paging3 라는, 대규모 데이터에 대한 페이징 처리를 도와주는 라이브러리가 존재한다. 이 라이브러리를 사용하는 것은 보통 서버에 존재하는 대규모 데이터를 한 번에 내려받기 어려운 상황.예를 들어, 유튜브에 접속하였으나 서버에는 영상 데이터가 10만개가 존재한다. 그렇다면 이 모든 데이터를 사용자에게 보여주려고 한다면? 네트워크 과부하가 생기게 되고 이로 인해 앱 크래시가 발생할 것이다. 그렇기에 페이징 방식을 활용해서 서버측으로부터 데이터를 나눠서 내려받고, 또한 많은 양의 데이터를 받았다고 했을때도 유저에게 한 번에 보여주지 않고 페이지를 나눠 보여준다면 UI 렌더링 비용을 획기적으로 낮출 수 있을 것이다. (속도도 빨라보이고) 어쨋든 .. 2025. 2. 17. [Jetpack Compose] Top, Bottom 에만 Border 주는 Modifier 생성하기 개인적으로 사용하고 있던 코드인데, 혹시나 필요한 사람들이 있을까봐 공유한다. /** * 컴포넌트의 하단부에만 Border를 설정 * */fun Modifier.bottomBorder(strokeWidth: Dp, color: Color) = composed { val density = LocalDensity.current val strokeWidthPx = with(density) { strokeWidth.toPx() } this.drawBehind { val width = size.width val height = size.height drawLine( color = color, start = Offset(x.. 2024. 12. 14. [Jetpack Compose] KSP 를 활용하여 자동으로 NavHost Composable 코드 생성하기 (2/2) 2024.12.13 - [프로그래밍/Jetpack Compose] - [Jetpack Compose] KSP 를 활용하여 자동으로 NavHost Composable 코드 생성하기 (1/2) [Jetpack Compose] KSP 를 활용하여 자동으로 NavHost Composable 코드 생성하기 (1/2)Jetpack Compose 환경을 사용중인 안드로이드 앱 개발자라면 Navigation 을 통해 화면 이동하는 방식을 사용하고 있을 것이다.이 Navigation 을 사용할 때는 위와 같이 유저와의 상호작용이 발생하였을 때dev-gyu.tistory.com 내용은 윗 글에서 이어집니다.# 7. NavGraphComposable 생성하기Processor 모듈에서 파일들을 모두 생성하였다면, 다시 Nav.. 2024. 12. 14. 이전 1 2 3 4 다음
