SwiftUI

SwiftUI를 사용할 때 몰라서는 안되는 개념인 State와 Binding에 대해서 알아봅니다.

SwiftUI의 Observable Object에 대해 알아봅니다!

이번 포스팅에서는 SwiftUI의 List에 대해 알아보겠습니다.

Section이 있는 List UITableView와 마찬가지로 List의 요소들을 Section으로 구분할 수 있습니다. Section이라는 뷰로 List에 들어갈 View를 감싸서 구현합니다. (List 안에 작은 List를 다시 구현한다고 생각하면 편합니다.)

TableView는 UITabBarController와 동일한 역할을 한다고 보시면 됩니다. 각각의 View를 TabBar에 등록하고 등록된 View 간의 전환을 담당합니다. 선언 UITabBarController가 각각의 VC를 가지고 있듯이 TabView도 마찬

TextField는 이름도 비슷한 UITextField와 같은 역할을 합니다. 사용자의 text 입력을 받는 역할입니다. TextEditor는 TextField와 거의 유사합니다만 더 긴 text 입력을 받기 위해서 사용한다는 차이점이 있습니다. 두 View 모두 te

이번 포스팅에서는 비밀번호 입력 필드를 만들어보겠습니다. 단순한 비밀번호 필드가 아니라 웹에서 흔히 보는 비밀번호 숨기기를 토글할 수 있는 기능을 구현해보도록 하겠습니다. SecureField 비밀번호 입력 필드를 만들기 위해서는 사용자가 입력한 값을 보이지 않게

onSheet()란? 선언 하기 특정 조건을 만족하면 뷰를 모달 형식으로 띄워주는 코드입니다. 그 특정 조건은 바인딩으로 연결한 Bool 변수가 true가 될 때입니다. 보통 아래의 코드처럼 초기값이 false인 @State 변수를 선언해두고 버튼 등을 활용해서 해

실제로 화면에 나타나기 전까지는 로드되지 않는 View를 만들어 봅시다!

onReceive에 대해서 알아봅니다!

상위 View의 데이터를 하위 View에서 수정할 수 있을까요?

SwiftUI에서 UIKit의 ViewController를 사용하는 방법을 알아봅니다.

EnvironmentObject에 대해 알아봅니다.

구현하고자 하는 화면 만들고자 하는 화면은 프로필 화면과 프로필 수정 화면입니다. 프로필 화면에서는 사용자의 이름과 프로필 메시지를 볼 수 있습니다. 그리고 프로필 수정 화면으로 들어가기 위한 NavigationLink가 하나 있습니다. 프로필 수정 화면에서는 TextField로 프로필 메시지를 수정할 수 있습니다. 🤔 첫번째 구현 상위 View...

Gradient의 종류와 사용방법에 대해 알아봅니다.

속성들 모아보기 navigationViewStyle .stack NavigationLink의 destination의 뷰가 이전 View를 덮는 방식, 한번에 한 화면만 보여줍니다. .column 아이패드 같이 넓은 화면에서 사이드 메뉴처럼 보여주는 UI를 구현할 수 있습니다. (아이폰에서는 🚫 ) navigationBarTitleDisplayM...

Formatter를 사용해서 TextField와 Int 변수를 bind 해봅시다.

SwiftUI에서 resignFirstResponder 사용하는 법을 알아봅니다.

SwiftUI로 Pagination을 구현하는 두 가지 방법을 알아봅니다.

Redaction의 의미 원래 Redaction은 민감한 정보를 서류에서 삭제하는 것을 의미합니다. 예를 들어 이력서 등을 온라인에 올릴 때 이름, 전화번호 같은 개인정보는 지우고 올리는 것이 Redaction에 해당한다고 볼 수 있습니다. Redaction의 종류 Placeholder placeholder는 아직 표시될 정보가 로드되지 않았을 때 ...

삼항연산자를 활용해서 SwiftUI로 애니메이션 만들기

Text에 Date 객체를 직접 전달하고자 할 때 어떤 형식으로 전달할지 정해줘야 합니다. style이 없다면? String Protocol을 준수하지 않기 때문에 에러가 납니다. style: .date 월, 일, 년도의 형식으로 출력합니다. style: .relative 현재 시간과의 상대적인 차이를 출력합니다. 1초마다 값이 변화합니다. (차...

정렬 속성을 이용한 애니메이션 VStack에는 alignment라는 속성이 있는데요. 이 속성은 VStack 안에 세로로 위치한 요소들이 어떤 기준으로 정렬할 것인지 정합니다. 이 속성은 애니메이션을 적용할 수 있는 속성입니다. leading에서 trailing으로 속성을 바꾸는 것을 애니메이션으로 구현해서 아래와 같은 토끼와 거북이의 경주를 한번 구현...

dashPhase 공식문서에 정의된 dashPhase의 의미는 “How far into the dash pattern the line starts.”입니다. 점선 패턴 (dash pattern)의 시작 위치를 어디로 할 것인가입니다. 아래 예시를 보여드리겠습니다. 아래 두 사각형은 dash: [10, 10]의 점선으로 이루어져있는데요. 위 사각형은 da...

SwiftUI로 ForEach를 활용해서 List를 만드는 경우가 많은데요. 이 경우 Cell을 삭제하는 기능을 구현할 때 주의할 점을 알아봅니다.

요즘 ForEach를 많이 다루고 있는데요. 왜 ForEach는 id를 요구하거나 Identifiable을 요구하는 것일까요?

뷰계층이 복잡할 때는 @State를 어디에 붙여야 할까요

Gesture와 연계해서 사용할 수 있는 @State인 @GestureState에 대해 알아봅니다.

SwiftUI에서 볼 수 있는 some의 의미에 대해서 알아봅니다.

PresentationMode 용도 우리가 presentationMode를 쓸 때는 주로 ModalView 같은 것을 뷰에서 dismiss할 때 사용했습니다. 아래 코드 처럼요. 하지만… 공식문서를 보시면 알겠지만 이제 PresentationMode는 deprecated되었다고 합니다😭 (bye bye…)  기존의 PresentationMode는 ...

이 포스팅에서 사용한 방법인데요. 따로 기억해둘 필요가 있는 것 같아서 따로 포스팅을 합니다. Body에 Breakpoint 설정하기 SwiftUI를 통해 View를 만들다 보면 가끔 언제 body가 랜더링되는지 알아야 하는 경우가 있습니다. 이럴 때 print문

이번에 Jwords를 만들면서 탭뷰를 도입하게 되었습니다. 오늘 학습할 단어리스트와 전체 단어리스트를 구분하게 위해서 인데요. 이 과정에서 갈림길에 마주치게 되었습니다. 탭뷰 안에 네비게이션 뷰를 넣을 것인가 아니면 네비게이션 뷰를 넣을 것인가인데요. 각각의 방법의 차이를 예제를 통해 알아보도록 하겠습니다. 코드 Tab 안에 Navi Navi 안에 T...

이 포스팅을 쓰면서 어떤 제목을 붙여야 될까 고민을 했는데 고민 끝에 나온 제목이 저거 입니다… 제목이 역대급으로 기네요ㅠㅠ 요지는 간단한데 말이죠… 한번 풀어가 보겠습니다. 하위 View를 바꿀 뿐인데 상위 View가 전부 re-render되는 것은 싫어~ 이 포스팅에서 하위 View의 상태를 바꿀 때 상위 View까지 전부 re-render되는 현상...

테스트를 개발하던 중에 index out of range error를 발견했습니다. 에러가 발생한 원인을 보니까 Picker와 관련이 있었습니다. index를 사용하던 예전의 Picker를 id를 사용해서 개선해보았습니다. 예전 피커 코드 예전 피커의 코드입니다. 일단 selection에서 index를 사용하고 있습니다. 그리고 만약에 bookList...

MacOS를 Ventura로 업데이트 했습니다. 그런데? 이번에 MacOS를 Ventura로 업데이트 했습니다. 그리고 나서 JWords의 Mac용 앱을 실행시켰는데 아래와 같이 Picker에 줄바꿈 적용이 안되어 있더라구요. 아래 켭쳐처럼 말이죠. Ventura로 업데이트하기 전에는 원래는 아래와 같은 모습이었습니다. String 안에 “\n”을 입력...

이번 포스팅에서 구현할 기능은 저장 버튼을 누르면 맨 처음 TextEditor로 오도록 하는 기능입니다. 하위 View에 클로저를 전달해서 간단하게 구현해보록 하겠습니다. 처음 생각한 방법 제가 사용한 특정 TextEditor로 커서를 옮기는 방법은 @FocusSt

만들고자 하는 뷰 현재 제가 만들고자 하는 뷰는 아래와 같습니다. 일단 기존의 단어 Cell 위에 ZStack으로 이미지를 올립니다. 그리고 이 상태에서 Cell을 터치하게 되면 단어 수정을 위한 Modal을 띄우는 것입니다. 하지만 그냥 Image에 onTapGe

만들고자 하는 기능 만들고자 하는 기능은 아래 캡쳐와 같습니다. 수정하기 모드일 때 단어 Cell을 클릭하면 해당 단어를 수정할 수 있는 모달을 띄우는 것입니다. 기존의 Modal과 다른 점 모달을 띄운다는 점에서 기존의 모달과 크게 다른 점은 없어보이지만 하나

만들고자 하는 View 이번에 실무에서 아래와 같은 뷰를 만들어 달라는 요청을 받았습니다. 탭을 할 때마다 녹색, 노란색, 빨간색 원이 차례로 선택됩니다. 선택된 원은 다른 원 보다 알파값이 높고 크기도 조금 더 큽니다. 그리고 선택지가 바뀔 때 마다 각각의 원이 작아졌다가 다시 커지는 애니메이션을 구현해야 합니다. .transformEffect로 만들...

절대로 Truncated 되면 안되는 Text를 truncated를 방지하는 방법입니다. 예시 코드 이번에 새로운 프로젝트의 이메일 입력 화면을 만들면서 겪은 일입니다. 이메일 입력 화면을 만들면서 title과 text field 사이에 email의 포맷에 대한 안

최근에 새로운 프로젝트의 로그인 화면을 만들고 있는데요. 도중에 비밀번호 찾기 화면을 만들던 도중에 Text로 사용자의 이메일 주소를 보여주는 상황이 있었습니다. 위와 같은 형태로 Text를 화면에 띄우면 아래처럼 이메일 주소가 파란색 + 밑줄의 조합으로 표시됩니다.

오늘 포스팅의 주제는 SwiftUI에서 UIPageView와 같은 뷰를 만드는 것입니다. TabView UIPageView와 같은 뷰를 만들기 위해서 사용되는 뷰는 TabView입니다. 보통 이 뷰는 주로 하단에 존재하는 탭바를 만들기 위해서 많이 사용되는데요. t

이번 시간에는 버튼에 배경에 그림자를 가진 둥근 사각형을 깔아서 버튼에 그림자 효과를 적용해보겠습니다. ZStack과 .background를 사용하는 두 가지 방법이 있는데요. 어느 경우에 어떤 방법을 사용해야 할지 알아보겠습니다. ZStack을 사용하면 독립적! ZStack을 사용하면 배경에 들어갈 사각형과 버튼은 독립적인 존재입니다. 따라서 사각형...

SwiftUI로 View를 개발하다가 보면 조건에 따라 다른 View를 출력해야 하는 경우가 있습니다. 아래 예시를 보도록 하겠습니다. Body 안에 if문 아래 View는 원하는 도형의 이름을 입력 받아서 해당 도형을 보여주는 간단한 View입니다. 아래처럼 bo