이제 앱의 전체적인 레이아웃과 디자인은 개발이 끝이 났다. 이번 시간에는 앱 내에서 사용자가 자신의 개성을 표현할 수 있는 프로필을 만들어 볼 것이다. 바로 시작!🧑‍💻 1. Display a User Profile 첫번째 섹션에서는 세부 정보 및 기본 설정을 로컬에서 저장하게 된다. 사용자가 세부 정보를 편집하기 전에 편집 컨트롤이 없는 요약 보기에 표시된다. 새로운 기능이 추가되는 만큼 이번 섹션에서는 특별한 문법적인 요소는 없고 새로운 파일이 많이 나올 예정이다. 그러고나서 ProfileHost라는 View를 하나 더 추가해준다. 이 뷰의 역할은 프로필 정보의 정적 요약 뷰와 편집 모드를 모두 호스팅 하게 된다. import Foundation struct Profile { var username:..

이번 시간에는 랜드 마크의 카테고리 view에 수평으로 스크롤되는 랜드마크에 수직 스크롤 목록이 표시되게끔 해볼 것이다. 한마디로 수직으로 스크롤도 되는 페이지에 수평으로 스크롤이 되는 화면을 구성한다는 것이다. 바로 시작해보자. 1. Add a Category View 카테고리별로 랜드마크를 정렬하는 View를 만들고 해당 뷰 상단에서 주요 랜드마크를 강조 표시 해서 랜드마크를 탐색하는 다른 방법을 제공해보자. CategoryHome이라는 새로운 파일 하나를 만들고, 다양한 카테고리를 호스팅 하기 위해 NavigationView를 추가한다. 그리고. navigationTitle을 이용하여 내비게이션의 이름을 정해주자. import SwiftUI struct CategoryHome: View { var ..

이번 시간에는 뷰에 애니메이션 효과를 추가하여 이 앱을 사용하는 동안 사용자가 걷는 행동을 추적하기 위해 그래프를 포함해서 애니메이션을 추가해볼 것이다. 1. Add Hiking Data to the App 먼저 애니메이션을 추가하기전에 애니메이션을 적용할 대상이 필요하다. 그래서 이번 섹션에서는 먼저 하이킹 데이터를 가져와 모델링을 해주고 이후 해당 데이터를 정적으로 표시하기 위해서 미리 뷰를 추가해보자. 다운로드 파일을 현재 작업 중인 폴더로 드래그해서 작업을 준비하자. 준비는 끝났다. 이제 새로운 파일 Hike을 만들어준다. 여기서 Hike 는 앞서 만들었던 Landmark의 구조와 비슷하게 Coadble을 가지게 되고 해당 데이터 파일의 키와 일치하는 속성을 가지게 된다. import Founda..

카카오톡 데이터센터 화재로 인해 며칠 동안 글을 쓰지 못했는데 여하튼 지난 시간에 이어서 계속 진행해보겠다. 이번 시간에는 사용자가 해당 리스트의 랜드마크를 방문할 때나 여러 가지 수행 과목을 성공하게 되면 얻게 되는 배지를 받게 할 것이다. 그러기 위해서는 당연히 배지를 만들어 주어야 하는데 이번 시간에는 서로 다른 도형을 결합하거나 오버레이 하여 여러 개의 배지를 한번 만들어보자. 1. Create Drawing Data for a Badge View 배지를 만들려면 먼저 배지 배경의 육각형 모양을 그리는 데 사용할 수 있는 데이터를 정의해야 합니다. HexagonParameters라는 swift파일을 하나 생성해주고, 그 내부에 HexagonParameters라는 struct를 하나 만들자. 그리고..

이번 시간에는 사용자가 즐겨 찾는 장소에 플래그를 지정해놓고 즐겨찾기만 표시하도록 목록을 필터링할 수 있도록 해볼 것이다. 이 기능을 추가하려면 목록에 스위치를 추가 한 다음 사용자가 스위치를 누르면 즐겨찾기를 한 목록만 볼 수 있도록 해준다. 바로 시작해보자. 1. Mark the User’s Favorite Landmarks 가장 먼저 해야 할 것은 새로운 기능에 대한 프로젝트 파일 landmark에 속성 값을 추가해주자. //Landmark.swift struct Landmark: Hashable, Codable, Identifiable { var id: Int var name: String var park: String var state: String var description: String v..

지난 시간에는 스택과 View들을 구성하는 방법과 함께 서로 다른 view를 합치는 작업을 해보았다. 이번 시간에는 리스트와 내비게이션을 이용하여 랜드 마크의 전체 목록을 확인할 수 있고, 해당 랜드마크의 세부 정보를 확인할 수 있도록 해보았다. 1. Create a Landmark Model 튜토리얼에서 제공하는 Resources파일 중 랜드마크 데이터.json을 현재 진행 중인 프로젝트 탐색 창으로 들고 온다. 그러고 나서 Landmark.swift 파일을 하나 생성해서 json파일 내부에 있는 키의 이름과 일치하는 몇 가지의 속성을 이용하여 Landmark구조를 정의한다. import Foundation struct Landmark: Hashable, Codable { var id: Int var ..