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

안녕하세요. 오늘은 SwiftUI의 Layout에 대해서 알아보도록 하겠습니다. 정의와 용도 공식 문서에 따르면 Layout의 정의는 “A type that defines the geometry of a collection of views.” 입니다. 의역을 하자면

실전: flex-wrap 만들어 보기 지난 포스팅에서 SwiftUI의 Layout 프로토콜에 대해서 기초적인 부분을 알아봤는데요. 이번에는 css에 보면 아래와 같은 layout이 있습니다. 5개의 subview가 주어지는데요. 계속 HStack처럼 우측으로 쌓다가

실전: 가운데 정렬 flex-wrap 만들어 보기 지난 포스팅에서는 왼쪽 정렬이 되어 있는 flex-wrap을 만들어 보았습니다. 이번 시간에는 약간 응용을 해서 가운데 정렬이 되어 있는 flex-wrap을 만들어보도록 하겠습니다. 아래 그림과 같은 뷰입니다. i

이번 포스팅에서는 Alert에 TextField를 넣는 방법을 알아보겠습니다. ~ iOS 15 iOS 16 이전의 SwiftUI에서는 Alert에 TextField를 넣을 수 없었습니다. 꼭 사용하고자 한다면 UIKit에서 만든 후에 SwiftUI로 감싸서 사용했어

이번 포스팅에서는 이미지를 텍스트처럼 혹은 텍스트를 이미지처럼 사용하는 방법을 알아보겠습니다. 이미지를 텍스트처럼 사용하기 체크 박스 + 텍스트의 형태의 버튼을 구현하려고 하는데요. 물론 아래와 같이 HStack으로 이미지와 Text를 각각 사용해도 됩니다만 문제는

이번 포스팅에서는 SwiftUI의 ObservedObject와 StateObject의 차이에 대해서 알아보려고 했습니다만, 그 주제에 대해서 소개하기 위해서 View의 re-init에 대해서 작성을 하다가 보니까 글이 길어져서 별도의 포스팅으로 만들어 보았습니다. 이

저번 포스팅에 SwiftUI에서 View의 re-init이라는 주제로 @State 변수의 특성에 대해서 다뤘는데요. 이번 포스팅은 그 포스팅을 배경지식으로 둔 포스팅입니다. 당시 포스팅에서 결론을 @State 변수는 별도로 관리되고 따라서 상위 View의 State 변

이번 포스팅에서는 SwiftUI로 간단하게 Splash Screen (= Launch Screen)를 구현하는 방법을 알아보도록 하겠습니다. onAppear 활용하기 SwiftUI로 Splash Screen를 구현할 때는 onAppear를 사용하면 됩니다. 앱이 켜

이번 포스팅에서는 SwiftUI의 ButtonStyle에 대해서 알아봅니다. ButtonStyle이란 ButtonStyle은 SwiftUI의 Button의 View를 재활용할 때 사용합니다. 실무를 하다가 보면 앱 전체의 버튼의 디자인은 동일하고 버튼 안의 텍스트만

안녕하세요. 오늘은 SwiftUI의 ViewThatFit에 대해서 알아보겠습니다. Responsive View Responsive View (반응형 뷰)는 화면의 크기에 따라서 다른 View를 보여주는 View를 의미합니다. 브라우저 화면의 크기를 마음대로 바꿀 수

이번 포스팅에서는 SwiftUI에서 Circle의 stroke를 사용할 때 주의할 점을 알아보도록 하겠습니다. Circle의 크기 너비 100, 높이 150의 Circle를 그려보도록 하겠습니다. 결과는 아래와 같은데요. Circle은 주어진 공간에서 가장 크게 그

Navigation Swipe Pop이란? 정확한 용어인지는 모르겠지만 여기서는 아이폰 왼쪽 구석을 오른쪽으로 swipe해서 현재 navigation stack에 가장 위에 있는 view를 pop하는 기능을 의미한다. SwiftUI에서 NavigationStack을

presentationCornerRadius 기존에 SwiftUI의 Bottom Sheet는 Corner Radius를 수정할 수 없었다. 16.4 버전부터 지원하는 presentationCornerRadius를 사용하면 조정할 수 있다. 회사에서는 버전을 못 올리게

오늘은 Modal이 Swipe Down 동작으로 dismiss되는 것을 막는 방법을 알아본다. 정확한 포스팅을 다시 찾지는 못했는데 예전에 iOS UX에 관한 글을 읽다가 모달은 아래로 내려서 dismiss 되도록 하는 것이 원칙이라는 글을 읽은 적이 있다. 하지만

휘리릭 넘어가지 말고 슥슥 넘어가게 부탁드려요. 회사 디자이너 분께 일반적인 스크롤 뷰를 구현해서 드렸더니 저런 피드백이 돌아왔다. 휘리릭은 뭐고 슥슥은 무엇인가? 그 사람의 설명에 의하면 휘리릭은 관성을 받아서 컨텐츠들이 물 흐르듯이 넘어가는 것이고 슥슥은 인스타

최근 회사에서 SwiftUI로 구현한 앱의 한국어 버전을 만들 일이 있었다. (원래는 북미 앱스토어에만 출시했던 앱이었다.) SwiftUI에서 Localization을 사용하는 방법을 간단하게 알아보자. 예전에는 더 간단했었는데 String Catalog를 사용하면 훨

지난 번 포스팅에서 String File과 String Catalog를 활용해서 Localization을 세팅하는 법을 알아보았다. 이번에는 SwiftUI에 실제로 적용해보자. 직접 String을 넣으면 자동으로 적용 일단 시뮬레이터의 언어를 한국어와 일본어로 각각

지난 번 포스팅까지는 Localization의 개요와 String Catalog 소개, 그리고 SwiftUI에 어떻게 적용할 수 있는지 알아보았다. 이번 포스팅 부터는 Localization을 실제 적용하면서 겪었던 이슈들에 대해서 몇개의 짧은 포스팅을 통해서 소개하고

Localization에 대해서 실무에서 겪었던 소소한 이벤트(?)에 관한 포스팅 제2탄 \n = 줄바꿈? Localized String을 사용할 때 평소와 동일하게 \n을 사용해서 줄바꿈을 하려고 했더니 아래와 같은 사태가 발생했다. 테스트를 해보니 기존에 St

Localization에 대해서 실무에서 겪었던 소소한 이벤트(?)에 관한 포스팅 제3탄 디바이스 언어 설정을 바꾸는 것은 귀찮아… 지금까지 Localization이 잘 적용이 되었는지 테스트하기 위해서는 디바이스 혹은 시뮬레이터의 자체 언어설정을 변경해야 했다.