이리메라 갖다가

8주차 WIL

너이르나 — Mon, 4 Sep 2023 21:37:01 +0900

FACTS

프로젝트명 : 메모앱 만들기 심화

FINDINGS

문제점	스토리보드 없이 코드로만 작업할 때 메인 화면 로드 불가 popVC 화면 전환 불가 오토레이아웃 등의 중복 코드 작성으로 인한 시간 소모 Array를 UserDefaults로 저장하려고 했는데 에러 발생
해결방안	SceneDelegate 파일에서 초기 뷰컨트롤러 지정 네비게이션 컨트롤러를 루트 컨트롤러 앞에 지정 코드스니펫 생성 UserDefaults는 기본 데이터 형식만 저장할 수 있어서 모델에 Codable 프로토콜 채택

FUTURE

UserDefaults 공식문서 확인
코드로 앱 구현하는데 익숙해지기
문제 발생 시 디버깅이나 프린트문으로 원인 찾기

FEELINGS

코드로 작업하는게 재밌다! 좀 더 이해가 잘 되는 듯?
반복하면 반복할수록 머리에 잘 들어온다! 반복만이 살길
주말에도 공부하자... 아직 부족해ㅠ

[Swift] Youtube API 활용하여 앱 만들기 (1) : Youtube API 사용방법

너이르나 — Mon, 4 Sep 2023 21:02:21 +0900

Youtube API 사용 방법에 대해 정리해보려고 한다.

유튜브 가이드

https://developers.google.com/youtube/v3/docs?hl=ko

API Reference | YouTube Data API | Google for Developers

이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English API Reference 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. YouTube Data API를 사용하면 YouTube

developers.google.com

API key 발급

1. Developer Console 접속

https://console.developers.google.com/?hl=ko

Google 클라우드 플랫폼

로그인 Google 클라우드 플랫폼으로 이동

accounts.google.com

2. 라이브러리 - YouTube Data API v3 선택

3. API key 생성

API 사용

1. 검색

요청: HTTP 요청

GET https://www.googleapis.com/youtube/v3/search

필수 매개변수: part(string)
part 매개변수는 API 응답이 포함하는 search 리소스 속성 하나 이상의 쉼표로 구분된 목록을 지정한다. (snippet로 설정)
선택적 매개변수
- maxResults(integer)
  : 결과 집합에 반환해야 하는 최대 항목 수를 지정한다. 사용 가능한 값: 0~50, 기본값은 5
- q(string)
  : 검색할 검색어를 지정한다.
- 그밖의 매개변수는 공식 홈페이지 참조

Search: list | YouTube Data API | Google for Developers

이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English Search: list 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. API 요청에 지정된 쿼리 매개변

developers.google.com

2. 동영상

요청: HTTP 요청

GET https://www.googleapis.com/youtube/v3/videos

필수 매개변수: part(string)
part 매개변수는 API 응답이 포함하는 video 리소스 속성 하나 이상의 쉼표로 구분된 목록을 지정한다.
매개변수가 하위 속성을 포함하는 속성을 식별하는 경우 하위 속성이 응답에 포함된다. 예를 들어 video 리소스에서 snippet 속성에는 channelId, title, description, tags, categoryId 속성이 포함되어 있다. 따라서 part=snippet를 설정하면 API 응답에 이러한 모든 속성이 포함된다.
다음 목록에는 매개변수 값에 포함할 수 있는 part 이름이 포함되어 있습니다.
- contentDetails
- fileDetails
- id
- liveStreamingDetails
- localizations
- player
- processingDetails
- recordingDetails
- snippet
- statistics
- status
- suggestions
- topicDetails
필터: chart(string)
chart 매개변수는 검색하려는 차트를 식별한다.
- mostPopular – 지정된 콘텐츠 지역 및 동영상 카테고리에 대해 가장 인기 있는 동영상을 반환
선택적 매개변수
- maxResults(integer)
  : 결과 집합에 반환해야 하는 최대 항목 수를 지정한다. 사용 가능한 값: 0~50, 기본값은 5
- 그밖의 매개변수는 공식 홈페이지 참조

Videos: list | YouTube Data API | Google for Developers

이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English Videos: list 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. API 요청 매개변수와 일치하는

developers.google.com

[Swift] 메모 앱 만들기 심화 (8) : TableView 살펴보기

너이르나 — Fri, 1 Sep 2023 19:56:34 +0900

beginUpdates(), endUpdates()

- UITableView를 업데이트할 때 사용되는 메서드

- 테이블 뷰의 데이터 소스를 변경할 때 테이블 뷰의 셀들을 새로고침하고 애니메이션 효과를 부여하는데 사용됨

- 이들 메서드를 사용하는 주된 이유는 테이블 뷰의 업데이트를 보다 효율적으로 처리하기 위함

사용 장점

애니메이션 및 레이아웃 최적화: 테이블 뷰의 셀들이 추가되거나 삭제될 때, 애니메이션 효과와 함께 레이아웃이 변경되는 경우가 있는데 beginUpdates()와 endUpdates()를 사용하면 셀들의 추가 및 삭제에 대한 애니메이션 효과가 부드럽게 적용할 수 있으며, 테이블 뷰의 레이아웃 최적화가 이루어진다.
데이터 일관성 유지: beginUpdates()와 endUpdates()를 사용하면 테이블 뷰의 데이터 소스를 변경하는 과정에서 테이블 뷰와 데이터 소스 간의 일관성이 유지되며, 이를 통해 예상치 못한 동작이나 오류를 방지할 수 있다.
동시 업데이트 처리: 여러 셀을 동시에 추가하거나 삭제하는 경우에도 beginUpdates()와 endUpdates()를 사용하면 테이블 뷰가 한 번에 하나씩 셀을 업데이트하지 않고, 모든 변경 사항을 한 번에 처리할 수 있어 성능이 향상된다.
배치 업데이트 지원: 테이블 뷰의 insertRows, deleteRows, insertSections, deleteSections 등의 메서드를 사용하여 여러 셀이나 섹션을 한 번에 추가하거나 삭제할 수 있다. 이러한 배치 업데이트 작업을 beginUpdates()와 endUpdates() 내에서 수행하면 애니메이션 효과와 함께 셀들이 한 번에 업데이트되며, 사용자에게 보다 나은 사용자 경험을 제공할 수 있다.

화면 비교

딱히 별 차이는 없어보인다....;;

눈으로 확인하는 차이는 없을지라도 데이터와 관련된 차이가 있다고하니 쓰는걸로^_^

[Swift] 메모 앱 만들기 심화 (7) : UserDefaults 로 데이터 저장하기

너이르나 — Thu, 31 Aug 2023 19:47:00 +0900

스토리보드 없이 메모앱 만들기를 진행하고 있는데, Todo에 해당하는 프로퍼티를 최대한 간단하게 정의하였다.

struct Todo {
    var todo: String
    var isCompleted: Bool
}

기초부터 차근차근 해보려고 todo 내용과 완료여부만 정의했고, Todo를 관리할 Manager를 구조체로 정의하였다.

struct TodoManager {
    static let userDefaults = UserDefaults.standard
    
    // MARK: - Variables
    static var todoList: [Todo] = [
        Todo(todo: "킬링보이스 악뮤 보기", isCompleted: true),
        Todo(todo: "개인 과제 코드로만 해보기", isCompleted: false)
    ]
    
    // MARK: - Load
    static func loadTodo() {
        
    }
    
    // MARK: - Add
    static func addTodo(_ newTodo: Todo) {
        var updatedTodoList = todoList
        updatedTodoList.append(newTodo)
        todoList = updatedTodoList
        print(todoList)
    }
    
    // MARK: - Save
    static func saveTodo(_ saveTodo: Todo) {
        
    }
    
    // MARK: - Delete
    
}

UserDefaults를 이용해서 간단하게 저장과 읽어오기를 구현하기 위해 addTodo 함수에 아래와 같은 코드를 추가했는데 오류가 발생했다.

userDefaults.set(todoList, forKey: "todoList")

ERROR: Attempt to insert non-property list object

아니 이게 뭔데...

너무나 당연하게 입력받는 Todo를 append 하듯이 set에 value로 넣었는데 UserDefaults는 기본 데이터 형식(property list)만 저장할 수 있다고 안된단다...

그렇다 UserDefaults는 Array나 Dictionary와 같은 복잡한 데이터 구조를 직접 저장하지 못하는 문제가 있는 것이다...

만약에 내가 의도한 것과 같이 배열의 형태로 저장하고 싶으면 Codable 프로토콜을 활용하여 데이터를 인코딩 및 디코딩해야 한다는 점이다.

그치만, Codable 프로토콜을 채택하지 않고 프로퍼티를 개별로 저장하면 될 것 같아서 아래와 같이 수정했다.

userDefaults.set(newTodo.todo, forKey: "todoTitle")
userDefaults.set(newTodo.isCompleted, forKey: "isCompleted")

새로 입력받는 Todo를 newTodo라고 정의하고 각 프로퍼티들을 별도로 저장해준다.

근데 여기서 문제가 있다.

프로퍼티들을 개별로 저장할 수는 있으나, 나중에 todoList를 load 할 때 이 데이터들을 다시 불러와서 Todo 객체로 조합해야 하는 것이다. 쉽게 말해서 또 작업이 추가된다는 뜻이다.

이렇게 분리된 저장 방식은 데이터를 관리하거나 활용하기에 복잡해져서 객체를 한번에 저장하거나 로드하기 위해서는 Codable 프로토콜을 사용하는 것이 더 효율적이다.

하지만 무시하고 loadTodo를 짰다.

static func loadTodo() {
    if let todo = userDefaults.string(forKey: "todoTitle"),
       let isCompleted = userDefaults.bool(forKey: "isCompleted") {
       	// 로드될 todoList를 정의하려고 했으나...
        let loadTodoList = Todo(todo: todo, isCompleted: isCompleted)
    }
}

바로 에러 발생

ERROR: Initializer for conditional binding must have Optional type, not 'Bool'

이 에러가 무엇인고 하니,

userDefaults.bool(forKey:) 메서드는 Bool 값을 반환하며, 이 값은 옵셔널이 아니기때문에 조건부 바인딩으로 추출할 수 없다는 말이다...

이 문제를 해결하기 위해서는 아래와 같이 코드를 수정할 수 있다.

저장

// 여러 개의 개별 값들을 저장(순서를 기억해야 함)
userDefaults.set(newTodo.todo, forKey: "todoTitle\(todoList.count)")
userDefaults.set(newTodo.isCompleted, forKey: "isCompleted\(todoList.count)")

// todoList 배열의 길이 갱신
let newCount = todoList.count + 1
userDefaults.set(newCount, forKey: "todoListCount")

// 로컬 배열 갱신
todoList.append(newTodo)

불러오기

// todoList 배열 불러오기
if let count = userDefaults.value(forKey: "todoListCount") as? Int {
    for index in 0..<count {
        if let todo = userDefaults.string(forKey: "todoTitle\(index)"),
           let isCompleted = userDefaults.bool(forKey: "isCompleted\(index)") {
            let loadedTodo = Todo(todo: todo, isCompleted: isCompleted)
            todoList.append(loadedTodo)
        }
    }
}

그렇다.. 다시 수정해봤는데 겁나 복잡하다.....

..... Codable 프로토콜을 채택했다. 진작에 할껄.. 너무 쉽게 저장되네

// MARK: - Load
static func loadTodo() {
    if let data = userDefaults.data(forKey: "todoList"),
       let loadTodoList = try? JSONDecoder().decode([Todo].self, from: data) {
        todoList = loadTodoList
    }
}

// MARK: - Add
static func addTodo(_ newTodo: Todo) {
    var updatedTodoList = todoList
    updatedTodoList.append(newTodo)
    todoList = updatedTodoList
    saveTodo(newTodo)
    loadTodo()
}

// MARK: - Save
static func saveTodo(_ saveTodo: Todo) {
    if let saveData = try? JSONEncoder().encode(todoList) {
        userDefaults.set(saveData, forKey: "todoList")
    }
}

데이터를 저장하는 부분은 saveTodo 함수안에 구현하여 저장하고, loadTodo 함수에 저장된 데이터를 디코딩해서 불러온다.

이렇게 되면 todo를 추가할 때나 삭제할 때 해당 로직을 작성하고 saveTodo()만 호출해주면 너무나 쉽게 todo를 저장할 수 있다.

[Swift] 메모 앱 만들기 심화 (6) : 스토리보드 없이 코드로 개발하기 초기 셋팅, 코드스니펫 만들기

너이르나 — Wed, 30 Aug 2023 21:29:08 +0900

어제까지 스토리보드를 활용하여 메모앱을 업데이트했다.

그리고 이제 대망의 스토리보드 없이 코드로 개발을 시작해보려고 한다.

일단 초기 셋팅할 게 있어 정리헤보고자 한다.

Storyborad 흔적 지우기

Main.storyboard 삭제

프로젝트를 만들고나면 생기는 기본 Main 스토리보드를 삭제한다.

Scene Configuration 삭제

프로젝트 내 Info -> Information Property List -> Application Scene Manifes -> Scene Configuration -> Application Session Role -> Item 0 경로를 타고 들어가서 Storyborad Name를 삭제한다.

Main storyboard file base name 삭제

프로젝트 내 Info 에서 Main storyboard file base name을 삭제한다.

상기와 같이 3개의 파일을 지우게 되면 프로젝트 내에 스토리보드는 사라진다.(런치스크린 제외)

Initial View Controller 셋팅

처음 프로젝트를 만들때 스토리보드에는 아래와 같이 ViewController가 있고 그 왼쪽에는 작은 화살표가 표시되는데, 그 화살표는 프로젝트를 빌드했을 때 처음 나타나는 화면을 의미한다.

지금 우리의 프로젝트는 스토리보드를 삭제했기 때문에 지금 상태로 빌드하면 까만 화면이 나와 ViewController에서 작업한 내용을 확인할 수 없다.

그래서 초기 화면을 View Controller로 설정해주는 작업이 필요하다. 해당 작업은 그전엔 들여다보지 않았던 SceneDelegate에서 수행하게 된다.

파일을 열어보면 15번째 줄부터 20번째 줄 까지의 내용이 처음 프로젝트가 빌드될 때 보여지는 Scene에 대한 코드이다.

이제 프로젝트가 빌드될 때 처음 로드될 화면을 ViewController로 설정하는 코드를 작성한다.

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
    guard let windowScene = (scene as? UIWindowScene) else { return }
    let window = UIWindow(windowScene: windowScene)
    window.rootViewController = ViewController()
    self.window = window
    self.window?.makeKeyAndVisible()
}

windowScene 변수 설정: 주어진 scene 파라미터를 UIWindowScene으로 타입 캐스팅하여 windowScene 변수에 할당
UIWindow 생성: UIWindow를 생성하고, 방금 얻어온 windowScene을 사용하여 새로운 윈도우를 생성
루트 뷰 컨트롤러 설정: 생성한 윈도우의 rootViewController 속성에 ViewController() 인스턴스를 할당. 이렇게 하면 앱이 실행되었을 때 초기 화면에 표시될 뷰 컨트롤러가 설정됨
윈도우 키 설정 및 표시: 생성한 윈도우를 앱의 주요 윈도우로 설정하고, makeKeyAndVisible() 메서드를 호출하여 윈도우를 화면에 보이도록 설정

그런데 상기와 같이 ViewController에 바로 연결하게 되면 페이지가 늘어났을 때 네비게이션을 활용하여 화면 전환을 해야하는데 어려움이 존재한다.

그래서 처음 로드되는 화면을 NavigationController로 설정하고 ViewController를 root로 연결하기 위해 아래와 같이 코드를 수정한다.

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
    guard let windowScene = (scene as? UIWindowScene) else { return }
    window = UIWindow(windowScene: windowScene)
    let mainVC = UINavigationController(rootViewController: ViewController())
    self.window?.rootViewController = mainVC
    self.window?.makeKeyAndVisible()
}

루트 뷰 컨트롤러 설정: UINavigationController의 인스턴스를 생성하고, 그 안에 ViewController() 인스턴스를 루트 뷰 컨트롤러로 설정. 이렇게 하면 앱이 실행되었을 때 네비게이션 컨트롤러를 루트로 하는 뷰 계층이 생성되며, ViewController()가 첫 화면으로 보여짐
윈도우의 루트 뷰 컨트롤러 설정 및 표시: 생성한 윈도우의 rootViewController를 mainVC로 설정하고, makeKeyAndVisible() 메서드를 호출하여 윈도우를 화면에 표시

이렇게 하면 스토리보드 없이 코드로 개발하기 위한 초기 셋팅이 끝난다.

생각보다 처음에 작성할 게 많아 번거로웠다. 확실히 스토리보드로 작업하게되면 이런 초기 셋팅을 하지 않아도 되니까 편하긴 한 것 같다. 그리고 스토리보드에서는 UI를 구현하는데 많은 시간이 투자되지 않고 코드 작업이 적어서 좋았다.

그치만, 지금까지 작업해본 결과 코드가 훨씬 직관적이라고 생각된다. 관리 포인트도 코드만 확인하면 돼서 괜찮았다.

계속 이것저것 개발하다보면 프로젝트에 알맞게 쓸 수 있지 않을까...^_^

아 그리고, 코드로 작업하면서 반복되는 코드들을 code snippet을 이용해서 간단하게 사용할 수 있는 방법을 알게 되었다!

Snippets

코드로 개발을 하게 되면서 초기 셋팅을 위한 Scene 설정이라든지, 기본적인 UI 셋팅이라던지 반복되는 코드들을 스니펫으로 저장하여 쉽게 쓸 수 있는 방법을 정리하려고 한다.

일단 저장된 코드 스니펫을 확인하고 편집, 삭제를 할 수 있는 단축키는 command + shift + L 이다.

아까와 같이 Scene을 변경하기 위한 코드를 예로 들자면, 코드 스니펫을 만들 코드를 블럭으로 선택한다.

코드 블럭을 우클릭하게 되면 중간에 있는 Create Code Snippet...을 선택한다.

My Code Snippet이라고 적힌 부분은 저장한 코드 스니펫의 명칭이고, 중요한건 하단에 Completion이라고 있는 부분인데 쉽게 말해 키워드다.

해당 키워드를 코드창에 치면 바로 자동완성이 뜨기 때문에 본인이 알 수 있는 직관적인 키워드로 작성하길 바란다.

나는 알아보기 쉽게 naviWindowScene 이라고 설정했고, naviWi까지만 쳤는데도 자동완성 되는 모습을 볼 수 있다.

코드스니펫은 아주 편리하니 잘 써먹도록!!

나는 뷰컨트롤에 가장 중요한 오토레이아웃을 담은 setupUI라는 함수를 코드 스니펫으로 만들어 쓰고 있는데, 각 코드에 들어갈 프로퍼티들이 다르다보니 <#프로퍼티#> 와 같이 입력값을 받을 수 있게 설정해두었다.

코드로 작업할 때 입력해야 하는 부분을 코드 스니펫 사용으로 시간을 절약할 수 있어서 매우 유용하다.

[Swift] 메모 앱 만들기 심화 (5) : MVC 구조

너이르나 — Tue, 29 Aug 2023 21:16:21 +0900

MVC(Model-View-Controller)

MVC는 소프트웨어 디자인 패턴으로, 앱의 구성 요소들을 세가지 주요 컴포넌트로 분리하여 코드의 유지보수성과 재사용성을 높여준다.

Model(모델)

앱의 데이터와 비즈니스 로직 담당
데이터 모델링, 유효성 검사, 데이터 저장 및 관리 등의 역할
화면과 상호작용하지 않으며, 화면 표현을 위한 정보가 없음
변경 사항이 있을 때 컨트롤러에게 알리는 역할

struct Todo {
    var title: String
    var category: String
    var isCompleted: Bool
}

View(뷰)

사용자 인터페이스와 데이터의 시각적 표현 담당
사용자가 보는 화면 요소들을 구성하고 표시
모델의 데이터를 보여주고, 데이터 변경사항을 반영
컨트롤러에게 사용자의 입력과 이벤트를 알리는 역할

class TodoTableViewCell: UITableViewCell {
    // 테이블 뷰 셀을 커스텀하여 배치 - 사용자 인터페이스 및 시각적 표현
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var categoryLabel: UILabel!
    @IBOutlet weak var completionCheckmark: UIImageView!
}

Controller(컨트롤러)

모델과 뷰 간의 중개자 역할
사용자 입력을 받아 모델을 업데이트하거나 뷰를 갱신하는 역할
모델의 변경사항을 감지하고 뷰에 반영하거나 뷰의 이벤트를 처리하여 모델을 업데이트
뷰와 모델의 결합도를 낮춰 유연성을 높임

class TableViewController: UITableViewController {
    var todoList: [Todo] = []  // 모델 데이터
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // todoList 초기화 등의 로직
    }
    
    // 테이블 뷰 데이터 소스 및 델리게이트 메서드 구현
    // ...
    
    // 할 일 추가 버튼을 눌렀을 때 호출되는 메서드
    @IBAction func addTodoButtonTapped(_ sender: UIButton) {
        // TodoManager를 사용하여 할 일 추가
        TodoManager.shared.addTodo(title: "새 할 일", content: "", category: "일반", isCompleted: false)
        tableView.reloadData()
    }
}

MVC 구조는 상기와 같으나, 내가 개발한 코드는 View와 Controller가 거의 밀접하게 연관되어 대체적으로 ViewController에서 모든 로직을 수행하는 구조로 되어있다.

스토리보드로 앵간한 UI는 다 구현하다보니, View로 분류할 코드가 다 VC에 작성되어버렸다.

그리고 TodoManager 같은 경우에는 컨트롤러라고 볼 수 있지만, 데이터를 다루는 역할을 하기 때문에 모델로 분류했다.

MVC 장단점

장점

분리된 역할: 각 컴포넌트인 모델, 뷰, 컨트롤러는 서로 다른 역할을 수행하기 때문에 코드의 가독성이 높으며, 이해하기 쉬움. 또한, 데이터 로직, UI, 비즈니스 로직이 분리되어 개발과 유지보수 용이
유연상과 재사용성: 각 컴포넌트가 독립적으로 작동하므로 변경 사항을 다른 컴포넌트에게 영향을 주지 않고 쉽게 구현 및 교체 가능
협업 용이: 역할 및 책임이 분명히 나누어져 있어 여러 개발자가 협업 시 코드의 충돌을 줄이고 독립적인 작업 가능
테스트 용이: 개별 테스트 가능

단점

복잡성: 프로젝트의 규모가 커지면 각 컴포넌트 간의 상호작용이 복잡해질 수 있음
컨트롤러 부담: 컨트롤러는 뷰와 모델을 중재하고 로직을 처리하는 역할을 하므로 코드의 양이 많아질 수 있음
유지보수 어려움: 어떤 경우에는 모델과 뷰 간의 의존성이 발생할 수 있음
복잡성 처리 어려움: 크고 복잡한 앱에서는 MVC 패턴만으로는 모든 구조를 처리하기 어려울 수 있어 다른 아키텍처 패턴이나 구조를 고려해야 함

그외 소프트웨어 아키텍처 패턴

MVVM(Model-View-ViewModel)

MVC 패턴을 확장한 형태로 뷰와 모델 사이에 뷰모델이 추가됨
뷰모델은 데이터 바인딩을 통해 연결되며, 뷰와 모델 사이의 중개자 역할을 하며 UI 로직을 처리
데이터 바인딩을 통해 뷰와 모델이 동기화되므로 코드의 양을 줄이고 유연한 UI 구성이 가능

MVP(Model-View-Presenter)

MVP는 컨트롤러 대신에 프리젠터가 사용되는 패턴
프리젠터는 뷰와 모델 사이의 중개자 역할을 하며, 뷰에서 사용자의 입력을 받아 모델을 업데이트하고 뷰를 갱신
뷰와 프리젠터는 인터페이스로 연결되어 UI와 로직이 분리됨

VIPER

뷰, 인터프리터(Interactor), 프리젠터, 엔티티(Entity), 라우터(Router)로 구성된 아키텍처 패턴
모듈화와 각 역할의 분리를 강조하여 복잡한 앱에서의 유지보수와 확장성을 항상시킴
각 구성 요소는 역할에 따라 엄격하게 구분되어 코드의 의존성을 최소화함

Clean Architecture

클린 아키텍처는 내부부터 외부까지의 계층을 갖는 구조로, 비즈니스 로직과 데이터가 가장 안쪽에 위치하고 외부로 갈수록 추상화됨
비즈니스 로직의 재사용성과 유지보수성이 높음

Flux, Redux

Flux와 Redux는 상태 관라 패턴으로, 어플리케이션의 상태를 중앙 저장소에서 관리하는 방식
상태 변경을 예측 가능한 방식으로 처리하여 상태 관리의 복잡성을 줄임

이때까지 실습을 대체적으로 스토리보드로 UI를 구현하고 그에 따른 로직을 ViewController에서 작업하다보니 뷰와 컨트롤러의 경게가 모호해지는 일이 있었다.

하지만 복잡도나 어려움의 정도가 적어서 그대로 유지할 수 있었지만, 향후 프로젝트 규모가 커지면 스파게티 코드가 될 것 같아 벌써 아득해진다.

MVC 구조 외에도 여러가지 소프트웨어 아키텍처 패턴이 있으므로, 각 패턴(구조)의 장단점을 알아보고 최적의 구조를 선택해서 개발을 하면 될 것 같다!!

[Swift] 메모 앱 만들기 심화 (4) : TableView 오류 해결하기

너이르나 — Mon, 28 Aug 2023 19:39:09 +0900

테이블뷰는 다루면 다룰수록 새로운 에러와 마주하게 된다.

이번에는 할일 확인하기 목록에서의 indexPath와 완료한 일 보기에서의 indexPath 값이 달라서 발생하는 문제를 마주했고 또 같은 실수를 반복하지 않기 위해 그 해결 과정을 정리해보려고 한다.

7주차 WIL

너이르나 — Mon, 28 Aug 2023 09:43:16 +0900

FACTS

프로젝트명 : 메모앱 만들기 심화

FINDINGS

문제점

테이블뷰의 헤더가 보이지 않음(스토리보드 작업)
카테고리 구분을 위해 Set으로 배열을 만들었는데 빌드하니 순서가 뒤죽박죽이 됨
셀을 선택하여 디테일페이지로 이동하는데 셀의 내용이 처음 추가한 셀의 내용과 동일하게 나옴
별도의 카테고리 배열을 만들지않고 딕셔너리로 memoList의 데이터 구조 변경하였으나, 입력값을 인식 못해서 메모 추가가 안됨
updateMemo의 guard문이 false로 인지하고 있어 업데이트가 안됨
디테일페이지에서 수정 후 저장누르면 이전화면으로 돌아가지 않음(popViewController 안먹음)
랜덤 고양이 사진 불러올 때 URLSession이 해당 페이지에서 작업을 하지 않는데도 계속 진행 중, 콘솔에 알람뜨고 시간 지나니까 타임아웃 에러 발생

해결방안

테이블뷰의 스타일을 Grouped으로 설정해야 함(코드, 스토리보드 동일)
Set은 순서가 없으므로 sorted된 변수를 만들어서 사용
tableView[indexPath.row]를 카테고리에 맞는 값으로 변경
(해결방안 찾지 못함,,,) 카테고리가 처음에 없어서 생성해줘야 하는 듯 -> 추후 딕셔너리로 데이터 구조 변경해서 해결해보려고 함
디버깅이나 프린트 문 넣어서 문제 파악이 먼저, guard문 내 조건을 선택된 카테고리 내 메모리스트의 수로 변경
Alert 이후 dismiss 되어 popVC이 실행될 시간이 없어서 실행이 안됨, DispatchQueue를 통해 실행
viewWillDisappear에서 세션 종료 시점을 설정하거나, task를 실행할 때 종료하도록 설정(finishTasksAndInvalidate)

FUTURE

구조체와 클래스를 사용하는 이유에 대해서 좀 더 고민할 필요가 있음
테이블뷰 기초부터 연습하기
문제 발생 시 디버깅이나 프린트문으로 원인 찾기

FEELINGS

테이블뷰에 대한 기초 지식이 부족한 것 같다.. 매번 똑같은 부분에서 문제가 발생하는데 자꾸 원인을 까먹음 ㅠㅠ
문제가 발생할 때 냅다 검색하는 나를 보면서 뭔가 스스로 해결하려는 부분이 부족하다고 느낀다.
이론이 부족한 상태에서 실습을 하려니 자꾸 벽에 부딪히는 느낌이다.. '일단 손에 익어야하니까 해보자'랑 '모르는데 어떻게 해요'가 대립하는 중,,,, ㅋㅋㅋ큐ㅠㅠㅠㅠㅠ
뭐 그래도 어쩌겠습니까.. 해 내야죠!!!!
화이팅하자!! 포기하지 말자!! 내 자신한테 응원하자!!

[Swift] 메모 앱 만들기 심화 (3) : URL Session 으로 API 통신하여 고양이 사진 가져오기

너이르나 — Sat, 26 Aug 2023 00:30:51 +0900

URL로 되어 있는 외부 API를 사용해서 메모 앱에 추가하려고 한다.

The Cat API(https://thecatapi.com)에서 제공하는 API를 활용하였고, 자세한 가이드는 공식 홈페이지에서 참조하였다.

시작에 앞서, 해당 API를 호출하면 다음과 같은 결과를 받을 수 있다.

[
  {
    "id": "e4f",
    "url": "https://cdn2.thecatapi.com/images/e4f.jpg",
    "width": 500,
    "height": 375
  }
]

해당 결과값은 JSON 형태로 제공되므로, 데이터를 받아올 때 변환해줘야 한다.

무료로 제공하는 갯수는 10개이며, 그 이상의 데이터 수를 얻기 위해서는 가입해서 API KEY를 받아 설정하면 된다.

그리고 고려해야 할 점은 ViewController의 Life Cycle을 고려하여 호출되는 시점을 정해야 한다.

URLSession를 통해 API 데이터 가져오기

URL 생성
URLSession 인스턴스 생성
Data Task 생성
Data Task 실행
데이터 처리
에러 처리
세션 종료

간단한 예제코드

// 1. URL 생성
let apiUrl = URL(string: "https://api.example.com/data")

// 2. URLSession 인스턴스 생성
let session = URLSession.shared

// 3. Data Task 생성
let dataTask = session.dataTask(with: apiUrl!) { (data, response, error) in
    if let error = error {
        print("Error: \(error)")
        return
    }
    
    // 4. 데이터 처리
    if let data = data {
        // 데이터 파싱 및 활용
        print("Received data: \(data)")
    }
}

// 5. Data Task 실행
dataTask.resume()

1. URL 생성

먼저 가져올 데이터를 제공하는 API의 URL을 생성한다. 이 때 필요한 파라미터나 경로 등을 포함할 수 있다.

let url = URL(string: "https://api.thecatapi.com/v1/images/search")!
// 만약 api key 나 품종 등 추가 설정이 존재할 경우 커스터마이징

guard let url = URL(String: "https://api.thecatapi.com/v1/images/search") else { return }

나는 해당 url이 nil이 될 가능성이 없다고 판단하여 강제 옵셔널 해제를 하였지만, 혹시 모를 nil에 대응하기 위해 옵셔널 바인딩 하는 것을 추천
guard let 구문을 활용하여 nil 일 경우 에러 메세지를 보여줄 수 있음

2. URLSession 인스턴스 생성

URLSession 클래스의 인스턴스를 생성하여 네트워크 작업을 수행할 수 있다.

let session = URLSession(configuration: .default)

configuration 특징 : 캐시 및 쿠키 사용, 인증과 관련된 기본 설정, Connection Pooling*, 백그라운드 업로드 및 다운로드, 캐시 정책 설정, 타임아웃 설정
* 여러 네트워크 작업 간에 연결을 재사용하여 성능을 최적화 함
default : 기본적인 설정을 사용하는 configuration으로 일반적인 네트워크 작업에 적합함
ephemeral : 일시적인 데이터 요청에 적합. 캐시 및 쿠키를 저장하지 않고 임시적인 세션을 사용하여 데이터 요청을 처리
background : 백그라운드에서 데이터 업로드 및 다운로드를 처리. 앱이 백그라운드로 들어갔을 때 네트워크 작업을 계속할 수 있음
custom : 사용자 정의 설정을 통해 네트워크 작업에 특정한 옵션을 정확하게 조정할 수 있음

(추가) 데이터 받을 객체 생성

Data Task를 생성하기 전에 해당 url의 데이터를 받을 객체를 생성해야 한다.

해당 url은 id, url, width, height 로 구성되어 있으며 나는 url만 필요해서 아래와 같이 간단하게 모델을 생성했다.

struct RandomImage: Codable {
    let url: String
}

3. Data Task 생성

URLSession 인스턴스를 사용하여 데이터를 가져오기 위한 Data Task를 생성한다. 생성된 Task는 백그라운드에서 실행되며 네트워크 요청을 처리한다.

session.dataTask(with: url) { data, response, error in
    guard let data = data, error == nil else {
    	return 
    }
    
    // Data Task 실행 코드
    
}

session.dataTask(with:completionHandler:) : URLSession에서 데이터를 가져오는 작업을 생성. with - 가져올 데이터의 URL, Handler - 네트워크 작업이 완료되었을 때 실행할 클로저를 전달
data : 서버로부터 받아온 데이터
response : 서버의 응답에 대한 정보가 담겨있는 객체
error : 네트워크 작업 중 발생한 에러. nil인 경우 네트워크 작업이 성공적으로 완료된 것을 의미
상기 코드는 data가 nil이 아니고 error가 nil인 경우에만 실행되는 코드로 데이터가 성공적으로 받아와짐을 의미

4. Data Task 실행

생성한 Data Task를 실행하여 데이터를 가져온다. 이 때 다양한 옵션을 설정하여 요청을 커스터마이즈 할 수 있다.

session.dataTask(with: url) { data, response, error in
    guard let data = data, error == nil else {
    	return 
    }
    
   ...
    
}.resume()

생성된 Data Task를 불러와 마지막에 .resume()을 붙여 실행할 수도 있고, 상기 코드처럼 바로 실행할 수도 있음
resume()을 호출함으로써 데이터 작업이 서버로 요청을 보내고, 서버 응답을 기다리며 데이터를 받아오는 등의 동작이 시작됨
resume()을 호출하면 앞서 정의한 클로저가 실행되며, 클로저 내부에서 데이터를 받아와서 처리
비동기적으로 네트워크 작업을 수행하면 앱이 멈추지 않고 다른 작업을 수행할 수 있게 됨

5. 데이터 처리

Data Task가 완료되면 서버로부터 받은 데이터 또는 에러 정보를 처리한다. 성공적으로 데이터를 가져온 경우 원하는 형식으로 파싱하고 활용할 수 있다.

let decoder = JSONDecoder()     // (1)
guard let randomCatImage = try? decoder.decode([RandomImage].self, from: data) else { return } // (2)
if let imageUrl = URL(string: randomCatImage.first?.url ?? "") {     // (3)
    URLSession.shared.dataTask(with: imageUrl) { imageData, _, _ in     // (4)
        if let imageData = imageData, let image = UIImage(data: imageData) {     // (5)
            DispatchQueue.main.async {     // (6)
                self.randomImageView.image = image
            }
        }
    }.resume()
}

상기 코드는 JSON 데이터를 파싱하여 이미지 url을 가져오고, 해당 url을 통해 이미지 데이터를 받아와 imageView에 나타냄
(1) : JSON 데이터를 디코딩하기 위한 JSONDecoder 인스턴스 생성
(2) : 서버에서 받아온 JSON 데이터(data)를 앞서 정의한 RandomImage 타입으로 디코딩하고 randomCatImage 변수에 저장. 만약 실패하면 함수 실행 종료
(3) : randomCatImage에 저장된 첫 번째 이미지 URL을 가져옴. nil이 아닐 경우에만 실행
(4) : (3)에서 가져온 이미지 url을 이용하여 새로운 dataTask를 생성
(5) : imageData가 nil이 아닐경우 UIImage로 변환
(6) : 이미지뷰 업데이트는 메인 스레드에서 실행

6. 에러 처리

Data Task 실행 중에 에러가 발생할 경우를 대비라여 적정한 에러 처리를 구현한다. 네트워크 연결 오류, 서버 응답 오류 등을 처리할 수 있다.

URLSession.shared.dataTask(with: imageUrl) { data, response, error in
    if let error = error {
        print("Error: \(error)")
    }
    if let httpResponse = response as? HTTPURLResponse {
        print("Status Code: \(httpResponse.statusCode)")
    }
    if let imageData = data, let image = UIImage(data: imageData) {
        DispatchQueue.main.async {
            self.randomImageView.image = image
        }
    }
}

error : 에러 정보 프린트
response : HTTP 응답에 대한 정보 프린트

7. 세션 종료

필요한 모든 데이터를 가져온 뒤에는 URLSession을 종료하여 리소스 관리와 메모리 누수를 방지한다.

session.finishTasksAndInvalidate()

invalidateAndCancel : 세션을 무효화하고 진행 중인 작업을 취소. 현재 세션과 해당 세션 내 모든 작업 중단
finishTasksAndInvalidate : 현재 진행 중인 작업을 완료한 후 세션을 무효화. 현재 작업들이 완료될 때까지 기다린 후 세션 종료
아무 코드도 작성하지 않으면 앱 수명동안 유지되며, 작업이나 Task를 계속해서 추가할 수 있음

최종코드

import UIKit
import SkeletonView

class PetViewController: UIViewController {
    var imageList: [RandomImage] = []
    
    @IBOutlet weak var randomImageView: UIImageView!
    @IBOutlet weak var randomButton: UIButton!
    @IBOutlet weak var catImageView: UIImageView!
    @IBAction func randomButton(_ sender: Any) {
        getRandomCatImage()
    }
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)

        randomImageView.showAnimatedGradientSkeleton()
        
        DispatchQueue.main.asyncAfter(deadline: .now() + 1) { [weak self] in
            self?.randomImageView.hideSkeleton()
        }
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        getRandomCatImage()
    }
    
    func getRandomCatImage() {
        guard let url = URL(string: "https://api.thecatapi.com/v1/images/search") else { return }
        let session = URLSession(configuration: .ephemeral)
        let task = session.dataTask(with: url) { data, response, error in
            guard let data = data, error == nil else { return }
            let decoder = JSONDecoder()
            guard let randomCatImage = try? decoder.decode([RandomImage].self, from: data) else { return }
            if let imageUrl = URL(string: randomCatImage.first?.url ?? "") {
                let imageTask = URLSession.shared.dataTask(with: imageUrl) { data, response, error in
                    if let error = error {
                        print("Error: \(error)")
                    }
                    if let httpResponse = response as? HTTPURLResponse {
                        print("Status Code: \(httpResponse.statusCode)")
                    }
                    if let imageData = data, let image = UIImage(data: imageData) {
                        DispatchQueue.main.async {
                            self.randomImageView.image = image
                            session.finishTasksAndInvalidate()
                            print("세션 종료")
                        }
                    }
                }
                imageTask.resume()
            }
        }
        task.resume()
    }
}

적용화면

세션이 종료되는 시점을 확인할 수 있으며, 해당 페이지로 접근 또는 꾹꾹이라는 버튼을 누르지 않는 이상 이미지를 로드할 일은 없으니 이미지뷰에 데이터를 불러오자마자 세션을 종료하도록 설정했다.

실행하고보니 문제아닌 문제로 느끼는건 바로 로딩 속도... 너무 느리다... 한국패치 plz

[Swift] 메모 앱 만들기 심화 (2) : TableView Section/Header/Footer

너이르나 — Thu, 24 Aug 2023 21:01:41 +0900

TableView Section/Header/Footer

메모앱 만들기 심화 프로젝트를 진행하기에 앞서, 테이블뷰의 섹션을 생성하고 각 섹션마다 헤더와 푸터를 설정하는 방법에 대해 알아보자

간단한 예제 코드는 아래와 같다.

import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    
    // 더미 데이터
    let data = [
        ["Apple", "Banana", "Cherry"],
        ["one", "two", "three"],
        ["1", "2", "3"]
    ]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let tableView = UITableView(frame: view.bounds, style: .grouped)
        tableView.dataSource = self
        tableView.delegate = self
        view.addSubview(tableView)
        
        // 테이블뷰에 헤더와 푸터 등록
        tableView.register(UITableViewHeaderFooterView.self, forHeaderFooterViewReuseIdentifier: "header")
        tableView.register(UITableViewHeaderFooterView.self, forHeaderFooterViewReuseIdentifier: "footer")
    }
    
    // 섹션 수 반환
    func numberOfSections(in tableView: UITableView) -> Int {
        return data.count
    }
    
    // 각 섹션의 셀 수 반환
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return data[section].count
    }
    
    // 셀 생성 및 데이터 삽입
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        cell.textLabel?.text = data[indexPath.section][indexPath.row]
        return cell
    }
    
    // 섹션 헤더 뷰 설정
    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let headerView = tableView.dequeueReusableHeaderFooterView(withIdentifier: "header")!
        headerView.textLabel?.text = "Section \(섹션 + 1) Header"
        return headerView
    }
    
    // 섹션 푸터 뷰 설정
    func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
        let footerView = tableView.dequeueReusableHeaderFooterView(withIdentifier: "footer")!
        footerView.textLabel?.text = "Section \(섹션 + 1) Footer"
        return footerView
    }
}

해당 예제를 토대로 내 프로젝트에 적용해봤는데 문제가 발생했다.

문제1. 테이블뷰의 섹션 및 헤더 Height 값을 지정했으나 시뮬레이터에 나오지 않음

override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
	return 10.0
}

override func numberOfSections(in tableView: UITableView) -> Int {
	return 5 
}

(원인) 테이블뷰의 스타일이 Plain로 설정되어 있음
(해결방안) 테이블뷰 스타일을 Grouped로 설정
- 테이블 뷰의 레이아웃과 섹션 헤더를 표시하는 방식을 변경하기 위해서는 스타일을 Grouped로 설정해야 함
- 섹션 헤더와 푸터가 각 섹션 위와 아래에 표시되며, 섹션과 셀 사이에 여백이 생김

문제2. 섹션으로 나누고 난 후 메모 스위치 작동 시 업데이트 안됨

일단 이 문제는 지금 섹션별로 셀이 다 동일하게 들어가 있는 문제라 당장 해결할 필요는 없고 인지만 하고 있으면 될 듯

생각보다 섹션을 나누고 헤더와 푸터를 넣는 일은 어렵지 않았다.

진짜 삽질은 이제부터..

프로젝트에 적용하기 위해 모델의 구조에 대해 먼저 고민해보았다.

이미 메모에는 카테고리가 있고, 그 카테고리는 디테일페이지에서 팝업버튼으로 구현해 놓은 상태
섹션의 갯수는 TableViewController에 category라는 배열을 만들어 5가지를 미리 지정해 놓음
→ category.count로 섹션 갯수 return
만약에 카테고리를 추가로 커스텀할 수 있다고 가정하면, 해당 배열에 추가되야 하고 메뉴버튼에도 추가되어야 함(메뉴버튼 추가는 어떻게 하는지 찾아봐야 함 ㅠ)
셀의 수는 for문으로 category 배열을 돌면서 if문으로 memoList.category와 동일한지 확인
동일하다면 해당 카테고리만 포함하는 메모의 배열에다 추가(굳이..? 그럴거면 메모매니저에서 하는게 낫지… 근데 동일한 데이터를 여러개 만들 필요가 있을까?)

// 처음 고민
let category = ["일반", "반려동물", "집", "과제", "운동"]`
    
override func numberOfSections(in tableView: UITableView) -> Int {
	return category.count 
}
    
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
	// 카테고리 배열의 값과 memoList의 카테고리 값이 매칭되면 해당 memoList의 카운트를 반환
	for index in 0..<category.count {
		if category[index] == myMemo.memoList[index].category {
        	// 실행할 코드
        }
    return myMemo.memoList[section].count 
    }
}

일단 기존 데이터 구조를 살려 배열로 memoList를 유지하는 방법으로 진행했다.

문제3. memoList에 있는 카테고리를 Set을 통해 집합을 만들었으나 실행하니 순서가 뒤죽박죽이 됨

(원인) set 함수는 순서가 없음! 따라서 sorted된 변수(상수)를 만들어서 사용해야 함
(해결방안) let categories = Array(Set(MemoManager.shared.memoList.map { $0.category ?? "일반" })).sorted() 를 전역변수로 선언하여 사용

문제4. 디테일페이지로 들어가면 섹션의 셀의 내용이 처음 추가한 셀의 내용과 동일하게 나옴

(문제) 상기와 동일
(해결방안) 기존 tableView[indexPath.row]를 카테고리에 맞는 값으로 변경

@IBAction func memoSwitch(_ sender: UISwitch) {
    guard let tableView = superview as? UITableView,
    	let indexPath = tableView.indexPath(for: self) else {
        	return 
        }
    let categories = Array(Set(MemoManager.shared.memoList.map { $0.category ?? "일반" })).sorted()
    let category = categories[indexPath.section]
    let memoListInSection = MemoManager.shared.memoList.filter { $0.category == category }
    var memo = memoListInSection[indexPath.row]
    memo.isCompleted = sender.isOn
    updateLabelStrikeThrough()
    MemoManager.shared.updateMemo(at: indexPath.row, newContent: memo.content, isCompleted: memo.isCompleted, insertDate: memo.insertDate, targetDate: memo.targetDate, priority: memo.priority, category: memo.category, progress: memo.progress)
    // 로그 출력 (Memo 객체의 내용 출력)
    for memo in MemoManager.shared.memoList { print(memo) }
}

자 이제.. 그러다가 문득 필터함수에 대해 의문을 가지게 되었다.~~(그러지 말았어야..)~~

메모를 추가하고 수정하고 로드할 때마다 계속 필터로 카테고리를 찾아야 하니 메모리가 많이 사용되지 않을까 하며..

고민. filter 함수쓰면 매번 필터링을 돌아야해서 메모리를 많이 쓰지 않을까?

데이터 구조 변경 : memoList = [Memo] 배열 → memoList = [String : [Memo]] 딕셔너리
String은 key 값이고 해당 key를 카테고리로 변경
~~와 그냥 필터쓰는게 나앗을 듯……….~~

문제5. 딕셔너리로 데이터 구조를 변경하였으나, 입력값을 인식 못해 메모가 추가되지 않음

(원인) 카테고리가 처음에 없어서 생성해줘야 함(아니 근데 애초에 메모 추가할 때 카테고리를 지정했는데 그 value에 있는 카테고리를 key값으로 받아오지를 못하나?)

문제6. 카테고리는 만들어지는데 메모가 수정이 안됨

(원인) 뭔지도 모르겠음,...
(원인파악) 디버깅 시도 하였으나, 브레이크 포인트가 안먹음...(어이X), 함수 사이에 프린트문을 넣어서 확인해봤는데 조건을 만족하지 못해 업데이트 코드를 실행하지 못하고 return 됨
뭔가.. 기존 데이터에 없던 카테고리를 선택하게 되면서 해당 카테고리를 만들어줘야 하는 것 같음

if newMemoList[category] == nil {
    newMemoList[category] = []  // 해당 카테고리의 배열이 없다면 생성
}

근데 카테고리만 만들어지고 기존 메모가 수정 적용이 안되는거보니 조건을 만족할 수 있는 범위로 변경해야 함
조건문 수정해서 메모 수정하는 코드로 진입했는데 에러... out of range래...
당연하지... 메모가 없는데 접근을 하려고 하니까!!!!!

결국 몇시간 부여잡고 딕셔너리 포기하고 filter로 돌아옴...

지금 필터도 셀 재사용 때문에 완벽하게 구현하지는 못했는데 이거 해결하고 나면 딕셔너리 뽀개준다.. 기다리셈..