플레이그라운드 입문

오늘 처음 스위프트ui를 접해보았다. 그전에 플레이그라운드가 아닌 xcode로 접했지만 기초도 안잡혀있고 막무가내로 스위프트개발을 시도해서 많은 어려움이 있었다. 아직 파이썬말고는 제대로 배운적이 없는 주제에 스위프트언어가 쉽다는 얘기만 듣고 자신감이 넘쳤었다. 그래서 다시 플레이그라운드를 통해 시작하기로 했다.

---

플레이 그라운드란?

WWDC 2016 컨퍼런스에서 처음 발표 된 Apple에서 개발한 Swift언어를 위한 개발환경이라고 한다. 이는 교육목적으로 만들어져서 오늘 처음 접한 나에게도 매우 쉽고 간단했다. 물론 파이썬, 장고 밖에 안했던 나로써는 엄청엄청 쉬운건 아니였지만 xcode로 swift ui를 바로 쓰려고 했을때 보다는 훨씬 쉬운 느낌이였다.

---

플레이그라운드 시작하기

프로그램을 시작하면 아래와 같은 화면이 뜬다 여기서 밑에 "앱" 아이콘을 누르기만 하면 파일이 생긴다.

그리고 앱을 실행하면 아래와 같은 화면이 열린다. xcode에 비하면 매우 간단한 것을 볼 수 있다. 왼쪽의 코드파일들과 위쪽에 텍스트나 버튼등 컴포넌트를 넣는 사각형에 원이있는 버튼과 컴포넌트에 밝기, 레이아웃등을 설정하는 것들이 있는 버튼, 은 이모티콘 같은 그림파일들이 있는 버튼 그리고 색상버튼이 있다. 추가로 내가 바로 쓴 코드를 보는 미리보기만 있다. xcode나 vs,vscode등을 생각하면 매우 간단하고 보기만 해도 편안한 느낌이였다. cmd+R을 통해서 큰 미리보기 화면을 볼 수 있다.

그리고 여기서 위와 같은 코드가 뜨는데 여기서 var body: some View는 바꿀 수 없다. "ContentView"는 바꿔도 된다!
그리고 위에서 VStack부분들이 옆 프리뷰에서 볼 수있다.

---

리스트와 리스트 클릭하면 정보나오게 하기

파일이름 바꿔주고 사진띄워보기

나는 연습삼아 내가 좋아하는 맛집 리스트를 만들어 보려고 한다. 그래서 이름을 맛뷰라고 바꿔주고 ContentView도 맛뷰로 바꿔주겠다. 그리고 바디 안쪽은 내가 좋아하는 맛집사진과 위치 그리고 소개를 띄워보려고 한다. 이미지를 넣기 위해 이미지를 앱에 넣어 주겠다. 드래그앤드이나 우클릭 파일추가로 이미지를 불러올 수 있다. 그리고 잘 작동하는지 사진을 하나 띄워보았다.

여기서 .resizable과 .scaledToFill은 3개의 사진이 모두 크기가 다르기 때문에 같은 크기로 만들기위한 코드이다. 이렇게 사진을 띄우고 뷰 이름을 바꾸어놔서 MatApp파일에 들어가서 contentView를 MatView로 바꾸어 주었다.

리스트 만들고 연결하기

이제 리스트를 클릭하면 상세화면을 띄우는 것이 목적이다. 먼저 리스트를 만들어보겠aj다. 먼저 새로운 스위프트 파일 "MatList.View"를 만들었다. 이것도 View파일로 struct형식으로 뷰를 만들어 준다. struct는 구조체로 데이터의 용도에 맞게 묶어 표현하기 위해 사용한다.

리스트를 만들어 주기 위해서 id값, 이미지, 이름 변수의 타입을 설정해주고 mat0부터 mat2까지 인스턴스를 세 개 만들엇다. 그리고 MatListView구조체를 선언해주고 배열을 선언해준다. 리스트를 생성하고 식별자로 id를 사용했다. 그리고 네비게이션 링크를 생성했다. 각각은 맛집이름으로 그리고 대상은 Matview이다.
하지만 지금은 해당하는 맛집 사진이 뜨지 않고 처음설정했던 사진만 뜬다. 이제 MatView로 돌아가서 해당하는 사진이 뜨게하자.

뷰에서 각각의 사진과 이름 보이게 하기

MatView 구조체에서 destination으로 받아온 mat 선언해주고 사진과 제목에 각각의 사진, 이름이 나오게 해준다.

위 사진처럼 저렇게 바꿔주기만하면 바로 각각의 사진이 뜨는 것을 볼 수 있다!

---

1일차 마무리

오늘은 기능구현에 목적을 두고 리스트와 리스트를 클릭할시 상세정보가 나오게 구현에 보았다. 다음 2일차에는 바인딩을 사용해서 즐겨찾기 기능을 추가하고 기본적인 디자인요소를 추가해보아야겠다.