jiwon1923 / news-app

using UI Table View

News-App

- Apple 관련 기사를 보여주는 News app을 만들 것입니다. - 자세한 과정은 리드미에 있습니다.

Table View와 Table view controller

• Table View : Table의 크기를 지정할 수 있다.
• Table View Controller: 전체의 뷰가 하나의 테이블

Table View

1. Table view 구성요소 결정하기

• 어떤 데이터로 구성할 것인가.
• 몇 개의 데이터로 이루어져 있는가.
• 행 클릭시 발생할 이벤트 (옵션)

2. Class 상송

• UITableViewController, UITableViewDataSource 상속

• 발생한 Error는 Fix 버튼을 눌러 해결할 수 있다.

3. 결과

Table View (Dynamic)

1. Table View Cell 추가

2. Lable 추가 및 class와 연결

• Lable은 cell 안에 추가한다.

• Table View를 보면 Dynamic Prototypes가 설정된 것이 보일 것이다.

3. 결과화면

추가) 타입캐스팅 as

• 부모와 자식 간의 관계를 정하는데에 있어 친자를 확인하는 용도이다.

1. as?

• 안전한 추론 방법이다. (내가 자식이 맞니?)

2. as!

• 강제로 추론하는 방법이다. (내가 자식이 맞아!)

News App

1. HTTP 통신

• urlsession

2. JSON 데이터 형태

• 정의: Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷
• 간단히 말하자면, 네트워크에서 통신 내에서 데이터를 주고받을 때 JSON으로 주고받는 데이터 형태
• 기본 형태: {"key":"value"} 또는 {["value","value","value"]}
• 추가: {[{"key":"value"}, {"key":"value"}, {"key":"value"}]} 이러한 배열로 선언 가능

3. 구현

• 위 결과화면에서 숫자(인덱스)가 테이블뷰에 있는 것을 볼 수 있다.
• 이를 News API에서 정보를 받아오고, 숫자(인덱스) 대신 뉴스의 title을 출력하고자 한다.

1. API 불러오기

• News API 접속 후 개인 API 키 발급

let task = URLSession.shared.dataTask(with: URL(string: "https://newsapi.org/v2/everything?q=apple&from=2021-12-07&to=2021-12-07&sortBy=popularity&apiKey=KEY_VALUE")!) { (data, response, error )in
// json 처리
}

• URLSessio.shared.dataTask의 함수 원형을 보면 URLSessionDataTask를 반환하기 때문에 변수에 저장한다.

2. json 처리 코드

(1) Dictionary

• Swift의 json = Dictionary라고 생각하면 된다.
• key와 value가 배열에 담겨있는 형태이다.

let dic: [String: String] = ["key": "value"]

만약, value의 값이 일정하지 않다면 String 대신 Any로 선언한다.

(2) JSONSerialization

• Dictionary를 jsonObject로 타입으로 변경하는 것이다.

let json = try JSONSerialization.jsonObject(with: dataJson, options: []) as! Dictionary<String, Any>

반드시 예외처리를 통해 json이 처리된 경우에만 실행되도록 do catch문 안에 작성해야한다.

(3) 특정 값 가져오기

let articles = json["articles"] as! Array<Dictionary<String, Any>>
self.newsData = articles

받아온 json에서 Key 값이 article인 것을 articles라는 상수에 저장하고, 클래스 내부 newsData에 저장한다.

(4) Table View (UI)에 표현

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

• tableView 함수에 값을 변경하는 코드를 따로 작성해야한다.

3. 결과 화면

News App Detail

• 위에서 만든 뉴스 제목을 클릭하면, 뉴스 내용을 볼 수 있도록 구현하고자 한다.

1. 클릭 시 이동할 수 있도록 구현

1. Navigation controller 추가

2. 새로 생긴 Root view 삭제

3. 기존 Table view를 root view로 설정

2. 뉴스 상세 화면

1. View Controller 추가

2. View controller scene에 id 부여 보통 클래스명과 동일하게 설정한다. (NewsDetailController)

3. Class 생성 후 위 Scene과 연결

4. Image View (1) Image view 추가

(2) constraint 추가

(3) view의 content mode 설정

• Aspect Fit으로 설정

4. 뉴스 내용 (1) Lable 추가

(2) Lable과 Image view 사이 constraint 추가

• vertical spacing

(3) Label contraint 추가

• 좌, 우 추가

5. Image view, Label을 class와 연결 (1) Image url 값 받기 (2) descriptrion 값 받기

3. 값 넘기기

• tableView delegate
• storyboard(segue) 총 2가지 방법을 사용할 수 있다.

4. 화면 이동

5. 결과화면