생각저장소 (배움의길에서 만나는 이야기)

Jetpack Compose + Firebase 기반 게시판 앱 개발기

Jetpack Compose + Firebase 기반 게시판 앱 개발기 이 글은 Jetpack Compose, Firebase Realtime Database, Hilt, Compose Destinations를 기반으로 한 게시판 앱 개발 과정을 정리한 것입니다. 게시글은 최근순으로 표시되며, 댓글 기능도 포함합니다.1. 프로젝트 구성KotlinJetpack ComposeFirebase Realtime DatabaseHilt (DI)Compose Destinations (Navigation)2. 게시글 리스트 화면Firebase에서 게시글 데이터를 읽고, 최근 등록순으로 보여줍니다.LazyColumn( reverseLayout = true // 최신 글이 위로) { items(posts) { ..

Jetpack Compose + Firebase + Google Maps 완벽 가이드 이 글은 Jetpack Compose를 활용하여 Firebase Realtime Database 및 Google Maps, WebView를 사용하는 앱을 개발하면서 겪었던 문제들과 그 해결법을 정리한 개발 노트입니다. 1. Firebase에서 반경 필터링Firebase Realtime Database는 위치 기반 검색을 기본 제공하지 않기 때문에, 클라이언트에서 위도/경도를 기준으로 거리 계산을 해야 합니다.▶ 거리 계산 함수 (Haversine Formula)fun haversine(lat1: Double, lon1: Double, lat2: Double, lon2: Double): Double { val R =..

Jetpack Compose로 DropDown과 카테고리 버튼 UI 만들기 이 글에서는 Jetpack Compose로 드롭다운 메뉴를 만들고, JSON 형태의 카테고리 데이터를 3x3 버튼 그리드 형태로 화면에 표시하는 방법을 정리합니다.🟡 1. DropDown (Spinner 형태) 버튼 만들기아래는 Compose의 DropdownMenu를 이용하여 간단한 드롭다운 UI를 구성하는 예시입니다.@Composablefun SimpleDropdownMenu( options: List, onOptionSelected: (String) -> Unit) { var expanded by remember { mutableStateOf(false) } var selectedOption by re..

제트팩 구성에서 스크롤 효과가 있는 무너지는 앱바 생성• 이 기사는 사용자 스크롤링에 동적으로 응답하는 현대 모바일 앱의 인기 있는 UI 요소인 제트팩 컴포즈에서 접히는 앱바의 구현을 자세히 설명합니다.• 설계에는 두 개의 TopAppBar가 포함됩니다. 하나는 접힌 상태(필수 정보만 표시)를 위한 것이고 다른 하나는 확장된 상태(헤더 및 자세한 내용 표시)를 위한 것입니다.• 스캐폴드는 메인 화면 컨테이너로 사용되어 스낵바 및 플로팅 액션 버튼과 같은 다른 UI 구성 요소를 쉽게 통합할 수 있습니다.• 확장된 AppBar의 높이는 사용자 정의 가능하며(이 예에서 180.dp), 'windowInsets = WindowInsets(0)'는 상태 표시줄에서 추가 패딩을 제거합니다.• ‘LazyVertica..

https://android-developers.googleblog.com/2023/08/whats-new-in-jetpack-compose-august-23-release.html What’s new in the Jetpack Compose August ’23 release News and insights on the Android platform, developer tools, and events. android-developers.googleblog.com 이 글은 위 링크에서 퍼온 글입니다. 앱 개발에서 차지하는 비용(?) 중에서 UI 구성은 많은 부분을 할애하도록 합니다. xml layout 을 이용해서 작업을 할 때보다는 compose을 활용하는 것이 효율성이나, 재활용성에 있어서는 많은 도움..

xml layout 에서 jetpack compose로 이전을 하는 과정에서 범하는 실수 중에 한 가지를 기술해 두고자 합니다. 위 그림과 같이 카카오 X으로 로그인하는 페이지를 jetpack compose로 만들어 간다고 했을 때 이렇게 구현을 하게 될 듯합니다. TextButton(onClick = { doKakaoLogin() }) { Image( painter = painterResource(id = R.drawable.kakao_login_medium_wide), contentDescription = "", modifier = Modifier .width(300.dp) .height(45.dp) ) } 카카오에서 지원해 주는 로그인 연동 버튼이미지를 넣어서 이미지 버튼을 하나 만들어 보려고 했습..

앱을 만들다 보면 지도가 들어가는 앱을 만들게 되는 경우가 있다. GoogleMap API 등을 이용해서 앱을 만들게 되는 데, 이번에는 Jetpack Compose 기반의 GoogleMap 을 구현해 볼까 한다. 아직은 예전 java 코드에서 kotlin 코드로 이전 작업을 하는 중이라 미완성의 모습으로 보이는 데, 일단, 앱에 구글맵을 넣어 보았다. 먼저 gradle 파일에 추가해야 하는 것들은 다음과 같다. // compose Maps implementation 'com.google.android.gms:play-services-maps:18.1.0' implementation "com.google.accompanist:accompanist-permissions:0.26.0-alpha" implem..

https://vtsen.hashnode.dev/free-android-development-learning-resources-for-beginners Free Android Development Learning Resources for Beginners Ultimate free resources and courses that I find useful while learning Android development as a beginner vtsen.hashnode.dev 오늘은 아침에 찾은 링크 하나를 공유하는 것으로... 짧은 영어 이기는 해도 배우는 것들이 다 영문 사이트 이므로... 한 번은 읽어봐야 할 것 같아서... 끝.

https://flatteredwithflutter.com/using-compose-destinations%ef%bf%bc/ Using compose destinations We will cover briefly: Current navigation in composeUsing compose destinations(Optional) Modify existing test cases Current navigation in compose We get Compose Navigation from the Jetpack Com… flatteredwithflutter.com navigation 의 첫 이야기 다음... 그것을 어떻게 풀어낼 것인가를 찾아 돌아다니다가 또 하나의 링크를 찾았다. 이것을 보면서 이해를 하기..

https://medium.com/@ibrajix/how-i-built-this-nice-looking-app-using-jetpack-compose-3974db7eb9e How I built this nice looking app using Jetpack Compose Jetpack compose is the future of building UI’s on Android. ibrajix.medium.com 이 글을 읽고 있는 중이다... kotlin을 이용해서 앱을 구현해 보고 있는 중이라서... 이글에는 splash 화면에 대한 이야기도 있는 것 같고, navigation에 대한 이야기도 있는 듯하다. navigation 은 원래 이분이 작성한 것은 아닌 듯하고, 저 글에서 봐야 하는 것은 splas..