[JC] 코드 리뷰 & 문제 해결 도움 요청

[jayn2u]

코드 리뷰 & 문제 해결 도움 요청

문제

• 앱을 실행했을 때, 데이터를 가져오는 시간의 딜레이가 생겨. UX 부분에서보면 굉장히 아쉬운 부분이지. 이 부분은 클라이언트에서 어떻게 개선할 수 있을까? 서버와 함께 작업하는 앱이었다면 아마 서버에서 반환하는 데이터를 조정해서 손쉽게 작업할 수 있었을거야.

자료

• 실행해보고 싶으면 나의 개인 레포지토리에서 한 번 확인해줘!
• 하지만 API KEY를 나만 보관하고 있어서 본인이 발급해서 사용하는 방법 아니면 실행할 수 있는 방법이 없을거야. 구체적인 방법에 대해서는 따로 연락해줘.
• 문제 화면을 첨부해요.

Code

class TableViewController: UITableViewController {
  // MARK: - Properties
  var movie = [MovieData]()

  // MARK: - Life Cycle
  override func viewDidLoad() {
    super.viewDidLoad()
    tableView.register(TableViewCell.self, forCellReuseIdentifier: TableViewCell.identifier)

    tableView.backgroundColor = .systemBackground
    self.navigationItem.title = "Now Playing"
    self.navigationController?.navigationBar.prefersLargeTitles = true

    self.fetchAPIData()
  }

  // MARK: - Methods
  private func fetchAPIData() {
    let hostUrl = "https://api.themoviedb.org/3/movie/"
    let baseImageUrlString = "https://image.tmdb.org/t/p/original"
    let apiKey = APIKey.serialNumber

    let requestUrl = URL(string: "\(hostUrl)now_playing?api_key=\(apiKey)")!
    var request = URLRequest(url: requestUrl)
    request.httpMethod = "GET"

    let task = URLSession.shared.dataTask(with: requestUrl) { data, _, error in
      if let error = error {
        debugPrint(error)
        return
      }

      guard let data = data else {
        debugPrint("There are no data")
        return
      }

      do {
        let decoder = JSONDecoder()
        let responseData = try decoder.decode(NowPlayingModel.self, from: data)

        for idx in 0..<responseData.results.count {
          let title = responseData.results[idx].title
          guard let posterPath = responseData.results[idx].posterPath else { return }
          guard let posterImageUrl = URL(string: baseImageUrlString + posterPath) else { return }
          let data = try Data(contentsOf: posterImageUrl)

          self.movie.append(MovieData(titleData: title, posterData: data))

        }
      } catch {
        debugPrint(error)
      }

      DispatchQueue.main.async {
        self.tableView.reloadData()
      }

    }

    task.resume()

  }

  // MARK: - Table view data source

  override func numberOfSections(in tableView: UITableView) -> Int {
    // #warning Incomplete implementation, return the number of sections
    return 1
  }

  override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    // #warning Incomplete implementation, return the number of rows
    return movie.count
  }

  override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath)
    -> UITableViewCell
  {
    guard
      let cell = tableView.dequeueReusableCell(
        withIdentifier: TableViewCell.identifier, for: indexPath) as? TableViewCell
    else {
      return TableViewCell()
    }

    // Configure the cell...
    cell.title.text = self.movie[indexPath.row].titleData
    cell.poster.image = UIImage(data: self.movie[indexPath.row].posterData)

    return cell
  }

  override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat
  {
    return 300
  }

  override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    let detailViewController : ViewController = {
      let viewController = ViewController()
      viewController.movieTitle = self.movie[indexPath.row].titleData
      viewController.moviePoster.image = UIImage(data: self.movie[indexPath.row].posterData)
      return viewController
    }()

    navigationController?.pushViewController(detailViewController, animated: true)
  }
}

[jayn2u]

여기서 발생하는 사용자 경험을 더 개선하기 위한 방법이 무엇이 있을까 고민하고 공유해봐!

• 앱 중에서 처음에 실행했을 때 약간의 로딩하는 페이지가 나타나는 앱들이 있었던 것 같아. 그런 앱들을 참고해보니 사용자가 앱을 처음에 켰을 때 딜레이 되는 느낌을 받지 않게 할 수 있겠더라구.
• 클라이언트에서 개선할 수 있는 방법은 무조건 있겠지만, 오히려 서버에서 필요한 정보들을 정확히 정리해서 전달하는 것도 방법이지 않을까 싶어.

다른 사람들의 생각은 어떤지 궁금해!

[Joon9750]

Swift에서 테이블 뷰나 컬렉션 뷰에 스켈레톤 뷰 사용해서 로딩 애니메이션을 추가할 수 있어요. 스켈레톤 사용하면 데이터 들어오기 전까지 테이블 자체의 형태는 보여주면서 로딩 애니메이션을 띄울 수 있어요. swift skeleton animation 이렇게 검색하면 참고할 자료들 많이 나올거에요.

[Joon9750]

그리고 테이블 로딩에 필요한 데이터는 사실 많지 않아요. 대신 그 테이블을 스크롤 내렸을 때 보여질 데이터들이 많아서 데이터를 받아오는데 시간이 걸리는데, 이때 페이징 기능을 추가하는 방식으로 저는 해결했어요. 물론 페이징을 위해서는 호출하는 API에도 페이징 기능이 들어가 있어야 해요.

지금은 한 번에 불러오는 데이터가 많지는 않아서 크게 느리진 않지만 나중에 데이터가 많아지면 페이징.. 없이는 쉽지 않아요.

[Joon9750]

그리고 이건 다른 이야기인데, hostUrl이나 Url 정보들은 함수에서 지역변수로 관리되는것 보다 Url들을 관리하는 클래스를 따로 두고 static으로 관리하는게 수정 사항 생겼을 때 찾기가 더 쉬워요!😁

[jayn2u]

Swift에서 테이블 뷰나 컬렉션 뷰에 스켈레톤 뷰 사용해서 로딩 애니메이션을 추가할 수 있어요. 스켈레톤 사용하면 데이터 들어오기 전까지 테이블 자체의 형태는 보여주면서 로딩 애니메이션을 띄울 수 있어요. swift skeleton animation 이렇게 검색하면 참고할 자료들 많이 나올거에요.

이 정보는 굉장히 도움이 많이 될 것 같아. 나도 로딩 애니메이션의 필요성을 이번 데모 프로젝트를 하면서 많이 느꼈거든. 좋은 정보 공유해줘서 고마워!

그리고 테이블 로딩에 필요한 데이터는 사실 많지 않아요. 대신 그 테이블을 스크롤 내렸을 때 보여질 데이터들이 많아서 데이터를 받아오는데 시간이 걸리는데, 이때 페이징 기능을 추가하는 방식으로 저는 해결했어요. 물론 페이징을 위해서는 호출하는 API에도 페이징 기능이 들어가 있어야 해요.

지금은 한 번에 불러오는 데이터가 많지는 않아서 크게 느리진 않지만 나중에 데이터가 많아지면 페이징.. 없이는 쉽지 않아요.

아직 서버와 함께 작업하는 일은 많이 안해봐서 이 솔루션을 다루는 방법은 시도해보지 못하겠지만, 꼭 기억하고 있다가 나중에 활용해볼게!

그리고 이건 다른 이야기인데, hostUrl이나 Url 정보들은 함수에서 지역변수로 관리되는것 보다 Url들을 관리하는 클래스를 따로 두고 static으로 관리하는게 수정 사항 생겼을 때 찾기가 더 쉬워요!😁

이 정보 역시 참고자료들을 많이 확인하다보니까, URL을 지역변수로 사용하는 경우는 확실히 없더라고! 특히 콜백함수를 사용해서 completion handler로 메인 스레드에서 작업을 실행하는 코드를 많이 봤어. 생각 나누어주어서 고마워!

[jayn2u]

문제 해결

문제

• 서버에서 데이터를 가져오는 것과 서버에서 가져온 데이터 중 URL로 저장된 이미지를 다운로드 하는 작업 두 가지 모두 비동기처리를 해주어야 하는데, 로직을 구현하는데 있어서 어려움을 겪었음.
• 특히 서버로부터 데이터를 가져오는 것은 문제 없었지만, 이미지를 다운로드 하는 작업이 문제였음.

해결

• 결국은...외부 라이브러리...
• 공식 라이브러리를 사용하고 싶었지만, 외부 라이브러리가 너무 많은 것을 추상화해서 작업을 더욱 쉽게 할 수 있었다.
• 사용했던 외부 라이브러리는 SDWebImage라는 라이브러리이다.
• 화면상 뭐가 달라졌냐 싶을 수도 있는데, 우선 디버그 콘솔에서 스레드 처리에 관한 경고 메시지가 아무것도 발생하지 않는다.
• 또한 앱이 로드되었을 때 처음 화면에 보이는 것만 우선적으로 이미지가 다운로드 되는 것을 볼 수 있고, 스크롤하면 그 때 다른 이미지도 다운로드 되는 것을 볼 수 있다.

동작화면