본프 웡빙이 함께 진행해봤습니다 !! 😛 프랑스 만국박람회 내용을 테이블 뷰를 이용하여 표현한 어플
|
|
|
- Codable을 채택하여 JSON 데이터와 매칭할 모델 타입 구현
- 스네이크 케이스 또는 축약형인 JSON 키 값을 스위프트의 네이밍에 맞게 변환
- 테이블뷰의 Delegate와 Data Source의 역할의 이해
- 테이블뷰의 셀의 재사용 이해
- 테이블뷰의 전반적인 동작 방식의 이해
- 주어진 JSON 데이터를 파싱하여 테이블뷰에 표시
- 내비게이션 컨트롤러를 활용한 화면 전환
- 뷰 컨트롤러 사이의 데이터 전달
- Codable을 채택하여 JSON 데이터와 매칭할 모델 타입 구현
- 스네이크 케이스 또는 축약형인 JSON 키 값을 스위프트의 네이밍에 맞게 변환
- 테이블뷰의 Delegate와 Data Source의 역할의 이해
- 테이블뷰의 셀의 재사용 이해
- 테이블뷰의 전반적인 동작 방식의 이해
- 주어진 JSON 데이터를 파싱하여 테이블뷰에 표시
- 내비게이션 컨트롤러를 활용한 화면 전환
- 뷰 컨트롤러 사이의 데이터 전달
- 오토 레이아웃을 적용하여 다양한 기기에 대응
- Word Wrapping / Line Wrapping / Line Break 방식의 이해
- 접근성(Accessibility)의 개념과 필요성 이해
- Dynamic Types를 통해 텍스트 접근성 향상
- Step1 [모델타입 구현] 기간 : 2022.6.13(월) ~ 2022.6.14(화) step1 PR 메세지
- Step2 [JSON파싱 및 UI구현] 기간 : 2022.6.15(수) ~ 2022.6.17(금) step2 PR 메세지
- Step3 [오토레이아웃, Accessibility 지정] 기간 : 2022.6.21(화) ~ 2022.6.22(수) step3 PR 메세지
- navigationItem.title = "메인"
- scrollView
- stackView
- title
- posterView
- visitorStack
- visitorsTitle
- visitorsText
- locationStack
- locationTitle
- locationText
- durationStack
- durationTitle
- durationText
- description
- buttonStack
- firstFlagView
- button
- secondFlagView
- stackView
- navigationItem.title = "한국의 출품작"
- ItemTableViewCell
- stackView
- imageNameView
- subStackView
- nameLabel
- shortDescriptionLabel
- stackView
- navigationItem.title = ItemTableViewCell.nameLabel
- stackView
- imageNameView
- descrriptionLabel
- 첫번째 화면만 세로모드 고정
| 첫번째 화면 | 나머지 화면 |
|
|
JSON에서 파싱된 Data의 줄바꿈을 하기 위하여 replacingOccurences 메서드를 사용했다. title.text 내의 "(" 를 "\n("로 변경하도록 구현했다.
title.text = result.title
title.text = title.text?.replacingOccurrences(of: "(", with: "\n(")
title.textAlignment = .center| 수정 전 | 수정 후 |
|
|
파일의 경로를 찾는 과정에서 다른 사용자가 pull을 받았을 때 경로를 찾지 못하는 문제가 발생했다.
Bundle.main.path(forResource: 파일명, ofType: 파일타입, inDirectory: 파일경로(상위 폴더이름)) 메서드를 이용하여 상대 경로를 찾아줬다.
try? String(contentsOfFile: ).data(using: .utf8)메서드를 이용하여 Data타입으로 변환하였고, 디코딩을 할 수 있었다.
기존의 ItemDataManager 에서 getData() 메서드를 수행하여 json을 읽어왔다. 이를 이용해 유닛테스트를 진행하였고, 똑같이 ExpositionDataManager 에서도 같은 getData()메서드를 사용하여 테스트를 진행 하였는데 typeMismatch 오류가 생겼다.
typeMismatch(Swift.Array, Swift.DecodingError.Context(codingPath: [], debugDescription: "Expected to decode Array but found a dictionary instead.", underlyingError: nil))
해석: Array<Any> 를 decode 하는 것을 예상 했지만,dictionary 가 들어왔다 !
decode 메서드에 type파라미터에 배열이 들어갔기 때문이었다. 배열에서 딕셔너리 타입으로 바꿔주니 오류가 해결 되었다. 대괄호 하나 차이로 인해 오류가 났던 것이었다. 파일로 직접 열어서 확인해보니, "items.json" 에선 [{}] 배열 타입의 json 이 들어있고, "exposition_universelle_1900.json" 에선 {} 딕셔너리 타입의 json 이 들어있었다.
swift func decode<T>(_ type: T.Type, from data: Data) throws -> T where T : Decodable
stackView에 사진과 버튼을 addArrangedSubview 해줬을 때 사진만 크게 나와 버튼을 클릭할 수 없는 문제가 발생했다. 사진의 크기를 resize하여 문제를 해결했다.
func resizeImage(image: UIImage, width: CGFloat, height: CGFloat) -> UIImage? {
UIGraphicsBeginImageContext(CGSize(width: width, height: height))
image.draw(in: CGRect(x: 0, y: 0, width: width, height: height))
let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return newImage
}이후에 오토레이아웃을 이용하여 imageView의 Size를 더 간단하게 설정할 수 있었다.
imageView.widthAnchor.constraint(equalToConstant: x).isActive = true
imageView.heightAnchor.constraint(equalToConstant: y).isActive = true
- backgoundColor를 systemBackground 로 지정해주었더니 해결 되었다.
해금의 사진크기만 위아래로 길게 뻗어지는 현상이 발생하였습니다. 이 사진 하나 때문에 작업 진행이 원활하게 되지 않았습니다.
| 수정 전 | 수정 전 | 수정 후 |
|
|
|
