좋습니다 너무 많은 것들을 다뤘기 때문에 이제 모든 것이 어떻게 얽혔었는지에 대해
요약하고자 합니다
그리고 어떤 일이 일어나는지 그 흐름을 다시 한 번 보여드고 싶었습니다
좋습니다 그러면 다른 방향에서 흐름을 따라갈 수 있겠지만 결국 한 지점에서 시작하고
거기서부터 시작하겠습니다
좋습니다
UI의 측면에서부터 시작해서 백그라운드에서 일어 나는 일들에 대해 살펴보겠습니다
우리는 항상 main activity 부터 시작합니다
우리 앱의 출발점이기 때문에 main activity로 넘어가겠습니다
그래서 여기 main activity에 Oncreate를 봅시다
app의 theme과 surface를 표시하면 배경이 됩니다
그리고 그것의 컨텐츠는 기본적으로 우리가 화면에 보는 내용입니다
그리고 recipeScreen composable이 화면의 초점이 되기를 바라거나
화면에 표시되기를 원한다고 입력했습니다
이제 여기 recipeScreen 안에 main viewModel을 설정한 viewModel과 viewState이 있습니다
이는 화면에 무언가를 표시하려면 저 둘이 필요하기 때문입니다
그래서 viewState는 표시하려는 데이터를 로드했는지에 대한 정보를 제공합니다
카테고리를 로드 했는지에 대한 여부 말입니다
그리하지 않았다면 loading 상태에 있는 것이고
돌아가는 원 모양의 progress indicator를 표시해야합니다
무언가를 다운로드 할 때 본 적이 있을 텐데 이것은 원형 형식으로 제 손 움직임처럼 돌아갑니다
하지만 에러가 발생한다면 에러를 표시합니다
그게 아니라면 우리가 로드한 리스트와 CategoryScreen이 표시됩니다
이제 로드한 내용에 관해 다루기 전에, mainViewModel도 있으니 이 mainViewModel이 무엇을 하는지
살펴봅시다
자 이제 mainViewModel의 역할은 무엇인지 아십니까?
간단하게 말하면 데이터 측에서 UI측으로 정보를 가져오는 작업을 처리합니다
그래서 실질적으론 view를 model과 연결하는 역할입니다
model은 인터넷으로부터 받는 정보를 말합니다
그래서 우리는 categoryState라는 변수를 만들어 냅니다
그리고 이것은 카테고리들의 state를 가지기 때문에 categorieState라고 불립니다(y가 아닌 ie)
이것은 recipeState를 포함합니다
그래서 recipeState는 우리가 현 시점으로 로딩 여부에 대한 정보를 가지는
데이터 클래스입니다
그런 다음 비어 있지 않은 리스트가 있다면 해당 목록을 포함합니다
만약 리스트가 있는데 categories의 유형으로서 리스트를 포함합니다
이 리스트에는 개별적인 카테고리 항목 여러 개가 담겨있습니다
그리고 에러에 대한 정보도 담고 있습니다
그래서 해당 state에 변화가 일어나면 사용자 인터페이스를 활성화시키기 위해 사용되는 mutableState를
사용할 수 있도록 이 state는 사용됩니다
그래서 기본적으로 사용자 인터페이스에서 변경을 활성화합니다
이는 기본적으로 우리가 보는 화면에 대한 내용입니다
그러고 나서 우리는 이 변수를 private변수로써 만듭니다
이는 바깥에 노출을 시키기 위함입니다
우리는 이 categoryState 변수를 만드는데 이는 state 유형의 recipeState입니다
그리고 categoryState를 recipeState로 전달합니다
그 다음 우리는 fetchCategories라는 function을 이용했습니다
recipeScreen에서 mainViewModel이 로딩이 되면 해당 function을 호출합니다
여기 보시면 우리는 mainViewModel을 로딩 중입니다
좋습니다
그런 다음
coroutine을 launch해 줍니다
카테고리 대신에, coroutine을 launch 함으로서 suspend function인 함수들을
호출하게 해줍니다
그렇게 해서 function이 동기적으로 작동되지 않고
비동기적으로 작동되도록 해줍니다
다르게 말하면 백그라운드에서 작동되도록 말입니다
그리고 이것이 왜 우리가 viewModelScope.launch를 사용한 이유고 이는 우리가 coroutines를 launch하게 해줍니다
그 다음 우리에게 필요한 suspend function을 launch할 수 있습니다
저 함수가 필요한 이유는 인터넷에서 무언가를 가져오기 위해서는 suspend function에 넣어야 하기 때문입니다
이제 우리는 try와 catch block을 사용하여 문제가 발생할 때를 대비합니다
인터넷 연결이 없을 수도 있고 무언가 고장날 수도 있고 합니다
인터넷 연결 상태가 안 좋을 수도 있고 웹사이트의 상태가 안 좋을 수도 있습니다 아니면 링크가
잘못된 링크일 수 있는 것처럼 말입니다
그러면 우리는 categoryStateValue를 가져옵니다
그리고 모든 카테고리를 제대로 취득하는 경우는 아직 try catch block 내부이기 때문에
응답이 없다면 아무 문제 없다는 것을 알수 있습니다
그리고 문제가 생긴다면
이 코드들까지 오지도 못했을 것이기 때문입니다
그래서 해당 줄의 코드는 현 시점의 categoryStateValue를 가져가고 받은 응답으로
오버라이드 하라고 해주고 응답으로부터 받은 모든 카테고리들을 리스트 안에
넣도록 해줍니다
그럼 이 카테고리 응답이 무엇인지 아십니까?
응답은 기본적으로 여기 suspend function의 getCategories로부터 옵니다
이는 retrofit을 사용하고 URL을 가져다가 이 URL을 추가합니다
그래서 결국에는 이러한 URL을 얻게 됩니다
보이시는 것처럼 말입니다
그리고 이 URL로 가보면 보이는 것이
엄청난 양의 정보가 있습니다
그러면 해야 하는 일은 이 응답을 받고 이것을 카테고리 리스트에 넣는 것입니다
이것이 바로 이 recipeService를 통해 retrofit을 사용해서 이 URL을 기반으로 만들고 조합해서
ApiService를 사용하는 것입니다
그래서 간단하게 말하면 두 개를 합쳐서 사용한다는 말입니다 So basically combined them together.
그렇게 하면 recipeService를 밖에서 사용하게 It allows us to use this recipe service now outside.
Which we do. 해줍니다
At this point where we get the response. 응답을 받는 이 시점에서 말입니다
그래서 이 service를 이용하여 카테고리를 얻고 state에 카테고리들을 배정합니다
그리고 state는 앞서 말씀드렸듯이 UI를 업데이트합니다
변화가 있다면 알리고 해당 카테고리로 리스트를 채웁니다
더이상 로딩 중이 아니라고 뜨고
에러도 없지만 에러가 있는 경우라면
로딩하지 않고 에러가 있다고 뜨게 되는 것입니다
그리고 앞서 말씀드렸듯이 이 recipeState는 기본적으로 변수 내부에 값을 보관하고
이를 기본으로 UI를 업데이트할 수 있도록 해줍니다
그래서 categoriesResponse는 단지 category의 리스트인 것입니다
하지만 이 categoriesReponse는 이 파일 전체입니다
이 JSON 객체 자체가 response인 것입니다
그래서 이 전체가 categoriesResponse인 것입니다
이제 더 읽기 쉽게 만들기 위해서, 카테고리를 더 잘 읽을 수 있는 형식으로 표시할 수 있게 해주는
JSON 포맷터를 사용했습니다
그래서 카테고리는 대괄호가 있고 쉼표로 구분되어 있는 여러 개별 객체가 포함되어 있기에
이는 리스트라는 것을 알 수 있습니다
각 객체는 특정
Member variable 아니parameter가 있습니다
이것은
또한 키-값 쌍입니다
그렇지만 각 매개변수는 정해진 값이 있습니다 But basically each parameter has a value assigned to it.
따라서 우리는 각 카테고리에 ID, 네임, 이미지 URL이 있는
키-값 쌍이 있습니다
그래서 이는 이미지가 저장된 인터넷의 위치와 설명입니다
이제 이 전체 파일을 가져와서 Kotlin객체로 분해해 줍니다
그리고 이는 카테고리의 유형이 됩니다
그래서 우리는 전체 파일로부터 리스트를 만듭니다
그리고 이 리스트 안에 개별 카테고리 항복이나 객체가 있습니다
이제 해당 카테고리 객체를 이용하여 우리 화면에 표시할 수 있습니다
그리고 표시되는 것은 우리가 이 state로부터 얻는 것입니다
우리는 목록을 포함하는 recipeState의 유형인 이 categorieState를 사용하고 있다는 것을 알고 있습니다
따라서 리스트는 인터넷에서 로드되는 전체 흐름으로 진행되며
이 전체적인 state 처리 과정을 지나 coroutine 내부의 suspend function을 통해
실행되는 것과 같은 모든 것들이 해당 목록에 할당됩니다
그 다음 실제로 표시되거나 사용되는 위치로 이동합니다
그리고 그것은 바로 categoryScreen 안 입니다
여기에서는 로딩하지 않고 오류가 없을 때 설정했고 리스트가 있다는 것을 알고 있습니다
왜냐하면 viewState에 연관된 리스트가 있기 때문입니다
이것이 우리의 기본적인 코도의 구성입니다
이제 이 viewState가 list를 포함합니다
그리고 우리는 모든 개별 카테고리의 리스트인 해당 리스트를 전달합니다
그리고 두개의 column을 가진 lazyVerticalGrid를 사용하는 categoryScreen으로 전달합니다
그것이 바로 이 부분이 나타내는 내용이며 전체 화면 크기와 카테고리 내 각 개별 항목을 That's what this part here says and takes the entire screen size and each individual item inside of
사용합니다
항목에 대해서 말해보자면
우리가 보고 있는 항목들은 카테고리이며 이는 카테고리라는 이름과 카테고리라는 유형인
각 개별 항목에 대한 카테고리의 리스트입니다
category item composable을 생성하라고 되어 있습니다, 이는 카테고리 속성이나 매개변수가 해당 항목 실행의
특정한 반복에 대해 보고 있는 개별 카테고리입니다
그래서 이를 보면 모든 카테고리 항목에 대해서 코드를
실행하라고 되어 있습니다
그리고 이 코드는 모든 카테고리 항목에 새로운 composable을 만듭니다
그리고 이는 다음의 정보를 포함합니다
이미지와 텍스트를 가졌다고 합니다
그래서 이들 각각에 표시되는 내용을 변경하고자 한다면
여기서 하면 되겠습니다
Blah blah를 적어보겠습니다
그냥 해당 항목 각각의 모양을 modify하는 방법을 보이기 위함입니다
그래서 이것이 바로 이 카테고리 항목이 해주는 일입니다
그래서 이제 모든 항목에 blah blah가 표시됩니다
따라서 이미지 blah blah 쇠고기 닭고기 blah blah 병아리 치킨 이미지 blah blah 치킨이 표시됩니다
자 그래서 이것이 기본적으로 모든 것이 하나로 합쳐진 방식입니다
그리고 우리가 말하는 텍스트의 경우 저 카테고리를 주고 그 카테고리를 여기에 표시되도록 쓰시오라고 하는 것입니다
그리고 이미지에 대해서는 해당 카테고리를 주면 이 strCategoryThumb이라고 불리는 속성을 사용한다고 하는 것입니다
이는 간단하게 그냥 URL인데, 이미지를 포함하는 웹사이트로 가는 링크입니다
그리고 이 존재한다는 자체만으로도 놀라운 AsyncImagePainter를 가지고
그저 한 줄의 코드만으로 이미지를 로드할 수 있도록 해줍니다
그리고 이엇이 얼마나 대단한지 놀랍운데 왜냐하면 과거를 회상해보면
인터넷에서 이미지 하나 표시하는 것에만 너무나도 많은 코드가 요구되었기 때문입니다
그러니 요즘에는 이것이 너무나도 쉬워졌습니다
자 그래서 지금까지가 기본적인 우리 앱의 흐름이었습니다
이것이 바로 데이터가 로드되는 과정이고 모든 것이 하나로 합쳐지는 과정과 최종적으로
화면에 표시되는 과정이었습니다
그리고 여러분이 이 작은 프로젝트를 재밌게 즐기셨으면 좋겠습니다
자 이제 모두 짐을 쌉시다 그리고 오늘 내용을 요약하게 될 다음 강의에서 뵙겠습니다