돌아오신 것을 환영합니다
이번 동영상에서는 Preview(프리뷰)를 한 번 보겠습니다
전에 1일차에도 Preview를 보기는 했습니다만, 그 뒤로는 보지 않았습니다
1일차 때는 굉장히 부담스럽게 느껴졌을 것입니다
이 시점에 한 번 더 보면서 이해도를 높여 봅시다
여기 Preview(프리뷰)가 있는데, Composable(컴포저블)입니다
저번에 본 Greeting function(함수)를 위한 것입니다
하지만 Greeting function은 더 이상 사용할 일이 없습니다
그러니 사실 이 Preview(프리뷰)는 통째로 삭제하여도 될 것 같습니다
직접 우리만의 Preview를 만들어 볼 것입니다
Preview(프리뷰)는 @Preview, 그 다음 @Composable으로 입력하며 생성할 수 있습니다
그 다음에는 Composable(컴포저블)을 준비하여야 합니다
그런데 지금 우리가 만들려고 하는 Preview는 무엇이며, 왜 필요한 것일까요?
왜냐하면 지금 사용자 인터페이스(UI)에 변화를 가하고 그 결과를 보기 위해서는
애플리케이션 전체를 다시 실행하여야 하기 때문입니다
그 대신에 계속 변경사항을 가하면 Preview(프리뷰)가
자동으로 업데이트되도록 만들고자 합니다
그러면 예를 들어 이렇게 분할 화면에서 바로 볼 수 있게 됩니다
그렇게 하려면 Preview를 지금 미리 설정해 놓아야 합니다
그러기 위하여 @Preview와 @Composable keyword(키워드)를 입력한 다음
fun, 그리고 미리 보고 싶은 Composable의 이름을 입력합니다
이 경우에는 UnitConverter이며, 그 다음에는 suffix(접미사)를 입력하여 줍니다
Preview라고 입력하겠습니다
UnitConverter 뒤에 Preview라고 입력하여야 합니다
이것은 이미 define(정의)되어 있는 사항입니다
Preview라고 입력하지 않으면 안 됩니다
앞부분은 어떤 Composable(컴포저블)을 preview(프리뷰)하고 싶은 지에 따라 달라집니다
이 경우에는 display(표시)하고자 하는 모든 것이 다 있는 UnitConverter입니다
이곳에 괄호를 입력하겠습니다
이 Preview 뒤에도 소괄호가 와야 합니다
그리고 이 내부에 display하고자 하는 것들이 들어갑니다
이곳에는 제가 만든 Composable(컴포저블)인 UnitConverter를
입력하겠습니다
이제 Preview로 가면 몇 초 후에 단위 변환기의 Preview(프리뷰)를 볼 수 있습니다
잘 보이도록 Zoom to Fit Screen 버튼을 클릭합니다
자동으로 화면에 맞추어 확대됩니다
그러면 이제 단위 변환기가 보이실 것입니다
이 버튼들은 클릭할 필요가 없습니다
여러분의 단위 변환기에서도 이런 상자가 하나 보일 것입니다
이것이 윤곽 텍스트 필드입니다
Preview(프리뷰)를 만들면 이런 것들을 자동적으로 얻습니다
이제 이곳에 텍스트를 추가하면
Result: 라는 내용의 Text(텍스트)를 입력하겠습니다
자동으로 이 사용자 인터페이스는 업데이트됩니다
이것들은 서로 다른 줄에 있도록 하고, 이제
이전에 앱에 배경을 추가할 수 있다고 배웠습니다
Preview에게
showBackground = true라고 입력할 수 있습니다
그러면 흰색 바탕이 나타나는 것을 볼 수 있습니다
좋습니다
이제 글자가 더 잘 보입니다
Unit Converter라고 되어 있습니다
그 다음 윤곽 텍스트 필드가 있으며, Row 아래의 Text도 표시됩니다
이 Row는 무엇 때문에 있는 것일까요?
Text와 OutlinedTextField 사이에
두 항목을 나란히 두고자 하기 때문입니다
이 사용자 인터페이스에는 보이시듯이 두 개의 요소가 있습니다
이것이 다음에 implement(구현)할 사항입니다
이번 동영상은 여기서 마무리하겠습니다
다음 영상에서 뵙겠습니다