{"id":26833777,"url":"https://github.com/mr-won/catpamin","last_synced_at":"2025-03-30T15:29:56.244Z","repository":{"id":242116903,"uuid":"808726619","full_name":"mr-won/Catpamin","owner":"mr-won","description":"[Android] Catpamin 고양이 앨범 프로젝트","archived":false,"fork":false,"pushed_at":"2024-06-16T10:00:38.000Z","size":1164,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T02:27:04.305Z","etag":null,"topics":["coroutine","glide","gson","json","rest-api","retrofit2","viewbinding"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mr-won.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-31T17:24:28.000Z","updated_at":"2024-06-16T10:00:41.000Z","dependencies_parsed_at":"2024-05-31T19:06:46.075Z","dependency_job_id":"cf58d996-f57e-4b4a-8184-645b8aed3d3c","html_url":"https://github.com/mr-won/Catpamin","commit_stats":null,"previous_names":["chihyeonwon/lovecat","chihyeonwon/catpamin","chihyunwon/catpamin","mr-won/catpamin"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mr-won%2FCatpamin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mr-won%2FCatpamin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mr-won%2FCatpamin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mr-won%2FCatpamin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mr-won","download_url":"https://codeload.github.com/mr-won/Catpamin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246338351,"owners_count":20761360,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["coroutine","glide","gson","json","rest-api","retrofit2","viewbinding"],"created_at":"2025-03-30T15:29:55.745Z","updated_at":"2025-03-30T15:29:56.238Z","avatar_url":"https://github.com/mr-won.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 구글 플레이스토어에서 냥파민 앱을 다운로드하세요!\n[냥파민 -고양이 사진첩 다운로드 링크](https://play.google.com/store/apps/details?id=com.wonchihyeon.catpamin\u0026pcampaignid=web_share)\n![image](https://github.com/chihyeonwon/Catpamin/assets/58906858/5d1baf3c-193d-4fc5-895d-6d139fed6d3d)\n\n## 1,2주차\n## 고양이 앨범을 꾸며 보아요.🐱‍👤 \n![2024-06-04 17;41;00](https://github.com/chihyeonwon/LoveCat/assets/58906858/5f44242f-9a8a-49c6-b105-064a77a687df)\n\nTextView 설정은 결과물 예시를 참고하여 설정해 주세요.     \nSize : 30sp   \nStyle : Bold     \nImageView 로 고양이 사진이 위치할 사진 위치를 설정해 주세요.    \nImageView의 id는 iv_album_1, iv_album_2, iv_album_3, iv_album_4로 지어 주세요.     \nImageView 의 설정은 결과물 예시를 참고하여 설정해 주세요.    \nshape=\"rectangle\"     \ncolor=\"#FFFFFF\"    \nradius=\"10dp\"     \n\n## 고양이 이미지를 연결해 보아요.🤳       \nres/drawable 폴더 아래에 아무 고양이 사진 4개를 추가해 주세요.    \nJPEG, PNG, BMP 권장, 고양이 사진이 없다면 아무 사진이나 괜찮아요.   \n추가한 사진을 ImageView 화면과 연결해주세요.      \n  \n## LoveCat 앱을 실행     \n안드로이드 스튜디오 상단 toolbar의 run app 버튼을 눌러 LoveCat 앱 실행 확인      \nLoveCat 프로젝트 폴더를 압축하고 제출 방법 확인하여 제출해 주세요.         \n\n## 결과물 예시\n![image](https://github.com/chihyeonwon/LoveCat/assets/58906858/6a21a2b5-bfab-42a7-a147-b8e5452d4ee4)\n\n## 숙제 제출 방법\n1. LoveCat 프로젝트 폴더를 압축해서 제출해 주세요.    \n2. 용량이 너무 클 경우 안드로이드 스튜디오 \u003e Build \u003e Clean Project 후 압축해 주셔도 됩니다.    \n3. 압축 파일의 이름을 [강의 제목_이름]으로 변경한 후 제출해주세요.      \n    - 예시 : 안드로이드 첫 걸음_황성희.zip       \n\n## 제출 시 주의 사항 \n1. 반드시 코드를 모두 작성하고, 제출 전에 코드 정렬을 진행해 주세요.     \n        - 코드 정렬    \n        1. Windows : `Ctrl + Alt + L`   \n        2. macOS : `Option + Cmd + L`   \n2. xml 파일 이름과 id 이름은 스네이크 케이스를 따라주세요.    \n    - 스네이크 케이스란 모든 단어를 소문자로 표기하고, 단어를 언더바(_) 로 연결하는 방법을 의미해요.    \n    - 예시 : `activity_main.xml` , `@+id/iv_cat`   \n3. 클래스와 변수명은 카멜 케이스를 따라주세요.🐱‍🐉     \n    - 카멜 케이스(camelCase)란 첫 단어를 소문자로 시작하고, 이후의 각 단어의 첫 글자는 대문자로 표기하는 방법을 의미합니다.    \n    각 단어 사이에 공백이나 언더바(_)를 사용하지 않습니다.    \n    - 예시 : `teamSparta` , `iLoveYou`     \n\n## 레이아웃 완성\n![image](https://github.com/chihyeonwon/LoveCat/assets/58906858/86e3ed66-e465-4914-ba50-c6884f58a574)\n```\n걸린시간 5분.\n```\n  \n## 2주차 숙제 시작하기 \n#### 1. 지난 숙제인 LoveCat 프로젝트에 고양이 서버 연결을 위해 환경을 준비해 보아요.     \n🐈고양이 사진을 제공하는 “https://thecatapi.com/”의 고양이 사진을 직접 연동해 볼게요!          \n     \nAndroid Studio의 Recent에서 LoveCat 프로젝트를 다시 열어보아요.         \n서버 연결을 위해선 Retrofit 라이브러리가 필요해요. build.gradle.kts(Moule:app) 파일에 Retrofit 라이브러리를 추가해 보아요. 혹시 잊어버리신 분은 아래 2주차 강의 자료 링크를 참고해 보세요.     \n\n## 📕2주차 강의 자료 소통하는 서비스, Retrofit의 힘! - 2주차     \nAndroidManifest.xml 파일에 인터넷 사용 권한을 추가해 주세요.      \nAPI를 생성해 보아요. https://thecatapi.com/에 접속해서 “Get Your API Key”메뉴에 들어가서 “무료” 계정에 가입해고 API를 발급받으세요. (API키는 가입한 Email 계정에서 확인 가능)     \n![image](https://github.com/chihyeonwon/LoveCat/assets/58906858/268bac32-6113-4f16-a219-6567b19814d1)\n\n## 숙제 요구 사항\n#### 2. Cat API와 연동하기     \nRetrofitInstance.kt와 CatService.kt를 만들어주세요.    \nRetrofitInstance.kt      \nBASE_URL을 \"https://api.thecatapi.com/\" 로 설정해 주세요.     \nCatService.kt     \nAPI와 연결하기 위한 코드를 작성해주세요.     \nAPI_KEY는 회원 가입 후 E-mail로 전달받은 Key를 입력해 주세요.     \n![image](https://github.com/chihyeonwon/LoveCat/assets/58906858/ceb9b535-e3bf-4f88-8416-26438b3b849b)\n\ndata 폴더를 만들어 Json to Kotlin 플러그인을 활용해 CatModel.kt을 만들어 주세요.    \n변환할 Json 포멧    \n```json\n[\n  {\n    \"id\": \"ebv\",\n    \"url\": \"https://cdn2.thecatapi.com/images/ebv.jpg\",\n    \"width\": 176,\n    \"height\": 540\n  }\n]\n```\n\n#### 3. 서버에서 새로운 고양이 그림을 받아올 버튼 연결하기\nactivity_main.xml에 Button을 추가해 주세요.       \n- id : “cat_button”     \n- MainActivity.kt의 onCreate 함수 마지막에 cat_button의 setOnClickListener를 추가해 주세요.    \n- setOnClickListener 안에 Retrofit을 통해 Image를 받아오도록 아래 굵은 코드를 추가해 주세요      \n```kotlin\nbinding.catButton.setOnClickListener {\n     lifecycleScope.launch {\n         RetrofitInstance.service.getImages(num = 4)\n     }\n}\n```\n\n#### 이미지 연결을 위한 Glide 세팅, 사용법   \n🐈 Glide : 이후 수업에서 다룹니다.       \nGlide는 안드로이드에서 이미지를 빠르고 효율적으로 불러올 수 있게 도와주는 라이브러리로 사용 방법도 간단하고,      \n확장성도 넓어서 이미 메이저하게 사용되고 있는 라이브러리입니다.     \n\n서버에서 받아온 result를 ImageView에 연결하기 위해 Glide 라이브러리를 build.gradle.kts(Moule:app) 마지막에 추가해 주세요.    \n```kotlin\nimplementation(\"com.github.bumptech.glide:glide:4.14.0\")\nannotationProcessor(\"com.github.bumptech.glide:compiler:4.14.0\")\n```\n\nGlide를 활용해 result에 있는 이미지를 ImageView에 연결해 보세요.\n```kotlin\n    Glide.with(this@MainActivity).load(result[0].url).into(binding.ivAlbum1)\n    Glide.with(this@MainActivity).load(result[1].url).into(binding.ivAlbum2)\n    Glide.with(this@MainActivity).load(result[2].url).into(binding.ivAlbum3)\n    Glide.with(this@MainActivity).load(result[3].url).into(binding.ivAlbum4)\n```\n[선택] 좀 더 자연스러운 사용자 UI 제공을 위해 Glide에 withCrossFade 옵션을 추가해 보세요. \n```kotlin\nGlide.with(this@MainActivity).load(result[0].url)\n                        .transition(withCrossFade()).into(binding.ivAlbum1)\n```\n## 서버에서 이미지 데이터 가져오는 고양이 앨범\n![2024-06-04 17;41;00](https://github.com/chihyeonwon/LoveCat/assets/58906858/0b995ac0-e878-4c0e-baae-47cd81a5da9b)\n\n## 4주차 문제\n고양이 리스트 보여주기\n\n[지시사항]\n#### 1. 숙제 시작하기 - 한번에 많은 고양이 사진을 서버로부터 받아 오세요.    \n- 지난 번 숙제 열기 : Android Studio의 Recent에서 LoveCat 프로젝트를 다시 열어보아요.      \n- catButton 클릭시, CatService.kt의 getImages 함수 안의 num 인자를 변경하여 한번에 “10”개의 고양이 사진 정보를 받아와 result 변수에 저장하세요.     \n![image](https://github.com/chihyeonwon/LoveCat/assets/58906858/e3895d82-3c0c-4c13-9a64-ed1078d532c8)\n      \n숙제 요구 사항      \n#### 2. 10마리의 고양이 사진을 리스트로 화면에 출력해 주세요.       \n- activity_main.xml의 기존 4개의 고양이 앨범 ImageView를 삭제하세요.      \n- 기존의 고양이 앨범 TextView와 Button은 알맞은 위치로 이동해 주세요.      \n- 나머지 적절한 공간에 RecyclerView를 추가해 보아요      \n- id는 “list”로 지으세요.    \n- 넓이를 가득 채우게 설정해 주세요.      \n- app:layoutManager를 “androidx.recyclerview.widget.GridLayoutManager”로 설정해 주세요.     \n- app:spanCount(가로에 보일 아이템의 갯수)를 “2”로 변경해 주세요.     \n        \n#### 3. RecyclerView와 Adapter를 연결해 주세요.      \n- 이제 RecyclerView와 고양이 10마리를 이어줄 CatItemAdapter.kt 파일을 만들어 주세요.      \n- ListAdapter의 골격이 되는 하단 코드를 CatItemAdapter.kt에 추가해 주세요. (빨간 줄은 Alt+Enter로 import 하세요)     \n```kotlin\nclass CatItemAdapter : ListAdapter\u003cCatModelItem, CatItemAdapter.CatViewHolder\u003e(object :\n    DiffUtil.ItemCallback\u003cCatModelItem\u003e() {\n    override fun areItemsTheSame(oldItem: CatModelItem, newItem: CatModelItem) =\n        oldItem.id == newItem.id\n\n    override fun areContentsTheSame(oldItem: CatModelItem, newItem: CatModelItem) =\n        oldItem == newItem\n}) {\n    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CatViewHolder {\n        val binding = ItemLayoutBinding.inflate(LayoutInflater.from(parent.context), parent, false)\n        return CatViewHolder(binding)\n    }\n\n    override fun onBindViewHolder(holder: CatViewHolder, position: Int) {\n        holder.bind(getItem(position))\n    }\n\n    inner class CatViewHolder(binding: ItemLayoutBinding) : RecyclerView.ViewHolder(binding.root) {\n        private val imageView = binding.ivAlbum\n        fun bind(item: CatModelItem) {\n           // TODO: 고양이 사진 연결하기\n        }\n    }\n}\n```\n- 고양이 앨범을 출력할 앨범 Item_layout.xml을 layout 폴더 안에 추가해 주세요.    \n- ImageView의 id는 “iv_album”로 지어주세요.\n- ImageView에는 지난 과제에서 적용했던 round_background, clipToOutline, elevation, scaleType 등 다양한 속성들을 활용해 꾸며 주세요.\n- CatItemAdapter 안의 CatViewHolder의 bind 함수를 완성해 주세요.\n- Glide를 활용하여 imageView에 cat 이미지를 load해 주세요.\n- 다양한 transition effect도 활용해 보세요.\n#### [참조] by lazy\n- by lazy는 초기화를 필요한 순간까지 지연시키며, 이는 메모리 절약과 성능 최적화에 도움을 줍니다. 해당 속성은 처음 접근할 때 단 한 번만 초기화되고, 이후에는 재사용됩니다.\n      \n#### 4. RecyclerView와 Adapter를 연결해 보아요.\n- 기존의 imageView에 4개의 고양이 사진을 출력하는 코드는 삭제해 주세요.\n- MainActivity안에서 CatItemAdapter를 by lazy로 생성해 itemAdapter 변수에 담아 주세요.\n- MainActivity의 onCreate 메서드 안에서 binding.list의 adapter에 방금 만든 변수 itemAdapter를 연결해 주세요.\n- cat_button의 setOnClickListener 안에서 Retrofit을 통해 Image를 10개씩 받아오도록 num값을 수정해 주세요.\n      \n#### 5. 효율성을 위해 코루틴을 적용해 보세요.\n- Image를 서버에서 받아올 때 코루틴의 Dispachers.IO에서 작업을 수행할 수 있도록 withContext를 활용해 보세요.\n- 서버에서 받아온 이미지 리스트를 adapter의 submitList를 활용해 itemAdapter에 적용해 주세요.\n\n#### 4주차 과제 완성 고양이 리스트 (서버에서 데이터 받아서 리사이클러뷰 에 뿌리기)\n![2024-06-15 03;17;57](https://github.com/chihyeonwon/LoveCat/assets/58906858/4173c127-3bc9-47e1-b4a8-12c4e8ea0958)\n#### minSdk 30 -\u003e 31 로 변경 (ImageView의 clipToOutline 속성이 31 이상부터 가능하기 때문)\n![2024-06-15 04;03;02](https://github.com/chihyeonwon/LoveCat/assets/58906858/bc188d50-6222-4625-b410-baab741ce413)\n\n## ** 참고자료 ** \n[Gson @SerializedName 어노테이션에 대한 고찰](https://velog.io/@yeonank/Gson-SerializedName-%EC%96%B4%EB%85%B8%ED%85%8C%EC%9D%B4%EC%85%98%EC%9D%B4-%EB%B6%99%EC%9D%80-%ED%81%B4%EB%9E%98%EC%8A%A4%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%83%9D%EC%84%B1%ED%95%B4%EC%95%BC-%ED%95%A0%EA%B9%8C)     \n[DiffUtil, ListAdpater.submitList()](https://velog.io/@l2hyunwoo/Android-RecyclerView-DiffUtil-ListAdapter)        \n\n\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmr-won%2Fcatpamin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmr-won%2Fcatpamin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmr-won%2Fcatpamin/lists"}