GDG on Campus Sookmyung

[Android] 카카오뱅크 클론 코딩 (4)

이번 주차에서 제가 맡았던 부분 중 '이체 화면 텍스트 필드' 에서 새롭게 알게 된 부분도 있고 어려웠던 부분도 한 번 더 자세히 알게 된 것 같아 해당 내용을 중심으로 정리해보겠습니다. 이체 화면 텍스트 필드목표 : A 화면에서 사용자가 텍스트 필드에 입력한 값을 B 화면으로 넘어갈 때 매개변수로 담아서 보내주기구현 방법 :TransferScreen.kt (주요 코드 외 생략)@Composablefun TransferRoute( navigator: HomeNavigator) { TransferScreen( onNextClick = { receiver -> navigator.navigateToSend(receiver) // receiver 값을 전달 ..

카카오뱅크 클론코딩으로 화면 구성 중 중요했던 Chip 컴포넌트와 Retrofit 연결에 대해 정리해보았습니다.📝Chip 컴포넌트칩(Chip)이란?칩(Chip)은 작은 UI 요소로, 주로 선택지 제공, 필터링, 태그 지정 또는 입력된 데이터를 표시하는 데 사용칩은 라벨, 아이콘, 선택 상태 등을 포함 가능칩은 사용자가 클릭하여 선택하거나 선택 해제할 수 있는 대화형 요소로 사용@OptIn(ExperimentalLayoutApi::class)@Composablefun LoanCategoryChips() { val chipItems = listOf( "신용대출", "중신용대출", "비상금대출", "신용대출 갈아타기", "개인사업자 신용대출", "개인사업자 보증서대출", "중고..

📝 Compose로 구현한 커스텀 컴포넌트와 리스트 화면 정리 ✅ BankComponentMore 아이콘: 추가 옵션 버튼 표시.커스텀 배경 색상: 호출 시 색상 지정 가능.컴포저블 함수 작성 방식@Composable 애노테이션을 통해 UI 컴포넌트를 선언.재사용 가능한 컴포넌트를 만드는 기본 패턴을 배울 수 있음.레이아웃 구성 및 정렬Box를 활용하여 여러 UI 요소를 겹치거나 특정 위치에 배치하는 방식을 배울 수 있음.Modifier.align()을 통해 Alignment 옵션으로 위치를 조정.UI 커스터마이징입력값: name, amount, backgroundColor를 매개변수로 받아 동적으로 UI를 변경.기본값 제공: backgroundColor에 기본값을 설정하여 유연성을 높임. BankCo..

✅GIT - 코딩 컨벤션, 브랜치 컨벤션, 커밋 컨벤션 지정✅스플래시와 네비게이션 구현카카오뱅크 클론 코딩을 하기에 앞서 GIT 관련 컨벤션을 정하고 스플래시와 네비게이션을 구현하였습니다.스플래시를 XML, Compose 두가지 방식으로 구현할 수 있으나, 스터디를 컴포즈를 이용해 진행했으므로 컴포즈 형태로 구현했습니다.  스플래시//SplashScreen.kt@Composablefun SplashScreen(navController: NavController, modifier: Modifier = Modifier) { LaunchedEffect(Unit) { //2.5초간 화면 정지 후 main 경로로 이동 delay(2500) navController.navig..

코어멤버분께서 만들어주신 강의자료를 공부하였습니다!스타일 가이드colorMaterial 3에서는 사용자가 목적에 맞게 사용할 수 있도록 color scheme를 제공함라이트 모드와 다크모드에 맞게 색상 지정 가능, 어떤 상황에서 어떤 색을 쓰도록 목적에 맞는 색 정의 가능scheme 안에 있는 요소들primary : floating action button, 버튼 색, 컴포넌트들의 배경 색secondary : 필터 칩 등 덜 중요한 요소들teritary : primary, secondary와 비교하면 대비되는 색으로 구성, 사용자가 터치를 했을 때 다음 ux를 유도하는 등 강조 표현으로 사용color system직접 색상을 지정하여 컬러 변수를 만들 수 있다!import androidx.compose.u..

5주차는 코어멤버분께서 만들어주신 강의자료들을 정독하면서 공부하였습니다☺️Preferences Datastore, Room을 활용한 로컬 데이터 저장대부분의 정보는 서버에 저장하더라도 클라이언트에서 정보를 저장하는 경우가 존재하기 때문에, android에서도 Database 학습 필요!대표 적인 로컬 저장 방법에는 Preferences Datastore, Room가 존재1.Preferences DataStoreJetpack 라이브러리로 키-값으로 저장하는 저장소코틀린의 코루틴과 Flow를 사용하여 비동기적으로 데이터 저장2.RoomJetpack 라이브러리 중 하나로 원하는 데이터를 로컬 데이터 베이스에 저장, 유지 가능SQLite 기반의 관계형 데이터 베이스 구조 → 많은 양의 데이터를 지속적으로 관리해..

코어멤버님이 정리해주신 노션 내용을 참고하여 공부했습니다.서버와의 연결 & RESTful API 이해하기 프론트 개발자에게 서버와의 연결은 중요한 부분입니다. 안드로이드에서는 Retrofit2 라이브러리를 통해 서버 API와 연결하는데요. 처음엔 복잡해 보일 수 있으나, 익숙해지면 백엔드와의 연결이 수월해집니다. 이번 글에서는 서버 통신 개념부터 실습 도구까지 다뤄볼 예정입니다. 서버 통신 기초 개념  📌 HTTP (HyperText Transfer Protocol)HTTP는 클라이언트와 서버 간 정보를 요청(request)하고 응답(response)하기 위한 프로토콜임.특징: 클라이언트가 요청해야 서버가 응답을 보내는 단방향 통신 구조임. 📄 HTTP 메시지 구조start-line요청 메시지: HT..

"오준석의 생존코딩"의 JetpackCompose 시리즈 6-9강을 수강하였습니다. 코드 설명은 코드 블록 내에 주석으로 설명했고 개념적인 부분들은 추가적으로 설명해두었습니다 ☺️ 6강 (Scaffold, TextField, Button, 구조분해, SnackBar, 코루틴 스코프)TextField( value = "", onValueChange = {}, )위와 같이 작성하면 텍스트를 입력받아도 value가 빈 문자열로 설정되어있으므로 동적으로 변수값을 지정해줘야함일반적인 방법class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { supe..

지정된 강의 1강~5강을 수강하였습니다.1. Column, Row, Spacer Column { Text("Hello") Text("World")}//Column 내의 요소들을 수직으로 배열함Row{ Text("Hello") Text("World")}//Row 내의 요소들을 수평으로 배열Row{ Text("Hello") Spacer(Modifier.width(16.dp)) Text("World")}//Spacer를 이용해서 요소 사이의 간격을 설정/조절해줄 수 있음- Column, Row 등의 덩어리에 특성 지정해주기Column ( modifier= Modifier //modifier를 이용해 다양한 특성들을 지정해줄 수 있음 .fillMaxSize() //화면을 꽉 채우기 (text 등 요소들의 크기..