[부스트코스] iOS 프로그래밍 3강 - 날씨정보를 보여주는 애플리케이션 제작하기

드디어 3강을 다 들었다.

3강에서는 테이블 뷰와 json 데이터를 활용하는 방법에 대해 학습했다.

해당 기능을 이용하여 구현해야 하는 과제물은 날씨정보를 보여주는 애플리케이션이다.

(부스트코스 3강 프로젝트 C)

일단 프로젝트에 필요한 asset에 import해 주었다.

asset에 담긴건은 국가 아이콘, 날씨 아이콘, 날씨에 대한 정보였다.

각각 날씨에 대한 정보는, 각각의 json파일로 이루어져있으며,

해당 json파일의 데이터는 다음과 같이 구현되어 있다.

데이터 셋만 봐서는 어디에 어떤 파일을 사용해야하는지 바로 감이 오지는 않았다.

그래도 이것저것 써보라고, 구성되어 보인다.

메인화면 구성하기

우선 가장 첫 화면을 구성하기로 했다.

화면 구성은 테이블 뷰로 이루어져 있고, 셀 왼쪽에는 국기 이미지, 오른쪽에는 국가 이름을 보여주며, 악세서리 뷰를 이용해 다음화면으로 이동 가능함을 표현한다.

기능은 테이블 뷰 셀을 선택 했을 때 화면 2로 전환되는 것이다.

우선 이를 구현하기 위해 메인 뷰에 navigation controller를 embed했다.

그 다음으로는 테이블 뷰 컨트롤러는 메인 뷰에 삽입하고, cell을 추가해 주었다.

간단하게 스토리 보드에서 화면을 구성한 이후에

코드를 짜 주었다.

우선 country.json 파일을 이용하기 위해 Contries라는 스위프트 파일을 만들어, 자료형을 선언했다.

이름의 경우 _(언더바)를 사용하지 않기 위해 codingKey를 이용해서 바꾸어 주었다.

데이터를 이용하여 cell에 정보를 띄우던 중 아래와 같은 에러가 발생하였다.

Thread 1: Exception: "unable to dequeue a cell with identifier cell - must register a nib or a class for the identifier or connect a prototype cell in a storyboard"

항상 하다보면 뭔가를 빼먹게 되던데, 이 에러는 스토리 보드에서 cell 항목에 identifier를 설정 해주지 않아 발생 한 문제였다.

설정을 해주니 정상적으로 작동 하였다.

간단한 기능을 구현 한 후, cell을 customizing 해 주었다.

각 셀은 왼편에 국기, 오른편에 나라의 한국어 이름, 악세서리 뷰 아이콘이 있다.

해당 클래스를 선언하는 swift파일을 만든 위 스토리 보드에서 각각에 연결해 주었다.

이렇게 한 뒤 오토레이아웃을 걸어주면 다음과 같이

이미지와 라벨이 중첩되어 버리는 현상이 발생한다.

속성에 상관없이 다 왼쪽 끝에 붙어 버리는데 어떻게 해결해야 할 지 아직 찾지 못했다.

일단 그부분은 넘기기로하고, 네비게이션 바 title을 설정해 준 후 뷰 컨트롤러를 생성해서 연결 해 주었다.

도시 목록 화면

해당 화면은, 선택 한 국가의 도시 목록이다.

네비게이션 아이템의 타이틀은 국가이름, 테이블 뷰 셀은 날씨이미지, 도시명, 온도, 강수확률, 악세서리뷰 로 이루어져있다.

테이블 뷰 셀을 선택하면 날씨 세부 정보를 보여주는 뷰로 전환된다.

해당 뷰는 테이블 뷰 구현과, 데이터를 불러오는 것은 이전 메인화면과 동일 하다.

다만 데이터를 불러오고, 네비게이션 아이템의 타이틀을 지정하기 위해

이전 뷰에서 데이터를 가져 올 필요가 있다.

이 때 segue를 이용하여 데이터를 미리 준비(?)시킬 수 있다.

해당 코드는 메인 뷰에 작성한 코드(ViewController) 밑에 다음과 같이 구현하였다.

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        guard let nextViewController: secondViewController = segue.destination as? secondViewController else {
            return
        }
        
        guard let cell: mainCustomTableViewCell = sender as? mainCustomTableViewCell else {
            return
        }
        
        nextViewController.textToSet = cell.name?.text
        nextViewController.assetName = cell.asset
    }