SwiftUI 7

SwiftUI Firebase와 KakaoTalk 로그인 연결하기

1. 개요 국내 앱은 대부분 소셜로그인 플랫폼으로 카카오톡 로그인 서비스를 제공한다. 카카오톡과 연결된 서비스를 제공하기 위해서는 앱에 카카오톡 API를 사용해야한다. 이번 글에서는 내가 구현했던 카카오톡 로그인 서비스를 Firebase Authentication으로 연동하는 방법을 소개하고자 한다. 먼저, Firebase Authentication은 다음과 같은 소셜 로그인 서비스와 연동할 수 있다. 카카오톡 서비스는 추가 제공업체에 등록되어있지 않으므로 Firebase Authentication와 연동하기 위해서는 기본 제공업체인 이메일 / 비밀번호 방법으로 로그인을 해야한다. 카카오톡으로 Firebase Authentication으로 로그인 하는 과정은 다음과 같다. 카카오톡 로그인 -> Fireb..

SwiftUI 2023.01.25

SwiftUI Firebase Email Auth Login 구현하기

1. 개요 앱을 만들다보면 서버를 이용해서 로그인하는 기능이 필요로할 때가 있다. 이 때, 자체적인 회원가입을 통해 로그인을 하게 할 수도 있다. 요즘에는 SNS 계정 연동으로 로그인하는 경우가 많지만, 이번 게시글에서는 Email Auth를 사용하여 FirebaseAuth에 회원가입을 통해 회원 계정 정보를 등록하고 등록한 정보로 로그인하는 과정을 기록한다. 또한 앱 종료 후 다시 실행시켰을 때 이전 로그인한 기록을 가지고 자동로그인하는 방법도 구현하였다. 2. Firebase와 프로젝트 연결하기 Firebase 프로젝트와 Xcode 프로젝트 생성은 이전 포스팅과 같다. 이미 방법을 알고 있다면 중간에 패키지 추가사항만 확인해두면 되겠다. 먼저, Xcode에서 프로젝트를 생성한다. 프로젝트 생성시 정해..

SwiftUI 2022.12.23

SwiftUI Firebase Auth - Google Account 연동하기

1. 개요 앱을 만들다보면 서버를 이용해서 로그인하는 기능이 필요로할 때가 있다. 이 때, 자체적인 회원가입을 통해 로그인을 하게 할 수도 있지만 대게 다른 소셜 계정을 통해서 로그인하는 방법이 편리할 때가 있다. FirebaseAuth에서는 다양한 소셜 계정으로 서버에 로그인하는 방법을 지원하는데, 여기서 Google 계정을 이용해서 로그인하는 방법을 적용해보고자 한다. 또한 앱 종료 후 다시 실행시켰을 때 이전 로그인한 기록을 가지고 자동로그인하는 방법도 구현하였다. 2. Firebase와 Xcode 연결하기 Firebase 프로젝트와 Xcode 프로젝트 생성은 이전 포스팅과 같다. 이미 방법을 알고 있다면 중간에 패키지 추가사항만 확인해두면 되겠다. 먼저, Xcode에서 프로젝트를 생성한다. 프로젝..

SwiftUI 2022.12.23

SwiftUI Firebase Realtime Database CRUD 제대로 사용하기

1. 개요 Firebase 실시간 데이터베이스는 클라우드 호스팅 데이터베이스이다. 데이터는 JSON으로 저장되며 연결된 모든 클라이언트에 실시간으로 동기화되는 장점이 있다. 또한 Firebase Realtime Database는 모든 클라이언트가 하나의 실시간 데이터베이스 인스턴스를 공유하고 자동으로 최신 데이터 업데이트를 할 수 있어서 여러 플랫폼(Android, iOS 및 JavaScript SDK)으로 교차 플랫폼 앱을 구축할 때 유용하다. 나는 SwiftUI로 Firebase Realtime Database를 공부하는데, CRUD(쓰기, 읽기, 수정, 삭제) 을 제대로 다루는 방법을 찾고자 했다. 내가 직면한 문제는 CRUD는 모두 정상 작동 하지만, 실시간 데이터 읽기 시 각 이벤트가 발생할 때..

SwiftUI 2022.12.08

ATS Policy에 의한 HTTP 통신 제약

SwiftUI를 이용해서 Web에 있는 JSON API를 호출할 때 다음과 같은 코드를 사용한다. class WebService { func fetchData(url: String) async throws -> [Person] { guard let url = URL(string: url) else { return [] } let (data, _) = try await URLSession.shared.data(from: url) let nkdata = try JSONDecoder().decode([Person].self, from: data) return nkdata } } 하지만 학습하거나 테스트를 할 때 종종 우리는 에러를 마주하곤한다. 내가 학습하면서 확인한 에러는 다음과 같았다. 나는 정부에서 제공..

SwiftUI 2022.11.28

SwiftUI 문서 구조화 해보기 - 초급

1. 이름의 중요성 개발 공부를 하면서 많이들 놓치는 부분이 바로 내가 작성한 코드 문서에 필요한 모든 내용을 한 파일에 쏟아 붓는 것이다. 기능 구현을 위해서 코드를 작성하다보면 이것도 필요하고, 저것도 필요하고 다 필요하다고 생각되어 한 문서에 모든 것을 다 때려넣는다. SwiftUI를 공부하면서 가장 어려운 것은 문서 작성 시 문서 이름과 내용이 일맥상통해야한다는 것이다. 이는 변수명, 함수명, 사용자 정의 타입명을 지정할 때도 똑같다. 제 3자가 혹은 나중에 본인이 본인이 작성한 코드를 읽을 때, 함수명 혹은 변수명을 어떻게 지었느냐에 따라 코드를 분석할 때 이해도가 달라진다고 한다. 문서를 구조화 할 때도 문서마다 이름을 달리 지을 것이고 그 이름에 맞는 내용이 문서에 담겨있어야 전체적인 프로그..

SwiftUI 2022.11.07

ViewModifier를 어떻게 쓸 수 있을까

수업시간에 배운 ViewModifier를 어떻게 쓸 수 있을지에 대해 고찰을 해봤다. 모바일 개발은 처음 하는 사람들은 나처럼 위의 개념에 대해 생소한 사람들이 많을 것이다. 그래서 수업시간에 우리 팀에서 만든 계산기 어플을 이용해서 응용하는 방법을 소개하고자 한다! 정확하진 않지만! 나는 쉽게 이해하기 위해 다음과 같이 이해했다. ViewModifier는 CSS 파일과 같은 기능을 한다. (수정자, 속성을 하나의 묶음으로 만든 것) 수업시간에 계산기 어플을 만드는데, ViewModifier와 하위뷰를 이용하여 문서를 구조화하고 가독성이 좋은 코드로 편집해보기로 했다! 계산기 코드 문서의 구조는 위와 같다. 하지만 위에 보는 것처럼 구현해야 할 버튼이 무척 많고, 계산기 코드 문서의 대부분을 차지하는 것..

SwiftUI 2022.10.26