Update README.md

codesquad-members-2021 · Mar 28, 2021 · 4582cfb · 4582cfb
1 parent 398dca8
commit 4582cfb
Showing 1 changed file with 45 additions and 77 deletions.
diff --git a/README.md b/README.md
@@ -1,20 +1,18 @@
 # PhotosApp
 
-
+📷 PhotoLibrary와 Web의 이미지를 Collection으로 보여주고, Local 저장 등의 기능을 연습하는 프로젝트 
 
 📱 Developer : Lollo 👩🏻‍💻 , 잭슨 🧑🏻‍💻
 
 
 
-## Step 1 : Random Color CollectionView 제작 
-
-#### 2021.03.22 
+## Step 1 : Random Color CollectionView 제작 (3/22)
 
 ### 구현 내용 📱
 
 - 무작위 색상의 배경을 가진 40개의 cell을 생성하고 세로 스크롤 Collection에 나타냈다.
 
-<img width="300" src="https://user-images.githubusercontent.com/52390975/111978184-fcc9fe80-8b46-11eb-9b65-ad75f21e9217.png">
+<img width="250" src="https://user-images.githubusercontent.com/52390975/111978184-fcc9fe80-8b46-11eb-9b65-ad75f21e9217.png">
 
 
 
@@ -53,16 +51,14 @@
 
 <br>
 
-## Step 2 : CollectionView에 PhotoLibrary 항목 표시
-
-#### 2021.03.23
+## Step 2 : CollectionView에 PhotoLibrary 항목 표시 (3/23)
 
 ### 구현 내용 📱
 
 - PhotoLibrary의 콘텐츠 목록을 불러와서 표시하도록 구현
 - PhotoLibrary에 변화가 생길 시 수정 사항을 반영하여 목록을 업데이트하도록 구현
 
-<img width="300" src="https://user-images.githubusercontent.com/72188416/112140569-80ebb700-8c17-11eb-91e8-257a981e12b2.gif">
+<img width="250" src="https://user-images.githubusercontent.com/72188416/112140569-80ebb700-8c17-11eb-91e8-257a981e12b2.gif">
 
 <br>
 
@@ -101,21 +97,19 @@
 3. **`performBatchUpdates`를 통한 `CollectionView` 업데이트**
 
    - CollectionView가 제공하는 **insert/delete/reload/move** 기능을 통해 View를 효율적으로 업데이트하였다. 
+
+
 
----
-
-## Step 3-1 : JSON파일에서 Image를 ControllerView에 보여주기
-
-
-
-#### 2021.03.24
+## Step 3-1 : JSON 파싱, Modal view 띄우기 (3/24)
 
 ### 구현 내용 📱
 
 - JSON 정보를 가져와 데이터를 분리하고 필요한 이미지 정보를 ControllerView에서 보여준다.
 - Async방식을 이용하여 정보를 가져올 때마다 View에서 해당 이미지를 보여준다. 
 - 코드를 이용하여 + 버튼을 눌렀을 때 Modal로 DoodleView를 보여준다.
 
+<img src = "https://user-images.githubusercontent.com/52390975/112326069-8d474100-8cf7-11eb-9303-ee338433ae43.gif" width = 250>
+
 
 
 ### Today's 학습거리 📚
@@ -246,24 +240,18 @@
 
 
 
-<img src = "https://user-images.githubusercontent.com/52390975/112326069-8d474100-8cf7-11eb-9303-ee338433ae43.gif" width = 200>
-
-
-
-## Step 3-2 : 다운받은 Image를 DoodlesView에서 보여주기
-
+## Step 3-2 : URL의 Image를 Modal view에서 보여주기 (3/25)
 
+### 구현 내용 📱
 
-#### 2021.03.25
+- DoodleViews를 StoryBoard 이용 없이 Code로 구현.
+- 서로 다른 DispatchQueue를 이용하여 다운받는 큐와 보여주는 큐를 Async하게 작업
 
-- ### 구현 내용 📱
+<img src = https://user-images.githubusercontent.com/52390975/112632344-5b5ee780-8e7b-11eb-8396-4f3cccee1424.gif width = 250>
 
-  - DoodleViews를 StoryBoard 이용 없이 Code로 구현.
-  - 서로 다른 DispatchQueue를 이용하여 다운받는 큐와 보여주는 큐를 Async하게 작업
 
-
 
-  ### Today's 학습거리 📚
+### Today's 학습거리 📚
 
  1. DoodleViews를 StoryBoard 이용 없이 DoodleViewsController에서 Code로 구현
 
@@ -286,64 +274,44 @@
 
 
 
-2. `URL`을 통한 Images를 저장하고 저장된 Images를 View에 보여주는 작업을 Async하게 구현
-
-   - `ImageManager`를 통해 전날 작업한 JSON파일을 통해 작업하는 ImageDownload 그리고, DownLoad한 이미지를 콜렉션 뷰에 보여주는 작업을 공부하였다. 
-
-     - 각각의 주소에 해당하는 이미지를 다운받는 함수
+2. 앞서 JSON에서 파싱한 `URL`에서 웹 이미지를 불러올 때, 다중 Queue 및 async 방식을 활용 (***2021.03.28 수정**)
 
-     - ```swift
-       private func startDownloading() {
-             imageURLs.forEach { (url) in
-                   backGroundDownloadingQueue.async {
-                       self.downloader.downloadImage(imageURL: url, completionHandler: { (_) in },
-                                                     placeholderImage: UIImage())
-                   }
-               }
-           }
-       ```
-
-     - 다운받은 이미지를 해당 Cell에 전송하는 방법으로 `Notification`을 활용하여 즉각적으로 보내게 하였다.
-
-     - ```swift
-       NotificationCenter.default.addObserver(self,
-                                                      selector: #selector(didImageDownloadDone(_:)),
-                                                      name: ImageManager.NotiKeys.imageDownloadDone,
-                                                      object: imgManager)
-       ```
-
-     - `DispatchQueue`에 대한 `Asyn`에 고찰
+<img src = https://user-images.githubusercontent.com/72188416/112753997-14a4f500-9015-11eb-83ca-3c6d26d003c3.jpeg width = 900>
 
-       - 일반적으로는 각각의 주소에 해당하는 이미지를 다운받도록 한다. 하지만 다음과 같은 상황에 대비를 해야한다.
+- 2가지 경로로 이미지를 다운로드하도록 구현하였다. 
 
-         - 모든 데이터가 다운받기 전까지 이미지 뷰를 보여주는 함수가 실행되지 않는다.
-         - 이미지를 보여주는 것이 순차적이라 스크롤 뷰를 내렸을 때 나오는 셀에 대한 이미지가 아직 보여지지 않는다.
+  1. **cell 생성 시점에 다운로드**
+     - `DataSource delegate`의 메소드 `collectionView(cellForItemAt indexPath:)`를 통해 스크롤 위치의 cell들이 생성될 때, 아직 해당 cell의 이미지가 다운로드된 이력이 없다면 download task를 생성하고, concurrent queue에 추가하도록 했다.
+     - async하게 다운로드 후, 완료되면 Notification을 보내도록 했다. Noti를 통해 reload 시점을 알려주어 다시 스크롤을 하지 않더라도 원활한 로드가 가능하도록 했다. 
+     - VC에서 Noti를 받으면, `OperationQueue.main`에 cell을 reload하는 task를 추가하도록 했다. 이때 concurrent queue를 사용하면 view 표시 시 밀림 현상이 일어나므로 serial queue를 사용했다.
+  2. **background에서 다운로드**
+     - `DoodleViewController`의 viewDidLoad 시점에 ImageManager의 메소드 `startDownloadingAtBackground()`를 통해 모든 URL의 이미지 다운로드 task를 concurrent queue에 추가하도록 했다.
+     - cell 생성 시에만 다운로드를 진행하면 스크롤 시 이미지의 원활한 수급에 제약이 생기므로, 아직 도달하지 않은 indexpath에 대해서도 미리 다운로드를 진행하고 캐싱하여 저장해두도록 했다. 
 
-       - 따라서 모든 뷰를 순차적으로 이미지를 받게하고, `dequeueReusableCell` 에 해당하는 새로운 Cell이 보여주었을 때를 대비하여 즉각적인 이미지를 보여주는 각각의 쓰레드를 생성하여 Asyn하게 작업하도록 하였다.
+- dictionary를 활용하여 이미지를 캐싱하고, 진행한 task 정보를 저장하도록 했다.
 
-       - ```swift
-         imageDownloadQueue = DispatchQueue.init(label: "imageDownload")
-         backGroundDownloadingQueue = DispatchQueue.init(label: "backgroundImageDownload")
-         ```
+  ```swift
+  class ImageDownloader {
+    private var cachedImages: [URL: UIImage]
+    private var imagesDownloadTasks: [URL: URLSessionDataTask]
+    ...
+  }
+  ```
 
-
+  - 이를 통해 memory leaking을 방지하고, error가 있는 task가 무한히 진행되지 않도록 막을 수 있었다.
+  - 그러나 dictionary.subscript.getter / setter 버그가 종종 발생하는 문제가 있었다. ([Issue: dictionary.subscript.getter 문제](https://github.com/codesquad-members-2021/swift-photos-06/issues/13))
+  - dictionary는 thread-free하지 않아서, 동시 접근 시 문제가 발생할 수 있다는 것을 알게 되었다. set 시에 `barrier`를 걸고, get 시엔 sync하게 처리하는 것으로 issue를 해결할 수 있었다.
 
-   <img src = https://user-images.githubusercontent.com/52390975/112632344-5b5ee780-8e7b-11eb-8396-4f3cccee1424.gif width = 200>
 
-
 
-   ## Step 3-3 : Image를 저장하기
-
-
+## Step 3-3 : Image를 PhotoLibrary에 저장하기 (3/26)
 
-#### 2021.03.26
-
- - ### 구현 내용 📱
+### 구현 내용 📱
 
-   - Image를 길게 눌러서 저장하기.
-   - 저장 시 알림메시지 나오기 및 앨범 갱신.
+- Image를 길게 눌러서 저장하기.
+- 저장 시 알림메시지 나오기 및 앨범 갱신.
 
-     
+<img src = https://user-images.githubusercontent.com/52390975/112632471-834e4b00-8e7b-11eb-8aa5-29045b828893.gif width = 250>
 
  ### Today's 학습거리 📚
 
@@ -363,8 +331,9 @@
  2. `Save` Btn을 이용하여 저장할 시, 저장이 되었는지를 알려주는 기능이 필요하다고 의논하였다.
 
     - 이유 : DoodlesView에와 LocalAlbumView가 서로 다르기에 실제로 저장되었는지는 View전환을 통해서만 확인이 가능
-      - **사용성 편의 증진!!**
-
+
+    - **사용성 편의 증진!!**
+
     - `UIAlertController` 을 이용하여 사용자에게 저장 완료 돼었음을 알려줌
 
     - ```swift
@@ -389,4 +358,3 @@
           }
       ```
 
-        <img src = https://user-images.githubusercontent.com/52390975/112632471-834e4b00-8e7b-11eb-8aa5-29045b828893.gif width = 200>