bodyView는 resultView에 collectionView를 쌓아서 완성했다!

    let resultView: UIView = UIView()

    private let collectionViewFlowLayout: UICollectionViewFlowLayout = {
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .vertical
        return layout
    }()

    lazy var cardContent: UICollectionView = {
        let collectionView = UICollectionView(frame: .zero, collectionViewLayout: collectionViewFlowLayout)
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        collectionView.delegate = self
        collectionView.dataSource = self
        collectionView.register(SearchViewCell.self, forCellWithReuseIdentifier: "SearchViewCell")
        collectionView.backgroundColor = .clear
        return collectionView
    }()

UICollectionFlowLayout은 UICollectionView의 레이아웃을 관리하는 클래스로, 셀의 배치, 셀의 크기 및 간격 조정, 헤더 및 푸터 지정, 스크롤 방향 조절, 부분적인 레이아웃 업데이트를 지원한다.

💢 셀의 이미지뷰에 cornerRadius랑 shadow 동시에 적용하기

셀의 이미지뷰와 cornerRadius랑 shadow 효과를 동시에 적용하니까 안되었다!!😫😫😫

    lazy var movieImage: UIImageView = {
        let imageView = UIImageView()
        imageView.contentMode = .scaleAspectFill
        imageView.layer.cornerRadius = 10
        imageView.clipsToBounds = true
        imageView.layer.shadowColor = UIColor.black.cgColor
        imageView.layer.shadowOpacity = 0.6
        imageView.layer.shadowOffset = CGSize(width: 0, height: 0)
        imageView.layer.shadowRadius = 5
        imageView.layer.masksToBounds = false
        imageView.layer.shouldRasterize = false
        return imageView
    }()

위의 코드를 적용해서 실행하면 요렇게 나온다. cornerRadius가 적용 안된걸 확인할 수 있다.그리고 imageView의 사방에 그림자를 적용했는데 아래에만 적용된걸 볼 수 있다.

hierachy구조를 보면 옆에 인스펙터 창을 보면 *clipsToBounds를 분명 true로 설정했는데 off 로 되어있다!!! *

👩‍🏫 clipsToBound && masksToBound (feat.CALayer)

clipsToBounds 는

• UIView의 프로퍼티
• 디폴트값은 false
• true : superView 이외 영역의 Sub View는 Draw 하지 않는다
• false : superView 이외 영역의 Sub View도 Draw 한다

masksToBound 는

• CALayer의 프로퍼티
• 디폴트값은 false
• true : superLayer 이외 영역의 subLayer는 Draw 하지 않는다
• false : superLayer 이외 영역의 subLayer도 Draw 한다

참고로 CALayer란 CALayer : 그림자, 그라데이션, 이미지, 텍스트 등 다양한 그래픽 콘텐츠를 표시하는 layer이다! (개발자소돌이님이 정말 잘 정리해주셨다!!)

즉, 두 메서드 모두 같은 속성을 건드리고 있는 것이다! 그래서 이에 대한 해결방안은? 이미지뷰 뒤에 같은 크기의 UIView를 두어 그 뷰에 그림자를 적용하는 것!(튜터님이 알려주셨다)

⛔️ 문제 : 이미지뷰에 cornerRadius와 shadow를 둘다 적용하려니 clipsToBound 속성이 충돌한다!! 👩‍🏫 해결방법 : 뷰를 분리해서 하나의 뷰에는 cornerRadius를 다른 하나에 shadow를 적용해주자!

참고한 블로그 참고한 블로그

💢 셀의 특정 indexPath만 reloadData 하기

api에서 page단위로 영화 정보를 받아오기 때문에 나는 페이지를 내리다가 마지막 셀을 willDisplay할때 loadSearchMore()를 실행해서 데이터를 받아와서 기존 데이터인 movieResult배열에 추가해주는 방식으로 코드를 작성했다.

    func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
        if indexPath.row == movieResult.count - 1{
            if searchWord == "" {
                loadTrendingMore()
            } else {
                loadSearchMore()
            }
        }
    }

여기서 loadTrendingMore()랑 loadSearchMore()은 불러오는 api 차이이고 구조는 같다. loadSearchMore()에서 특정 indexPath만 로드하기 위해 self.cardContent.reloadData() 대신 self.cardContent.reconfigureItems(at: newIndexPaths)를 사용했다.

    func loadSearchMore() {
        if page <= searchResult.totalPages! {
            page += 1
            networkManager.fetchSearchResult(page: page, searchKeyword: searchWord) {  [weak self] result in
                guard let self = self else { return }
                switch result {
                case .success(let response):
                    let startIndex = self.movieResult.count - 1 // 새로운 아이템의 시작 인덱스
                    let endIndex =  self.movieResult.count + response.results.count // 새로운 아이템의 끝 인덱스
                    self.movieResult += response.results
                    var newIndexPaths: [IndexPath] = []
                    for index in startIndex..<endIndex {
                        let indexPath = IndexPath(row: index, section: 0)
                        newIndexPaths.append(indexPath)
                    }
                    DispatchQueue.main.async {
                        //self.cardContent.reloadData()
                        self.cardContent.reconfigureItems(at: newIndexPaths)
                    }
                case .failure(let error):
                    self.printError(error)
                }
            }
        }
    }

🌳 BodyView - UIView as Image

사진을 api에서 로드해오는 과정에서 이미지가 로딩중일때 로딩이미지를, 이미지가 없을때는 로고 이미지를 표시하기로 했다. 아래와 같이 로딩으로 등록된 에셋은 로딩 아이콘이다. 로고 이미지는 로코 아이콘이 아니라 흰바탕에 로고가 있는 로고 이미지이다. 로딩과 같은 경우 그대로 이미지뷰에 넣어주면 이상한 모양이 나온다! 로딩될때 살짝 확인할 수 있는데 안예쁘다!! 그래서 생각한 방법은 일단 로고를 정중앙에 배치한 뷰를 이미지화 해서 로딩이미지로 사용하는 것이다! 그래서 열심히 인터넷 검색을 통해 다음과 같은 extension을 찾았다.

extension UIView {
  func asImage() -> UIImage {
        let renderer = UIGraphicsImageRenderer(bounds: bounds)
        return renderer.image { rendererContext in
            layer.render(in: rendererContext.cgContext)
        }
    }
}

이 asImage 메서드를 보자. UIGraphicsImageRenderer는 이미지를 렌더링 하기 위한 클래스로 UIView의 크기에 해당하는 렌더러를 생성한다. 그리고 리턴값에 있는 클로저는 UIView의 현재 내용을 이미지로 만든다고 생각하면 된다. 로딩 이미지를 표시하는 방법은 텍스트의 플레이스 홀더를 지정하듯이 네트워크 매니저를 통해 이미지를 받기전에 미리 로딩이미지를 넣어주는 방식으로 진행하였다.

• 프로젝트 주제 : 영화예매 앱을 만들자!
• 내가 맡은 기능 : 검색 기능과 탭바

🌳 View 구조 나누기

일단 내 뷰를 크게 top, body로 나누었다. top에는 서치바 있는 부분 SearchView가 들어가고, body에는 최신검색어가 나오는 부분인 LastSearchedView와 검색결과가 나오는 부분인 ResultView가 들어간다.

🌳 TopView - 서치바 커스터마이징

검색창을 보면 서치바를 사용하는 것 뿐만 아니라 커스텀까지 해야했다!!🙊🙉

서치바를 사용하는 방법은 tableView와 비슷한다. UISearchBarDelegate를 지정해줘야한다. 일단 먼저 서치바를 만들어주고 커스텀을 해준다.

lazy var searchBar: UISearchBar = {
        let search = UISearchBar()
        search.placeholder = "영화를 검색해보세요"
        search.searchBarStyle = .minimal
        search.searchTextField.borderStyle = .none
        search.delegate = self
        if let tf = search.value(forKey: "searchField") as? UITextField {
            if let leftView = tf.leftView as? UIImageView {
                leftView.tintColor = .megaRed
            }
        }
        return search
    }()

lazy var로 정의 : 초기화 시점을 지연시켜 메모리를 효율적으로 사용할 수 있다!! 이에 대해서는 나중에 꼼꼼히 정리해봐야겠음.

여기서 searchBar는 여러 키값을 가지고 있는데 searchField는 검색 바의 텍스트 필드에 직접 접근할 수 있게 해준다. 이를 value(forKey:)로 받아온 다음 UITextField로 다운캐스팅 해주었다.

여기서 텍스트필드에는 검색창 뿐만 아니라 옆에 검색 버튼도 있는데 이 버튼도 UIImageView로 다운캐스팅 해와서 색을 바꾸어 주었다!! 일단 요렇게 나온다.

다운캐스팅 한번 더 정리!

• 안전한 다운캐스팅(as?): 다운캐스팅이 실패할 수 있는 경우에 사용. 다운캐스팅이 실패하면 nil을 반환.
• 강제 다운캐스팅(as!): 다운캐스팅이 확실히 성공할 것으로 확신할 때 사용. 만약 다운캐스팅이 실패하면 런타임 에러가 발생.

여기서 나는 서치바 자체를 커스터마이징 하지 않고 뒤에 뷰를 하나 만들어주고 서치바를 투명하게 만들어주어서 마치 서치뷰가 동그란 것 처럼 했다!! 이 뷰에 그림자 효과도 주었다!!

let searchView: UIView = {
        let bgview = UIView()
        bgview.layer.shadowColor = UIColor.black.cgColor
        bgview.layer.shadowOpacity = 0.6
        bgview.layer.shadowOffset = CGSize(width: 0, height: 0)
        bgview.layer.shadowRadius = 5
        bgview.layer.masksToBounds = false
        bgview.layer.shouldRasterize = false
        bgview.backgroundColor = UIColor.white
        bgview.layer.borderWidth = 1
        bgview.layer.borderColor = UIColor.clear.cgColor
        bgview.layer.cornerRadius = 20
        return bgview
    }()

그런데 지금 정리하면서 서치바 자체를 커스텀 하는 것도 가능한 것을 발견! 왜 그때는 해볼 생각을 안했지? 🫤

lazy var searchBar: UISearchBar = {
        let search = UISearchBar()
        search.placeholder = "영화를 검색해보세요"
        search.layer.cornerRadius = 20
        search.layer.borderColor = UIColor.black.cgColor
        search.layer.borderWidth = 1
        search.searchBarStyle = .minimal
        search.searchTextField.borderStyle = .none
        search.layer.shadowColor = UIColor.black.cgColor
        search.layer.shadowOpacity = 0.6
        search.layer.shadowOffset = CGSize(width: 0, height: 0)
        search.layer.shadowRadius = 8
        search.layer.masksToBounds = false
        search.layer.shouldRasterize = false
        search.delegate = self
        if let tf = search.value(forKey: "searchField") as? UITextField {
            if let leftView = tf.leftView as? UIImageView {
                leftView.tintColor = .red
            }
        }
        return search
    }()

된다!

🌳 TopView - UISearchBarDelegate 설정하기

UISearchBarDelegate를 설정해줘야 한다. 안해주면 그냥 textField와 다름이 없음.. 그래서 얘의 역할이 뭐냐... UITableViewDelegate랑 같다. "UISearchBar 객체의 동작을 관리하기 위한 메서드와 속성을 정의" 한다.

주요 메서드 속성은 다음과 같다. (fromGPT)

• searchBarSearchButtonClicked(_:): 사용자가 검색 버튼을 눌렀을 때 호출됩니다. 이 메서드를 사용하여 검색을 실행하거나 관련 작업을 수행할 수 있습니다.

• searchBarCancelButtonClicked(_:): 사용자가 취소 버튼을 눌렀을 때 호출됩니다. 이 메서드를 사용하여 검색 작업을 취소하거나 관련 작업을 수행할 수 있습니다.
• searchBar(_:textDidChange:): 사용자가 검색 바의 텍스트를 변경할 때 호출됩니다. 이 메서드를 사용하여 실시간 검색 결과를 업데이트하거나 관련 작업을 수행할 수 있습니다.
• searchBar(_:selectedScopeButtonIndexDidChange:): 사용자가 검색 바의 범위 버튼(스코프 버튼)을 변경할 때 호출됩니다. 이 메서드를 사용하여 선택된 스코프에 따라 검색 동작을 조정하거나 관련 작업을 수행할 수 있습니다.
• searchBarShouldBeginEditing(_:): 사용자가 검색 바를 편집하기를 시도할 때 호출됩니다. 이 메서드를 사용하여 검색 바를 편집할 수 있는지 여부를 결정할 수 있습니다.
• searchBarTextDidBeginEditing(_:): 사용자가 검색 바를 편집하기 시작했을 때 호출됩니다. 이 메서드를 사용하여 편집 작업을 시작할 때 필요한 작업을 수행할 수 있습니다.

여기서 나는 서치바의 텍스트가 바뀌었을 때 바로 반영해서 결과를 보여줄수 있게 searchBar(:textDidChange:)와 서치바에서 서치를 눌렀을 때 최신검색어에 데이터를 저장하기 위해 searchBarSearchButtonClicked( searchBar: UISearchBar), 그리고 취소 버튼을 클릭했을 때의 처리를 위한 searchBarCancelButtonClicked(_:)를 사용! 코드는 다음과 같다.

extension SearchViewController: UISearchBarDelegate {
    func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
        print("사용자가 입력한 텍스트: \(searchText)")
        searchWord = searchText
        if searchText == "" {
            fetchTrendingResults()
        } else {
            updateSearchResults()
        }

    }

    func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
        print("사용자가 엔터 키를 눌렀습니다.")
        searchBar.resignFirstResponder()
        if let keyword = searchBar.text {
            searchList.append(keyword)
            searchWord = keyword
            addLastSearch()
        }
        resultView.removeFromSuperview()
        haveLastSearchList()
        lastSearchedCollectionView.reloadData()
    }

    func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
        fetchTrendingResults()
        searchBar.text = ""
    }
}

참고한 문서 https://sueaty.tistory.com/164 https://fomaios.tistory.com/entry/%EC%84%9C%EC%B9%98%EB%B0%94-%EC%BB%A4%EC%8A%A4%ED%85%80%ED%95%98%EA%B8%B0-Custom-UISearchBar https://sangnam2.tistory.com/entry/Xcode-%EC%8B%9C%EB%AE%AC%EB%A0%88%EC%9D%B4%ED%84%B0-%EC%B6%94%EA%B0%80-iOS-%EB%B2%84%EC%A0%84-%EC%84%A0%ED%83%9D

🌳 AppDelegate.swift

이 파일은 앞에서 말했다싶이 iOS 앱의 전반적인 생명주기를 관리한다고 보면 된다! (여기 참고)

🌿 AppDelegate.swift의 주요 메서드:

• application(_:willFinishLaunchingWithOptions:) : 앱이 구동되어 필요한 초기 실행 과정이 완료되기 직전에 호출
• application(_:didFinishLaunchingWithOptions:) : 앱이 사용자에게 화면으로 표시되기 직전에 호출
• applicationDidBecomeActive(_:) : 앱이 활성 상태로 전환된 직후에 호출
• applicationDidEnterBackground(_:) : 앱이 백그라운드로 이동한 직후에 호출
• applicationWillTerminate(_:) : 앱이 종료되기 직전에 호출

🌳 SceneDelegate.swift

SceneDelegate는 iOS 13부터 추가된 클래스로, iOS 앱의 멀티 태스킹과 다중 창 관련 작업을 처리한다. tableViewDelegate가 tableView의 동작과 사용자 인터렉션을 관리하는 것처럼 SceneDelegate는 Scene에 대해 윈도우와 뷰 컨트롤러를 관리한다.

여기서 잠깐? Scene은 뭐고 윈도우랑 뷰컨트롤러가 정확히 뭔데?

윈도우는 iOS에서 디바이스의 스크린을 빈틈없이 채우기 위한 객체로 항상 유저 인터페이스의 최상위에 위치한다. 뷰의 일종이지만 직접 콘텐츠를 가지지는 않으며 콘테츠를 가진 뷰를 내부에 배치하여 화면에 출력하는 역할을 한다! 화면이 전환되도 이 윈도우 객체는 전환되지 않으면 내부에 배치한 뷰가 변경된다는점! 대부분의 iOSApp은 life time동안 하나의 window만 생성하고, 사용한다고 한다.

윈도우신은 이러한 윈도우를 관리하고 . 앱이 다중 창 환경에서 실행될 때 각 창마다 별도의 UIWindowScene이 필요(아이패드에서 분할화면 띄우는 것과 같이!)

뷰는 화면의 콘텐츠를 말한다. 하나의 윈도우에 여러 뷰가 각자의 위치에 놓여있을것이다. 한 화면에 topView, bottomView 등등이 각자의 위치에서 각자의 역할을 하고 있는것!

뷰 컨트롤러는 윈도우와 뷰를 연결해주는 객체이다. 뷰컨은 뷰의 계층을 관리하여 윈도우에 전달하고, 사용자 인터렉션을 윈도우로부터 전달받아 처리하는 역할을 한다. 윈도우와 뷰사이를 중계해주는것! 대략적으로 구조는 이러한데, UIWindowScene이 여러 UIWindow를 갖는 것은 각 창이 다른 UIWindow에 표시될 때 발생하며, UIScreen이 여러 UIWindowScene을 갖는 것은 iOS 앱이 여러 창을 지원할 때 발생한다. 윈도우는 하나의 뷰컨을 루트뷰건으로 지정하여 참조한다. 루트 뷰 컨트롤러로 지정되지 못한 나머지 뷰 컨트롤러들은 루트 뷰 컨트롤러의 관리 대상으로 연결되거나 혹은 다른 방식으로 이어지기도 하지만，이들은 윈도우 객체의 직접적인 관리대상이 아니다.. 윈도우 객체는 항상 루트 뷰 컨트롤러만을 참조한다.

🌿 SceneDelegate.swift의 주요 메서드:

scene(:willConnectTo:options:): 새로운 Scene이 생성되고 윈도우가 연결될 때 호출. 여기서 Scene에 대한 초기 설정을 수행 sceneDidDisconnect(:): Scene이 시스템에서 분리될 때 호출 sceneWillEnterForeground(:): Scene이 포그라운드로 진입하기 직전에 호출 sceneDidEnterBackground(:): Scene이 백그라운드로 들어갈 때 호출 sceneDidBecomeActive(:): Scene이 활성 상태가 되었을 때 호출. sceneWillResignActive(:): Scene이 비활성 상태로 전환되기 직전에 호출

참고 https://developer.apple.com/documentation/uikit/view_controllers/managing_content_in_your_app_s_windows?ref=noah-ios.dev https://noah-ios.dev/window-scene/

c언어와 마찬가지로 iOS 앱도 main()함수로 부터 시작한다!

1. User taps application icon

2. main()

Xcode에서 프로젝트를 생성하면 main() 함수가 자동으로 만들어지며, 여기에는 앱이 실행될 때 처리해야할 내용이 작성되어 있다. (그래서 개발자가 딱히 신경쓸 필요가 없음!) iOS 앱에서 main()함수가 하는 일은 실행 시 시스템으로부터 전달받은 두 개의 인자값과 AppDelegate 클래스를 이용하여 UIApplicationMain( ) 함수를 호출하고, 그 결과로 UIApplication 객체를 반환한다.

3. UIApplicationMain()

이때 호출되는 UIApplicationMain()이 iOS앱의 엔트리 포인트이다. 이 함수는 앱의 핵심 객체를 생성하는 프로세스를 핸들링하고，스토리보드 파일로부터 앱의 유저 인터페이스를 읽어 들일뿐만 아니라 우리가 작성한 커스텀 코드를 호출해 줌으로써 앱 생성 초기에 필요한 설정을 구현할 수 있게 해 준다. 사실상 거의 앱 실행에 필요한 전반적인 것을 관리한다고 생각하면 된다. 즉, UIApplication 객체 == 앱 프로세스! UlApplication 객체는 Info.plist 파일을 바탕으로 앱에 필요한 데이터와 객체를 로드한다.

4. applicationDidFinishLaunching

AppDelegate는 UIApplication으로부터 위임받은 일부 권한을 이용하여 커스텀 코드와 상호작용하는 역할을 담당하고，이를 통해 우리가 필요한 코드를 구현할 수 있도록 도와준다. 이 메소드에 원하는 커스텀 코드를 작성해 두면 앱이 처음 시작될 때 해당 코드를 실행할 수 있다! 런치스크린 설정할때 이 메서드에 sleep()을 넣은 이유가 이거였다!!!!!!!

5. event loop <-> handle event

6. system asks application to terminate <-> applicationWillTerminate

앱이 더 이상 사용되지 않는다면 시스템은 앱을 메모리에서 제거할려고 할 것이다. 이 때 AppDelegate 클래스의 applicationWillTerminate(_:) 메소드를 호출해 종료시 실행된다.

📖 앱의 상태 변화

앱의 상태란? 앱이 실행되는 동안 변하는 모습?이라고 할 수 있다. (활성, 비활성 등등) 앱의 상태 변화는 운영체제가 처리하는데 iOS는 시스템에서 발생하는 특정 상황에 맞게 앱의 상태를 변화시키고 제어한다. 예를 들어 애플뮤직을 실행하다가 메세지 앱으로 화면 전환을 해서 메세지를 작성해도 계속 음악이 흘러나온다. 이때 운영체제가 애플뮤직 앱의 상태를 변경시켜주는 것이다.

• Not Running : 앱이 시작되지 않았거나 실행되었지만 시스템에 의해 종료된 상태
• Active(활성) : 앱이 실행중이며, 이벤트를 받고 있는 상태
• Inactive(비활성) : 앱이 현재 활성이지만, 사용자의 상호 작용을 받지 않는 상태(이벤트X)
• Background(백그라운드) : 앱이 백그라운드에서 실행되고 있지만, 사용자와의 상호 작용이 없는 상태
• Suspended(중단) : 앱이 백그라운드에 있지만 실행 중이 아닌 상태. 메모리가 부족한 상황이 오면 iOS 시스템은 포그라운드에 있는 앱의 여유 메모리 공간을 확보하기 위해 Suspended 상태에 있는 앱들을 특별한 알림 없이 정리한다.

📖 앱의 생명주기

그림과 같이 앱은 다음과 같은 순서로 실행되고, 실행 상태가 변화된다. 앱의 실행 상태가 변화할 때 그에 대응하는 앱 델리게이트에 정의된 특정 메소드를 호출한다.

• application(_:willFinishLaunchingWithOptions:) : 앱이 구동되어 필요한 초기 실행 과정이 완료되기 직전에 호출
• application(_:didFinishLaunchingWithOptions:) : 앱이 사용자에게 화면으로 표시되기 직전에 호출
• applicationDidBecomeActive(_:) : 앱이 활성 상태로 전환된 직후에 호출
• applicationDidEnterBackground(_:) : 앱이 백그라운드로 이동한 직후에 호출
• applicationWillTerminate(_:) : 앱이 종료되기 직전에 호출

참고 https://developer.apple.com/documentation/uikit/uiapplicationdelegate

가지고 있는 아무 앱이나 실행시켜보면 본격적인 앱이 시작되기 전에 로고가 나오는 화면이 몇초동안 실행되는 것을 볼 수 있다. 이를 런치스크린(launch Screen)이라고 한다. 다른 말로는 splash라고도 한다.

런치스크린이 큰 의미가 없어 보이지만 앱이 처음 실행될 때 주요 데이터를 초기화할 수 있는 시간을 벌어주는 역할을 한다! 사용자에게 자연스러운 대기시간을 만들어주는것!! 애플의 UI가이드에서도 런치스크린 제작을 권장하고 있다.

📖 런치스크린 설정하기

ios에서 프로젝트를 만들면 시작화면파일이 제공된다. 파일 이름은 LaunchScreen.storyboard로 스토리보드 형식의 파일이다. main.storyboard처럼 사용자가 원하는대로 라벨과 이미지를 사용해 꾸밀 수 있다. 그리고 설정항목에서 Launch Screen File에 Launch Screen을 설정할 수 있다. 나의 경우 LaunchScreen.storyboard로 지정해주었다. 이렇게하면 런치스크린 설정이 완료된 것이다!! 이제 런치스크린이 나올 시간을 정해보자. AppDelegate 클래스에서 설정할 수 있다. func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool은 앱이 처음 실행될 때，필요한 시스템적 처리를 모두 끝내고 메인 화면을 표시하기 직전에 호출된다. 이 메소드에 시간지연을 하는 코드를 추가해서 런치스크린이 나오는 시간을 추가할 수 있다. 나는 3초 sleep하게 해서 지연시켰다.

AppDelegate 클래스는 앱 전체의 실행 흐름을 컨트롤하는 객체로서 앱이 처음 실행 되거나 종료될 때，혹은 백그라운드 상태로 들어가거나 포그라운드 상태로 활성화될 때 호출되는 메소드들로구성되어 있다.

음 일단 보자마자 딕셔너리!! 한번 써봐야 겠다. 문제 풀면서 딕셔너리를 사용한 적이 한번도 없는것 같아 이번 기회에 써야겠다는 생각을 했다. 그래서 딕셔너리를 사용해서 어떻게 풀까하다 생각하고 코드를 적었다.

import Foundation

func solution(_ s:String) -> Int {
    let dic = ["one": 1, "two": 2, "three": 3, "four": 4,
                              "five": 5, "six": 6, "seven": 7, "eight": 8,
                              "nine": 9, "zero": 0]
    var result: [Int] = []
    var flag: String = ""
    for char in s {
        if let temp = Int(String(char)) {
            result.append(temp)
        } else {
            flag.append(char)
            if dic.keys.contains(flag) {
                result.append(dic[flag]!)
                flag = ""
            }
        }
    }
    let res = result.map { String($0) }.joined()
    return Int(res)!
}

이게 내가 제출한 정답 코드인데 사실 나는 문제를 풀때 플레이그라운드 파일에서 푼다! 실행한 결과를 줄바줄로 바로바로 볼수있기 때문! 근데 장점이라고 해야할지 단점이라고 해야할지 여기서 자동완성기능과 더불어 객체에 속한 프로퍼티랑 메서드를 볼 수 있다. ㅎㅎ 그래서 코드의 dic.keys.contains(flag) 이 부분도 사실 'Swift라면 딕셔너리에 이런 기능정도는 제공해주지 않을까~~'라는 생각으로 .찍고 찾은거다...ㅎㅎㅎㅎㅎㅎ

그리고 앱을 만들때는 강제언래핑이 컴파일 에러를 발생시킬 수 있어서 보통 옵셔널 바인딩으로 많이 처리하는데 이렇게 !를 자주 사용해도 되나 싶다.. 알고리즘 문제는 정해진 입력값이 있다보니 그걸 이용해서 그냥 믿고? 강제언래핑하는데 이걸 옵셔널바인딩으로 바꿔서 풀어야 하나?

다른사람들의 풀이를 보니 역시 기깔나는 string 객체 메서드가 있었다!

import Foundation

func solution(_ s:String) -> Int {
    let arr = ["zero","one","two","three","four","five","six","seven","eight","nine"]
    var str = s
    for i in 0..<arr.count {
        str = str.replacingOccurrences(of: arr[i], with: String(i))
    }
    return Int(str)!
}

와웅...👏👏👏👏👏👏👏 arr의 인덱스와 숫자를 페어로 사용했다!! 그리고 replacingOccurrences를 사용해서 string -> Int할 때 인덱스를 사용함!

📝 str.replacingOccurrences(of: , with: )

func replacingOccurrences(
    of target: String,
    with replacement: String
) -> String

문자열에서 특정 부분 문자열을 다른 문자열로 대체하는 메서드이다. 이 메서드는 대체할 문자열이 발생한 횟수에 상관없이 모든 발생을 대체한다고 한다. developer.apple.com/documentation/foundation/nsstring

문제를 풀면서 느끼는게 사람이 자주쓰는것만 쓰는것 같다..(이게 바로 관성..?!?!)그래서 안쓰는 놈들을 정말 빨리 까먹음.. swift언어가 꽤 고급언어인지라 지원하는 기능이 정말정말 많은데 그걸 다 못 사용하고 있다는 생각이 든다. 이럴 땐 c언어로 코테를 보고 싶어진당 큽 학교에서 자료구조 강의 들을때만 해도 c랑 교수님을 엄청 미워했는데 이런 생각이 들다니...🙈🙉🙈🙉🙊🙊🙊 그냥 닥치고 해야겠당ㅎㅎ

위시리스트의 셀 삭제는 일단 익숙한 방법인 밀어서 삭제로 구현해보기로 했다! 일단 셀을 삭제하는 동시에 coredata에서 해당 내용도 삭제해주어야 한다.

    func tableView(_ tableView: UITableView, editingStyleForRowAt indexPath: IndexPath) -> UITableViewCell.EditingStyle {
        return .delete
    }

    func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
        if editingStyle == .delete {
            wishListTableView.beginUpdates()

            //1. coredata에서 데이터 삭제
            let object = self.dataList[indexPath.row]
            let appDelegate = UIApplication.shared.delegate as! AppDelegate
            let context = appDelegate.persistentContainer.viewContext
            context.delete(object)
            do {
                try context.save()
               } catch {
                   context.rollback()
            }

            //2. dataList에서 데이터삭제 및 테이블뷰셀 삭제
            self.dataList.remove(at: indexPath.row)
            wishListTableView.deleteRows(at: [indexPath], with: .fade)

            wishListTableView.endUpdates()
        }
    }

여기서 wishListTableView.beginUpdates()랑 wishListTableView.endUpdates()를 안적으면 에러가 난다!! beginUpdates()를 호출하면 이후의 모든 삽입, 삭제 또는 이동 작업이 테이블 뷰에 일시적으로 대기 상태로 유지된다. 그런 다음 endUpdates()를 호출하면 대기 중인 모든 변경 사항이 한 번에 적용되어 테이블 뷰가 업데이트된다.

테이블셀 스와이프 설정 바꾸기

🌳 위시리스트 Pull to Refresh

pull to refresh는 깃허브 프로필 과제에서도 구현해본 적이 있었다. 그때 endRefreshing()을 하지않아서 로딩이 계속걸리는 문제가 있었는데 팀원분이 알려주셔서 해결했다!!

wishListTableView.refreshControl = refreshControll
refreshControll.addTarget(self, action: #selector(self.refreshFunction), for: .valueChanged)

@objc func refreshFunction() {
    wishListTableView.reloadData()
    refreshControll.endRefreshing()
}

여기서 refreshControll.endRefreshing()를 꼭 추가해주어야 한다! 아니면 계속 로딩 돌아감..

🌳 완성본

• URLsession을 이용해 네트워크 통신하기
• core data를 사용해서 데이터 저장하기
• 화면전환으로 위시리스트 보여주기

🌳 URLSession 사용해서 네트워크 연결 및 사진불러오기

여태까지 네트워크 연결은 Alamofire, 사진 불러올 때는 KingFisher 등의 외부 라이브러리만 써서 xcode에서 제공하는 것만으로 네트워크 연결이랑 사진 불러오기를 해본적이 없다...ㅎㅎ😅 그래서 이번에 URLSession을 사용해서 네트워크 연결을 해보고 불러온 URL로 사진도 불러와 보았다.(사실 열심히 구글링 했다!)

먼저 URLSession 인스턴스를 생성하고

let session = URLSession.shared

url 상수에 URL 정보를 바인딩한다. 그리고 session의 dataTask 메서드로 URL 요청을 생성한다. 클로저는 요청이 완료되면 실행되며 여기서는 data, response, error를 받아와서 처리한다.

 if let url = URL(string: "https://dummyjson.com/products/\(productID)"){
            let task = session.dataTask(with: url) { (data, response, error) in
                if let error = error {
                    print("Error: \(error)")
                } else if let data = data {
                    print(data)
                }
            }
            task.resume()
        }
    }

이게 정상 실행되서 네트워크 연결이 되면 data에 응답이 들어온다. 그런데 이 응답은 api에 따라 다르겠지만 저 api는 JSON을 반환한다. 그래서 이 JSON을 미리 만들어준 RemoteProduct 구조체 객체로 디코딩 하기 위해 다음과 같은 코드를 적어줘야 한다.

do {
    let product = try JSONDecoder().decode(RemoteProduct.self, from: data)
} catch {
    print("디코딩 에러: \(error)")
}

요러면 네트워크 연결 완료!! 사진도 같은 맥락으로 불러오면 된다!

if let imageURL = URL(string: product.thumbnail) {
    URLSession.shared.dataTask(with: imageURL){ (imageData, _, _) in
        if let imageData = imageData {
            // 이미지 데이터를 UIImage로 변환하여 UIImageView에 설정
            DispatchQueue.main.async {
                self.imageView.image = UIImage(data: imageData)
            }
        }
    }.resume()
}

🌳 데이터 모델링하기

위시리스트의 데이터들은 코어데이터로 저장해야한다. 코어데이터를 추가하는 방법은 저번에 정리했었기 때문에 뚝딱 만들어주었다. 그런데 데이터를 불러오는 과정에서 에러가 났었다!! 검색해보니 iOS 앱은 기본적으로 메인 스레드에서 UI 업데이트 및 상호 작용이 이루어져야 한다고 한다! 그런데 지금 이 do-catch 구문은 fetchData() 메서드의 일부분으로 이 메서드는 백그라운드 스레드에서 비동기적으로 실행된다. 그래서 UI를 직접 업데이트 하고 있는 코드들은 메인스레드로 이동시켜주어야 한다. 이를 위해 DispatchQueue.main.async를 사용하여 메인 스레드에서 UI 업데이트를 수행하도록 변경하여 문제를 해결할 수 있었다.

• DispatchQueue.main.async : DispatchQueue에서 작업을 비동기적으로 실행. 주로 UI 업데이트와 같은 비동기적인 작업을 처리할 때 사용

• DispatchQueue.main.sync : DispatchQueue에서 작업을 동기적으로 실행. 주로 백그라운드 스레드에서 메인 스레드로 작업을 전환할 때 사용

🌳 코어데이터에서 조회한 정보를 셀에 뿌리기

어째저째 흘러가다가 코어데이터에서 정보를 조회할때 에러가 발생했다. 정확히 말해서는 에러가 발생했다기 보다 정보가 조회가 안되었다! 아래와 같이 위시리스트에 상품정보만 뜨고 아이디랑 가격이 안뜨는 문제가 발생했다!!!!!!!!!!!!🙉

그래서 cellForRowAt 메서드에 print문을 찍어서 받아오는 title, total(id임, 네이밍 잘못함), price를 확인해봤다.

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let record = self.dataList[indexPath.row]
        let title = record.value(forKey: "title") as? String
        let total = record.value(forKey: "id") as? String
        let price = record.value(forKey: "price") as? String

        print(title, total, price)

        let cell = wishListTableView.dequeueReusableCell(withIdentifier: "wishListTableViewCell", for: indexPath) as! wishListTableViewCell
        cell.cellTitleLabel.text = title
        cell.cellPriceLabel.text = price
        cell.cellTotalLabel.text = total

        return cell
    }

실행하니 요래 나왔다..엥 왠 nil?? 뜬금없다. 일단 코어데이터에 저장하는 부분은 확인했다. 정상 저장된다. 즉 불러오는 과정이 문제라는 것이다.

그래서 검색해보니 value(forKey:) 메서드를 사용하여 값을 가져올 때 반환되는 값의 타입이 Any?이라고 한다. id 랑 price에는 Int 타입 정보가 들어있는데 나는 Int -> String 변환은 항상 가능하기 때문에 as? String으로 타입을 변환했는데 이러면 안되고 as? Int로 변환해주어야한다고 한다. 그래서 고친 코드는 다음과 같다.

let title = record.value(forKey: "title") as? String
let total = record.value(forKey: "id") as? Int
let price = record.value(forKey: "price") as? Int

any타입을 잘 몰라서 발생하는 실수였다. 정리하자면

• any : 어떤 종류의 값이든 할당할 수 있는 유연한 타입이다. Int를 넣었다가 String 넣는것 가능!

• as? : 값의 타입을 지정된 타입으로 변환하고, 변환이 실패할 경우 nil을 반환

📖 CoreData?

"iOS 앱에서 데이터를 관리하고 저장하기 위한 프레임워크"

core data가 iOS앱에서 데이터를 관리하고 저장하는 도구라면, Core Data stack은 데이터를 관리하는 구조이다. core data stack이라는 구조로 core data는 데이터를 관리한다! 라고 생각하면 될듯!!! (갑자기 막 새로운 내용이 머리에 들어와서 쪼금 혼란스럽다..🙉🙈🙉)

• NSManagedObjectModel 관리 객체 모델 : 데이터베이스에서 테이블의 구조를 정의하는 스키마에 해당하는 것으로, 코어 데이터에서 테이블에 대으오디는 엔티티의 구조를 정의하는 객체를 말한다.
• NSManagedObjectContext 관리 객체 컨텍스트 : 관리 객체를 생성, 수정, 삭제하거나 메모리에 로드하는 작업을 제공한다.
• NSPersistentStoreCoordinator 영구 저장소 코디네이터 : 영구 저장소를 관리하고 데이터베이스와의 통신을 담당하는 객체이다. 영구저장소와 관리 객체 모델을 연결한다.
• NSPersistentStore 영구 저장소 : 실제로 데이터가 영구적으로 저장되는 저장소를 말한다.

CoreData 생성하는법

1. 기존에 생성한 프로젝트에서 command + N 키를 눌러 DataModel 파일을 추가해준다.

그러면 이렇게 파일이 생성된걸 확인할 수 있다.

2. Add Entity로 entity를 추가해준다. entity는 데이터베이스의 테이블과 비슷한 개념으로 데이터 모델 내에서 객체의 유형을 정의하고 해당 객체들이 갖는 속성을 나타낸다. 나는 상품을 받기 위해 Product라는 Entity를 만들어주었다.

그리고 product Entity에 attribute를 추가해주었다.

👩‍🏫 entity는 데이터 모델에서 개별 객체를 나타내며, attribute는 해당 객체의 속성이다.

3. 엔티티의 설정을 추가할 수 있다.

Codegen 영역에 Class Definition 이라고 되어있는 것을 확인할 수 있다. codegen 옵션은 coredata 모델 파일을 기반으로 관리 객체 클래스를 생성하는 방법을 지정하는 곳이다.

• class definition 옵션 : 코어데이터가 자동으로 생성된다.
• category/Extension : NSManagedObject를 하위 클래스로 만들고, 관리 객체의 속성과 관련된 코드를 분리하여 확장으로 정의할 수 있다.
• Manual/None : 관리 객체 클래스를 수동으로 생성해야 함

3.1 릴레이션을 정의할 수 있다

그 sql에서 외래키 같은 역할인데 쫌 다른거 같다.. 일단 나중에 하겠음.

4. 엔티티가 정의되었다. 코어 데이터는 엔티티 구조를 객체 형태로 변한하여 데이터 모델 클래스를 자동으로 생성해 준다! 이제 데이터를 저장하고 등록하기 위한 코드 설정을 해주어야 한다.

4.1. app delegate 설정 추가 나는 빈 프로젝트에 core data를 추가해주었기 때문에 app delegate에 코어 데이터 스택을 설정하는 코드를 추가해주어야 했다. 추가한 코드를 간단히만 살펴보자면

var persistentContainer: NSPersistentContainer = {
    let container = NSPersistentContainer(name: "Model")
    container.loadPersistentStores(completionHandler: { (storeDescription, error) in
        if let error = error as NSError? {
            fatalError("Unresolved error \(error), \(error.userInfo)")
        }
    })
    return container
}()

이 구문은 프로젝트에 추가된 xcdatamodelId 파일을 코어 데이터 시스템에 등록하고, 이를 이요하여 NSPersistentContainer 객체를 생성하는 역할을 한다.

func saveContext() {
    let context = persistentContainer.viewContext
    if context.hasChanges {
        do {
            try context.save()
        } catch {
            let nserror = error as NSError
            fatalError("Unresolved error \(nserror), \(nserror.userInfo)")
        }
    }
}

saveContext() 메서드의 첫줄을 보면 context 상수에 저장되는 것은 NSManagedObjectContext 객체이다. 코어 데이터에서 데이터를 읽고 쓰기 위해서는 매번 컨텍스트 객체가 필요한데 그때마다 직접생성하는 것이 아니라 persistentContainer 객체의 viewContext 속성을 통해 참조하는 것이였다.!!!🫨🫨🫨🫨🫨

👩‍🏫 여기서 정리! 우리는 결국 데이터를 패치하거나 저장하거나 수정하려면 model 객체가 아닌 NSManagedObjectContext 객체가 필요한 것이다!! 얘의 역할이 데이터 생성 수정 삭제 등 총관리 였으니까!!! 아웅헷갈려

5. 이제 데이터를 저장할 수 있다.

그러니까 이제 우린 앱에 데이터를 저장할 수 있고 저장된 데이터를 읽어올 수도 있다. 컨텍스트 객체를 통해서! 그럼 일단 데이터를 저장하는 과정은 어떻게 될까?

데이터 저장하기

0. 일단 appdelegate에 있는 NSManagedObjectContext 객체를 가져온다.

   //앱 델리게이트 객체 참조
   let appDelegate = UIApplication.shared.delegate as! AppDelegate
   //관리 객체 컨텍스트 참조
   let context = appDelegate.persistentContainer.viewContext

1. 빈 NSManagedObject를 만들고 이를 NSManagedObjectContext 객체에 등록한다.

   //앱 델리게이트 객체 참조
   let appDelegate = UIApplication.shared.delegate as! AppDelegate
   //관리 객체 컨텍스트 참조
   let context = appDelegate.persistentContainer.viewContext
   //빈 관리 객체 생성하고 컨텍스트 객체에 등록
   let entity = NSEntityDescription.entity(forEntityName: "Product", in: context)

2. 생성된 NSManagedObject에 값을 넣고

   //앱 델리게이트 객체 참조
   let appDelegate = UIApplication.shared.delegate as! AppDelegate
   

//관리 객체 컨텍스트 참조 let context = appDelegate.persistentContainer.viewContext

//빈 관리 객체 생성하고 컨텍스트 객체에 등록 let entity = NSEntityDescription.entity(forEntityName: "Product", in: context)

if let entity = entity { let product = NSManagedObject(entity: entity, insertInto: context) //값 설정 product.setValue("아이폰", forKey: "title") product.setValue("123", forKey: "price") }

3. NSManagedObjectContext의 변경사항을 영구 저장소에 반영한다. (이를 커밋이라고 부른다함)
```swift
//앱 델리게이트 객체 참조
let appDelegate = UIApplication.shared.delegate as! AppDelegate

//관리 객체 컨텍스트 참조
let context = appDelegate.persistentContainer.viewContext

//빈 관리 객체 생성하고 컨텍스트 객체에 등록
let entity = NSEntityDescription.entity(forEntityName: "Product", in: context)

if let entity = entity {
   let product = NSManagedObject(entity: entity, insertInto: context)
   //값 설정
   product.setValue("아이폰", forKey: "title")
   product.setValue(123, forKey: "price")

   //영구저장소에 커밋
    do {
        try context.save()
    } catch {
        context.rollback()
    }
}

이렇게 저장한 데이터가 제대로 저장되어 있는지 패치도 해야 한다...

5.1. 데이터 패치도 가능하겠지요

데이터 패치하기

코어 데이터에 저장된 데이터를 가져올 때에는 요청 객체 NSFetchRequest 객체를 사용한다.! 또 새로운놈이 등장해버림.. 이 객체는 다양한 요청들을 복합적으로 정의할 수 있다. 그래서 데이터를 패치하는 방법은 저장하는 방법과 비슷하면서도 약간 다른데, 일단 데이터를 조회 하는 것이기에 NSManagedObjectContext 객체를 참조할 것이고, 요청 객체를 생성하여 데이터를 가져올 것이다.

1. 일단 appdelegate에 있는 NSManagedObjectContext 객체를 가져온다.
2. 요청 객체를 생성
3. 데이터 가져오기

do {
    let fetchRequest: NSFetchRequest<Product> = Product.fetchRequest()
    let products = try context.fetch(fetchRequest)
        products.forEach {
            print($0.title ?? "No Title", $0.price)
        }
   } catch {
           print("Error fetching data: \(error)")
    }

실행하면 콘솔창에 다음과 같이 나온걸 확인할 수 있다.

설명은 난중에 할게요...🫠 나 과제 언제 시작하뮤ㅠㅠ

참고 1

일단 이 문제를 보자마자 아스키코드를 사용해야겠다! 라는 생각까지는 했다. 그러나 문제는 내가 swift에서 문자를 아스키코드로 변환하는 방법을 모른다는 것이다.🫥 그래서 검색을 해보았다. 이 문제에서는 문자열을 아스키코드로 변환하면 아주 편한데 문자열을 아스키코드로 변환하는 방법은 없고 문자(char)를 아스키코드로 변환하는 방법을 찾을 수 있었다.

let char: Character = "A"
let scalarValue = Unicode.Scalar(String(char))!

let asciiCode = scalarValue.value
print(asciiCode)

위의 코드는 문자를 아스키코드로 변환하는 방법인데 먼저 char를 scalarValue로 바꾼후 scalarValue를 asciiCode로 변환하는 원리이다. 반대로 아스키코드를 문자로 복원하는 방법은 다음과 같다.

let asciiCode: UInt8 = 65 
let scalarValue = Unicode.Scalar(asciiCode)

let character = scalarValue.description
print(character)

이외에도 이 문제에서 생각해야하는 것은 단순히 ascii코드를 옆으로 밀어주는 것 뿐만 아니라 밀어준 아스키코드값이 문자 범위를 벗어나면 다시 문자열로 복원해주어야 하며, 공백 문자는 밀어주지 말아야 한다.

그렇게 제출한 답은 다음과 같다.

func solution(_ s:String, _ n:Int) -> String {
    var charToAscii: [UInt8] = []
    var asciiToChar = ""
    for char in s {
        if 65 <= char.asciiValue! && char.asciiValue! <= 90 {
            if char.asciiValue! + UInt8(n) > 90 {
                charToAscii.append(char.asciiValue! + UInt8(n) - 26)
            } else {
                charToAscii.append(char.asciiValue! + UInt8(n))
            }
        } else if char == " " {
            charToAscii.append(char.asciiValue!)
        } else{
            if char.asciiValue! + UInt8(n) > 122 {
                charToAscii.append(char.asciiValue! + UInt8(n) - 26)
            } else {
                charToAscii.append(char.asciiValue! + UInt8(n))
            }
        }
    }
    //print(charToAscii)
    for asc in charToAscii {

        asciiToChar.append(String(UnicodeScalar(asc)))
    }
    //print(asciiToChar)
    return asciiToChar
}

서버에서 프로필 이미지는 url로 넘겨주며 이 url은 String 타입으로 준다. 이 url은 웹서버에서 이미지의 경로다! 그래서 우리는 이 url로 접속해서 이미지를 로드해올 수 있다.

guard let url = URL(string: profile.avatar_url) else {return}
self.imageView.kf.setImage(with: url)

위 코드의 profile타입에 저장된 avatar_url은 서버에서 받아온 프로필 사진 주소이다. 이를 URL 형식으로 변환해준후 kingFisher를 이용해 imageView에 image를 로드해주었다. 사용하는 방법은 은근 간단한듯... 근데 깃 보니까 제공하는 기능이 짱 많다..!

ios에도 기본적으로 제공되는 이미지 로드 기능이 있다! 하지만 kingFisher를 사용하는 것이 좋다! 왜? *이미지 다운로드와 캐싱기능을 자동으로 해준다. 그래서 메모리 관리가 편하다! * 아직 완벽하게 이해는 안되지만 대충 뭔소린지 알겠음..

📝 Pull to refresh 기능 구현

pull to refresh는 tableView나 collectionView에서 위로 댕겼을때 데이터를 새로 받아오는 기능을 말한다. 말 그대로 pull 당겨서 refresh 새로고침! 이 기능은 처음 구현해보아서 구글에서 많은 도움을 받아 구현하였다.

repoTableView.refreshControl = refreshControll
refreshControll.addTarget(self, action: #selector(refreshFunction), for: .valueChanged)

@objc func refreshFunction(){
    repoTableView.reloadData()
}

📝 Paging 기능 구현

페이징 기능은 테이블뷰 위의 화살표로 다음 페이지로 넘어갈 수 있도록 구현했다. 이때 조금 애먹었던 사항이 만약 레포가 14개 있다면 맨 마지막 페이지에는 테이블뷰가 4개만 나오도록 구현하도록, 그러니까 빈 테이블 6개와 4개가 아닌 그냥 테이블셀만 4개 나오도록 하는 것이였다. 그렇게 하기 위해 테이블 셀의 갯수를 지정하는 메서드를 다음과 같이 구현하였다. 그리고 화살표를 눌렀을때의 메서드는 다음과 같이 구현하였다.

그렇게 구현한 최종화면은 다음과 같다. 내 레포가 14개밖에 되지 않아서 딱히 페이징 기능을 해야했나 생각을잠시 했지만 일단은 만족! 그런데 refreshControl이 제대로 작동하지 않는것 같다...

⚙️ 최소직사각형

문제는 다음과 같고 입출력 예시는 다음과 같다.

어찌저찌 머리를 굴려 일단 각 직사각형마다, 즉 이차원배열의 요소들마다 가로길이와 세로길이를 비교해 큰값을 무조건 가로길이로 위치를 바꾸고 모든 직사각형의 가로길이중 최대길이와 세로길이중 최대길이를 곱하는 방식으로 문제를 풀려고 하였다.

그래서 처음으로 작성한 코드는 다음과 같다. 이차원 배열을 분명 var input으로 변수로 선언했는데도 for 문안에서 위치를 바꾸려니 다음과 같은 에러가 났다. Cannot assign to property: 'size' is a 'let' constant" 이 에러가 발생하는 이유는 for 루프의 반복 변수는 상수(let)로 취급되기 때문에 수정할 수 없어서이다!! 그래서 다음과 같이 수정하니 정상작동되었다.

• alamofire와 kingFisher를 사용할 것
• pull to refresh 기능 구현할 것
• 페이징 처리하게 할것
• tableView나 collectionView 사용한것

📝 깃 api 어떻게 받음??

일단 깃허브에 api가 있다는 사실을 처음알았다!!!! 이렇게 유용한 api가 있었다니..!!😮😮😮 깃허브에서 제공하는 api 정보를 보고 api 키를 받았다. 깃허브에서 response로 응답하는 정보가 정말 많았다. 일단 나는

1. 사용자 프로필 정보
2. 사용자의 레포 정보 를 받아 사용할 것이다.

더 직관적으로 알아보기 위해 postman 에서 테스트 해보았다. 먼저 내 깃허브를 조회한 결과 다음과 같은 다양한 정보를 받았다. 이중에서 bio와 팔로잉, 팔로워, 레포 수와 같은 정보를 사용하기로 했다. 그리고 repo에 대한 api를 테스트 해본 결과 를 응답받았다.

📝 디자인 구상하기

api를 통해 사용할 정보를 정해 생각한 디자인은 다음과 같다. 인스타를 참고했다. (머릿속으로 구상한거여서 일단 완성본을 첨부한다!ㅎㅎ😎) 아니 벨로그에서 사진 크기 어떻게 줄임..--

📝 tableView 사용하기

작업의 속도를 높이기 위해 storyboard를 사용해 구현했다. tableViewCell는 한 화면에 10개씩 나오게 하였으며 페이징처리로 다음 레포를 볼 수 있도록 구현할 예정이였다. 스토리보드를 사용했기때문에 cell을 스토리보드내에서 셀 등록 해주고 사용했다.

📝 alamofire 사용하기

alamofire는 전에 사용해본 경험이 있었다! 그래서 그때의 코드를 참고했다....(과거의 나자신 기특혀...) 나는 spm을 이용하여 alamofire를 import하였다. 일단 응답받는 구조체를 만들고 callApi 함수로 api를 받았다.

//응답받는 구조체
struct Profile: Codable {
    let login: String
    let followers: Int
    let following: Int
    let public_repos: Int
    let bio: String
    let avatar_url: String
    let repos_url: String
}

//서버에 리퀘보내고 응답받아오는 함수
func callProfileAPI(completion: @escaping (Profile?) -> Void) {
        let url = "https://api.github.com/users/jiyeondu"
        let param = ["auth" : ""]
        AF.request(url, method: .get, parameters: param).responseDecodable(of: Profile.self){
            (response) in
            switch response.result {
            case .success(let value):
                print(value)
                completion(value)
            case .failure(let error):
                print("ProfileError: \(error)")
            }
        }
    }

(인증키는 비밀!) 위의 함수를 설명하자면 일단

1. AF.request(url, method: .get, parameters: param) 여기서 alamofire를 이용해서 url에 get 요청을 보낸다. 그리고 .responseDecodable(of: Profile.self)를 통해 받은 응답을 Profile 타입으로 디코딩 한다. url에서는 응답을 json 형태로 보내준다.
2. 만약 response.result가 성공적이면 value 매개변수에 디코딩된 Profile 객체가 전달되며, 이를 completion 핸들러를 통해 완료
3. completion 매개변수는 클로저 형태로 전달되며, Profile? 타입의 옵셔널 값을 받는다. 이 핸들러는 프로필 정보를 성공적으로 가져온 후에 호출된다(completion 핸들러 특징!)

completion handler를 모른다면?

• 코드로 autolayout 구현시 유의할점
• 하나의 뷰에 여러 콜렉션뷰 넣기

✅ 코드로 autolayout 구현시 유의할 점

.translatesAutoresizingMaskIntoConstraints = false로 설정해야한다. 코드를 통해 뷰를 생성할 때는 이 속성이 기본적으로 true로 설정된다. 뷰가 자동으로 해당 부모의 뷰의 크기 및 위치에 맞게 조정되도록 해주는 것인데 이 속성이 true로 설정되어 있으면 autolayout의 제약조건이 적용되지 않는다. 그래서 이 속성을 꼭 false로 해줘야한다. 몇몇 뷰에 이 속성을 설정하지 않아 애를 많이 먹었다.

✅ 하나의 뷰에 여러 콜렉션뷰 넣기

subway화면의 중단부를 보면 여러개의 가로스크롤이 되는 콜렉션뷰가 사용된다. 가로스크롤을 위해 collectionViewFlowlayout을 설정해준다.

let topCollectionViewFlowLayout: UICollectionViewFlowLayout = {
        let flowlayout = UICollectionViewFlowLayout()
        flowlayout.scrollDirection = .horizontal
        flowlayout.minimumLineSpacing = 15
        flowlayout.sectionInset = UIEdgeInsets(top:0, left:0, bottom: 0, right: 0)
        return flowlayout
    }()

lazy var tabbarTop: UICollectionView = {
        let collectionView = UICollectionView(frame: .zero, collectionViewLayout: topCollectionViewFlowLayout)
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        return collectionView
    }()

이게 내가 맡은 부분인 topView에 해당하는 부분이라면 팀원분의 코드를 합치는 과정에서 문제가 생겼다. 추가된 팀원 코드는 다음과 같았다.

// middle view
    let collectionViewFlowLayout: UICollectionViewFlowLayout = {
        let flowlayout = UICollectionViewFlowLayout()
        flowlayout.scrollDirection = .horizontal
        flowlayout.minimumLineSpacing = 15
        flowlayout.sectionInset = UIEdgeInsets(top:0, left:0, bottom: 0, right: 0)
        return flowlayout
    }()

    lazy var breadHorizontalBar: UICollectionView = {
        let collectionView = UICollectionView(frame: .zero, collectionViewLayout: collectionViewFlowLayout)
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        return collectionView
    }()

여기서 확인해보면 collectionViewFlowLayout이 중복되어있는것을 확인할 수 있다. 그래서 중복된 코드를 줄이고자 하나의 collectionViewFlowLayout을 사용해서 모든 콜렉션뷰가 채택할 수 있도록 하게 했다.

    let collectionViewFlowLayout: UICollectionViewFlowLayout = {
        let flowlayout = UICollectionViewFlowLayout()
        flowlayout.scrollDirection = .horizontal
        flowlayout.minimumLineSpacing = 15
        flowlayout.sectionInset = UIEdgeInsets(top:0, left:0, bottom: 0, right: 0)
        return flowlayout
    }()

    lazy var breadHorizontalBar: UICollectionView = {
        let collectionView = UICollectionView(frame: .zero, collectionViewLayout: collectionViewFlowLayout)
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        return collectionView
    }()

    lazy var tabbarTop: UICollectionView = {
        let collectionView = UICollectionView(frame: .zero, collectionViewLayout: collectionViewFlowLayout)
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        return collectionView
    }()

같은 flowLayout을 채택한 후 dataSource와 delegate 프로토콜의 메서드를 구현할 때도 다음과 같이 했다.

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        if collectionView == tabbarTop {
            return menuList.count
        } else if collectionView == breadHorizontalBar {
            return breadList.count
        } ...

    }

if문으로 받는 collectionView를 구분해서 무사히 구현할 수 있었지만 문제가 발생했다. func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 메서드르르 구현할 때 위와 같이 if문으로 collectionView만을 분리하니까 분리가 되지 않았다.

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        if collectionView == tabbarTop {
            let text = menuList[indexPath.row]
            let font = UIFont.systemFont(ofSize: 20)
            let textWidth = text.size(withAttributes: [NSAttributedString.Key.font: font]).width
            let cellWidth = textWidth + 20
            return CGSize(width: cellWidth, height: 60)
        } else {
            let text = breadList[indexPath.row]
            let font = UIFont.systemFont(ofSize: 18)
            let textWidth = text.size(withAttributes: [NSAttributedString.Key.font: font]).width
            let cellWidth = textWidth + 10
            return CGSize(width: cellWidth, height: 20)
        }

위의 코드를 실행하면 if 문을 인식하지 못하고 무조건 else 문으로 빠져버린다. 글래서 tabbarTop이 다음과 같이 나온다.ㅠㅠ

아놔 스트링 index접근을 매일 까먹는다..바보냐고!!!!! 제목에서 나의 빡침이 느껴질련지는 모르겠지만 이참에 확실히 외워야 겠다는 생각을 다시 한다..

String.index(_:offsetBy:)

문자열에서 특정 인텍스를 찾기위한 메서드이다. 첫번째 매개변수에는 인덱스를 계산하는 기준이 되는 위치(startIndex)를, 두번째 매개변수에는 위치에서부터의 이동ㄱ리를 나타내는 정수값을 넣는다.

let str = "Hello, World!"

// 문자열의 시작 위치부터 7번째 문자까지의 인덱스를 찾음
let index = str.index(str.startIndex, offsetBy: 7)

// 찾은 인덱스를 사용하여 해당 위치의 문자에 접근
print(str[index]) // 출력: "W"

Subscript 'subscript(_:)' requires that 'String.Index' conform to 'RangeExpression' : 문자열을 인덱싱할 때 발생하는 에러라고 한다. 문자열을 인덱싱하기 위해서는 w즉 []를 통해 접근하기 위해서는 이 괄호 사이에 String.index타입이 들어가야하는데 그 타입이 들어가지 않았다는것!! 아니 그런데 바로 위의 if절에는 에러가 안나는데 이 코드에서 에러가 나는 이유를 모르겠다🤬🤬🤬

혹시 몰라서 index 부분을 분리해서 코드를 짜보았다. 그러니까 에러가 사라졌다... 황당하다

그리고 리스트를 string으로 만드는 방법으로 .joined()메서드를 사용했다.

.joined()

이 메서드는 배열에 사용되는 메서드로, 배열의 각 요소를 하나의 문자열로 결합하는데 사용된다고 한다. 배열에 포함된 요소들을 모두 이어붙여 두는데 요소들 사이에 구분자를 추가할 수도 있다. 요소들의 구분자를 추가하려면, 예를들어 요소들사이에 한칸씩 뛰우려면 .joined(seperator: " ")를 사용하면 된다.

let fruits = ["Apple", "Banana", "Orange"]
let result = fruits.joined()
print(result) // 출력: "AppleBananaOrange"

그렇게 제출한 정답 코드는 다음과 같다.

func solution(_ s:String) -> String {
    var arr: [String] = []
    var x = 0
    for i in s {
        if x % 2 == 0 {
            arr.append(String(i.uppercased()))
        } else {
            arr.append(String(i.lowercased()))
        }
        x += 1
        if i == " " {
            x = 0
        }
    }
    return arr.joined()
}

이렇게 깃허브의 폴더에 화살표가 떠있고 들어가지지 않는 경우가 있다. *이런 문제가 발생하는 경우 subway 폴더 안에 .git 파일이 있어서 이다!! * 실제로 저 폴더는 다른 깃 레포가 연결되어 있는 폴더의 하위에서 가져왔다. 커맨드창으로 실제 로컬의 파일들을 확인해보니 .git 파일이 있음을 확인할 수 있다.

문제를 해결하는 방법은 .git 일을 제거하고, 스테이지에 이미 올라간 파일을 제거하는 것이다.

📖 해결방법

1. .git 파일 제거

rm -rf .git

2. 스테이지 파일 제거

git rm --cached . -rf

3. 다시 add, commit, push 진행

구상한 화면은 다음과 같다. 여기서 top, body, bottom으로 3부분으로 나누어 작업하기로 했고 나는 top 부분을 맡았다. 스토리보드로 구현하기로 했으면 협업은 깃을 활용했다. 사실 하나의 뷰컨트롤러를 여러명이 동시에 작업한다는 점이 충돌을 피하기 어렵겠지만 일단 도전해보기로 했다.

🧑‍🏫 TopView 만들기

먼저 topView 에서 titleView와 menuView로 구분하고 만들었다. titleView는 UIView위에 UILabel을 올리기만 하면 된다.

콜렉션뷰를 사용해서 상단 탭바를 만들어보았다. 콜렉션뷰는 테이블 뷰와 마찬가지로 dataSource와 delegate를 지정해주어야 했고 셀을 등록시켜줘야 했다. 콜렉션 뷰를 만드는 것은 어렵지 않았으나 다음과 같은 사항을 지키는 것이 중요했다.

• 가로 스크롤일 것
• 콜렉션뷰의 셀이 메뉴의 글자 길이에 맞는 크기를 가질 수 있도록 할 것
• 클릭 시에 글자의 색이 바뀌거나 배경 색이 바뀌도록 할것

✅ collectionViewFlowLayout

먼저 가로스크롤을 구현하기 위해 collectionViewFlowLayout()이라는 클래스를 사용하였다. 이 클래스는 컬렉션 뷰의 레이아웃을 정의하고 사용자가 정의한 규칙에 따라 셀을 배치한다. 여기서 말하는 레이아웃은 화면에 표시되는 요소들의 위치, 크기, 간격 등을 말한다고 생각하면 된다.

공식 문서에 나와있는 내용을 보면 이 클래스의 scrollDirection 프로퍼티를 활용하여 스크롤 방향을 수직이나 수평으로 바꿔줄 수 있다.

func setTabbarTop(){
        let flowlayout = UICollectionViewFlowLayout()
        flowlayout.scrollDirection = .horizontal        //가로스크롤!!
        flowlayout.minimumLineSpacing = 15
        flowlayout.sectionInset = UIEdgeInsets(top:0, left:0, bottom: 0, right: 0)
    }

뿐만 아니라 .minimumLineSpacing 으로 아이템간의 간격을 정할 수 있었고, .sectionInset 으로 셀과 섹션의 가장자리 간의 간격을 조절할 수 있다.

collectionView는 collectionFlowLayout을 다음과 같이 지정해주었다ㅏ.

let topCollectionViewFlowLayout: UICollectionViewFlowLayout = {
        let flowlayout = UICollectionViewFlowLayout()
        flowlayout.scrollDirection = .horizontal
        flowlayout.minimumLineSpacing = 15
        flowlayout.sectionInset = UIEdgeInsets(top:0, left:0, bottom: 0, right: 0)
        return flowlayout
    }()

scrollDirection은 .horizontal로 가로로 스크롤되도록 설정하였고, .minumumLineSpacing으로 아이템의 세로간격을 15포인트로 설정하였다. 그리고 .sectionInset으로 모든 여백을 0으로 설정하여 섹션 내부의 여백을 제거하였다. 그리고 해당 collectionView가 topCollectionViewFlowLayout을 따를 수 있도록 설정해주었다. 여기서 frame: .zero는 초기 프레임이 없고 추후에 크기를 설정해주어야 한다는 뜻이다. (나는 오토레이아웃으로 추후에 크기와 위치를 설정하였다.)

lazy var tabbarTop: UICollectionView = {
        let collectionView = UICollectionView(frame: .zero, collectionViewLayout: topCollectionViewFlowLayout)
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        return collectionView
    }()

✅ textWidth

콜렉션뷰의 셀이 메뉴의 글자 길이에 맞는 크기를 가질 수 있도록 하기 위해서는 텍스트의 길이를 알아야한다. 이때 맨처음에는 깊은 생각없이 text.count를 했더니 텍스트의 문자길이가 나왔다.🥲 바보같은 실수였다..ㅎ 그래서 textWidth를 구하기 위해 찾아보니 text의 사이즈를 구할 수 있는 코드를 찾았다.

let text = menuList[indexPath.row]
let textWidth = text.size(withAttributes: [NSAttributedString.Key.font: font]).width

text의 size(withAttributes:)메서드는 NSAttributedString의 확장 메서드로, 문자열이 주어진 속성과 폰트로 렌더링될 때의 크기를 반환한다. 속성으로 전달되는 딕셔너리인 [NSAttributedString.Key.font: font]는 문자열의 폰트를 설정하는 키와 문자열에 적용할 폰트로 구성되어 있다. 그렇게 셀을 textWidth보다 20정도 크게 하는 코드는 다음과 같다.

let text = menuList[indexPath.row]
let font = UIFont.systemFont(ofSize: 20)
let textWidth = text.size(withAttributes: [NSAttributedString.Key.font: font]).width
let cellWidth = textWidth + 20
return CGSize(width: cellWidth, height: 60)

✅ isSelected

클릭 시에 글자의 색이 바뀌거나 배경 색이 바뀌도록 해야했다. didSelectItemAt 메서드를 사용해서 구현하려고 했지만 검색결과 cell 클래스에서 해결할 수 있는 방법이 있었다. isSelected 속성을 오버라이드하여 해당 뷰가 선택되었을 때와 선택되지 않았을 대의 UI를 변경할 수 있다. 해당 뷰의 isSelected에 프로퍼티 감시자를 정의하여 다음과 같이 구현하였다.

override var isSelected: Bool {
        didSet{
            if isSelected {
                backView.backgroundColor = UIColor.lightGray
                menuText.textColor = .black
            }
            else {
                menuText.textColor = .gray
                backView.backgroundColor = UIColor.white
            }
        }
    }

그래서 만약 셀을 하나 선택하면 그 셀의 배경은 lightGray로 텍스트 색은 Black으로 변경된다. 이는 여러개의 셀을 선택할때는 구현하지 못하고 하나의 셀만 선택하는 경우에만 가능한 방법일 것이다.

💻 TopView

스토리보드를 통해 구현한 TopView는 다음과 같다. 깃허브링크

문제는 단계별로 차근차근 코드를 짜기로 했다. 먼저 10진법을 3진법으로 만들고 앞뒤반전을 한 후 10진법으로 표현할 것이다. 그런데 10진법 수를 3진법으로 변화는 과정에서 리스트를 사용하니까 앞뒤반전하는 과정 없이 리스트에 앞뒤반전한 순서대로 결과가 들어갔다.

var num = n
    var result: [Int] = []
    while num >= 3 {
        result.append(num % 3)
        num = num / 3
    }
    result.append(num)

위 코드에서 num이 45라면 실행한 후 result 리스트에는 [0, 0, 2, 1]이 들어가 있다. 이제 다시 3진법수를 10진법으로 돌이키는 과정에서 제곱을 활용했다. 제곱수를 표현하기 위해 **를 사용했지만 플레이그라운드에서 에러가 났다. ** 대신 pow() 메서드를 사용하라는 경고창이 떴다. pow 메서드를 살펴보면 decimal과 Int를 인수로 받고 리턴을 Decimal로 해주고 있다. 그래서 다음과 같이 수정했더니 또 에러가 발생했다. 검색해보니 "Initializer 'init(_:)' requires that 'Decimal' conform to 'BinaryInteger'" 에러는 Decimal 타입이 BinaryInteger 프로토콜을 준수하지 않아서 발생하는 것이라고 한다. BinaryInteger 프로토콜은 이 프로토콜은 정수 타입이 이진 연산을 수행할 수 있도록하는 프로토콜이라고 한다. Double과 Decimal도 다른 타입인데, decimal은 더 정밀한 소수점을 표시하기 위한 타입이라고 생각하면 된다.

정리하면, Decimal을 바로 Int로 바꿀수는 없다! Double은 Int()로 소수점을 버리고 변환이 가능하다.

그래서 수정한 결과는 다음과 같다. pow()메서드의 다른 타입을 사용했다.

이 블로그를 참고했다.

그렇게 제출한 코드는 다음과 같다.

func solution(_ n:Int) -> Int {
    //3진법으로
    var num = n
    var result: [Int] = []
    while num >= 3 {
        result.append(num % 3)
        num = num / 3
    }
    result.append(num)
    num = 0
    for i in 0...result.count-1 {
        num += Int(pow(3.0,Float(i))) * result[result.count-1-i]
    }
    return 0
}

pow(_: Float, _: Float) -> Float

최대공약수는 입력된 숫자보다 작을 것이므로 반복문을 사용하면 될것이다. 최소공배수도 같은 원리로 입력된 수와 같거나 그 이상일 것이므로 반복문을 사용하면 될것이다. 구현해 보면

func solution(_ n:Int, _ m:Int) -> [Int] {
    //최대공약수
    var min = n < m ? n : m
    while true {
        if n % min == 0 && m % min == 0{
            break
        }
        min += 1
    }
    //최소공배수
    var max = n > m ? n : m
    while true {
        if max % n == 0 && max % m == 0{
            break
        }
        max += 1
    }

    return [min, max]
}

이렇게 구현했더니 testCase 2번째에서 최대공약수를 찾지 못하였다. 생각해보니 위의 코드는 두 수가 배수 관계에 있어야지만, 즉 두 수의 최대공약수가 1이 아닐때만 성립하는 코드였다. 그래서 아래와 같이 수정하였다.

func solution(_ n:Int, _ m:Int) -> [Int] {
   var min = n > m ? n : m
    while true {
        if n % min == 0 && m % min == 0{
            break
        }
        min -= 1
    }
    var max = n > m ? n : m
    while true {
        if max % n == 0 && max % m == 0{
            break
        }
        max += 1
    }

    return [min, max]
}

이렇게 풀었더니 성공했다.

다른사람들의 풀이를 보니 수학적인 지식을 활용한 풀이가 많았다.

func solution(_ n:Int, _ m:Int) -> [Int] {
    var first: [Int] = []
    for index in 1...n {
        if n % index == 0  && m % index == 0 {
            first.append(index)
        }
    }
    let maxValue: Int = first[first.count-1]
    return [maxValue ,(n * m)/maxValue ]
}

이 풀이에 의하면 어떤 수의 최소공배수는 두 수의 곱을 최대공약수로 나눈 값이였다.

해당 문제를 풀기위해 commandLine 파일에 옮겼다. (플레이그라운드에서는 readLine()이 실행이 안된다!!)

처음 문제 풀기 전에 답안 영역에 이렇게 작성되어 있는데 readLine()이라는 함수를 사용해본적이 없었다. 함수로 별을 찍는 것은 for문을 통해 단순하게 구현했다. 다만 한줄에 별을 찍고 다음 줄로 넘어가는 것을 구현하려고 할때 처음에는 print("\n")처럼 개행문자를 프린트하려고 했으나 이러면 두줄이 띄어지게 되어 print("")로 하게 되었다. print()함수가 인자를 출력한 후 줄바꿈문자를 출력한다는 사실을 이용했다.

let n = readLine()!.components(separatedBy: [" "]).map { Int($0)! }
let (a, b) = (n[0], n[1])
for _ in 1...b {
    for _ in 1...a {
        print("*", terminator: "")
    }
    print("")
}

📖 readLine()

func readline(strippingNewline: Bool = true) -> String?

apple 공식문서에 이 함수의 원형이 나타나있다. 일단 이 함수는 어떤 입력을 받던 String?타입으로 반환한다. 예시를 보면

var a = readLine()
print(a)

를 실행하고 a를 입력하면 출력은 Optional("a")이다. 그렇기 때문에 String값을 얻으려면 강제해제 해주거나 readLine()! 암묵적으로 해제해주면 된다. 그리고 이 함수는 입력의 끝을 개행문자로 인식한다. 즉 한줄씩 입력 받는다. 위의 함수에 입력을

a b c
d e

로 하면 d e가 입력되기 전에 종료되면 결과는 Optional("a b c")이다.

그렇다면 문제의 예시처럼 공백이 있는 입력값을 받아 공백을 제외하고 처리하려면 어떻게 해야할까? 문제에서 미리 예시를 주었듯이 고차함수를 활용하면 된다.

let n = readLine()!.components(separatedBy: [" "]).map { Int($0)! }

먼저 사용자로부터 입력을 한 줄로 읽어드리고, 옵셔널을 강제로 해제한다. 그런다음 .components(separatedBy: [" "])를 통해 문자열을 공백을 기준으로 나누어 문자열 배열로 만든다. 그 후 map { Int($0)! } 로 문자열 배열의 각 요소를 정수로 반환한다.

정리하자면

• readLine()함수는 한줄씩 입력받고 반환값은 String!