라니킴의 기록 남기기

인스타그램의 프로필 화면을 구현하고 있습니다. 프로필 화면을 CollectionView로 구현하기로 했습니다. 데이터가 많지 않아 TableView보다는 CollectionView가 더 적절할 것 같다고 판단했습니다. 상단 부분을 보면 사용자 피드 화면에서도 같은 UI가 사용되기 때문에 header를 xib 파일로 만들어서 재활용하기로 했습니다. 아래 이미지처럼 storyboard를 이용해서 UI를 구성했습니다. 사용자의 이름과 설명 글을 적는 부분에 따라서 header의 높이가 변경됩니다. 라니킴 라니킴의 인스타그램입니다. 이런식으로 최소 1줄, 최대 5줄 작성이 가능하고 label이 작성하는 글에 따라서 높이가 조절되도록 했습니다. 작성하는 글에 따라서 header의 높이가 자동으로 계산되서 UI에 ..

객체를 JSON 문자열로 인코딩하고 JSON 문자열을 객체로 디코딩하는 방법 iOS에서 Network 연결을 통해 데이터 전송, 데이터를 디스크에 저장하거나 서버에 데이터를 보내거나 하는 작업에서 JSON을 사용한다. 이전에는 xml을 사용했지만 이제는 대부분 JSON을 사용한다. 그러므로 데이터를 전송할 때 JSON 형식으로 인코딩하거나 디코딩해야 한다. 인코딩 & 디코딩 인코딩이란, 쉽게 객체를 JSON 문자열로 바꿔준다고 생각하면 된다. 반대로 디코딩이란, JSON 문자열을 객체로 바꿔준다고 생각하면 된다. 자동으로 Encode and Decode 하기 가장 간단한 방법은 Codable 프로토콜을 추가해 주는 방법이다. struct Person: Codable { var firstName: Stri..

ATS(App Transport Security)는 HTTP 연결의 기본 보안에 대한 변경 사항에 대한 설명이다. ATS 설정을 통해 네트워크 보안 레벨을 설정할 수 있다. ATS는 기본적으로 보안성을 높이기 위해서 안전하지 않은 연결은 허용하지 않는다. ☑️HTTP/ HTTPS HTTP로 연결하면 모든 데이터가 일반 텍스트로 전달된다. 비밀번호와 같이 보안이 중요한 데이터가 유출될 위험이 높다. 반면 HTTPS 연결 시에는 통신 시에 모든 데이터를 암호화해서 전달한다. 그렇기 때문에 Apple 기본 보안 설정에서는 HTTP로 연결을 막고 있다. 그래서 HTTP 연결이 필요한 경우 ATS 설정을 변경해주어야 한다. ATS 설정 NSAppTransportSecurity Setting에서 가능한 전체 키와 ..

WebKit View를 사용해서 HTML content 화면에 출력하기 storyboard에서 webkit View를 활용해서 HTML 콘텐츠를 화면에 표시하도록 UI를 구성해봤다. storyboard library에서 Webkit View 추가 Web View가 deprecated 되어 더 이상 사용되지 않는다. 앞으로는 WebKit View를 사용하시면 된다. textField에 url을 입력하면 해당 url로 이동해 콘텐츠를 로드하고 이동하도록 설정했다. @IBOutlet weak var webView: WKWebView! func go(to urlStr: String) { guard let url = URL(string: urlStr) else { fatalError("Invalid URL") }..

NumberFormatter 를 이용해 천 단위마다 comma(" , ") 넣기 1. 입력 값이 정수인 경우 var intValue = 123456 let numberFormatter = NumberFormatter() numberFormatter.numberStyle = .decimal let result = numberFormatter.string(from: NSNumber(value: intValue))! print(result) //"123,456" 2. 입력 값이 문자열인 경우 var strValue = "1111123456" extension String { public var insertComma: String { let numberFormatter = NumberFormatter() num..

구글 맵에 커스텀 마커 표시하기 받아온 데이터의 위도, 경도 정보를 이용해 지도 상에 마커를 찍고 싶은 데 구글에서 제공하는 마커는 디자인이 너무 별로라 마커를 커스텀해봤습니다. 아래 사진과 같이 받아온 데이터 index를 표시하는 마커를 구현했습니다. 마커를 표시할 때는 이미지뷰를 사용하기 때문에 표시하고자 하는 마커 모양의 이미지가 필요합니다. 저는 아래 사진과 같은 모양의 마커를 사용했고, 인덱스를 표시하는 이미지는 SF Symbol 이미지를 사용했습니다. 사용한 open Api의 데이터가 일정하지 않아 좌표가 있는 경우에만 마커를 표시하도록 했습니다. //create Maker DispatchQueue.main.async { self.restaurantData?.enumerated().forEac..

스토리보드에서 많이 쓰이는 components 들에 익숙해지기 위해 정리한 내용입니다. 앞으로 나오는 component들은 너무 많이 쓰여서 사용하다 보면 저절로 쓰임을 암기하시게 될 거예요. components user Interface는 콘텐츠를 화면에 표시하는 views와 해당 콘텐츠에 허용되는 상호작용을 정의한 controls이라는 2가지 시각적 구성 요소로 구성된다. UIControl은 사용자 상호작용에 대한 응답으로 특정 동작이나 의도를 전달하는 시각적 요소인 controls의 기본 클래스이다. UIView 화면에서 콘텐츠를 관리하는 사각 영역 UIView는 모든 뷰의 루트 클래스이며 공통 동작을 정의한다. view는 계층 구조로 존재할 수 있다. 콘텐츠 그리기 subview를 관리하고 위치 ..

카카오 로그인 카카오 로그인은 아래와 같은 과정으로 진행됩니다. 실제 서비스에 적용할 때는 회원 가입과 서비스 로그인 기능을 추가로 구현해야 하지만 공부용으로 카카오 로그인만 먼저 구현해봤습니다. 사용자가 서비스에서 카카오 로그인 버튼을 클릭합니다. 서비스는 카카오 인증 서버로 인가 코드 발급을 요청합니다. 카카오 인증 서버는 사용자에게 인증을 요청합니다. (참고: 사용자 환경에 따른 인증 방법) 카카오톡으로 로그인: 카카오톡 실행, 카카오톡에 연결된 카카오계정의 자격정보(Credentials)로 사용자 인증 카카오계정으로 로그인: 계정 정보를 입력해 로그인하는 화면 출력, 해당 카카오계정의 자격정보로 사용자 인증 카카오 인증 서버는 사용자 인증 성공 시, 서비스 앱의 동의 항목 설정을 바탕으로 사용자에..

마커가 포함된 Google 지도를 추가해보겠습니다. TRANSLATE with x English Arabic Hebrew Polish Bulgarian Hindi Portuguese Catalan Hmong Daw Romanian Chinese Simplified Hungarian Russian Chinese Traditional Indonesian Slovak Czech Italian Slovenian Danish Japanese Spanish Dutch Klingon Swedish English Korean Thai Estonian Latvian Turkish Finnish Lithuanian Ukrainian French Malay Urdu German Maltese Vietnamese Greek ..