📱Jetpack Compose

💠Jetpack Compose 예제 프로젝트

컴포저블 계층구조

• 계층구조?.
  • Compose는 위에서 아래로 쌓는 함수형 계층 구조
  • Column, Row, Box 같은 컨테이너에 Text, Image, Button 같은 컴포저블 배치

Column {
    Text("Hello")
    Row {
        Text("Compose")
        Text("World")
    }
}

=> Column 안에 Text와 Row가 있고, Row 안에는 또 Text 두 개가 들어가는 구조

DemoText 컴포저블 미리보기

• Text를 출력하는 간단한 컴포저블 함수

@Composable
fun DemoText() {
    Text(text = "안녕하세요")
}

• UI에서 텍스트를 보여주는 가장 기본적인 형태

• text 파라미터 외에도 style, color, fontSize 등을 설정 가능
  
  

DemoText 미리보기

• @Preview를 사용

@Preview(showBackground = true)
@Composable
fun DemoTextPreview() {
    DemoText()
}

-> showBackground = true 옵션을 주면, 미리보기 배경이 흰색으로 나와서 보기 좋다!

DemoSlider 컴포저블 추가하기

• 사용자의 입력을 받을 수 있는 UI 요소

@Composable
fun DemoSlider() {
    var sliderPosition by remember { mutableStateOf(0f) }

    Column {
        Text("Value: ${sliderPosition}")
        Slider(
            value = sliderPosition,
            onValueChange = { sliderPosition = it },
            valueRange = 0f..100f
        )
    }
}

• remember와 mutableStateOf를 사용해 슬라이더의 값을 상태로 저장하고, 변경될 때마다 UI를 갱신
  
  

DemoScreen 컴포저블 추가하기

• 여러 개의 컴포저블을 모아 하나의 화면을 구성

@Composable
fun DemoScreen() {
    Column(modifier = Modifier.padding(16.dp)) {
        DemoText()
        Spacer(modifier = Modifier.height(16.dp))
        DemoSlider()
    }
}

• Spacer는 요소 간 간격을 줄 때 사용

• Modifier.padding으로 전체 여백도 설정 가능
  
  

DemoScreen 컴포저블 미리보기

@Preview(showSystemUi = true)
@Composable
fun DemoScreenPreview() {
    DemoScreen()
}

• showSystemUi = true를 설정하면 상태바나 네비게이션 바 등 시스템 UI도 함께 보여줘서 실제 화면 느낌
  
  
  

💠Android Studio 기본 사용법

AVD

• AVD는 가상 안드로이드 기기로 실제 스마트폰 없이 앱 실행 가능

• 위치: Tools > Device Manager

• 디바이스 이름, Android 버전, 화면 크기 등을 설정해 가상 디바이스 생성

Android Emulator

• AVD를 실행하면 뜨는 창이 에뮬레이터

• 에뮬레이터에서는 실제 앱처럼 조작 가능 (클릭, 제스처, 회전, GPS 등)

• 오른쪽 바에서 다양한 설정 가능 (카메라, 배터리, 센서 등)
  
  

Android Studio 인터페이스

• 기본 화면 구성

  • Project 패널: 전체 폴더 구조

  • Editor: 코드를 작성하는 공간

  • Preview: Compose UI 미리보기

  • Logcat: 앱 실행 중 발생하는 로그 출력

키보드 단축키

• 자동 완성 : Ctrl + Space
• 코드 포맷팅 : Ctrl + Alt + L
• 빠른 실행 : Shift + F10
• 리팩토링 메뉴 : Ctrl + Alt + Shift + T
• 심볼 검색 : Ctrl + O
• 전체 검색 : Ctrl + Shift + F
  
  
  

💠Android 아키텍처 개요

MVVM 패턴

• Model - View - ViewModel 구조

• UI와 로직을 분리해서 유지보수와 테스트가 쉬워짐

• View: 화면 (Activity, Compose UI)

• ViewModel: 상태와 UI 로직

• Model: 데이터, API, DB
  
  

Jetpack 아키텍처 컴포넌트

• LiveData: 관찰 가능한 데이터

• ViewModel: 생명주기를 고려한 상태 저장

• Navigation: 화면 간 이동 처리

• Room: SQLite 기반 로컬 DB