Udemy(유데미) 클론코딩 - 인스타그램 - 2

정승호·2022년 7월 5일

swiftui udemy 클론코딩

본 포스팅은 Udemy 클론코딩 강의를 보고 작성하였습니다.
강의명 : Instagram SwiftUI Clone | MVVM | Cloud Firestore

목표
1. 강의에서 사용된 SwiftUI 문법들을 정리하여 설명합니다.
2. 코드 구조를 분석하여 설명, 이해를 돕습니다.

** - 강의의 모든 내용을 다루지 않고, 처음나오는 기능을 위주로 포스팅 합니다.

강의는 16~19강 까지를 정리하였습니다.
로그인 화면을 LoginView, RegistrationView, CustomTextField, CustomSecureField파일로 구성, 정리 하겠습니다.

완성된 로그인화면과 계정등록 화면

설명할 기능들 입니다.

LinearGradient
ignoresSafeArea
isEmpty
init
SecureField
navigationBarHidden
renderingMode
@Environment(.presentationMode) var mode
Button (action: { mode.wrappedValue.dismiss() },

LoginView

만드는 순서

배경에 그라데이션 색 지정

instagram 이미지 삽입 및 속성 설정 (생략)

TextField & SecureField 호출 및 속성 설정

Forget Password 버튼, Sign in 버튼 만들기 (생략)

NavigationLink 설정

** CostomTextField 파일과, CustomSecureField 파일도 LoginView파트에서 같이 설명 합니다.

LinearGradient

배경색을 그라데이션 으로 지정할 수 있습니다.

사용방법

 ZStack {
    LinearGradient(gradient: Gradient(colors: [Color.purple, Color.blue])
    , startPoint: .top, endPoint: .bottom)
    .ignoresSafeArea()

위 코드와 같이 purple, blue 컬러 사용,
startPoint는 .top, endPoint는 .bottom으로 설정 시
화면의 앱 상단엔 purple, 하단엔 blue컬러가 표시됩니다.

.ignoresSafeArea()

SafeArea를 무시하고, 배경색을 꽉 채우기 위해 사용합니다.

아래 사진은 ignoresSafeArea를 사용하지 않은 모습 입니다.

navigationBarHidden

NavigationLink를 사용하여 특정 뷰를 목적지로 이동이 가능하게 했었습니다.

목적지 뷰 상단에 이렇게 Back버튼이 있는게 특징입니다.

이 Back버튼이 필요하지 않을 때에 navigationBarHidden을 사용하면 숨길 수 있습니다.

불리언 타입으로 ture, false설정이 가능합니다.

목적지인 RegistrationView를 닫기위해서 Back버튼을 사용할 수도 있지만 다른방법을 통해 닫아보겠습니다.

Environment

SwiftUI는 뷰 구성에 필요한 환경 설정과 관련된 정보를
EnvironmentValues 타입이 관리합니다.

하여 프로그래밍 방식으로 뷰를 닫고 싶을 때 presentationMode를 사용합니다.

RegistrationView에 적용 시켜 위에서 설명한 Back버튼을 누르는 방식이 아닌 버튼을 눌러 닫히게 하겠습니다.

@Environment(\.presentationMode) var mode

위 코드와 같이 RegistrationView에 선언한 뒤

버튼의 액션으로 mode.wrappedValue.dismiss() 를 적어주면 됩니다.

Button (action: { mode.wrappedValue.dismiss() }, label: {
                    HStack {
                        Text("Already have an account?")

CustomTextField

Email을 작성하는 텍스트필드를 구현하기위해 LoginView와 CustomTextField파일에서
해야하는 작업을 설명합니다.

TextField 만드는 순서

LoginView 파일

빈값의 email 변수를 선언해 줍니다.
```
@State private var email = ""
```
CustomTextField를 호출, text를 $email이라 지정하여 줍니다.
```
 CustomTextField(text: $email)
```

CustomTextField 파일

String타입의 text변수를 바인딩 선언해줍니다.

 @Binding var text: String

TextField를 만들어 텍스트를 입력하기 전 문구는 빈값으로, 텍스트 입력은 $text로 지정하여 줍니다.

TextField("", text: $text)

TextField 입력 전 표시 문구

CustomtextField 파일

Text 를 지정한 placeholder 상수를 선언하여 줍니다.

let placeholder: Text

조건문을 작성하여, TextField의 text가 빈 값일 때에 placeholder가 표시되게 합니다.

if text.isEmpty {
       placeholder
          .foregroundColor(Color(.init(white: 1, alpha: 0.8)))
          .padding(.leading, 40)
       }

LoginView파일

호출하였던 CostomTextField내 Text("Email")을 지정한 placeholder를 작성하여 줍니다.

CustomTextField(text: $email, placeholder: Text("Email")

여기까지 작성하면 TextField에 텍스트를 작성하기 전에 Email이라는 문구가 나옵니다.

isEmpty

문자열에 문자가 없는지 여부를 나타내는 불리언 값 입니다.
아래 코드와 같이 만약 string상수가 빈 String 값이라면 안녕하세요. 를 출력합니다.

let string = ""

if string.isEmpty {
    print("안녕하세요.")
}

CustomSecureField

CustomTextField와 만드는방법은 동일합니다.
다만 패스워드를 안전하게 입력하기위해 TextField대신 SecureField로 바꿔 작성합니다.

SecureField

사용자가 텍스트를 안전하게 입력할 수 있는 비공개 텍스트 입니다.

TextField와 비슷한 동작을 수행하지만 사용자가 텍스트를 표시하고 싶지 않고 아래와 같이 표시하고 싶을 때에 사용합니다.

isEmpty
https://0urtrees.tistory.com/121

LinearGradient
https://seons-dev.tistory.com/entry/Colors-and-Gradient
https://velog.io/@jyw3927/SwiftUI-LinearGradient-그라데이션-배경-구현하기

SecureField
https://seons-dev.tistory.com/entry/SecureField

Environment
https://seons-dev.tistory.com/28

정승호

이전 포스트