티스토리

서근 개발노트

검색하기

블로그 홈

서근 개발노트

seons-dev.tistory.com/m

Front-end Developer. 새내기 개발자 입니다.

구독자: 514

방명록 방문하기

주요 글 목록

2022 WWDC SwiftUI의 새로운 기능! [ iOS 16, Xcode 14 ] 본 게시글은 Anupam Chugh 님의 게시글을 번역 / 의역 한 자료 입니다. 목차 2022 WWDC 2022 WWDC 이벤트가 6월 7일 오전 2시에 시작했습니다. 이번 WWDC에서도 마찬가지로 SwiftUI 에 다양한 기능이 추가되었습니다. 새로운 NavigationStack, SwiftUI 전용 차트 라이브러리, 그리고 Grid layout 개선 등 많은 장점들이 추가되었습니다. 이제, iOS 16에서 SwiftUI의 4가지 새로운 기능에 대해 알아보도록 하겠습니다. 이 기능들은 iOS 앱의 프론트엔드 UI와 UX를 향상하는 데 주로 사용됩니다. 추가된 기능 Charts Charts는 완전히 새로운 SwiftUI 전용 프레임워크입니다. 이제 SwiftUI를 사용하여 data visualizati.. 공감수 3 댓글수 4 2022. 6. 10.
SwiftUI : 런치스크린 및 @AppStorage AppStroage 에 대해 알아보도록 합시다. 런치스크린 SwiftUI에서 런치스크린을 사용하는 것은 아주 간단하다. 우선 Asset의 Color 세팅부터 진행해보려 한다. 새로운 프로젝트를 만들고 Assets 폴더를 눌러준다. AccentColor에 접근해서 Universal을 클릭해보면 오른쪽 인스펙터에 Color 탭이 활성화된다. 보통 Hex 코드를 사용하는것이 편하기 때문에 Content를 Display P3으로 변경하고 Input Method를 8-bit Hexadecimal로 변경해준다. 그리고 Hex에 코드를 작성하면 된다. 이제 팔레트를 하나 만들어주려 한다. Assets 폴더에서 오른쪽 마우스를 클릭해 New Color Set을 하나 만들어주고, Any Appearance와 Dark를 .. 공감수 4 댓글수 0 2022. 2. 24.
SwiftUI : 가로 회전 기능 끄는 방법 Xcode에서 시뮬레이터를 실행해보면 가로모드로 변경할 수 있는 아이콘이 있다. 이 아이콘을 누르면 아래와 같이 기본 세로 모드에 가로모드로 전환 가능하다. 이 가로모드를 할 수 없도록 설정해 줄 수도 있다. 우선 Xcode에 새프로젝트 클릭 ➜ Targets 탭의 프로젝트 클릭 ➜ Info ➜ Supported interface orientations (iPhone) Supported interface orientations에 바를 내리면 Item0, Item1, Item2 가 존재하는데 Item0을 제외한 모든 파일을 빼면 세로 모드에서만 앱이 실행 가능해진다. 이제 시뮬레이터를 재실행 해서 확인해보면 결과는 아래와 같다. 이렇게 Hello, world!가 가로모드일 때 회전하는 것이 아니라 그대로 .. 공감수 0 댓글수 0 2022. 2. 23.
SwiftUI : App Icon SwiftUI를 다시 시작하면서 기본적인거부터 포스팅 해나가아려고 한다. 아주 기초적인것부터 포스팅할 예정이기 때문에 이미 알고계신 분들은 스킵하는것을 추천한다. App Icon 앱을 만들 때 가장 기본적인 App Icon을 적용하는 방법은 두 가지 방법이 있는데, 우선 앱에 적용 시킬 아이콘은 생성해야 한다. 본인이 원하는 앱아이콘 파일을 준비하고 아래 사이트에서 iOS 전용 아이콘으로 변환 할 수 있다. App Icon Generator AppIcon.appiconset 폴더를 살펴보면 성공적으로 png파일이 생성된것을 확인하면 준비는 끝이다. Xocde 적용 방법 우선 Xcode - Assets - AppIcon을 오른쪽 클릭하여 Show in Finder 메뉴를 통해 폴더에 들어가준다. AppIc.. 공감수 1 댓글수 0 2022. 1. 4.
SwiftUI : Haptic Feedback (haptics vibrations) haptics vibration 에 대해 알아보도록 합시다. 이번에는 저번 sound effects처럼 싱글톤을 사용하여 앱에 특정 버튼을 누르면 햅틱 반응을 추가해보려고 합니다. 참고로 이것의 실제로 사용해보려면 시뮬레이터나 캔버스가 아닌 실제 기기가 필요합니다. 바로 시작해보도록 하죠! Haptics Vibration 우선 HapticsManager이라는 클래스를 생성하고 싱글톤을 생성해줍니다. class HapticManager { static let instance = HapticManager() } 그리고 두 개의 함수를 추가해줄건데 첫 번째는 notification 함수, 두 번째는 impact 함수입니다. 이렇게 나눠져 있는 이유는 내장된 햅틱 기능이 실제로 이렇게 분리되어있기 때문입니다. .. 공감수 6 댓글수 0 2021. 6. 29.
SwiftUI : Sound Effects _ AVKit sound effect 에 대해 알아보도록 합시다. Sound Effect 이번에는 앱에 아무 간단한 음향 효과를 추가하는 방법에 대해 알아보려고 합니다. 이 기능은 앱을 만들어면서 아주 유용하게 사용되므로 꼭 알아두시는 것이 좋습니다. 그럼 바로 시작하죠! 우선 새로운 프로젝트를 만들고 SoundSetting이라는 class를 하나 생성해주겠습니다. 그리고 ContentView에 이 클래스를 변수를 사용하여 가져와볼게요. import SwiftUI class SoundSetting: ObservableObject { } struct SoundEffectView: View { var soundSetting = SoundSetting() var body: some View { Text("Hello, Wor.. 공감수 4 댓글수 0 2021. 6. 27.
SwiftUI : Combine과 함께 JSON 다운로드하기 목차 Combine프레임워크를 사용한 JSON Data 다운로드 이번에는 Comebine프레임워크를 사용하여 코딩을 해보도록 하겠습니다. 이번 게시글을 통해 Combine프레임워크가 얼마나 유용하고 강력하고 간결하고 부드러운지 알 수 있을 거라고 생각됩니다. 우선 시작하기전에 JSON Data를 @escaping을 사용하여 다운받아오는 방법에 대한것을 숙지하지는 것을 추천드립니다. 이번 게시글은 @escaping을 사용한 것과 새로운 프레임워크인 combine을 사용한 것을 비교하기 위한 포스팅입니다. 저는 개인적으로 combine을 사용해 JSON data를 다운로드해 가져오는 방법을 선호하는 편입니다. 왜냐하면 더 간결하고 구현하기 쉽기 때문이죠 :) 그럼 새로운 SwiftUI 파일을 생성하고 바로 .. 공감수 5 댓글수 2 2021. 6. 22.
SwiftUI : @escaping과 함께 JSON Data 다운로드하기 Escaping클로저를 사용한 JSON Data 다운로드 이번에는 @escaping클로저와 함께 JSON Data를 인터넷에서 다운로드해오는 방법에 대해 알아볼까 합니다. 웹데이터를 앱에서 사용할 수 있는 데이터로 변환하고 그 API를 화면에 띄워주는것이 목표입니다. 우선 새로운 SwiftUI 파일을 생성하고 이름은 DownloadWithEscaping이라고 정해주겠습니다. 그런 다음 ViewModel class를 생성해줘야겠죠? import SwiftUI class DownloadWithEscapingViewModel: ObservableObject { init() { getPosts() } func getPosts() { } } struct DownloadWithEscaping: View { @Sta.. 공감수 1 댓글수 0 2021. 6. 18.
SwiftUI 3.0의 새로운 기능! [ iOS 15, Xcode 13 ] 본 게시글은 Anupam Chugh 님의 게시글을 번역한 자료 입니다. 목차 SwiftUI는 Apple의 선언적 UI 프레임 워크입니다. 이번 WWDC 2021에서는 흥미로운 새로운 개선 사항, 일부 기능의 사용 중단 발표가 있었고, 개발자들에게 다시 한번 환영을 받았습니다. SwiftUI 3.0은 iOS 15, iPadOS 15, macOS 12 및 watchOS 12에서 사용할 수 있습니다. 시작하기 전에 주목할 사항이 있습니다. Info.plist 파일은 기본적으로 Xcode 13 Project 구조에서 더 이상 표시 되지 않습니다. 대신 프로젝트 내비게이터 탭에서 액세스 해야 합니다. 다음 몇 섹션에서는 iOS 15 용 SwiftUI의 새로운 기능을 살펴볼 것입니다. (대부분 다른 플랫폼에서도 일.. 공감수 12 댓글수 1 2021. 6. 12.
SwiftUI : Background Threads / Queues 이 게시글을 보시기 전에 DispatchQueue에 대에 먼저 보시고 오시는 것을 추천드립니다. Thread 기본적으로 앱에는 여러 Thread가 있습니다. 이 Thread는 작업을 수행할 수 있는 프로세스를 수행할 수 있죠. 앱에 작성하는 모든 코드는 main Thread 즉, Thread1에 선언됩니다. 특별히 지정하지 않은 이상은 Main Thread에서 작업이 진행되는 것이죠. 하지만 코드를 작성하면 작성할수록 코드가 길어지고 Main Thread에서 많은 작업을 수행하게 되고 앱의 속도가 느려지고 렉을 유발할 수 있습니다. 그래서 Download와 같이 background에서 발생하는 무거운 작업을 Main Thread가 아닌 Background Thread에서 실행하는 것이 가장 좋습니다. T.. 공감수 3 댓글수 0 2021. 6. 7.
SwiftUI : @FetchRequest 속성 래퍼 [Core Data #1] Core Data? Core Data란 기본적으로 내부에 저장된 데이터 베이스입니다. 아이폰을 사용하여 데이터를 저장할 수 있습니다. 이 데이터는 세션 간에 유지되므로 사용자가 앱을 닫고 다시 열었을 때 데이터가 저장됩니다. 마치 @Appstorage나 UserDefault 같이 말이죠. SwiftUI는 Core Data 작업을 위한 속성 래퍼를 제공하며 추가 로직을 작성하지 않고도 SwiftUI View에 데이터를 직접 포함할 수 있습니다. UserDefaults : 앱의 Preference 를 저장할 때 주로 사용합니다. CoreData : SQLite 에 직접 접근하는 방식만큼 유연함을 제공하면서도 앱과 데이터베이스의 동작 방식을 분리해줍니다. 앱이 많은 데이터를 필요로 하고 여러 다른 객체 간의 .. 공감수 6 댓글수 1 2021. 6. 5.
SwiftUI : Mask Mask SwiftUI에서는 mask()수정자를 사용하여 이미지 또는 텍스트를 마스크 할 수 있습니다. 간단한 예제를 보면서 어떻게 사용할 수 있는지 알아보도록 할게요. VStack { Image("sample2") .resizable() .aspectRatio(contentMode: .fit) .mask( ZStack { Circle() .frame(width: 208, height: 208) Circle() .frame(width: 90, height: 90) .offset(x: 80, y: 55) } ) .frame(maxHeight: .infinity) } 이제 mask를 활용해서 평점을 줄 수 있는 버튼을 하나 만들어 줄까 해요. 우선 별이 5개인 뷰를 만들어줍니다. import SwiftUI .. 공감수 0 댓글수 3 2021. 5. 30.
SwiftUI : Gesture TapGesture 에 대해 알아보도록 합시다. 모든 SwiftUI view에는 Gesture 인식기가 연결될 수 있으며 이러한 Gesture인식기는 인식기가 활성화될 때 실행될 클로저를 차례로 연결할 수 있습니다. TapGesture 이것을 만들 때 제스처를 트리거하는 데 걸리는 탭 수를 지정한 다음, 제스처가 발생할 때 실행될 onEnded 클로저를 연결할 수 있습니다. 예를 들어 택할 때마다 작아지는 이미지를 만들어 보겠습니다. struct ContentView: View { @State private var scale: CGFloat = 1.0 var body: some View { Image("seogun") .scaleEffect(scale) .gesture( TapGesture() .onEn.. 공감수 0 댓글수 0 2021. 5. 29.
SwiftUI : Markups과 Documentation을 추가하는 방법 Markups과 Documentation Xcode에 코드를 작성하면서 코드를 Markup 하는 방법에 대해 알아보려고 합니다. 실제로 다른 개발자 혹은 자신을 위해서 코드에 섹션이나 메모를 하고 팀에서 일할 때 정말 좋은 Documentation을 만들 수 있습니다. 우선 아주 간단하게 뷰를 구성해주도록 하겠습니다. import SwiftUI struct DocumentationView: View { @State var data: [String] = [ "Text", "Slider", "Environment" ] @State var showAlert: Bool = false var body: some View { NavigationView { ScrollView { Text("서근개발블로그") Text.. 공감수 2 댓글수 0 2021. 5. 13.
SwiftUI : ActionSheet ActionSheet에 대해 알아보도록 합시다. ActionSheet @State var someBindig = fasle .actionSheet(isPresented: $someBinding) { ActionSheet(title: Text, message: Text, button: [ActionSheet.Button]) } SwiftUI는 사용자가 선택할 수있는action Sheet를 만들기위한 ActionSheet View를 제공하며 Alert와 유사하게 작동합니다. Alert에 대해 자세히 알아보기 Alert와 마찬가지로 action Sheet를 표시할지 여부를 추적하는 속성을 정의해야 합니다. 그런 다음 actionSheet() 수정자를 사용하여 해당 속성을 모니터링하고 조건이 true가 되면 선.. 공감수 4 댓글수 0 2021. 5. 12.
SwiftUI : Sheet & FullScreenCover & Transition & Animation 비교 Sheet & FullScreenCover & Transition & Animation 이번에는 Sheet & FullScreenCover & Transition & Animation를 비교해보도록 하겠습니다. 위 수정자를 사용해서 모두 동일하게 sheet의 효과를 줄 수 있습니다. 간단하게 sheet부터 시작하도록 하겠습니다. Sheet sheet수정자는 sheetView에 presentationMode를 적용시켜 sheet뷰에서 "X" 버튼을 누르면 닫힐 수 있도록 만들어 줬습니다. import SwiftUI // MARK : Body struct ContentView: View { @State var showView: Bool = false var body: some View { ZStack(ali.. 공감수 0 댓글수 0 2021. 5. 11.
SwiftUI : 애니메이션과 비슷한 Transitions Transition 에 대해 알아보도록 합시다. Transitons Transitions은 Animation과 매우 유사한 기능입니다. 하지만 이것을 사용하기 위해서는 반드시 조건부가 필요합니다. 확실히 animation을 사용하는 것보다는 복잡하죠. 바로 코드로 한번 알아볼게요. 기본적으로 버튼이 false이면 도형이 숨겨지고 true이면 나타나게 opactiy를 사용하여 구현할 수 있습니다. import SwiftUI struct ContentView: View { @State var transitionView: Bool = false var body: some View { ZStack(alignment: .bottom) { VStack{ Button("버튼") { transitionView.togg.. 공감수 6 댓글수 0 2021. 5. 10.
SwiftUI : Animation #3 Animation #2강 Animation #3 이번에는 Animation을 실제로 비교해가면서 사용해보도록 하겠습니다. 우선 Animation은 앞서 배웠기 때문에 바로 코드로 비교해보도록 할게요 :) Animation.default 각 RoundedRectangle에 삼항연산자를 사용해서 값을 넣어줬고 overlay를 사용하여 어느 효과를 부여받고 있는지 보기 좋게 텍스를 적어줬습니다. 이제 아래 결과 화면을 보며 효과를 비교해 볼 수 있겠죠? import SwiftUI struct ContentView: View { @State var animate: Bool = false let timing: Double = 10.0 var body: some View { VStack { Button("애니메이션.. 공감수 0 댓글수 0 2021. 5. 10.
SwiftUI : Identifiable을 사용하여 연락처 뷰 연락처 뷰 이번에는 Identifiable 프로토콜을 사용하여 연락처 앱을 간단하게 만들어 보겠습니다. 메인 화면 구성 우선 contentView에 사용자 연락처를 배열해주도록 하겠습니다. 우선 아래 이미지를 다운로드하여 Assets에 넣어주겠습니다. import SwiftUI struct ContentView: View { var body: some View { VStack { HStack { Image("Leon") .resizable() .scaledToFit() .frame(height: 60) .clipShape(Circle()) VStack(alignment: .leading) { Text("Leon") .fontWeight(.black) Text("+82 10 1234 6523") } } }.. 공감수 0 댓글수 0 2021. 5. 3.
SwiftUI : ScrollToTop 맨위로 버튼 ScrollToTop 스크롤을 내리면 우측 하단에 Top버튼이 나오고, 그 버튼을 누르면 상단으로 이동하는 버튼을 만들어 보겠습니다. NavigationView 생성 Home struct를 따로 만들어 놓고 body 부분에 Home을 호출 한 뒤 NavigationView로 감싸줍니다. import SwiftUI //MARK : Body struct ContentView: View { var body: some View { NavigationView { Home() .navigationBarTitle("티스토리") } } } //Home View struct Home: View { var body: some View { Text("some") } } 샘플 로우 생성 ScrollView를 사용하여 샘플 R.. 공감수 0 댓글수 1 2021. 4. 28.
SwiftUI : DarkMode 구현하기 - Environment .DarkMode적용 법에 대해 알아보도록 합시다. DarkMode SwiftUI에서 사용자가 DarkMode인지 LightMode인지에 따라 앱 화면을 자동으로 설정해줄 수 있는 기능이 있습니다. 이것을 사용하기 위해서는 Environment에 대한 기본적인 지식이 있어야 합니다. [SwiftUI 기초/Others] - SwiftUI : EnvironmentValues 우선 간단하게 화면에 Alert버튼과 배경화면을 설정해주겠습니다. 배경화면 및 버튼 추가 ZStack { //1.배경설정 Color.yellow .edgesIgnoringSafeArea(.all) VStack { Spacer() //2. 버튼생성 Button(action: { print("버튼이 눌렸습니다.") }, label: { Te.. 공감수 6 댓글수 2 2021. 4. 14.
SwiftUI : Preview 레이아웃을 미리 보는방법 Preview 에 대해 알아보도록 합시다. Preview 동작 과정 struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } } 현재 소스 에디터에 PreviewProvider프로토콜을 준수하는 타입이 존재하는지 확인. PreviewProivder프로토콜의 필수 구현 사항인 previews 타입 프로퍼티에서 뷰 생성. 액티브 스킬의 목적지로 선택한 시뮬레이터 또는 맥에 연결한 기기의 형태로 preview container 렌더링. 리뷰 컨테이너를 직접 지정해 줄 경우 3번 에서 선택한 기기를 무시하고 해당 기기 형태로 렌더링. 따라서 가장 먼저 현재 소스 에디터 상에 띄워진 파일에 Previ.. 공감수 2 댓글수 2 2021. 4. 5.
SwiftUI : layoutPriority( ) - 뷰 우선순위 layoutPriority 에 대해 알아보도록 합시다. layoutPriority SwiftUI에서 뷰의 위치와 크기를 계산하는 방법과 .layoutPriority()를 사용하여 해당 프로세스를 변경하는 방법을 알아보도록 하겠습니다. 우선 간단하게 텍스트를 작성해보도록 하겠습니다. struct ContentView: View { var body: some View { Text("서근 개발블로그!!") } } SwiftUI는 사용 가능한 모든 공간을 ContentView에 전달합니다 . ContentView 에는 TextView 인 자식이 하나만 있습니다. ContentView 는 사용 가능한 공간을 TextView에 제안하고 크기를 계산하도록 요청합니다. TextView는 콘텐츠의 크기를 측정하여 Con.. 공감수 0 댓글수 0 2021. 3. 14.
SwiftUI : Redacted ( onAppear / disabled ) 콘텐츠 모자이크 Redacted 에 대해 알아보겠습니다. Redacted(reason: .placeholder) iOS 14에서 SwiftUI에는 모든 콘텐츠를 redact 하는 새로운 한정자(modifier)가 있습니다. 새로운 view 한정자가 있는 모든 view 에 .redacted(reason:) 을 적용할 수 있습니다. 이 한정자에는 이유 한정자(reason modifier)가 필요한데, 이는 이 redact 작업의 이유를 SwiftUI에 알려줍니다. 현재 Apple은 한 가지 reason modifier 만 제공하고 있습니다. (reason: .placeholder) Text("Hello, SwiftUI!") .redacted(reason: .placeholder) 이름에서 알 수 있듯이 .placeholde.. 공감수 0 댓글수 0 2021. 3. 7.
SwiftUI : Menu 버튼을 눌렀을 때 메뉴를 표시 본 게시글은 acking with swift님의 게시글을 참고하여 작성된 글 입니다. menu에 대해 알아보도록 합시다. Menu SwiftUI는 버튼에서 팝업 메뉴를 표시하기위한 Menu라는 전용 뷰를 제공합니다. 메뉴에 표시할 항목을 제어하기 위해 다양한 버튼을 추가해줄 수 있습니다. 우선 간단한 예를 한번 알아보겠습니다. struct ContentView: View { var body: some View { Menu("Create") { Button("Cancel", action: {}) Button("Search", action: {}) Button("Add", action: {}) } } } Menu 키워드를 사용하고 메뉴 이름을 “Create”로 지정해줬습니다. 다음으로 메뉴 중괄호{ }안에 .. 공감수 0 댓글수 0 2021. 1. 30.
SwiftUI : Animation #2 Animation #1강 Animation #2 animation stack 컨트롤 다음 예제는 클릭시 clipShape를 통해 배경색과 버튼 모양들이 변하는 코드를 작성하도록 하겠습니다. 우선 @State 에 bool 값을 할당해 준 후, 버튼 액션을 toggle로 설정해줍니다. struct ContentView: View { @State private var animationAmount = false var body: some View { Button("Tap Me") { self.animationAmount.toggle() } //background 보다 frame이 먼저 와야 한다. .frame(width: 200, height: 200) .background(Color.blue) .foregro.. 공감수 2 댓글수 0 2021. 1. 26.
SwiftUI : Animation #1 Animation에 대해 알아보도록 합시다. Animation #1 버튼을 클릭할때마다 화면 또는 이미지가 커지는 효과를 주는것은 CGFloat 와 .scaleEffect를 사용해야합니다. struct ContentView: View { //State로 animationAmount에 CGFloat을 넣어준다 @State private var animationAmount: CGFloat = 1 var body: some View { Button("Tapl Me") { //버튼이 탭 될때마다 +1씩 상승한다 self.animationAmount += 1 } .padding(50) .background(Color.green) .foregroundColor(.white) .clipShape(Circle()) /.. 공감수 2 댓글수 2 2021. 1. 26.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.