🌱 4주차: 네트워크 통신

 

4주차 기록 : 네트워크 통신

 

🧐 무엇을 배웠나?

 

- alamofire & swfityJSON을 사용해서 API를 통해 서버 응답받기

- key를 .gitignore와 APIKey 파일을 만들어 따로 저장하기 (깃헙에 올릴 때 키 노출을 방지할 수 있음, 기밀유지)

- 로딩바 활용 및 애니메이션 효과주기 => 데이터가 오고 있는지 아닌지를 알 수 없는 사용자에게 '데이터 불러오고 있어~' 알려주는 것.

- 일급객체 & 클로저 (문법)

- 평가과제 개선하는 방법; protocol, userDefaults, singleton

- 동기/비동기 

 

🔨 예제

 

- 카카오 검색 API 활용

- 네이버 파파고 API 활용

 

 

📚 과제

 

- 로또API를 이용해서 로또 당첨번호 일곱자리 뽑아내기. (UIPickerView, textfield를 픽커로 사용함)

- bookwarm 프로젝트 카카오 API 기능을 통해 책 검색 기능 구현하기. 

- 랜덤맥주API를 이용해서 맥주 추첨화면 만들기. (viewController로 단순히 만들기, tableView 추가해서 만들기)

- 네이버 파파고 API를 통해 번역기능 만들어내기. (수업에서 했던 것에서 언어기능 API 추가해서 기능 개선)

 

 

💦 복기

 

✔️ [복습] tableView나 collectionView를 XIB 파일로 만들어 쓰는 과제를 끝내고 XIB 없이 viewController에 쓰려고 하니 인스펙터 영역으로 cell파일을 만들고 연결 하는 걸 까먹고 뷰컨에 아울렛을 연결하려 했다. 당연히 연결이 안되었기 때문에 xcode 오류인가 싶어서 애꿎은 뷰컨트롤러 파일만 밀고 다시 만드느라 시간도 까먹어서 같은 실수 두 번은 반복하지 않겠다는 의미로 남기기.

 

 

** XIB 파일 생성하지 않았을 때 tableViewCell 연결 하는 방법

 

 

1. 테이블 뷰 선택

 

 

 

 

 

2. 셀 클래스 이름 연결

 

 

 

3. identifier 잊지 않고 지정해주기.

 

 

 

4. ViewController 영역으로 넘어와서 셀 연결 지어주기. 끝!

 

 

 

 

** (추가) XIB 파일 생성해서 tableViewCell 연결 하는 방법

 

 

1. 뷰컨트롤러에 테이블뷰 추가해주기.

- 뷰컨트롤러 파일에 테이블뷰 연결도 잊지 않고 바로 해주기.

 

 

 

 

2. XIB 파일을 체크한 채로 TableViewCell 파일 생성하기

 

 

3. 셀 이름 + identifier 설정 

 

보통 XIB 파일로 만들면 자동완성 되어 있지만, 혹시 모르니 확인 해주기.

 

 

 

identifier는 직접 지정해주어야 한다. 여기까지 하면 cell파트에서 할 일은 끝.

 

 

 

4. 뷰컨트롤러에 코드로 셀 연결하기

 

    override func viewDidLoad() {
        super.viewDidLoad()
        
        trendingTableView.dataSource = self //테이블뷰 속성 가져오기
        trendingTableView.delegate = self //테이블뷰 속성 가져오기

	//셀 연결해주기
        let nib = UINib(nibName: "TrendingTableViewCell", bundle: nil)
        trendingTableView.register(nib, forCellReuseIdentifier: "TrendingTableViewCell")
        
        
 }

 

UINib과 register 키워드로 연결해주면 된다.

 

 

5.

 

extension TrendingViewController: UITableViewDelegate, UITableViewDataSource {

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let cell = tableView.dequeueReusableCell(withIdentifier: "TrendingTableViewCell") as! TrendingTableViewCell
        
        }
        
        return cell
    }

 

연결된 셀은

let cell = tableView.dequeueReusableCell(withIdentifier: "TrendingTableViewCell") as! TrendingTableViewCell

을 cellForRowAt에 써주면 빌드했을 때 셀이 잘 연결 되어 있음을 확인할 수 있다.

 

이제 추가한 UI 기능들은 tableView처럼 extension으로 쓸 줄 알아서 편하다.

 

(+) 테이블뷰는 따로 레이아웃을 코드로 작성하지 않는듯. 이걸 모르고 컬렉션뷰 레이아웃 잡듯 잡다가 tableViewLayout이 없어서 당황했다.

 

 

 

 

 

---

 

 

 

✔️  Alamofire와 SwiftyJSON 사용해서 API 통신 하기 ⭐️⭐️

 

 

1. import 하는 게 첫 순서일 필요는 없지만, 에러 표시줄만 보면 식은땀이 나서 Alamofire와 SwiftyJSON을 사용해야할 땐 먼저 import부터 해준다.

 

 

 

2. Alamofire + SwiftyJSON 구조 이해.

 

• - AF는 Alamofire 약자인데, 더 간결하게 쓰고자 업데이트 됨.
• - url이 기본 설정으로 들어가 있어서, 내가 쓰고자 하는 API를 let url = "링크"로 선언해주야 사용 가능하다. (에러 나옴)
• - Switch 문을 보면, .success 값이 나오면 네트워크 통신이 잘 되고 있다는 의미. .failure 값이 나오면 통신에 문제가 있음.
• - json은 API가 들여쓰기 기준으로 값을 보여주기 때문에 json[ ] 형식으로 값을 가져와야 한다 (ex. . 그렇기 때문에 insomnia에서 {중괄호} 확인을 잘 해주어야 한다.
• - 가져온 값 [ ] 뒤에는 .을 찍고 stringValue인지, intValue인지 등을 잘 확인하고 붙여주기. 
• - insomnia에서 미리 들여쓰기 값을 확인할 수 있다. 대신 사용할 땐 API를 제공하는 사이트에서 필수조건이 무엇인지 잘 확인해주어야한다. 그리고 내가 API 받아오는 옵션을 뭐로 정해놓았는지도. (기억하자 네이버 언어감지 API를...🔪) 보통 parameters와 header, 암호키만 잘 설정해주면 된다. 네트워크 통신 메소드랑!
• - validate은 통신 상태를 넘버로 나타낸건데 200번대가 연결상태 양호, 400번대가 오류. 그 404가 여기에 속한다.

 

 

구조 참고 :

    func callRequest() {
        
        let url = "https://예시.예시.예시/예시"
        
        AF.request(url, method: .get).validate().responseJSON { response in
            switch response.result {
            case .success(let value): // 네트워크 통신이 잘 되는 중
                let json = JSON(value)
                print("JSON: \(json)")
             
                    
                }
               
                
            case .failure(let error): // 네트워크 통신 실패!
                print(error)
            }
        }
        
    }

 

 

---

 

 

 

✔️  HTTPS 말고 HTTP url을 가져왔는데 보안 오류 뜰 때?

 

 

이렇게 info에서 설정을 바꿔주면 된다. 그런데 이걸 항상 해줘야하는지, Alamofire + SwiftyJSON 쓸 땐 생략해도 되는지 찾아봐야 할 것 같다. 일단은 그냥 모든 프로젝트에 설정하고 있는 중..

 

 

 

---

 

 

 

 

✔️  네트워크 🦈

 

• 네트워크 통신은 단방향 통신이라 클라이언트의 요청이 있어야 서버가 응답을 한다. (클라이언트가 검색 등을 한다. → 서버가 검색 결과를 보여준다.)
• HttpMethod : Get, Post, Put, Delete (요청이 이 넷 중 무엇인지 서버가 구분해서 맞는 결과를 보여준다.)
• 인증키 (사용자가 요청을 할 때 인증키를 요구해서 (사전준비) 검증된 자에게만 데이터를 공유해준다.  서버 바보 아님.)
• API = 통신하기 위해 집계된 사이트.
• URLSession :  API를 통해 데이터를 전달하기 위해 애플이 제공해주는 URL

 

 

---

 

 

✔️ 문법

 

* 일급객체 (First Class Object) 이름 유래만 기억나서 일단 개념만 정리

 

 - 변수/상수나 데이터 구조 내에 자료형 저장

 

func rookieDraftBaseball (team : String) -> Bool {
    let teamArray = ["기아 타이거즈","한화 이글스","케이티 위즈"]
    return teamArray.contains(team) ? true : false
} //1. 자료형 함수 생성

let pickTeam = rookieDraftBaseball //2. 상수나 변수에 함수 자체를 대입

pickTeam("기아 타이거즈") // true
pickTeam("엘지 트윈스") // false

 

만든 함수식을 상수나 변수로 저장해서 사용하는 방식.

 

(+) 함수명이 같으면 타입 어노테이션 필수, 파라미터까지 같으면 함수 표기법을 사용해서 타입어노테이션 생략해서 사용가능.

 

 - 함수의 반환값으로 자료형을 사용

 

func yesPostSeaon () -> String {
    return "가을야구 진출"
}

func noPostSeason () -> String {
    return "가을야구 탈락"
}

func forPostSeaon (team : String) -> () -> String {
    let teamArray = ["기아 타이거즈","한화 이글스","케이티 위즈"]
    return teamArray.contains(team) ? yesPostSeaon : noPostSeason
}

let call = forPostSeaon(team:"기아 타이거즈")
call() // 결과값: "가을야구 진출"

 

제일 처음 나오는 -> 를 기준으로 오른쪽이 반환값을 의미.

 

func forPostSean (team : String) -> () -> String

 

리턴되어 나오는 함수는 즉 오른쪽 반환값.

 

 

 - 함수의 인자값으로 자료형을 전달

 

은... 일단 보류. 수식과 관련된 전달방법같은데 보면 볼수록 헷갈린다. string을 int로 반환해주는.. 건가? 아무래도 가장 클로저 개념이랑 비슷해서 안 와닿는 것 같다. 나중에 보강하기.

 

 

 

 

 

---

 

 

 

✔️ 동기와 비동기

 

🔖 하드캐리하는 닭 알바생 생각하기

 

- 동기 (Sync): Queue(매니저)에 들어간 작업이 끝날때까지 기다렸다가 메인쓰레드(닭)이 다음 작업을 하는 경우.

- 비동기(Async): 메인쓰레드가 여러 개의 task를 담당하고 있던 걸 다른 쓰레드들과 역할 분담을 한다 (- >concurrent). (큐에게 보내놓고 바로 다음 작업할게~ task 1,2를 주면 task3를 바로 시작)

 

- 큐(queue)는 task를 분배하는 역할.

 

동작 구조:

- 큐가 분배를 하긴 하는데 거의 메인 쓰레드에 몰아준다 = 직렬 (serial)

- 여러 쓰레드들에 골고루 분배해주는 것 : concurrent (global)

 

- dispatchQueue + main (serial로 동작)/ global (concurrent로 동작) : 자료 통신의 구조를 결정한다.

- 잘 사용하지 않는 것: global.sync→ 결국엔 메인이 일을 함, main.async → 큐가 아무것도 못함.

 

- global.async의 장점:

1. 더 빨리 끝난다.
2. 어떤 작업이 언제 끝날지 모른다. (그래도 언젠간 끝나긴 끝남)

 

 

요약:

 

main.async → UI update

global.async → network 담당

 

 

 

 

 

 

 

 

---

 

 

 

인생에서 코딩을 시작한지 한달 차의 나:

 

문법 !!!! 응용 !!!! 리팩토링 !!! 충분한 연...습...