나의 iOS 재학습기 1부

이 블로그의 아이디어는 내가 배운 내용을 가능한 한 자세하게 공유하고 "zero-to-hero" 자습서에서 학습할 때 가졌던 모든 질문에 답변/답변하는 것입니다.

이 게시물에서는 노련한 개발자가 만드는 데 5분도 채 걸리지 않을 정도로 매우 간단한 것부터 시작하겠습니다. 하지만 이봐, 우리 모두는 어딘가에서 시작하는데 여기서는 왜 안돼

여기에서 우리가 만들 것의 미리보기가 있습니다:

모든 프로그래밍 언어 전통과 마찬가지로 사용자가 버튼을 탭하면 위의 텍스트가 무작위로 다른 언어로 "hello world" 텍스트를 표시하는 "hello world" 앱을 만들 것입니다.

이 앱의 목표는 다음의 기본 사항을 이해하는 것입니다.

1. UIKit의 UILable, UIButton 및 UIImageView.
2. Swift 변수 및 배열 선언.
3. IBOutlets 및 IBActions.

시작하겠습니다!

먼저 Xcode를 열고 다음과 같이 새 앱을 만듭니다.

핵심 부분은 다음과 같습니다. 멀티플랫폼 탭 대신 iOS 탭을 선택하세요. 그렇지 않으면 나중에 스토리보드를 선택할 수 없으며 SwiftUI로 작업해야 합니다.

이제 제품 이름 아래에 "Hello World App" 또는 원하는 이름을 입력하십시오. 정말 당신의 창의력에 달려 있습니다!

이제 도대체 조직 식별자가 무엇입니까?

조직 식별자는 다른 사람들이 App Store에서 귀하의 앱을 찾을 수 있도록 하는 고유한 앱 이름입니다. 이 프로젝트를 더 간단하게 만들기 위해 여기에 성과 이름을 입력하는 것이 좋습니다.

따라서 번들 식별자(조직 식별자 바로 아래)는 다음과 같이 표시됩니다.

doejohn.Hello-World-App

일부 이전 버전의 Xcode는 com.doejohn.Hello-World-App을 표시할 수 있습니다. 이것은 참고용으로 리버스 도메인 이름이라고 합니다.

이제 다음 을 클릭하고 원하는 위치에 프로젝트를 저장하고 생성 을 클릭하면 재미있는 부분으로 이동합니다!

완료되면 Xcode는 다음과 같아야 합니다.

여기서 우리가 보고 있는 것을 간단히 살펴보겠습니다.

• 주황색 섹션 은 현재 프로젝트 네비게이터를 표시하고 있는 네비게이터 쪽입니다. 여기서 Hello World , Hello WorldTest 및 Hello WorldUITests 의 3개 폴더가 있는 Hello World 프로젝트가 상단에 있음을 알 수 있습니다. Hello World 폴더 는 우리가 모든 코딩과 편집을 할 곳입니다. Hello WorldTest 및 Hello WorldUITest 는 이름 생성 단계에서 프로젝트를 생성할 때 테스트 포함 확인란을 선택하지 않으면 자동으로 생성됩니다 . 다른 포스트에서 두 개의 폴더를 다룰 예정이니 계속 지켜봐 주세요!
• Green 섹션 은 앱의 전반적인 정보 및 편집에 관한 부분입니다. 일반 탭 아래에는 표시 이름(앱 이름), 번들 식별자(이전에 역방향 도메인 이름에 대해 논의한 내용), 버전(게임과 같이 버전 1.0, 1.1, 2.x…이 있음)이 있음을 볼 수 있습니다. 등 )
• 보라색 섹션 개발 정보 는 여기에서 논의하는 데 조금 더 시간을 할애하고 싶은 곳입니다. 여기서 위에서 아래로 가봅시다.
• 맨 위에는 iPhone 및 iPad가 선택되어 있지만 Mac Catalyst가 있는 iOS 15.2가 있습니다. 프로젝트를 생성할 때 "멀티플랫폼"이 아닌 "iOS"를 선택했기 때문에 "우리는 앱이 iOS 기기에서만 실행되기를 원합니다."라고 말했습니다. iOS 15.2 부분은 "앱을 실행하기 위한 최소 iOS 버전"이라고 말합니다. 그것을 클릭하고 최소한 사용자가 사용하기를 원하는 다른 iOS 버전을 선택할 수 있습니다. 실행하려는 기능이 사용자가 실행할 최소 버전에서 지원되는지 확인하십시오. 이 앱의 경우 괜찮을 것입니다. 장치 방향 은 일부 게임에서 플레이어가 특정 방향에서만 플레이할 수 있도록 허용하는 것처럼 앱이 세로, 거꾸로, 가로 왼쪽 또는 가로 오른쪽에서만 실행된다고 말합니다 . 그만큼상태 표시줄 은 상태 표시줄의 표시 스타일을 설정할 수 있는 곳입니다. 이를 가지고 놀면서 앱이 어떻게 보이는지 확인할 수 있습니다. 이 앱의 경우 간단하게 유지하기 위해 모든 것을 기본 설정으로 유지합니다.
• 노란색 섹션 은 검사관이 있는 곳입니다. 따라서 앱 이름, 파일의 전체 경로 등과 같은 항목은 해당 섹션에서 모두 찾을 수 있습니다. Storyboard로 앱을 개발할 때 더 편리해집니다.

이제 노란색 사각형으로 강조 표시한 버튼을 클릭하세요. 이렇게 하면 Xcode의 중간 섹션을 두 부분으로 나눌 수 있습니다. 하나는 기본 파일을 표시하고 다른 하나는 ViewController 파일을 표시하도록 합니다.

처음에는 화면이 이렇게 보일 수 있지만 변경하려는 쪽을 쉽게 클릭하여 ViewController를 표시하고 Navigator 섹션에서 ViewController를 클릭하면 변경됩니다.

완료되면 화면이 다음과 같이 표시됩니다. 이제 ViewController에 표시되는 코드 줄이 무엇을 의미하는지 간단히 다시 살펴보겠습니다.

맨 위에 import UIKit 라인이 보입니다. "이봐, 우리는 이 프레임워크/라이브러리를 이 ViewController 파일에서 사용하기 위해 가져오길 원해!"라고 말합니다. 이 경우 UIKit으로 작업하기를 원하므로 여기에서 가져옵니다. Google의 Firebase 또는 추가하려는 일부 UI 애니메이션 라이브러리와 같이 앞으로 더 많이 가져올 것입니다!

다음으로 ViewController 클래스가 있습니다. UIViewController{} 이것은 ViewController 라는 클래스가 있고 UIViewController 에서 상속 된다는 것을 의미 합니다. 클래스의 상속은 하위 클래스(ViewController)가 수퍼 클래스(UIViewController)의 모든 메서드, 속성 및 기타 특성을 사용할 수 있기를 원한다는 것을 의미합니다.

ViewController 클래스 내부에는 다음이 있습니다.

이것을 함수라고 합니다. 이 특정 함수는 이 보기가 처음 로드될 때 발생해야 하는 일을 말합니다. 예를 들어 이 보기가 로드될 때 변수 Star 가 항상 0이 되도록 하려면 여기에서 var star = 0 을 사용 합니다.

이제 Xcode의 중간 섹션을 살펴보시기 바랍니다. 맨 위 막대에는 다음과 같은 + 기호가 있어야 합니다.

그것을 클릭하면 메인 스토리보드로 드래그 앤 드롭할 수 있는 목록 개체가 표시됩니다.

Xcode에서 볼 수 있듯이 미리 정의된 모든 개체를 사용할 준비가 되어 있습니다. 이제 Label과 Button 개체를 Main Story Board로 드래그해 보겠습니다.

레이블 개체를 스토리보드에 처음 드롭할 때 볼 수 있듯이 원하는 위치에 드롭할 수 있습니다. 따라서 레이블을 왼쪽과 오른쪽의 첫 번째 파란색 점선만큼 넓게 확장해 보겠습니다. 이러한 라인은 Xcode가 개체가 존재할 수 있는 "안전 영역"을 알려주는 것입니다. Label 개체를 두 번 클릭하여 그 동안 Label에서 Hello World로 텍스트를 변경해 보겠습니다.

그 전에 위 이미지에서 노란색 사각형 부분을 살펴보겠습니다. 이것은 선택한 개체의 텍스트 색상, 글꼴, 글꼴 크기 등을 변경할 수 있는 속성 검사기 라고 합니다. 여기에서 글꼴 크기를 50으로 변경하고 아래와 같이 레이블에서 Hello World로 텍스트를 변경합니다.

다음으로 버튼 개체에 대해 동일한 작업을 수행합니다. 나는 시간을 절약하고 당신이 그것을 할 수 있도록 넘겨 줄 것입니다 (여기서 게으른 것은 아닙니다 )

결과적으로 다음과 같이 표시되어야 합니다. 이제 우리는 UI 부분이 완성되었다고 말해도 무방합니다! 등을 크게 두드려주세요

이제 중요한 질문이 있습니다. 사용자가 버튼을 누를 때 우리의 멋진 앱이 무엇을 해야 하는지 어떻게 알 수 있을까요? 또는 사용자가 버튼을 탭하면 어떻게 해야 합니까? 또는 사용자가 작가와 같은 실존적 위기를 겪고 있음을 감지했을 때 앱은 어떻게 해야 할까요?

음, 마지막 질문은 아마도 이 튜토리얼의 범위를 벗어나겠지만, 처음 두 문제는 문제 없이 해결할 수 있습니다.

Xcode는 우리에게 호의를 베풀었고 이것을 매우 간단하게 만들었습니다. Obecjt를 Control + 클릭하고 다음과 같이 ViewController 파일로 드래그하십시오.

viewDidLoad() 메서드로 드래그하지 않도록 주의하십시오.

노란색 사각형 섹션에 표시된 것과 같은 대화 상자가 나타나고 Xcode는 이 레이블의 이름을 묻습니다. 이름을 helloWorldText 로 지정하겠습니다 . 이 명명 규칙을 Camel Casing이라고 합니다.

이제 Label이 코드에 연결되었습니다! 프로그래밍 방식으로 입찰을 수행하도록 지시할 수 있습니다! 무와하하!

거기에서 IBOutlet 코드 행으로 채워진 원을 볼 수 있습니다. 이 개체가 스토리보드의 무언가에 연결되어 있음을 의미합니다.

이제 버튼에 대해 동일한 작업을 수행하지만 약간 다릅니다. 우리는 버튼이 단순히 표시용이 아니라 상호 작용할 수 있는 작업이 되기를 원합니다. 그래서 우리는 다음과 같이 할 것입니다

연결에서 작업이 선택되어 있는지 확인합니다. 여기서 HelloWorldAction 이라고 이름을 지정할 수 있습니다. 이벤트 섹션에서는 사용자가 여기에서 무언가를 수행할 때 발생하는 일을 정의합니다. 여기에서 Touch Up Inside를 선택했습니다. 즉, 사용자가 버튼을 탭(터치한 후 놓음)할 때를 의미합니다.

이제 우리는 사용자가 프로그래밍 방식으로 앱을 탭할 때 앱이 무엇을 해야 하는지 알 수 있습니다! 호레이

자, 우리 앱의 흥미진진한 부분을 살펴보겠습니다. UILabel 아래에 두 줄의 코드를 추가해 보겠습니다.

var helloTextNumber = 0

var helloTextArray = ["hello world", "Hej Verden!", "Hallo Wereld!", "Ciao mondo!", "Hei Verden!", "你好世界!"]

이 두 변수가 무엇인지에 대해 조금 논의해 봅시다.

helloTextArray는 여기에서 다른 언어로 "Hello World"를 선택하는 데 사용하려는 배열입니다. 여기에는 6개의 문자열로 구성된 문자열 배열이 있습니다. 따라서 Swift 배열을 반복할 때 주의하십시오!

따라서 helloTextArray[0]는 "hello world", helloTextArray[3]는 "Ciao mondo", helloTextArray[5]는 "你好世界! ”

다음은 Array에 대한 Apple의 Swift 문서 링크입니다. 여기에서 더 자세히 읽을 수 있습니다.

위에서 본 것처럼 hellTextArray에서 요소를 가져오려면 원하는 번호를 지정해야 합니다(첫 번째는 helloTextArray[0], 두 번째는 helloTextArray[1], 세 번째는 helloTextArray[2] … 등). 하지만 수동으로 각 항목을 입력할 수 없으며 사용자가 숫자를 입력할 것이라고 기대해서는 안 됩니다(항상 사용자에게 최소한의 정보를 기대합니다. 제가 배운 원칙입니다.) 그래서 우리는 무엇을 해야 할까요?

여기 helloTextNumber가 있습니다. helloTextNumber는 표시하려는 배열의 요소에 대한 자리 표시자로 사용할 정수(Int) 변수입니다. 0에서 5 사이의 임의의 정수를 생성하고 helloTextNumber를 사용하여 해당 숫자를 보유하는 방법이 있습니다. 따라서 helloTextArray의 요소를 무작위로 표시할 수 있습니다. 이 부분에 대해 약간 혼란스러워도 걱정하지 마십시오. 다음 부분에서 해결될 것입니다.

추가하고 싶은 코드는 다음과 같습니다.

코드의 hellowWorldAction 블록 내부에서 수행하는 작업을 살펴보겠습니다.

여기서는 helloTextNumber를 Int.random(in:0…5)으로 설정했습니다. 이 코드 라인이 의미하는 바는 helloTextNumber가 0에서 5까지(5를 포함한다는 의미) 임의로 생성된 정수가 되기를 원한다는 것입니다.

여기서도 조금 더 살펴보고 싶은 것이 있습니다. 다음 줄에 대해 이야기합시다

helloWorldText.text = helloTextArray[helloTextNumber]

Swift에서 이 점 표기법은 다음 규칙을 따릅니다.

누구.무엇 = 가치

이는 다음과 같이 나뉩니다.

“누가 바뀌어야 하는가”

"점"

"변경해야 할 것"

"같음"

"무엇으로 바꿔야 하나."

그래서 우리 코드로 다음과 같이 말하고 있습니다.

우리는 helloWorldText(who)의 텍스트(what)가 helloTextArray의 helloTextNumber의 요소로 변경되기를 원합니다.

따라서 이 코드 줄을 실행할 때 helloWorldTextNumber에 대해 생성된 무작위로 생성된 숫자 Int.random() 메서드를 helloWorldTextArray에 표시하도록 helloWorldText를 변경할 것입니다.

이제 시뮬레이터(commnad + r 또는 Xcode의 상단 표시줄에 있는 ▶️ 버튼)를 실행할 때 버튼을 클릭하면 버튼을 탭할 때마다 텍스트가 변경되어야 합니다!

만세! 앱의 코딩 부분을 완료했습니다!

마지막 한가지. 우리의 배경은 사실 좀 못생겼습니다. 배경 이미지를 추가하여 평범해 보이지 않게 하고 싶습니다. 따라서 앱의 배경으로 추가하고 싶은 이미지를 찾으세요. 나를 위해 지구 이미지를 사용할 것입니다(안녕하세요 세계니까?).

이제 Hello World 폴더 아래의 'Assests'를 클릭하면 아래와 같은 내용이 표시됩니다. 선택한 이미지를 "AccentColor" 및 "Appicon"이 있는 열로 끌어다 놓습니다. 이것은 우리의 이미지가 상주하고 사용될 곳입니다.

이제 'Main'으로 돌아가서 객체 라이브러리에서 이미지 객체를 드롭해 보겠습니다(방법을 잊어버린 경우 위로 스크롤하여 레이블 및 버튼 객체에 대해 이야기한 위치를 확인하십시오). 이미지 개체를 너무 크게 확장하여 휴대폰의 전체 화면을 덮도록 하십시오. 이제 해당 이미지 개체를 클릭하고 검사기(오른쪽 패널)로 이동하여 다음을 찾습니다.

이미지 보기에서 이미지 드롭다운을 클릭하고 이전에 자산에 드롭한 배경 이미지를 선택합니다. 여기에서 아무 것도 코딩하지 않고 이미지 개체가 표시해야 하는 것을 정의할 수 있습니다. 정돈된! 코딩이 적을수록 좋습니다!

이제 화면은 다음과 같이 보일 수 있습니다.

잠깐만… 무슨 일이야? 우리가 열심히 만든 라벨과 버튼은 어떻게 되었나요?

여기서 일어난 일은 단순히 레이어 문제입니다. 접시, 사과, 오렌지가 있다고 상상해보십시오. 우리가 한 것은 사과와 오렌지를 먼저 표시한 다음 두 개 위에 접시를 놓는 것입니다. 따라서 우리는 사과(라벨)나 오렌지(버튼)가 아닌 늦은 것(배경 이미지)만 볼 수 있습니다. 우리가 원하는 것은 접시를 먼저 놓고 그 위에 사과와 오렌지를 놓는 것입니다.

그럼 어떻게 해야 할까요? 전체 프로젝트를 삭제하고 전체를 다시 실행해야 합니까?

여기에서 배운 내용을 확고히 하기 위해 그렇게 하고 싶다면 그렇게 해도 좋습니다! 하지만 Apple은 훨씬 더 간단한 방법을 제공했습니다.

이전 스크린샷의 왼쪽에 'View Controller Scene'이 표시됩니다. 그 아래에 'View Controller'가 있고 그 아래에 'View'가 있습니다. 이것은 개체를 드래그할 때 표시되는 파란색 점선인 기본 '안전 영역'과 함께 개체(레이블, 버튼 및 이미지)가 있는 현재 보기의 레이어입니다.

이제 다음과 같이 이미지 개체를 하단에서 '안전 영역' 바로 아래로 드래그하기만 하면 됩니다.

짜잔! 라벨과 버튼이 보입니다! 그리고 시뮬레이터에서 이 앱을 실행하면 모든 것이 의도한 대로 작동하는 것을 볼 수 있습니다!

이것이 iOS 학습 여정을 순조롭게 시작하는 데 도움이 되었기를 바랍니다. 도움이 되셨다면 댓글과 박수 부탁드립니다

하지만 앞으로 무슨 일이 있어도 계속 더 많은 튜토리얼을 작성할 것입니다 당신이 나를 좋아하지 않는다면 너무 안타까운 일입니다

평화 ✌