7주차 과제 (1)

게시 2024/04/09

By Dongik Song

6 분읽는 시간

이번에도 약 2주의 시간이 주어지며,

WishList App을 만드는것이다.

강의에 간단하게 만드는 내용이 있던걸로 아는데, 그걸 보지않고 여태껏 배워 온 내용으로 먼저 만들고 이후에 보려고 한다.

최소 구현해야하는 단계는 아래와 같다.

Lv1. 데이터 모델링하기

API로 받아올 데이터 객체를 만듭니다.

아래 API 정보 토글에서 받아올 수 있는 데이터를 확인하고, 필요한 데이터를 모델링합니다.

데이터 예시

  
  struct RemoteProduct: Decodable {
  	let id: Int
  	// 다음 데이터
  	// 다음 데이터
  	// 다음 데이터
  }

Dummy API 정보

[GET] https://dummyjson.com/products/{ID}

ID의 범위: 1 ~ 100

Response JSON

  
  {
      "id": 1,
      "title": "iPhone 9",
      "description": "An apple mobile which is nothing like apple",
      "price": 549,
      "discountPercentage": 12.96,
      "rating": 4.69,
      "stock": 94,
      "brand": "Apple",
      "category": "smartphones",
      "thumbnail": "https://i.dummyjson.com/data/products/1/thumbnail.jpg",
      "images": [
          "https://i.dummyjson.com/data/products/1/1.jpg",
          "https://i.dummyjson.com/data/products/1/2.jpg",
          "https://i.dummyjson.com/data/products/1/3.jpg",
          "https://i.dummyjson.com/data/products/1/4.jpg",
          "https://i.dummyjson.com/data/products/1/thumbnail.jpg"
      ]
  }

API로 받아온 데이터에 맞게 CoreData 데이터를 모델링합니다.
잠깐!
- 왜 네트워크 통신으로 받아온 데이터와 내부 저장소인 CoreData 데이터를 각각 모델링 해줘야하죠?
  - API로 받아온 데이터와 CoreData 데이터 엔티티를 별도로 모델링하면 앱 내에서 우려사항을 명확하게 분리하는 데 도움이 됩니다.
  - 우려사항이라고 한다면?
    - API로 받아온 데이터는 특히 API가 변경되거나 업데이트되는 경우 핵심 데이터 모델의 구조와 항상 완벽하게 일치하지 않을 수 있답니다!
  - API로 받아온 데이터를 별도로 모델링하면 받아온 데이터 형식을 빠르게 반영하도록 설계할 수 있으므로 CoreData 엔티티에 매핑할 때 처리가 더 쉬워집니다.

Lv2. 위시 리스트 메인 페이지

디자인 및 화면 구성은 반드시 예시대로 하지 않아도 됩니다.
다른 상품 보기 버튼 구현
- 버튼을 누르면 랜덤한 “id”를 생성하고 해당 id에 따라 다른 상품을 보여줍니다.
- [GET] https://dummyjson.com/products/{ID}

아래 JSON Dummy API를 활용해, 상품 정보를 노출합니다.

반드시 보여줘야할 상품 데이터
- 썸네일 이미지(thumbnail)
- 상품명(title)
- 상품 설명(description)
- 가격(price)
  - 가격의 경우, 1000단위로 콤마(,) 처리합니다.
반드시 사용할 것 : URLSession, UIImage, UILabel

Dummy API 정보

[GET] https://dummyjson.com/products/{ID}

ID의 범위: 1 ~ 100

Response JSON

  
  {
      "id": 1,
      "title": "iPhone 9",
      "description": "An apple mobile which is nothing like apple",
      "price": 549,
      "discountPercentage": 12.96,
      "rating": 4.69,
      "stock": 94,
      "brand": "Apple",
      "category": "smartphones",
      "thumbnail": "https://i.dummyjson.com/data/products/1/thumbnail.jpg",
      "images": [
          "https://i.dummyjson.com/data/products/1/1.jpg",
          "https://i.dummyjson.com/data/products/1/2.jpg",
          "https://i.dummyjson.com/data/products/1/3.jpg",
          "https://i.dummyjson.com/data/products/1/4.jpg",
          "https://i.dummyjson.com/data/products/1/thumbnail.jpg"
      ]
  }

Lv3. 위시 리스트 보기 페이지

위시 리스트 담기 버튼 구현
- 버튼을 누르면 현재 보여주고 있는 상품의 정보를 CoreData에 저장
- 반드시 사용할 것 : Core Data, UIButton
위시 리스트 보기 페이지 구현
- “위시 리스트 보기” 버튼을 누르면 위시 리스트 담기 버튼을 눌렀을 때 CoreData에 저장한 데이터 노출
- 상품 아이템들 사이에 회색 라인을 추가해서 구분해주세요.
- 반드시 보여줘야할 상품 데이터(ex: [1] iPhone 9 - 549$)
  - 상품의 아이디(id)
  - 상품명(title)
  - 가격(price)
- 반드시 사용할 것 : UIViewController, TableView

Mindmap 작성

우선은 머리속에 생각나는대로 적어봤다.

LV.1 시작

우선 DataModel을 하나 만들어준다.

이건 API에서 가져올 데이터를 가져올때 사용할것이다.

LV.3에 보면 반드시 보여야할 상품데이터에 id, title, price가 있다.

즉 이 값들은 무조건 DataModel에 들어있어햐 한다는 뜻이다.

JSON 데이터 확인.

우선 API에 요청을 했을때 어떤 값을 가지고 오는지를 확인해보자

이런식으로 값을 가져오는데, 제일 아래 보면 total이 100개가 끝이다.

그렇다는건 1~100 까지의 값을 난수로 설정하여 얻어서 페이지에 입력하면 될듯하다.

즉 https://dummyjson.com/products/\(pageNumber) 이런 느낌?

pageNumber라는 변수는 나중에 별도로 설정하고 하면 될 것 같다.

과제의 흐름을 보아선 그래도 이전 과제는 1~3까지는 과제의 흐름을 따라 할 수 있었지만 이번에는 안될것같다.

찐으로 시작하는건 다음글에서부터

캠프, 7주차