찌모

Networking 동작에 대해서 배워보자

Chap 14-1. 네트워킹 오버뷰

상당히 많은 앱에서 이미 중요한 기능이다.

넷플릭스, 애플뮤직, 페이스북 등

세 개의 앱 모두 네트워킹이 중요한 기능이다.

넷플릭스부터 보면,

1. 컨텐츠 리스트를 받아올때,
2. 사용자 회원정보를 서버로부터 받아올 때,
3. 컨텐츠를 시작할 때, (동영상스트리밍)

애플뮤직

1. 컨텐츠 리스트를 받아올 때,

2. 사용자 정보를 받아올 때,

3. 사용자가 클릭한 음악을 재생요청할 때, (음악 스트리밍)

페이스북

1. 뉴스피드에 컨텐츠를 받아올 때

2. 사용자 정보를 받아올 때,

3. 새로운 노티 정보 

Networking 이 안된다면???

대부분 기능을 못 할 것이다.

iOS에서는 어떻게 Networking 기능을 하게 되는 걸까?

iOS에서는 URLSession 을 통해서 구현한다.

컴퓨터 입장에서는 네트워크는 매우 느린 작업이다. 메모리접근, 디스크파일 읽기 등에 비해서는 상당히 느린 작업이라고 할 수 있다.

Networking is Slow.....

사용자 입장에서는 네트워크 유무와 상관없이 앱의 반응성이 상당히 중요하다.

앱이 네트워킹하는 동안에 로딩중만 계속 뜨면 화가 날 것이다.

사용자를 화나게 하는 원인은 뭘까? 동시성을 만족해주지 못해서이다.

동시성(Concurrency) : 동시에 여러 개의 일을 수행하는 능력.

App + Concurrency 를 만족해야하는 것이 중요하다. 

IOS에서는 GCD & Operations 을 통해서 동시성이 필요한 작업들을 관리해 줄 수 있다.

특히 GCD를 통해서 어떻게 하면 동시성을 안정적으로 만족시킬지 공부할 예정이다.

이번 Networking 챕터에서는 

• Concurrency
• GCD
• HTTP
• URLSession

을 배울 예정이다.

Chap 14-2. HTTP 개념

Networking : 서버와 앱 간에 데이터를 주고 받는 것

어떻게? HTTP 라는 방법으로  REST API 를 이용해서 JSON 타입의 데이터를 주고 받는다.

HTTP는 웹사이트 주소에서도 나타난다. 왜냐하면, 서버에서 데이터를 받을 때, HTTP 라는 방법을 쓰자고 약속했기 때문이다.

JSON은 전 세계적으로 쓰자고 약속한 것은 아니지만, 대부분의 기업에서 이 타입의 데이터를 쓴다.

HTTP (Hyper Text Transfer Protocol)

: 원래는 클라이언트  측의 HTML 등의 document 타입을 서버에게 전송하는데 사용했었는데, 인터넷 사용이 폭발적으로 증가하면서, 다양한 데이터 타입을 HTTP를 통해서 보낼 수 있게 되었다.

어떻게 작동하지?

서버와 클라이언트는 메시지를 주고 받는 형식으로 의사소통을 한다.

-> 어떻게? 적절한 HTTP request Method 와 URL 을 사용해서 의사소통한다.

클라이언트가 서버에게 request 메시지를 보낸다. 예: 인기가요 100 보여줘

서버는 JSON 형태의 데이터를 사용해서, 요청에 대한 응답으로 response 메시지를 보낸다.

어떻게 Request를 보내지? 

HTTP Request Method 4가지.

1. POST : create

2. GET : read

3. UPDATE : Update

4. DELETE : Delete

우리는 사실 일상적으로 Get 을 이용해서 HTTP request method 를 보낸다. 

예) 우리는 구글링을 하기 위해서 주소창에다가 URL을 입력하고 엔터를 친다. -> 서버에 request를 하는 방식

URL(Uniform Resource Locator) : 리소스의 주소를 나타내는 것

우리는 URL을 통해서 서버에 요청을 하는 것이다. 

request를 좀 더 자세히 살펴보자.

Request를 할 때, Request header & body 를 통해서 우리가 필요한 정보들을 추가적으로 실어서 요청을 한다.

응답할 때도 Header 와 Body 로 나누어져서 내려오게 된다.

Header에는 아주 중요한, 상태코드가 같이 내려온다. 

예) HTTP/1.1 200 ok //서버 상태 괜찮다는 뜻

body 에는 content type 이 담겨 있다. 어떤 타입의 데이터가 전달될 것인가를 알려준다.

예전에는 망 환경 때문에 텍스트만 주기 급급했는데, 이젠 동영상을 보낼 때도 HTTP를 이용한다.

HLS ( HTTP Live Streaming) 을 이용해서 영상, 음원을 보낸다.

Chpa 14-3. HTTP 실습

구글에다가 POSTMAN 을 검색해서 다운받자. POSTMAN 을 이용해서 HTTP 방식으로 네트워킹 할 수 있다. 

Chap 14-4. Concurrency (동시성)

쉬운 말로 하면, 한 번에 여러 개의 일을 하는 것을 의미한다.

App은 한 번에 여러 개의 일을 해야한다!

App은 무슨 일을 할까?

-사용자 인터랙션 처리

- 네트워킹

- 백그라운드에서 파일 다운로드

- 파일 저장하고 읽기

만약 네트워킹을 하느라 사용자 인터랙션 처리를 하지 않으면? 사용자가 빡침

그러므로, App은 항상 동시에 여러 개의 일을 하고 있는 것처럼 모습을 보여야 한다.

먼저 각각 일에 대해서 작업 번호를 지정해주자.

작업 1. 사용자 인터랙션 처리

작업 2. 네트워킹

작업 3. 백그라운드에서 파일 다운로드

작업 4. 파일 저장하고 읽기

 ++ 컴공에서는 이러한 작업을 스레드라고 한다.

스레드1

스레드2

스레드3

스레드 4 

모두 동시에 처리하는 모습을 보여주어야 한다.

스레드 간 작업을 엄청 빨리 전환시켜주어서, 동시에 여러 개를 수행하는 효과를 보고 있다.

앱으로 돌아와보면, 앱에서는 스레드를 동시에 처리해주어야 한다(사실 동시에 하는 것처럼 보여야 한다).

특히, 작업 1 과 같은 사용자 인터렉션 스레드에 대해서는, 메인 스레드에서 처리하도록 설계가 되어있다. 

메인 스레드는 사용자 인터렉션 스레드를 처리하는 동시에 UI 표시하는 작업을 하고 있다.

따라서 복잡한 계산이나 네트워킹처럼 느린  작업은 메인 스레드가 아닌 다른 스레드에서 처리해야 앱의 반응성을 빠르게 가질 수 있다.

그래서 우리는 의도적으로 UI 관련, 사용자 인터렉션 관련 일들은  메인 스레드에서 처리하고, 나머지 일은 다른 스레드에서 처리하도록 코드를 작성해주어야 한다.

Chap 14-5~6. GCD 개념, 실습

iOS 개발 시, 동시성을 제공해주기 위해 사용되는 API 에 GCD가 있다.

GCD(Grand Central Dispatch)

-해야할 일들(코드블럭)을 만들어서 GCD에 넘기면 시스템에서 알아서 스레드 할당해서 안전하게 수행시켜준다.

-스레드 위에 만들어진 녀석.(스레드랑 개념이 비슷하다)

-Task를 Queue를 이용해서 관리한다.

Queue ; 컴공에서 말하는 하나의 자료구조

-> First In First Out 만 알면 된다!!! 먼저 들어 온 게 먼저 나감

GCD 에서 사용하는 queue 는 Dispatch Queue 이다.

Dispatch Queue 의 타입

1.  Main Queue ; 메인 스레드에서 작동하는 큐

2. Global Queue; 시스템에 의해 관리되는 큐. 

QoS(Qulity of Service);작업우선순위

1. userInteractive; 메인 스레드에서 사용자 터치와 같이 제일 급한 거 처리할 때

2. userInitiated; 사용자의 결과를 기다리는 작업; 거의 바로 수행되어야 하는 작업

3. default; 1, 2 보다 덜 중요한 작업

4. utility; 수초에서 수 분 걸리는 작업

5. background; 보통 사용자에게 당장 인식될 필요 없는 작업

3.  Custom Queue

Dispatch Queue를 직접 만든다. 

두 개의 Queue 같이 쓰기

-작업간에 의존해야하는 상황일 때, 

-예) 큰 이미지 파일을 다운받고 나서 화면에 그 이미지를 보여주기 (결과에 따라 UI 보여줘야할 때)

이제 Queue 에 들어온 Task 를 어떻게 수행해야할 지 결정하는 방법을 배워보자.

GCD에서는 Task를 동기, 비동기식으로 수행할 수 있다.   

Sync: 앞의 작업이 다 끝나고 나서 작업을 시작하는 것

Async: 앞의 작업이 다 끝나지 않았음에도 다음 일을 시작하는 것.

1. Async

상황:

둘 다 global 큐,

위의 코드는 우선순위가 낮게 backgraound, 아래 코드는 우선순위 높도록 userInteractive

둘 다 Async로 작업 수행하도록 하였다.

Async 이기 때문에, 노란색 이모지가 다 나오지 않았는데도 보라색 이모지가 나온다.

우선순위 차이에 따라서 수행이 된다는 점도 확인이 가능하다.

2. Sync

우선순위가 낮음에도 불구하고, sync이기 때문에 앞의 작업이 다 끝나야 다음 작업이 시작됨을 알 수 있다.

--> sync작업은 뒤의 프로그램을 블록시킨다는 것을 알게 되었다.

--> 무거운 작업을 Sync로 잡아버리면, 뒤의 작업이 불가하기 때문에, 용량이 큰 파일 다운로드 등의 작업은 Async를 사용한다.

Chap 14-7. URLSession 개념

데이터 주고 받을 때 , HTTP 프로토콜을 사용한다.

URLSession 는 URLSessionConfiguration을 통해서 생성된다. 

생성된 URLSession은 여러 개의 URLSessionTask를 만들 수 있다. 또한, URLSession은 Delegate를 통해서 네트워킹 중간 과정을 확인 할 수 있다(필수아님)

URLSessionConfiguration Class 타입 세 가지

1. Default : 기본 통신할 때(대부분 이거 사용)

2. Ephemeral: 쿠키, 캐시를 저장하지 않을 때 (크롬이나 사파리에서의 프라이빗 모드)

3. Backgraound : 앱이 백그라운드있을 때

URLSessionTask 세 가지

1. URLSessionDataTask: 기본적으로 데이터 받는 작업, 

2. URLSessionUploadTask: 파일 업로드 할 때 

3. URLSessionDownloadTask: 파일 다운로드 받을 때

즉, iOS에서 Networking 할 때는 URLSession을 사용한다.

Chap 14-8~10. URLSession 실습

1. URL 생성방법

말로만 들어봤던 디자인패턴.

디자인 패턴이라고 디자이너들을 위한 것이 아니다. 디자인 패턴은 개발자를 위한 방법론이다.

그럼 오늘은 디자인 패턴에 대해서 알아보자!

Chap 10-1. 디자인패턴 기초

대표적으로 MVC, MVVM 이 있다.

어떤 분야, 목적을 달성하려고, 효율적으로 만든 것이다. 예) 운동패턴, 공부패턴 등..

예전에는 개발을 마구잡이로 했었다. -> 유지보수 비용 매우 부담됐었다.

따라서, 정리를 잘 하고 특정 패턴을 만들어서 유지 보수 비용을 줄이기로 했다.

그래서 고안된 것들이 MVC, MVVM 등이 있다.

디자인패턴의 목표는 두 가지가 있다.

1. 기술부채 최소화

2. 재사용 및 지속 가능

정리하자면, 

코드 구조에 대한 전략을 "디자인 패턴" 또는 "클린 아키텍쳐" 라고 부른다.

Chap 10-2. 디자인 패턴 기초 2

최근에는 대부분 MVVM 을 사용한다.

예전에는 MVC 를 많이 사용했다. 

우선, MVC (Model - View - Controller)를 살펴보자.

MVC 패턴은 위와 같은데, Model 과 View의 중개자 역할을 하는 ViewController 의 역할이 너무 너무 많았다. 그래서 Massive View Controller 라는 별명까지 얻게 되었다고 한다. 이 문제를 해결하기 위해서, MVVM이 개발되었다.

MVVM 패턴 구조는 다음과 같다.

MVC vs. MVVM

MVVM은, 

1. ViewController 가 모델에 직접 접근 못함.

2. ViewController가 ViewModel 이라는 클래스를 새로 가짐

3. ViewModel이 ViewLayout에 위치한다.

4. 많은 일들을 ViewModel에게 위임함.

-> ViewController가 할 일이 적어져서, 할 일이 명확해졌다.

-> 할 일이 명확해지므로, 수정이 용이하고 유지보수에 적은 비용이 든다.

MVVM 패턴을 실제 구현해봤을 떄 구조를 살펴보자.

기술 부채를 줄이고, 재사용 가능 및 비용을 줄이기 위해 코드를 수정하는 과정을 리팩터링이라고 한다.

사용자 입장에서는 작동이 똑같아 보일 수 밖에 없다. 내부 코드만 바꾼 것이기 때문이다.

리팩터링 목표는,

1. 중복제거

2. 단일 책임 갖기(하나에 한 가지 기능)

특히, 단일 책임 갖기 전략으로는

"10, 200 rule" 이 있다. 메소드는 10줄 안에, 클래스는 200줄 안에 코드를 짜라는 전략이다.

초보자라면, "30, 400 rule" 훈련을 강추한다.

Chap 10-3. MVVM으로 리팩터링 하기 1

원피스 앱 짰던 거를 리팩터링 해보자.

우선 전략을 짜보았다. 

1. DetailViewController화면   

<DetailViewController MVVM 패턴 적용 전략>

MVVM 디자인패턴을 적용해보자. 일단, Model View ViewModel 을 찾자    

Model

    -BountyInfo(현상금과 이름 하나로 해서 만들자)

View

    -imgview, nameLabel, bountyLabel

    View 들은 viewModel을 통해서 구성되기

ViewModel

    -DetailViewModel

    Viewcontroller가 직접 Model에 직접 엑세스 안되므로, ViewModel을 만들어야한다.

    BountyViewModel을 만들고, ViewLayer에서 필요한 메서드 만들기.

2. BountyViewController 화면    

<BountyViewController MVVM 패턴 적용 전략>

MVVM 디자인패턴을 적용해보자. 일단, model view viewmodel 을 찾자

Model

    -BountyInfo(현상금과 이름 하나로 해서 만들자)

View

    -imgview, nameLabel, bountyLabel

    View 들은 viewModel을 통해서 구성되기

ViewModel

    -DetailViewModel

    Viewcontroller가 직접 Model에 직접 엑세스 안되므로, ViewModel을 만들어야한다.

    BountyViewModel을 만들고, ViewLayer에서 필요한 메서드 만들기.

BountyViewController 부터 하나씩 리팩토링 해보자. 

1. BountyInfo 만들기.

우선 struct를 만들었다. 그 다음 기존의 것들을 대체해보는 작업을 해주었다.

이렇게 nameList와 BountyList가 따로따로 있어서, 이름과 현상금이 함께 있지 않아서, 이름이나 현상금 정보를 업데이트 할 때 어려움이 있다. 이 부분을, 다음과 같이 변경해주었다. 

bounty는 내맘대로 그냥 새로 지정해주었다.

이렇게 짝 맞춰서 변경하면, 다음과 같이 오류가 뜬다. 오류를 하나씩 고쳐보자. 

47~48부분, 64부분, 74~77부분 총 세 부분이다.

먼저, 47~48 부분 수정.

64부분 수정.

74~77부분 수정.

실행을 해보자! 결과는 예상하다시피 같다.

그 다음으로는 DetailViewController을 리팩토링해보자.

일단, bountyInfo를 만들어주고, name과 bounty 부분을 지워주자.

그러면, bountyViewController에서 아래와 같이 문제가 생길거다. (name 이랑 bounty를 지워서).

수정해주자.

다시 돌아와서, DetailViewController도 마저 수정해주자. 

방금 name, bounty를 지워서 아래와 같이 오류가 나는 거다.

이거를 아래와 같이 수정해준다.

빌드해보면 여전히 결과는 같다! 1차 리팩토링 끝!

Chap 10-4. MVVM으로 리팩터링하기 2

Chap 10-3 에서는 Model 만 리팩터링했었는데, 이번에는 View 와 ViewModel까지 리팩터링해보자.

우선 ViewModel을 만들어주자. ViewModel은 data를 가지고 있어야 한다고 했었다.

아이패드에다가 그냥 끄적이던 거를 잊어버리기 전에 정리하기로 했다! Chap 1 은 몸풀기 수준으로 앱 개발자가 되기를 설명해 주셨다.

Chap 1-1. iOS 개발자 되기

• 모바일 개발자 수요 증가 추세
• 처우가 좋다
• iOS 개발자는 희소하다

코딩은 많이! 습관처럼 해야 실력이 는다.

1. 코딩 친구 찾자.

• 학습 공동체를 만들자.
• 다짐맨 벗어나기
• 함께 자라기

2. 강의 1000개보다 코딩 10줄이 낫다.

3. 무엇을 코딩할까? 

• 1차: 초단순 앱 (최대한 쉬운 앱_ 예: 계산기, 앱에 버튼이나 이미지 띄어보는 수준)
• 그 다음은 초단순 앱 응용 
• 그 다음은 나를 위한 앱: 매일매일 내가 만든 앱을 써보고 사용자가 되어 아쉬운 점을 보완하자. 사용자 가치를 창출하는 앱을 만들자! 다수를 위한 앱 만들기 추천

Chap 1-2. 앱 개발자되기 1

준비물 

1. 맥북: 아이맥 또는 맥북프로

2. 최근 OS

3. Xcode 11

Xcode11

- 스토리보드(앱 디자인) : 유저플로우 등

- 시뮬레이터 : 화면 띄어보고 버그 확인

- 머신러닝 기능 제공

- AR 기능 제공

Chap 1-3. 앱 개발자되기 2

초기 설정(New create 시)

• iOS > Single View App
• Swift / Storyboard

Storyboard -> UI 작성 가능

• View Controller > View  : 오른쪽에서 view 속성 확인 가능
• Toolbar에서는 run/stop 가능

오른쪽 상단 + 버튼 누르면 요소 추가 가능!

• 예: Lable 선택 후 드래그해서 스토리보드에 옮기기
• 오른쪽 상단, 오른쪽에서 세번째 --연필 아이콘-- 클릭 하면 편집 가능

Chap 1-4. 앱 개발자되기 3

코딩 배우기 어려운 이유

- 사실 구글/애플은 코딩 전파를 위해 엄청난 노력을 하고 있다.

- Swift Play 라는 App 도 있음

- Teachable Machine : 구글에서 머신러닝 전파를 위해 노력

--> 하고 싶은 어플을 하나 만들자 !! (초간단 한 것 강 추 ! )

   예 : 계란 삶기 어플, 환전 어플 등

학습 패턴들

1. 강의를 배우면서 자신감 뿜뿜 (책으로 공부는 비추)

-> 아이디어 잘 적어두기

2. 강의 다 끝나고 나서 막막함

-> 친구 필요

3. 망망대해, 뭐부터 시작해야지? (흐지부지되기 쉬움)

-> 분명한 목표, 시기 설정

-> 목표에 맞지 않는 공부는 나중에! 집중해야할 시기.

4. 다 ㅈ밥이다!! Fire!!

-> 자만감

-> 실무자들과 대화/채팅! 배워나가자.

Chap 1 정리 끝!!

강의를 반 정도 들었다. 완강은 무조건 이번주 안에 할거다.

정보보호학과(컴퓨터 관련학과)이기는 하지만, iOS 앱 개발에 대해서는 정말 무지한 수준이어서 솔직히 걱정이 많이 됐다. 내가 앱개발을 할 수 있을까.. 이런 생각이 들었다. 어쨌거나 그래도 열심히 필기도 해가면서 들었다.

강사님은 네이버에서 일하셨다고 하셨다. 강사님 스타일이 나랑 정말 잘 맞아서 좋았다. 약간 동네 형 느낌으로 친근하게 잘 가르쳐 주신다. 중학생도 알아먹을 수 있을 정도로 실생활 예제를 정말 많이 들면서 설명을 해주신다. 그렇다고 설명하는 느낌은 또 아니고..ㅋㅋㅋ

말투가 요거는 요러케 하면 됩니다~ 이런 식으로 잘 알려주심 

제일 좋은 건 강의 시간. 강의 하나당 시간이 짤막짤막해서 제일 좋았다. 포기할 만 하면 강의가 어느새 끝나있어서 뭔가 뿌듯한 느낌

또, 유료 강의다 보니 농담하는 강사 싫은데, 이 강사님은 굳이 농담 안하는 데도 뻘하게 웃기다ㅋㅋㅋㅋ 뭔가..전형적인 개발자를 보는 것 같다.

아이패드에다 손글씨로 필기를 했는데, 아무래도 그러면 찾아보기도 어려워서 여기에다 다시 정리해서 올려야겠다.

이번에 배운 거에다가 나중에 알게 되는 새로운 지식들도 차곡차곡 쌓아올려야지.

일단 완강하자!

결론: 강추!