분류 전체보기

문제점 발견⭐️🔗☀️ 사용 api 5 day weather forecast - OpenWeatherMap openweathermap.org 1) API 에서 제공되는 icon 과 dt_txt 간의 시간 불일치의 문제를 발견했다.시간별 데이터를 보여줄 때 예를 들어, 오전 6시인데 d(낮☀️) 아이콘이 아닌 n(밤🌙) 아이콘이 나오는 경우가 발생했다.이 문제점은 OpenWeatherAPI 에서 제공하는 icon 값은 UTC 기준으로 설정된 시간에 맞춰 제공되는데, API 에서 제공하는 dt_txt 값도 UTC 기준의 시간이었다. (Docs로 확인)그래서 이를 변환하지 않아서 실제 한국 시간과 불일치하는 문제가 발생한 것이다. 해당 데이터를 화면에 업데이트하니 시간에 맞지 않는 icon 표시되는 문제  ..

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..

오늘은 진행하던 프로젝트의 ViewController에서 MVVM 패턴과 Combine을 적용해 리팩토링 과정을 진행했다. MVVM (Model-View-ViewModel) 패턴을 적용하면 코드의 구조화와 유지보수가 쉬워지고, 테스트가 용이해진다.또한, Combine을 사용하면 데이터 흐름을 반응형으로 관리할 수 있어, 데이터 변경 시 UI가 자동으로 업데이트된다는 장점이 있다.  ✔️ 기존 구조 문제점기존의 ViewController는 네트워크 호출과 UI 업데이트를 모두 담당했다. 네트워크 호출을 통해 날씨 데이터를 받아오고,데이터를 받은 후, 바로 UI 요소(라벨, 이미지 등)을 업데이트이렇게 모든 로직이 ViewController에 몰려 있으면 유지보수가 어렵고, 테스트도 힘들다.   ✔️ MVV..

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..

프로젝트 소개FlutterFlow로 만드는 AI 앱ChatGPT API를 활용하여 사용자가 입력한 내용을 기반으로 엑셀 공식을 자동으로 생성해주는 앱! ⚖️📱 📆 개발 기간25.12.23 ~ 25.01.13 (3주) 📱 개발 목적ChatGPT API를 활용하여 사용자가 입력한 내용을 기반으로 액셀 공식을 자동으로 생성하고, Firebase 데이터베이스를 활용하여 사용자 관리 및 히스토리 기능을 제공하는 앱입니다.FlutterFlow를 사용하여 개발을 진행하였으며, 이를 통해 UI/UX 설계, 데이터베이스 연동, API 통신 등을 경험했습니다. 기술 스택개발 플랫폼: FlutterFlow(모바일 앱을 쉽게 디자인하고 개발할 수 있는 플러터 기반 앱 빌더)백엔드: Firebase (Firestore, ..

🔗 플러터플로우에서 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..