[iOS] 깃허브 프로필 조회 화면 만들기 [1]

과제의 조건은 다음과 같다.

• 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를 모른다면?