찌모

리스트의 활용도는 아주 높다.

우선 새 프로젝트를 만들어주었다.

그 다음 간단한 레이아웃 설정 작업을 해주었다.

res>layout>activity_main.xml 에서 LinearLayout 으로 레이아웃 변경을 했다.

그 다음 리스트뷰 코드를 작성해주었다.

그랬더니 이렇게 리스트뷰가 쭈욱 설정되었다.

activity의 orientation을 vertical로 설정해주었더니 화면 정렬이 세로로 되었다.

리스트뷰 안에다가 아이디값을 부여했다.

메인액티비티로 와서 리스트뷰를 선언해주고 동작을 연결해주었다.

이제 리스트뷰가 아니라 리스트(문자열을 받는)를 만들어 주었다.

이제 만든 리스트와 리스트뷰를 연결해주는 중간다리 역할인 어댑터를 만들어주자. 

나는 ArrayAdapter라는 이름의 어댑터를 만들었다.

이제 리스트뷰에다가 어댑터를 세팅해준다.

이제 연결이 완료되었고, 아이템을 추가해주자.

데이터를 모두 입력해주고, 데이터가 날아가지 않도록 저장을 해주었다.

빌드를 해봤다.

내가 원하는 대로 리스트뷰가 완성 되었다!!!!

6강 끝!

app>manifests>AndroidManifest.xml 이라는 것이 있다.

AndroidManifest는 manifests라는 패키지 안에 들어가 있다.

이 안에는 application 안에는 액티비티들과, 액티비티 안에는 Intent 가 있다.

application에서는 어플의 기본 세팅을 해줄 수 있다.

minmap을 커맨드 누르고 클릭하면 여러가지가 나온다.

지난 강의처럼 런쳐 아이콘 등을 설정해줄 수 있다.

icon 부분에 원하는 이미지를 넣으면, 원하는 이미지로 앱 아이콘이 설정이 된다.

roundIcon은 앱 아이콘 끝부분을 둥르스럼하게 처리해 주는 역할을 한다.

res는 리소스 폴더이다. res>drawable 은 주로 이미지 파일들을 모아놓는 곳이다.

layout은 말 그래도 레이아웃을 지정해주는 곳이다. 주로 액티비티와 연결하는 레이아웃 파일들을 담당한다.

minmap은 기본적인 아이콘들과 런쳐를 제공한다.

minmap의 이미지들 괄호 안에 써있는 것은 해상도를 의미한다. 

value 에서는 여러가지를 설정할 수 있다.

컬러는 말그대로 색상설정이 가능하다.

strings는 자주 쓰는 문장 등을 단축어로 저장하는 곳이다. 일종의 커스텀 단축키 느낌.

스타일은 앱 테마, 컨셉 등을 설정할 수 있다. 여러가지 디자인과 테마들을 모아놓은 곳이다.

5강 끝!

imageView: 화면에 자신이 원하는 특정 이미지를 띄울 수 있게 한다.

그럼 시작!

지난시간에 했던 프로젝트의 activity_main.xml 에다가 ImageView를 삽입하고 크기를 지정해준다.

src는 자료의 링크를 보여주는 명령어이다.

이번에는 toast 메시지(팝업메시지)를 하단에 띄어보자.

ImageView 에다가 id를 주고,

.java와 연결해주기 위해서 변수선언을 해주고, 

액션을 취할 코드를 입력해준다.

아 그리고, 이미지가 잘려서 안보이길래

vertical로 변경해주고 실행을 해보았다.

기본 화면

이미지를 누르면 내가 지정한 텍스트가 팝업한다!!

이번에는 정렬을 배워보자.

이미지뷰를 가운데나 우측으로 정렬해보자.

activity_main.xml 에다가 LinearLayout을 적어주고,

적어두었던, ImageView를 LinearLayout 안에다가 적어주었다.

LinearLayout을 적어줌으로써, LinearLayout만의 공간이 생긴 것을 확인할 수 있다.

여기서 gravity를 설정해주었다. 이는 중력이라는 뜻으로, 여기서 왼쪽정렬, 가운데정렬, 오른쪽 정렬을 설정할 수 있다.

나는 가운데 정렬을 해주었다.

 이미지가 가운데 정렬이 된 것을 확인할 수 있다.

4강 실습도 끝!!

Intent 는, 기존의 A라는 액티비티에서 새로운 B로 이동할 때 사용한다.

쉽게 말해서 화면 전환이다.

Intent 예제를 다뤄보고 A에서 B 액티비티로 이동할 때, 텍스트 등의 데이터도 옮겨갈 수 있는 예제도 다뤄보자.

일단, New project 를 실행해서 Empty 를 선택하고, 이름을 설정해준다. 

java 를 누르면, 탭에 activity_main.xml 과 MainActivity.java 가 뜬다.

com.으로 시작하는 패키지 우클릭, New>Activity>Empty Activity 로 Empty Activity 를 새롭게 생성한다.

원하는 대로 이름을 설정해준다. 나는 SubActivity 라고 이름 붙였다. 

그러면 탭에 activity_sub.xml 과 SubActivity.java 가 생성된 것을 볼 수 있다.

1. activity_main.xml 에서 activity_sub.xml 로 이동하는 것 구현해보기.

우선 constraint layout 에서 LinearLayout으로 변경해주고, TextView 를 삭제한 뒤 간단히 버튼을 만들어 주었다.

그 다음, 버튼에 아이디 값을 부여해보자. 나는 id 값으로 btn_move 를 주었다. 이 아이디를 복사해서, MainActivity.java 에 붙여넣어서 버튼에 숨을 불어넣어주자.

우선 이렇게 java와 xml을 연결해 주었다.

이제, 버튼을 누르면, activity가 이동하는 코드를 짜주자. 위와 같이 setOnClickListener를 이용한다.

여기까지만 하면, 이제 버튼을 누르면 액티비티 간 이동이 일어날 수 있다! 

근데 이동했을 때, subActivity가 밋밋하니까 좀 꾸며주자.

레이아웃을 LinearLayout으로 변경해주고

TextView도 하나 넣어줬다.

이제 빌드를 해보자.

이동 버튼을 눌러주면~

서브액티비티로 잘 도착했음을 알 수 있다!

2. 이번에는 A액티비티에서 받은 텍스트를, B액티비티 화면에 띄어주는 (즉, 데이터전송) 예제를 해보자.

우선 activity_main.xml로 이동한다.

사용자가 입력하는 데이터를 받기 위해 EditText를 만들어주고 id를 부여하였다.

mainActivity에 가서 xml과 java를 연결해주기 위해서 변수를 선언해주고,

id값을 연결해준다.

여기까지는 여태 했던 작업과 다를 바가 없다. 사용자가 입력한 값을 전달받기위한 코드를 작성해주어야 한다.

빈 문자열을 하나 만들어준다.

사용자가 입력한 문자열을 가져오기 위해서 getText()를 사용하고, 가져온 문자열을 str에 저장한다.

근데 오류가 난다. 왜냐하면 사용자에게 받은 데이터가 string인지 아닌지 모르기 때문이다. 

사용자에게 받은 데이터를 String 처리 하기 위해서 toString()을 사용하였다. (오류 처리됨)

화면전환이 되기 전에, putExtra를 사용해서 사용자에게 받은 문자열을 받는 함수를 실행한다.

쉽게 말해서, 사용자에게 데이터를 받아서 putExtra를 이용해서 SubActivity에다가 쐈다!

intent.putExtra("별명", 받아올문자열변수); 형태로 받아오면 된다. 나는 그냥 별명과 변수명 둘다 동일하게 설정해두었다.

데이터를 쐈으니까, SubActivity에서는 받는 작업도 해주어야한다.

subActivity에서 intent로 쏜 값을 받는 코드 두 줄을 써준다. 

별명을 일치시켜야 내가 원하는 값을 제대로 받을 수 있다.

이제, activity_sub.xml 의 TextView에다가 id값을 부여해주자.

id값으로 tv_sub을 지어주고,

.java 에다가 연결해주기 위해 변수선언을 해주고,

연결을 완료해준다!!

이제 빌드해보자.

이렇게 데이터를 입력하고 이동 버튼을 눌러보면,

아무것도 안뜬다ㅋㅋㅋㅋ

그 이유는, 코드 위치가 잘못되서라고 한다.

제대로 코드가 나오게 하기 위해서, 다음과 같이 코드이동을 해주었다.

mainActivity.java의

str = et_test.getText().toString();

의 위치를

public void onClick(View v) 함수 안으로 넣어주었다.

사용자로부터 받은 데이터를 전달하는 시점은,

앱을 오픈했을 때가 아니라 버튼을 클릭했을 때 이루어지는 것이기 때문에, 위치 설정을 제대로 해주어야한다.

이제 빌드를 다시 해보자.

성공적으로 데이터 전송이 이루어진것을 알 수 있다.

3강 끝!!!!

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 정리 끝!!

이번엔 EditText를 배워보기로 했다.

#1 강의에서와 동일하게, LinearLayout 설정까지 그대로 해준다.

++ 또, 오늘은 xml 파일과 java파일의 차이점을 알게 되었다.

.xml은 정적인 요소, 즉 화면 디자인같은 개념으로, 화면을 구성하기 위한 파일이고,

.java는 동적인 요소, 즉 어떤 버튼을 클릭했을 때, 어떤 액션을 취하도록 할 것인가를 정해주는 파일이다.

아무튼 맨 처음 시작 상태 화면은 다음과 같다.

이제 시작을 해보자! EditText와 Button을 만들기로 했다.

wrap_content는 내용에 맞춰서 길이가 출력된다는 뜻이다.

id는 이름을 지정해주는 역할이라고 했다.

그래서 Button에는 btn_id, EditText는 et_id라고 이름을 지어줬다. 

여기까지하면, 내가 굳이 EditText와 Button의 위치를 정해주지 않아도, 알아서 가로로 정렬이 되어있다.

만약 세로로 배치하고 싶다면, orientation을 적어주고 vertical이라고 쓰면 된다.

여기까지는 그저 디자인에 불과했고, 버튼에다가 액션을 지정(기능부여)해주기로 했다. 액션을 지정해주기 위해서 mainActivity.java로 이동한다.

.java 로 들어와서 내가 기능을 부여하고 싶은 것에 위와 같이 변수를 설정해준다. 

그 다음, xml에서 만들어놓은 개체들에게 숨을 불어넣어주기 위해서 개체들과 .java 가 연결되도록 findViewByID를 이용해서 코드를 넣어준다.

코드가 길어보이지만 자동완성 기능이다. 버튼을 눌렀을 때의 액션을 설정해주기 위해 btn_test.setOnClickListener을 적어주었다.

버튼을 클릭하면, 설정해놓은 문자열이 나오도록 코드를 적어주었다. 여기까지 하고, 빌드해보았다.

이렇게 화면이 나타나고,

버튼을 클릭하면, 문자열이 EditText에 나타난다.

2강 끝!