JSJH의 블로그

[6주차] 앱 완성 정리와 배포이번 주는 지금까지 만든 단어장 앱을 최종 정리하고, 실제 스마트폰에 설치할 수 있는 APK 파일로 추출하는 마지막 수업입니다.앱 이름과 아이콘을 직접 변경하며 나만의 앱 형태로 마무리하고, 1~5주차 동안 배운 Kotlin, Jetpack Compose, 앱 개발 흐름을 간단히 되돌아봅니다.오늘의 목표1~5주차 동안 만든 단어장 앱의 구조를 정리한다.Kotlin과 Jetpack Compose의 핵심 개념을 복습한다.앱의 실제 이름을 원하는 이름으로 변경한다.홈 화면에 표시되는 앱 아이콘 이미지를 교체한다.APK 파일을 추출하여 스마트폰에 직접 설치한다.1. 지금까지 만든 앱 되돌아보기1주차: 안드로이드 스튜디오 시작과 첫 화면 띄우기2주차: 단어 카드 UI 만들기3주차: ..

[5주차] 플래시카드 화면 이동 (Navigation)학습용 플래시카드로 페이지 화면을 전환하는 기능을 붙입니다.오늘의 목표하단의 학습 시작 버튼을 누르면 플래시카드가 있는 화면으로 분기되어 넘어갑니다.넘어간 화면의 플래시카드를 누르면 단어의 뜻이 보입니다.돌아가기 버튼을 누르면 다시 메인 단어 리스트로 복귀합니다.1. 5주차 클래스 파일 만들기왼쪽 트리에서 ui 패키지 폴더 우클릭 ➜ New -> Kotlin Class/File 클릭.이름 칸에 StudyScreen 입력 후 엔터 ➜ 맨 밑에 있는 5주차 완성 하단 코드 - [C] StudyScreen.kt 긁어서 통째로 복붙.2. 5주차 화면 이동 네비게이션 연결ui 패키지 안의 기존 HomeScreen.kt 파일 열기.5주차 완성 하단 코드 - [B..

[4주차] 새 단어 입력과 팝업창이번 주는 ➕ 버튼을 달아서 내가 직접 새 단어를 추가하고 영구 저장하는 주차입니다.오늘의 목표화면 구석에 더하기(➕) 버튼이 생깁니다.버튼을 누르면 단어를 입력할 수 있는 팝업창(바텀시트)이 밑에서 올라옵니다.단어와 뜻을 적고 저장을 누르면 진짜로 스크롤 리스트에 단어가 추가됩니다.1. 4주차 UI 코드 이식지난주에 쓰던 ui 폴더 안의 HomeScreen.kt 파일 열기.스크롤을 맨 밑으로 내려서 4주차 완성 하단 코드 안의 전체 텍스트 복사.기존 HomeScreen.kt 내용을 통째로 복붙하여 덮어쓰기.상단 초록색 (Run) 클릭.2. 기본적인 android 문법 (4주차)1. var isSheetOpen by remember { mutableStateOf(false..

[2주차] 단어 리스트 UI 그리기이번 주는 앱 화면에 단어장의 껍데기를 만들어 화면에 띄우는 주차입니다.아직 눌러도 아무 반응 없으며, 철저히 보이는 것만 만드는 주차입니다.오늘의 목표스마트폰에 단어 카드가 하나 뜹니다.오른쪽에 아이콘이 보이지만, 아직 눌러도 기능은 없습니다.1. 패키지(폴더) 나누기코드를 깔끔하게 정리하기 위해 서랍장(폴더)을 두 개 만듭니다.왼쪽 폴더 트리에서 app > kotlin+java > com.example...(자신의 패키지명) 폴더 우클릭.New -> Package 클릭.깜빡이는 이름 맨 뒤에 data 라고만 이어서 치고 엔터 (데이터 보관용 폴더).똑같이 상위 패키지를 한 번 더 우클릭해서 ui 라고 치고 패키지 1개 더 생성 (화면용 폴더).ui는 이미 자동생성 되..

[사전 과제] 안드로이드 스튜디오 설치 & 개발환경 세팅 가이드앱동 부트캠프를 원활하게 진행하기 위해, 수업까지 반드시 해와야 하는 세팅입니다.설명이 부정확할수도 있어서 혹시나 막히는 부분은 유튜브나 AI를 참고해 주세요.1단계: 안드로이드 스튜디오 (Android Studio) 설치다운로드 링크 에 접속.다운로드 버튼을 눌러 설치 파일 다운.다운로드받은 파일을 실행, 계속 눌러 설치 완료. ⚠ 컴퓨터 사용자 이름이나 설치 경로에 한글이 들어가면 에러나기가 쉽습니다 가급적 C드라이브 기본 경로에 그대로 설치하세요. 안드로이드 스튜디오 처음 실행 후 기본 다운로드 시작. 2단계: 스마트폰 개발자 모드우리는 에뮬레이터 대신 본인 스마트폰에 앱을 테스트할 겁니다.에뮬레이터가 간단하긴 하지만, 노트북 특성상 렉..

[Android] Ch2-5. Material Design 31. 개요 및 기본 형식@Composablefun MyApp() { MaterialTheme { // Material Design 3 테마 스코프 최상위 적용 // 해당 스코프 내부에 선언된 모든 UI 컴포넌트들은 테마 설정과 규약을 상속받습니다. Surface { // 커스텀 UI 컴포넌트 구현부 } }}Google의 모바일 시스템 코어 디자인 가이드라인인 Material Design 버전 3를 일컫습니다.MaterialTheme 스코프 내부에서는 정의된 색상표 상속, 공용 타이포그래피(폰트 계층), 일반 요소들의 도형 외곽 가이드라인이 자동 렌더링에 반영되어 체계화됩니다...

[Android] Ch2-4. remember vs rememberSaveable1. 개요 및 기본 형식@Composablefun RememberExample() { // remember: 통상적인 Recomposition 시에만 값 유지 var count1 by remember { mutableStateOf(0) } // rememberSaveable: 화면 회전, 시스템에 의한 제약 프로세스 재시작 시에도 유지 var count2 by rememberSaveable { mutableStateOf(0) }}두 함수 모두 Recomposition 과정에서 UI State 손실을 방지합니다.rememberSaveable의 경우 Bundle 복원 매커니즘을 지원하여, Activity 재..

[Android] Ch2-3. 상태 호이스팅 (State Hoisting)1. 개요 및 기본 형식// 상태를 위로 끌어올림@Composablefun ParentComposable() { var text by remember { mutableStateOf("") } // 부모가 State 소유 // State와 변경 함수를 자식에게 전달 ChildComposable( text = text, // 현재 값 전달 onTextChange = { newText -> text = newText } // 변경 방법 전달 )}@Composablefun ChildComposable( text: String, // State 값만 받음 (읽기 전용) onTe..

[Android] Ch2-2. TextField1. 개요 및 기본 형식@Composablefun TextInputExample() { var text by remember { mutableStateOf("") } // 입력 텍스트 State TextField( value = text, // 현재 노출될 값 onValueChange = { newText -> // 입력 변경 감지 시 동작 text = newText // 상위 State 필드 업데이트 } )}사용자로부터 텍스트 입력을 수신하는 Composable입니다.value와 onValueChange 파라미터는 UI 동기화를 위한 필수 요소입니다.반드시 State 객체와 연..

[Android] Ch2-1. LazyColumn & LazyRow1. 개요 및 기본 형식@Composablefun ListExample() { LazyColumn { // 수직 스크롤 리스트 items(10) { index -> // 10개 항목 생성 Text("항목 $index") } } LazyRow { // 수평 스크롤 리스트 items(10) { index -> Text("항목 $index") } }}스크롤이 가능한 리스트 UI를 생성하는 Composable 함수입니다.Lazy 속성에 의해 현재 화면에 노출되는 항목(Item)만 렌더링되므로, 메모리 및 성능 최적화에 유리합니다.L..