CAShapeLayer와 UIBezierPath를 사용하면 UIView의 모양을 자유롭게 커스터마이징할 수 있다. UIBezierPath → 곡선이나 직선을 조합해 경로(Path)를 생성하는 객체CAShapeLayer → 경로(Path)를 그릴 수 있는 레이어🔗 UIBezierPath 공식 문서 addCurve(to:controlPoint1:controlPoint2:) | Apple Developer DocumentationAppends a cubic Bézier curve to the path.developer.apple.com 🔗 CAShapeLayer 공식 문서 CAShapeLayer | Apple Developer DocumentationA layer that draws a cubic Bezi..
compactMap이란?compactMap은 배열의 각 요소를 변환하여 새로운 배열을 반환하는 함수옵셔널(Optionals)을 처리하는 메서드각 요소에 대해 변환 작업을 할 수 있고, 반환 결과가 nil인 경우는 배열에서 제거하고, nil이 아닌 값만 반환.예를 들어, nil을 걸러내거나, 특정 조건에 맞는 값들만 추출하고 싶을 때 유용하다.let numbers = ["1", "2", "three", "4"]let result = numbers.compactMap { Int($0) }// result: [1, 2, 4] // "three"는 변환할 수 없어서 제외✅ map과 차이점map: 변환 후 nil을 포함한 배열 반환compactMap: 변환 후 nil 을 제거한 배열 반환let numbers = ..
CoreLocation을 사용해서 현재 위치 데이터를 받아와보자 📍 1. CoreLocation 설정 (현재 위치 받아오기)CoreLocation 프레임워크를 사용해서 사용자의 위치 정보를 가져올 수 있다. ✅ Info.plist 설정 위치 권한 요청을 위한 키를 추가해야 한다.NSLocationWhenInUseUsageDescription앱 사용 중 현재 위치를 확인하기 위해 필요합니다.NSLocationAlwaysUsageDescription항상 현재 위치를 확인하기 위해 필요합니다. 2. LocationManager 클래스 생성위치 정보를 관리하는 클래스를 만들어 현재 위치를 불러오기.import CoreLocationimport Combineclass LocationManager: NSObjec..
Alamofire와 Combine의 조합으로 API 요청하는 방식을 알아보자. 1. Alamofire + Combine의 조합이란?Alamofire: 네트워크 요청을 간편하게 해주는 라이브러리.Combine: 비동기 데이터를 스트림으로 처리하는 프레임워크.이 둘을 조합하면 네트워크 요청을 더 깔끔하고 선언적으로 처리할 수 있다.즉, 네트워크 요청 → 응답 처리 → UI 업데이트 흐름이 자연스럽게 이어진다. 2. 기본적인 Alamofire + Combine 패턴Alamofire는 publishDecodable이라는 메서드를 제공해서 Combine과 쉽게 연동할 수 있다. ✅ Step 1. APIManager에서 Publisher 반환// Combine으로 API 요청 (Publisher 반환)func fe..
Combine을 통한 데이터 바인딩ViewModel에서 @Published와 sink, assign을 활용해 뷰에 데이터를 구독하고 실시간으로 UI에 반영할 수 있다. @Published, sink, assign의 사용 방법에 대해 알아보자. 1. @Published:ObservableObject 프로토콜을 채택한 클래스에서 사용.값이 변경될 때마다 뷰(구독자)에게 알림을 보내 UI를 자동으로 업데이트.@Published var temperature: Double = 0.0 2. sink(receiveCompletion:receiveValue:):퍼블리셔에서 값을 받을 때 사용하는 구독 메서드.네트워크 요청이 성공하거나 실패할 때 동작을 정의.WeatherAPIManager.shared.fetchCurr..
🔗 플러터플로우에서 ChatGPT API 연동하기 ChatGPT API 연동했으니 만들려는 서비스에 접목해 보자.실제 수식을 만드는 우리만의 ChatGPT를 만들어보는 과정이다. 결과물은 다음 화면에서 수식을 입력 후 제출 버튼을 눌렀을 때 엑셀 공식이 출력되어야 한다. ChatGPTAPI 적용하기우선 로컬 변수를 생성해야 한다.페이지 안 결과값을 표시해주기 위해 response 변수를 만든 후에 출력 결과의 값을 response로 바꿔준다.또한 버튼을 눌러 수식을 제출했을 때 값을 메세지 리스트에 추가하기 위해 chatHistory 변수가 필요하기 때문에 JSON 형식으로 만들었다. 그리고 버튼을 눌렀을 때 액션을 간소하게 만들었다.1) Update Page StatechatHistory값에 (..
플러터플로우로 만드는 앱 서비스의 기능은 궁금한 액셀 공식을 물어보면 알려주는 서비스이다.Micro Saas(소비자의 문제를 해결하는 서비스)의 일종이며, OpenAI의 chatGPT를 활용한다. 우선 chatGPT 와 본격적으로 연동하는 과정을 정리해보자. chatGPT API 연동연동 방식은 chatGPT 서버와 통신을 하게 되는데 chatGPT와 통신할 때에는 REST API를 사용해야 한다.API Key를 아래 사이트에서 발급받아서 사용하자. (키를 발급하기 위해 최소 5$의 카드 등록이 필요하다.)🔗 https://platform.openai.com/docs/overview 플러터 플로우에는 아주 친절하게 chatGPT Component Flows가 제공된다. 아래 컴포넌트를 추가해 주자. a..
✔️ 플러터플로우에 평소에 편리하게 이용하는 소셜로그인을 만들어보려 한다. 회원가입/ 로그인 페이지에 구글 로그인과 애플 로그인 버튼을 생성해준다. Google Login1) 클라이언트Google Login 버튼 액션을 아래처럼 Login / Google 으로 선택해준 뒤, 계정을 만든 후 화면 이동 액션도 플로우에 추가해준다. 2) 파이어베이스 설정추가로 서버에서 세팅해줘야하는 설정들이 있다. Authentication 로그인 제공 업체에 Google 을 추가 firebase → Enable Auth On Firebase → 프로젝트 설정 → 안드로이드 앱 SHA 인증서 지문에 SHA1 추가터미널에 다음 명령어를 입력하고, SHA1를 복사한다.(맥 기준) keytool -list -v \-alia..
✔️ 플러터플로우에서 서버와 연동하는 방법을 정리해보자. Firebase 연동하기서버는 Firebase 데이터베이스를 사용할 것이다. 우선 Settings and Intergrations → Firebase → Create Project 를 눌러서 진행한다.몇분 기다리면 Firebase Project가 완료되는데, 이제 앱과 연결할 수 있는 서버가 생성된 것이고 여러가지 데이터를 저장할 수 있는 데이터베이스가 제공된다. ▼ 🔗 Firebase Setup 공식 문서https://docs.flutterflow.io/integrations/firebase/connect-to-firebase/ Connect to Firebase | FlutterFlow DocumentationLearn how to integ..
✔️ 플러터플로우에 대해 배워보자! FlutterFlow: 플러터플로우란?💡 우선 플러터란??플러터는 구글이 만든 크로스 플랫폼이다. 크로스 플랫폼에서는 하나의 코드로 여러 플랫폼에 배포할 수 있고 플러터는 하나의 코드로 iOS, Android, Web, PC까지 모두 가능하다.플러터의 기본 철학이자 골조는 "모든 것은 위젯이다"이다.▶ 위젯 = 레고블록, 위젯을 예쁘게 쌓아 앱을 만듦. ⭐️ 플러터플로우란??플러터플로우는 No.1 하이브리드 플랫폼인 플러터를 코딩 없이 만들 수 있게 해주는 툴이다!사용해 보면서 Xcode의 스토리보드와 비슷하다고 느꼈다. (플러터플로우가 레이아웃 잡기는 조금 더 편함)플러터플로우의 장점쉽고 빠르고 편함.자신만의 동작을 만들 수 있고, 그것들을 붙여서 복잡한 동작을 ..