BlueWIPER

[내일배움캠프 후기] iOS 개발 공부부터 앱출시까지 성공 + 사전캠프 본캠프 꿀팁

bluewiper — Mon, 7 Oct 2024 10:07:33 +0900

지난 5월에 처음 iOS 캠프에 들어오고 iOS 창업 캠프로 전환을 거쳐서 앱 출시까지 마쳤다.

결론부터 말하자면 개발 지식 0이었는데 OCR과 AI 기술을 접목한 일정 관리 앱을 만들었다. 혼자서는 아마 할 수 있을까? 하는 생각도 못했을 것이다.

공무원으로 오랫동안 근무하면서 나는 개발의 ㄱ도 몰랐고, 사전 캠프를 거쳤지만 캠프 초중반에 이 실력으로 앱출시가 가능할까하는 걱정이 많았다.

나만의 서비스를 만들고 싶다는 생각을 했다. UX 디자인이라는 개념이 슬슬 유명해질 때였어서 배우다가 디자이너로 전향하고 싶어졌다. 비전공자였기 때문에 개발 지식을 조금이라도 익혀놓으면 플러스가 될 것 같아서 개발 캠프를 찾게 되었다. 초기에 iOS 창업팀이 생겨서 마지막 정착지로 삼았다. 출시까지 하게 되는 과정이어서 나는 기획부터 출시까지 어떤 역할을 제일 잘하고 좋아할지에 대해 궁금하기도 했고, 나만의 서비스를 만드는 사람이 되고 싶은 마음에 참여하게 되었다.

이 캠프는 마지막으로 갈수록 빛을 발한다. 사실 나는 창업 아이디어가 없었다. 여기 와서 생기겠거니 하는 마음으로 들어왔다. 막상 들어오니 사람들이 저마다의 아이디어를 갖고 들어와서 내가 잘 맞출 수 있을까하는 걱정이 됐다. 말해줄 수 있는 것은 커리큘럼을 잘 따르면 할 수 있다. 초반에는 개발, 창업에 대한 인풋이 필요해서 정규 과정을 따라가기가 많이 벅찼었다. 그리고 내가 실력이 부족하다보니 자율성이 떨어지는 것 같아서 포기하고 싶었던 적도 여러번 있었다. 근데 그 고통의 시간을 지나고 해보고 싶은게 생겼을 때 비로소 튜터님들과 수강생들에게 물어가면서 자율적이고 능동적으로 프로젝트를 수행할 수 있게 되었다. 그리고 하고자 하는 게 있다면 그에 따른 지원이 정말 끝도 없이 들어온다.

이런 사람은 꼭 해봐라.

혼자 하면 흐지부지되는 사람. 자신을 더 깊이 알아가고 싶은 사람.

가장 좋았던 것들을 뽑자면,

* 이게 무료라니..현직 튜터의 멘토링 : 현직에서 개발하고 계신 분들이랑 창업을 하고 활발히 운영중이신 튜터님이 1on1으로 붙어서 같이 고민하고 길을 찾아서 좋다. 이게 무료라니..
* 실력을 고속성장시켜줄 수 있는 프로젝트와 그걸 지원해주는 멘토링, 각종 특강 : 초중반에는 모두 동일한 과제를 위한 강의와 프로젝트를 진행한다. 갑자기 수준이 높아져서 좀 어렵긴한데 그만큼 아 이런 것도 있구나 코드를 쳐보면서 알게되는 것들이 있다. 어렵다고 포기하면 진짜 프로젝트 할 때 더 힘드니까 그냥 몰라도 따라친다는 생각으로 일단 하면 어느새 쪼오금 성장은 함.
* 좋은 문화 체득할 수 있는 코어와 수강생들과의 유대 : 좋은 문화를 혼자서 체득하기란 어렵다. 개발자, 창업가, 혹은 같이 일하고 싶은 사람이 될 수 있도록 좋은 문화를 권장하고, 수강생과 튜터님과 생활하면서 이를 체득해나갈 수 있다.
* 목표가 같은 사람들과 모여있음 : 인생의 큰 변화를 주고 싶다면 목표가 같은 사람으로 내 주위를 채우라는 말이 있다. 그걸 해보고 싶어서 들어왔는데 확실히 건강한 사고를 할 수 있고 건설적으로 생각해볼 수 있게 된다.
* 혼자가 아니어요,,매니저님께 고민 상담 : 나는 혼자 따라가기가 너무 너무 힘들 때면 매니저님께 솔직하게 상황을 털어놓고 어떻게 돌파하면 좋을지에 대해 상담해서 끝까지 올 수 있었던 것 같다. 처음이 어렵지 우리를 판단하러 계신 분들이 아니고 도와주려는 분들이니 도움이 필요하면 일단 가보길 추천. 일단 성품들이 장난 아니심. 수강 경험이 있는 분들이 주로 매니저님을 맡아주시는 것 같다. * 나는 이것까지 물어봤다 : 수강생들과의 대화가 좋지만 실력 차이를 메우고 싶은데 공부할 여유가 사라지는 것 같아서 너무 걱정이에요.

가장 기억에 남는 것은,

오프라인 스터디 모임에서 팀원과 문제 해결하고 기쁨의 하이파이브했던 순간이다. 온라인으로만 봤던 수강생분들과 오프라인 스터디 모임을 한 적이 있다. 그때 팀프로젝트를 함께하던 팀원도 오셨어서 문제도 같이 고민하고, 특히나 짜릿했던 것은 문제를 해결했을 때 기쁨이다. 이건 경험해보면 못 헤어ㄴㅏ옵니다! 스포츠 경기를 같이 하는 것만큼 성취감이 높습니다.

그리고 기본적으로 매 과제마다 개인적으로 어려운 구간이 하나씩 있는데 차근 차근 깨나갈때마다 수강생과, 튜터님들과, 매니저님이 함께 기뻐하기 때문에 다 소중해~~~

최종 발표

크게 달라진 것은,

아이디어만 있으면 만들고자 하는 것은 만들 수 있겠다는 자신감이 생긴다. 자신감만 생기는게 아니고 일단 시도할 수 있는 툴도 배우고 출시까지 해보기 때문에 경험에 의해 체감하는 것이다.

개발 외적으로 좋았던 것은,

내가 위기상황에 어떻게 행동하는지 나를 직접 돌아보게 되고, 고쳐야하는 점이 뭐고, 실제로 고쳐서 다시 시도해보기도 하는 경험, 도움을 청할 때는 어떻게 해야하는지 배우는 것도 참 좋았다.

공부만 하지 않는다. 사람과 어울리는 법 또한 배운다. 않이 개발 OX 퀴즈가 재미있을지 누가 알았겠냐며,,

노션,,의 매력으로. 개발일지나 일정 관리 등 노션이랑 친해진다.

마무리하며,

다시 시간을 돌려서 5개월의 휴식시간이 주어진다고 해도 나는 이걸 했을 것이다.
출석 잘해서 훈련장려금 꼭 받아가면서 하시길,, 화이팅입니당~~

[자신을 공부하게 만드는 팁]

스크럼과 피드백 시간을 주도해서 만들어라. 스크럼 하자고 해놓고, 공부한 거 정확히 설명하지 못하면 창피하쥬? 공부할 수밖에 없음.

[사전 캠프 꿀팁]

0. 자습시간이지 노는 시간 아니에요 : 노는 시간 아님 공부하는 시간임. 인터스텔라처럼 나중에 후회하지 말고, 수강생들이랑 서로 공부 더 잘할 수 있도록 오늘 공부한 것들 공유하는 시간 꼭 가져보면 좋음. 창피해서라도 공부하게 됨
1. 무조건 문법 공부 : 못알아들어도 어쩔 수 없다 무조건 많이 집어 넣어라. 수강 당시 개발 고수분이 추천해주신 방법인데 오 ㅐ 그때 더 열심히 하지 않았니...
2. 공식문서와 친해지기 : 지금도 이게 뭔소리일까 싶은 글들이 많다. 그렇지만 블로그에는 개인의 해석이 들어가서 내게 맞는 정보가 아닐 수 있다. 사전캠프 때 많이 익숙해지는 게 좋다. 그냥 이런글이구나...하면서 이해하려고 하지 말고 그냥 아...이런 걸 써놓는구나만이라도 익숙해져 놓는 게 좋다.
3. 블로그 예제를 보면서 만들어봐라
4. 간단히 만들고 싶은 것들은 Chat GPT로 예제를 찾아서 만들어보면서 문법과 친해지기

[캠프 생활]

1. 초반에는 성실히 나오면서 9 to 9에 익숙해지기 : 아침 9시부터 밤 9시까지 한 곳에서 시간을 보내는 것은 누구에게나 낯선 일이다. 실력이 모자랄수록 시간이 빠르게 흐르니, 초반에는 몰라도 일단 나온다는 생각으로 성실히 나오는게 중요하다.
2. 일단은 하나 하나 손으로 직접 코드를 짜보기 : 문법이 약할 수록 지급받은 강의를 이해하기 어렵다. 그럼 그냥 일단 손으로 쳐봐야 한다. 영어도 따라쓰면 익숙해지듯이 얘도 똑같은 것 같다.
3. 뭘 해보고 싶었는지, 시도해본 것, 실패한 환경, 성공했던 방법 등과 같이 매일 짧게라도 정리해놔라 : 나만의 답지 노트를 만들어서 나중에 또 써볼 코드에 대해 적어놓으면 복붙으로 시간 절약이 꽤 된다. 잘 쓰는 방법은 나도 모른다. 자기가 이해 잘 되기만 하면 된다. 그래도 여전히 검색해야하는 게 많긴하다. 그래도 반복적인 것들은 내가 제일 잘 알아들을 수 있는 언어로 정리하면 좋다. 나는 초반 이후에는 개인 노션에 적었는데 개발자로 취업하실 분들은 블로그에 남겨놓으면 나중에 하나의 포트폴리오가 되어서 도움이 많이 된다고 한다. 짧게 생각만 해봐도 블로그로 남긴 사람과 안 남긴 사람 중 누가 더 믿음이 갈까?
4. 공식문서부터 보려고 하기 : 애플 공식문서 뿐만 아니고 각종 라이브러리 판매사의 가이드 문서를 먼저 봐라. 이해 안 되는 건 블로그를 참조해보고, 그래도 이해 안 되는 건 튜터님께 여쭤보자.
5. 튜터님과 친하게 지내자 : 2시간동안 고민해도 어떻게 해야할지 감이 안 잡힐 때가 많았다. 아는 것도 양질의 인풋도 해놓은게 없으니까..ㅎㅎ 그럴 때는 일단 튜터님께 가서 상황을 설명하고 해보고 싶은 것을 의논하는 방식이 좋았다.
6. 모두를 대할 때는 예의있게! : 다양한 사람들이 모이지만 특히 내배캠에서는 모두 좋은 사람들이었다. 성격적으로도 선하고 순한 분들이 많으니 항상 말을 예쁘게 하는 습관을 들인다면 서로 도움 주고 도움 받는 환경에서 정말 장점이 된다!
7. 좋은 질문을 해야 좋은 답변을 받는다 : 지금 뭘 해보고 싶었고, 어떤 검색을 마쳤는데 이게 활용이 어렵더라 아니면 시도했는데 안 되더라 어떤 것이 잘못되었는지 파악이 어렵다. 등을 정리하고 튜터님과 같이 시도해보고 싶은게 무엇인지에 명확히 노트에 적어서 가면 일단 서로의 시간을 아낄 수 있다. 나중에 답변만 따로 달아놓으면 되니까 좋은 자산이 된다. 좋은 질문하는 법도 특강으로 있 음. 만약 이번 커리큘럼에는 없다면 대체로 질문을 잘해서가 아닐까..
8. 피드백은 소중하다. : 피드백은 공격이 아니다. 해주면 진짜로 오히려 감사한 것이다. 가끔 튜터님의 배경지식 내에서 가르쳐주실 때가 있어서 알아듣기 어려운 게 있는데 너무 따라가기 어려우면 배경지식이 어떤지 튜터님과 상의하면서 속도를 맞춰 갔으면 좋겠다. 그래도 못알아들었던 거는 다음에 갔을 때 알아들을 수 있도록 숙제는 스스로 찾아서 해야한다.
9. 능동적으로 숙제 만들기 : 못알아듣는 거 진짜 많다...실력이 0에서 빨리 느는 수강생분들 또는 이미 실력이 있으신 수강생분들이랑 친해져서 공부팁을 자기것으로 만들면 좋겠다. 공식 과제 외에도 부족한 점은 숙제로 만들어서 계속 채워나가야한다. 이미 실력차이가 있어서 안 하면 너무 수준이 벌어진다..ㅠㅠ
10. Chat GPT가 능사가 아니다. : Chat GPT가 초기에는 상당부분 코드를 도와줄 수는 있는데 페이지가 많아질수록, 로직이 좀만 복잡해져도 정신 못차린다...문법을 꼭 공부해서 최소한 어디에서 얘가 잘못된 정보를 주고 있는지 정도는 알아채야 한다..나는 돈 주고 써봤는데도 페이지가 많아지니까 코드를 빼먹고 준다거나 할 때가 있었다. 쓰기 나름이니까 활용을 잘 하는 것도 중요!
11. 문제를 바로 풀어주는 튜터님께 익숙해지지 말자. : 튜터님이 풀어준 건 내가 푼게 아니다. 이건 뭐..당시에는 좋을 수 있지만 장기적으로 봤을 때 튜터님과는 언젠간 헤어지고 혼자 해봐야하는 거기 때문에 당연하다.
12. 팀과제 할 때 자기 파트가 끝나면 다른 사람들 파트도 연습삼아 해보길 : 나는 겁이 많아서 제 시간에 못하게 되면 팀원에게 피해를 줄까봐 항상 작은 파트를 받아서 겨우 해냈었다. 그런데 다른 팀원들의 얘기를 들어보니 자기파트가 아님에도
13. 매니저님과 함께 자기 페이스를 찾아라 : 실력 차이가 나면 따라가지 못한다고 너무 스트레스 받아서 그만두지 말고 더 열심히 해보자. 그럼 점차 실력이 그마나 나아져서 스트레스 덜 받게 됨. 그래야 비로소 해보고 싶은 것들을 제대로 시도해볼 수 있음. 그래도 너무 투머치다!! 그럼 자신을 너무 닦달하지 말고 조금 쉬어라..그만두지 말고 조금이라도 숨을 쉴 수 있는 공간을 매니저님과 꼭 상의해봐라. 나는 너무 너무 힘들었따,,,너무 못하니카,,그리고 배우는 것도 느리니까,, 근데 혼자 고민할 필요 없당. 다 비슷비슷하게 생각한다.

시뮬레이터 안 돌리고 빌드 컴파일 하는 방법

bluewiper — Tue, 23 Jul 2024 15:11:10 +0900

cmd + B

테이블뷰 기본

bluewiper — Fri, 19 Jul 2024 09:27:24 +0900

import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    var data: [String] = ["Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape", "Honeydew"]
    
    let myTableView: UITableView = {
        let tableView = UITableView()
        tableView.backgroundColor = .green
        tableView.translatesAutoresizingMaskIntoConstraints = false
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "Cell")
        return tableView
    }()
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        myTableView.dataSource = self
        myTableView.delegate = self
        
        view.addSubview(myTableView)
        
        configureTableView()
                
    }
    
    func configureTableView() {
        
        NSLayoutConstraint.activate([
            myTableView.topAnchor.constraint(equalTo: view.topAnchor),
            myTableView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
            myTableView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            myTableView.trailingAnchor.constraint(equalTo: view.trailingAnchor)
        ])
    }
    
    // MARK: - UITableViewDataSource Methods
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        
        data.count
    }
    
    // MARK: - UITableViewDelegate Methods
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
        cell.textLabel?.text = data[indexPath.row]

        return cell
    }
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
       
        60
    }
    
    func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
        if editingStyle == .delete {
            // 데이터 소스 항목에서 삭제
            data.remove(at: indexPath.row)
            // 테이블 뷰 행에서 삭제
            tableView.deleteRows(at: [indexPath], with: .fade)
        }
    }
}

테이블뷰를 구성하는 닻으로 기본적으로 이정도는 갖춰야 구현 되는 조건

1. UI 인스턴스 생성 및 반환

테이블뷰 인스턴스를 생성해야 이후에 사용할 수 있습니다.

private let tableView: UITableView = {
    let tableView = UITableView()
    return tableView
}()

2. 오토레이아웃 비활성화 [UI요소].translatesAutoresizingMaskIntoConstraints = false

오토레이아웃을 사용할 것이므로 자동으로 생성되는 제약을 비활성화해야 합니다.

tableView.translatesAutoresizingMaskIntoConstraints = false

3. 서브뷰에 추가 view.addsubView

테이블뷰를 뷰 계층 구조에 추가해야 화면에 보입니다.

view.addSubview(tableView)

4. register

테이블뷰에서 사용할 셀을 등록해야 테이블뷰가 셀을 재사용할 수 있습니다.

tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")

5. delegate, dataSource 생성

테이블뷰의 델리게이트와 데이터 소스를 설정해야 테이블뷰가 데이터를 표시하고 사용자 상호작용을 처리할 수 있습니다.

tableView.dataSource = self
tableView.delegate = self

6. numberOfRowsInSection, cellForRowAt

UITableViewDataSource 메서드를 구현해야 테이블뷰가 몇 개의 셀을 표시할지와 각 셀의 내용을 결정할 수 있습니다.

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return data.count
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
    cell.textLabel?.text = data[indexPath.row]
    return cell
}

베이직반 실습

bluewiper — Mon, 15 Jul 2024 19:14:47 +0900

UI section 1

UIsection 1

import UIKit

class ViewController: UIViewController {
    
    // UI 요소
    private let titleLabel: UILabel = {
        let label = UILabel()
        label.text = "Select your coffee:"
        label.font = .boldSystemFont(ofSize: 25)
        label.textColor = .black
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    private let segmentedControl: UISegmentedControl = {
        let segmentedControl = UISegmentedControl(items: ["Espresso - $3", "Latte - $4", "Cappuccino - $5"])
        segmentedControl.selectedSegmentIndex = 0
        segmentedControl.translatesAutoresizingMaskIntoConstraints = false
        return segmentedControl
    }()
    
    private let quantityLabel: UILabel = {
        let label = UILabel()
        label.text = "Enter quantity:"
        label.font = .boldSystemFont(ofSize: 25)
        label.textColor = .black
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    private let textField: UITextField = {
        let textField = UITextField()
        textField.placeholder = "수량을 입력해주세요."
        textField.borderStyle = .roundedRect
        textField.keyboardType = .numberPad
        textField.translatesAutoresizingMaskIntoConstraints = false
        return textField
    }()
    
    private lazy var orderButton: UIButton = {
        let button = UIButton()
        button.setTitle("order", for: .normal)
        button.setTitleColor(.systemBlue, for: .normal)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
        return button
    }()
    
    private let orderedLabel: UILabel = {
        let label = UILabel()
        label.text = "You orderd 3 Espresso(s). Total: $9" // 추후 바꾸기
        label.textAlignment = .center
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = .white
        
        // 뷰 생성
        [
            titleLabel,
            segmentedControl,
            quantityLabel,
            textField,
            orderButton,
            orderedLabel
        ].forEach { view.addSubview($0) }
        
        
        configureUI()
        
    }
    private func configureUI() {
        
        
        
        // 제약 조건
        NSLayoutConstraint.activate([
            
            // 타이틀 라벨 레이아웃
            titleLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            titleLabel.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 40),
            
            // 세그먼트 컨트롤 레이아웃
            segmentedControl.heightAnchor.constraint(equalToConstant: 40),
            segmentedControl.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 25),
            segmentedControl.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            
            // 수량 라벨 레이아웃
            quantityLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            quantityLabel.topAnchor.constraint(equalTo: segmentedControl.bottomAnchor, constant: 40),
            
            // 주문 수량 텍스트 필드 레이아웃
            textField.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            textField.topAnchor.constraint(equalTo: quantityLabel.bottomAnchor, constant: 20),
            textField.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            
            // 주문 버튼 레이아웃
            orderButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            orderButton.topAnchor.constraint(equalTo: textField.bottomAnchor, constant: 50),
            
            // 주문 결과 라벨 레이아웃
            orderedLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            orderedLabel.topAnchor.constraint(equalTo: orderButton.bottomAnchor, constant: 50),
            orderedLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20)
        ])
        
        
    }
    
    // order button을 눌렀을 때 액션과 이벤트를 담당하는 메서드
    // 메뉴당 단가, 선택한 메뉴, 총 금액(메뉴당 단가 * 입력한 수량)
    @objc
    private func buttonTapped() {
        
        // 각 메뉴의 단가 배열
        let prices = [3, 4, 5]
        
        
        // 선택된 세그먼트의 인덱스를 가져와서 해당하는 메뉴의 단가를 가져옴
        let selectedMenuIndex = segmentedControl.selectedSegmentIndex
        
        // 선택된 커피 : 옵셔널 체이닝이나 널 병합 연산자라고 불리며, 옵셔널 값이 nil일 경우 대체할 기본 값을 설정
        let selectedMenu = segmentedControl.titleForSegment(at: selectedMenuIndex)?.components(separatedBy: " - ").first ?? "Unknown"
        
        let menuPrice = prices[selectedMenuIndex]
        
        // 텍스트 필드에서 입력된 수량 가져오기
        guard let quantityText = textField.text, let quantity = Int(quantityText) else {
            return
        }
        
        // totalPrice 구하기
        let totalPrice = menuPrice * quantity

        
        // buttonTapped 후 이벤트로 결과값 문구 출력
        
        // 디버깅용
        print("You ordered \(quantity) \(selectedMenu)(s). Total Price: $\(totalPrice).")
        
        // 화면에 띄우기
        orderedLabel.text = "You ordered \(quantity) \(selectedMenu)(s). Total Price: $\(totalPrice)."
        
    }
    
}

튜터님

class ViewController: UIViewController {
  // UI 요소 선언
  let coffeeLabel: UILabel = {
    let label = UILabel()
    label.translatesAutoresizingMaskIntoConstraints = false
    label.text = "Select your coffee:"
    label.font = UIFont.systemFont(ofSize: 18, weight: .bold)
    label.textAlignment = .center
    return label
  }()
  let coffeeSegmentedControl: UISegmentedControl = {
    let items = ["Espresso - $3", "Latte - $4", "Cappuccino - $5"]
    let segmentedControl = UISegmentedControl(items: items)
    segmentedControl.translatesAutoresizingMaskIntoConstraints = false
    segmentedControl.selectedSegmentIndex = 0
    return segmentedControl
  }()
  let quantityLabel: UILabel = {
    let label = UILabel()
    label.translatesAutoresizingMaskIntoConstraints = false
    label.text = "Enter quantity:"
    label.font = UIFont.systemFont(ofSize: 18, weight: .bold)
    label.textAlignment = .center
    return label
  }()
  let quantityTextField: UITextField = {
    let textField = UITextField()
    textField.translatesAutoresizingMaskIntoConstraints = false
    textField.placeholder = "Quantity"
    textField.borderStyle = .roundedRect
    textField.keyboardType = .numberPad
    return textField
  }()
  let orderButton: UIButton = {
    let button = UIButton(type: .system)
    button.translatesAutoresizingMaskIntoConstraints = false
    button.setTitle("Order", for: .normal)
    button.addTarget(self, action: #selector(orderButtonTapped), for: .touchUpInside)
    return button
  }()
  let resultLabel: UILabel = {
    let label = UILabel()
    label.translatesAutoresizingMaskIntoConstraints = false
    label.text = "Your order will appear here."
    label.textAlignment = .center
    label.numberOfLines = 0
    return label
  }()
  override func viewDidLoad() {
    super.viewDidLoad()
    // 뷰 설정
    view.backgroundColor = .white
    // 서브 뷰 추가
    view.addSubview(coffeeLabel)
    view.addSubview(coffeeSegmentedControl)
    view.addSubview(quantityLabel)
    view.addSubview(quantityTextField)
    view.addSubview(orderButton)
    view.addSubview(resultLabel)
    // 레이아웃 설정
    setupLayout()
  }
  func setupLayout() {
    NSLayoutConstraint.activate([
      // 커피 레이블 레이아웃
      coffeeLabel.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 40),
      coffeeLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
      // 세그먼트 컨트롤 레이아웃
      coffeeSegmentedControl.topAnchor.constraint(equalTo: coffeeLabel.bottomAnchor, constant: 20),
      coffeeSegmentedControl.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
      coffeeSegmentedControl.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
      // 수량 레이블 레이아웃
      quantityLabel.topAnchor.constraint(equalTo: coffeeSegmentedControl.bottomAnchor, constant: 20),
      quantityLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
      // 수량 텍스트 필드 레이아웃
      quantityTextField.topAnchor.constraint(equalTo: quantityLabel.bottomAnchor, constant: 10),
      quantityTextField.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
      quantityTextField.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
      // 주문 버튼 레이아웃
      orderButton.topAnchor.constraint(equalTo: quantityTextField.bottomAnchor, constant: 20),
      orderButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
      // 결과 레이블 레이아웃
      resultLabel.topAnchor.constraint(equalTo: orderButton.bottomAnchor, constant: 20),
      resultLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
      resultLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20)
    ])
  }
  @objc func orderButtonTapped() {
    let coffeePrices = [3, 4, 5]
    let selectedCoffeeIndex = coffeeSegmentedControl.selectedSegmentIndex
    let selectedCoffee = coffeeSegmentedControl.titleForSegment(at: selectedCoffeeIndex)?.components(separatedBy: " - ").first ?? "Unknown"
    let pricePerCoffee = coffeePrices[selectedCoffeeIndex]
    guard let quantityText = quantityTextField.text, let quantity = Int(quantityText), quantity > 0 else {
      resultLabel.text = "Please enter a valid quantity."
      return
    }
    let totalPrice = pricePerCoffee * quantity
    resultLabel.text = "You ordered \(quantity) \(selectedCoffee)(s). Total: $\(totalPrice)."
  }
}

UIsection 2까지 구현

UI section 2

//
//  ViewController.swift
//  basicUIPractice
//
//  Created by 단예진 on 7/9/24.
//


import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    // UI 요소
    private let titleLabel: UILabel = {
        let label = UILabel()
        label.text = "Select your coffee:"
        label.font = .boldSystemFont(ofSize: 25)
        label.textColor = .black
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    private let segmentedControl: UISegmentedControl = {
        let segmentedControl = UISegmentedControl(items: ["Espresso - $3", "Latte - $4", "Cappuccino - $5"])
        segmentedControl.selectedSegmentIndex = 0
        segmentedControl.translatesAutoresizingMaskIntoConstraints = false
        return segmentedControl
    }()
    
    private let quantityLabel: UILabel = {
        let label = UILabel()
        label.text = "Enter quantity:"
        label.font = .boldSystemFont(ofSize: 25)
        label.textColor = .black
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    private let textField: UITextField = {
        let textField = UITextField()
        textField.placeholder = "수량을 입력해주세요."
        textField.borderStyle = .roundedRect
        textField.keyboardType = .numberPad
        textField.translatesAutoresizingMaskIntoConstraints = false
        return textField
    }()
    
    private lazy var orderButton: UIButton = {
        let button = UIButton()
        button.setTitle("order", for: .normal)
        button.setTitleColor(.systemBlue, for: .normal)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
        return button
    }()
    
    //    private let orderedLabel: UILabel = {
    //        let label = UILabel()
    //        label.text = "You orderd 3 Espresso(s). Total: $9" // 추후 바꾸기
    //        label.textAlignment = .center
    //        label.translatesAutoresizingMaskIntoConstraints = false
    //        return label
    //    }()
    
    private let tableView: UITableView = {
        let tableView = UITableView()
        tableView.translatesAutoresizingMaskIntoConstraints = false
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "orderCell")
        return tableView
    }()
    
    private let totalLabel: UILabel = {
        let label = UILabel()
        label.text = "Total: $0"
        label.textColor = .black
        label.textAlignment = .center
        label.font = .boldSystemFont(ofSize: 30)
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    private var orders: [(coffee: String, quantity: Int, price: Int)] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = .white
        
        // 테이블뷰 델리게이트 및 데이터소스 설정
        tableView.delegate = self
        tableView.dataSource = self
        
        // 뷰 생성
        [
            titleLabel,
            segmentedControl,
            quantityLabel,
            textField,
            orderButton,
            //            orderedLabel,
            tableView,
            totalLabel
        ].forEach { view.addSubview($0) }
        
        
        configureUI()
        
    }
    private func configureUI() {
        
        
        
        NSLayoutConstraint.activate([
                // titleLabel 레이아웃
                titleLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
                titleLabel.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 40),
                
                // segmentedControl 레이아웃
                segmentedControl.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 20),
                segmentedControl.centerXAnchor.constraint(equalTo: view.centerXAnchor),
                segmentedControl.widthAnchor.constraint(equalToConstant: 300),
                
                // quantityLabel 레이아웃
                quantityLabel.topAnchor.constraint(equalTo: segmentedControl.bottomAnchor, constant: 40),
                quantityLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
                
                // textField 레이아웃
                textField.topAnchor.constraint(equalTo: quantityLabel.bottomAnchor, constant: 20),
                textField.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
                textField.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
                
                // orderButton 레이아웃
                orderButton.topAnchor.constraint(equalTo: textField.bottomAnchor, constant: 50),
                orderButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
                
                // tableView 레이아웃
                tableView.topAnchor.constraint(equalTo: orderButton.bottomAnchor, constant: 20),
                tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
                tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
                tableView.bottomAnchor.constraint(equalTo: totalLabel.topAnchor, constant: -20),
                
                // totalLabel 레이아웃
                totalLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
                totalLabel.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -20)
            ])
        
        
    }
    
    // order button을 눌렀을 때 액션과 이벤트를 담당하는 메서드
    // 메뉴당 단가, 선택한 메뉴, 총 금액(메뉴당 단가 * 입력한 수량)
    @objc
    private func buttonTapped() {
        
        guard let quantityText = textField.text, let quantity = Int(quantityText) else {
            print("수량이 올바르게 입력되지 않았습니다.")
            return
        }
        
        
        
        // 각 메뉴의 단가 배열
        let prices = [3, 4, 5]
        
        
        // 선택된 세그먼트의 인덱스를 가져와서 해당하는 메뉴의 단가를 가져옴
        let selectedMenuIndex = segmentedControl.selectedSegmentIndex
        
        // 선택된 커피 : 옵셔널 체이닝이나 널 병합 연산자라고 불리며, 옵셔널 값이 nil일 경우 대체할 기본 값을 설정
        let selectedMenu = segmentedControl.titleForSegment(at: selectedMenuIndex)?.components(separatedBy: " - ").first ?? "Unknown"
        
        let menuPrice = prices[selectedMenuIndex]
        
        // 텍스트 필드에서 입력된 수량 가져오기
        guard let quantityText = textField.text, let quantity = Int(quantityText) else {
            return
        }
        
        // totalPrice 구하기
        let totalPrice = menuPrice * quantity
        
        // 주문 내역에 추가
        let order = (coffee: selectedMenu, quantity: quantity, price: totalPrice)
        orders.append(order)
        
        // buttonTapped 후 이벤트로 결과값 문구 출력
        
        // 디버깅용
        print("You ordered \(quantity) \(selectedMenu)(s). Total Price: $\(totalPrice).")
        
        // 화면에 띄우기
        //        orderedLabel.text = "You ordered \(quantity) \(selectedMenu)(s). Total Price: $\(totalPrice)."
        
        // 테이블뷰 데이터 리로드 및 총금액 업데이트
        tableView.reloadData()
        updateTotalLabel()
        
    }
    
    func updateTotalLabel() {
        let totalAmount = orders.reduce(0) { $0 + $1.price }
        totalLabel.text = "Total: $\(totalAmount)"
    }
    
    // 테이블뷰 데이터 소스 메서드
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return orders.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "orderCell", for: indexPath)
        let order = orders[indexPath.row]
        cell.textLabel?.text = "\(order.quantity) x \(order.coffee) - $\(order.price)"
        return cell
    }
}

튜터님

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
   
  // UI 요소 선언
  let coffeeLabel: UILabel = {
    let label = UILabel()
    label.translatesAutoresizingMaskIntoConstraints = false
    label.text = "Select your coffee:"
    label.font = UIFont.systemFont(ofSize: 18, weight: .bold)
    label.textAlignment = .center
    return label
  }()
   
  let coffeeSegmentedControl: UISegmentedControl = {
    let items = ["Espresso - $3", "Latte - $4", "Cappuccino - $5"]
    let segmentedControl = UISegmentedControl(items: items)
    segmentedControl.translatesAutoresizingMaskIntoConstraints = false
    segmentedControl.selectedSegmentIndex = 0
    return segmentedControl
  }()
   
  let quantityLabel: UILabel = {
    let label = UILabel()
    label.translatesAutoresizingMaskIntoConstraints = false
    label.text = "Enter quantity:"
    label.font = UIFont.systemFont(ofSize: 18, weight: .bold)
    label.textAlignment = .center
    return label
  }()
   
  let quantityTextField: UITextField = {
    let textField = UITextField()
    textField.translatesAutoresizingMaskIntoConstraints = false
    textField.placeholder = "Quantity"
    textField.borderStyle = .roundedRect
    textField.keyboardType = .numberPad
    return textField
  }()
   
  let orderButton: UIButton = {
    let button = UIButton(type: .system)
    button.translatesAutoresizingMaskIntoConstraints = false
    button.setTitle("Order", for: .normal)
    button.addTarget(self, action: #selector(orderButtonTapped), for: .touchUpInside)
    return button
  }()
   
  let tableView: UITableView = {
    let tableView = UITableView()
    tableView.translatesAutoresizingMaskIntoConstraints = false
    tableView.register(UITableViewCell.self, forCellReuseIdentifier: "orderCell")
    return tableView
  }()
   
  let totalLabel: UILabel = {
    let label = UILabel()
    label.translatesAutoresizingMaskIntoConstraints = false
    label.text = "Total: $0"
    label.font = UIFont.systemFont(ofSize: 18, weight: .bold)
    label.textAlignment = .center
    return label
  }()
   
  var orders: [(coffee: String, quantity: Int, price: Int)] = []
   
  override func viewDidLoad() {
    super.viewDidLoad()
     
    // 뷰 설정
    view.backgroundColor = .white
     
    // 테이블 뷰 델리게이트 및 데이터 소스 설정
    tableView.delegate = self
    tableView.dataSource = self
     
    // 서브 뷰 추가
    view.addSubview(coffeeLabel)
    view.addSubview(coffeeSegmentedControl)
    view.addSubview(quantityLabel)
    view.addSubview(quantityTextField)
    view.addSubview(orderButton)
    view.addSubview(tableView)
    view.addSubview(totalLabel)
     
    // 레이아웃 설정
    setupLayout()
  }
   
  func setupLayout() {
    NSLayoutConstraint.activate([
      // 커피 레이블 레이아웃
      coffeeLabel.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20),
      coffeeLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
       
      // 세그먼트 컨트롤 레이아웃
      coffeeSegmentedControl.topAnchor.constraint(equalTo: coffeeLabel.bottomAnchor, constant: 10),
      coffeeSegmentedControl.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
      coffeeSegmentedControl.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
       
      // 수량 레이블 레이아웃
      quantityLabel.topAnchor.constraint(equalTo: coffeeSegmentedControl.bottomAnchor, constant: 20),
      quantityLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
       
      // 수량 텍스트 필드 레이아웃
      quantityTextField.topAnchor.constraint(equalTo: quantityLabel.bottomAnchor, constant: 10),
      quantityTextField.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
      quantityTextField.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
       
      // 주문 버튼 레이아웃
      orderButton.topAnchor.constraint(equalTo: quantityTextField.bottomAnchor, constant: 20),
      orderButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
       
      // 테이블 뷰 레이아웃
      tableView.topAnchor.constraint(equalTo: orderButton.bottomAnchor, constant: 20),
      tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
      tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
      tableView.bottomAnchor.constraint(equalTo: totalLabel.topAnchor, constant: -10),
       
      // 총 금액 레이블 레이아웃
      totalLabel.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -20),
      totalLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor)
    ])
  }
   
  @objc func orderButtonTapped() {
    let coffeePrices = [3, 4, 5]
    let selectedCoffeeIndex = coffeeSegmentedControl.selectedSegmentIndex
    let selectedCoffee = coffeeSegmentedControl.titleForSegment(at: selectedCoffeeIndex)?.components(separatedBy: " - ").first ?? "Unknown"
    let pricePerCoffee = coffeePrices[selectedCoffeeIndex]
     
    guard let quantityText = quantityTextField.text, let quantity = Int(quantityText), quantity > 0 else {
      showAlert(message: "Please enter a valid quantity.")
      return
    }
     
    let totalPrice = pricePerCoffee * quantity
    orders.append((coffee: selectedCoffee, quantity: quantity, price: totalPrice))
     
    tableView.reloadData()
    updateTotalLabel()
  }
   
  func showAlert(message: String) {
    let alert = UIAlertController(title: "Error", message: message, preferredStyle: .alert)
    alert.addAction(UIAlertAction(title: "OK", style: .default, handler: nil))
    present(alert, animated: true, completion: nil)
  }
   
  func updateTotalLabel() {
    let totalAmount = orders.reduce(0) { $0 + $1.price }
    totalLabel.text = "Total: $\(totalAmount)"
  }
   
  // 테이블 뷰 데이터 소스 메서드
  func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return orders.count
  }
   
  func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "orderCell", for: indexPath)
    let order = orders[indexPath.row]
    cell.textLabel?.text = "\(order.quantity) x \(order.coffee) - $\(order.price)"
    return cell
  }
   
  // 테이블 뷰 델리게이트 메서드
  func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    tableView.deselectRow(at: indexPath, animated: true)
  }
}

날씨앱만들기 (4) 5일간의 날씨데이터로 구성된 테이블뷰

bluewiper — Mon, 15 Jul 2024 17:28:06 +0900

(이전 게시물)

이제는 날씨 이미지 아래에 들어갈 5일간의 날씨데이터로 구성된 테이블뷰에 대해 작업해줘야 한다.

이번에 사용할 API는 openWeather에서 forecastWeather API이다.

기존에 프로퍼티들을 등록한 곳에 tableView도 하나 만들어준다.

ViewController.swift

    //5일간의 날씨데이터를 담을 테이블뷰
    private lazy var tableView: UITableView = {
        let tableView = UITableView()
        tableView.backgroundColor = .black
        // delegate: "대리자, 대신 수행 해주는 사람", Table View의 여러가지 속성 세팅을 이 View Controller에서 대신 세팅하는 코드를 작성해주겠다.
        tableView.delegate = self
        // dateSource: 테이블뷰 안에 집어넣을 데이터들, 이 View Controller에서 세팅해주겠다.
        tableView.dataSource = self
    }()

tableView는 delegate와 dataSource를 세팅해줘야 온전히 구현할 수 있다.

처음에는 Private let으로 작성했지만 오류가 난다. 이유는, 위 코드는 UI 초기화 설정단계이기 때문에 ViewController가 완성되지 않았기 때문이라고 한다. 그래서 private lazy var로 작성해준다.

위까지 작성하게 되면 tableView delegate 세팅하지 않았다는 오류 메시지가 뜬다.

View Controller class 밖에서 extension으로 View Controller가 TableViewDelegate를 만족할 수 있도록 코드를 작성해줘야 한다.

extension ViewController: UITableViewDelegate {
    // 테이블뷰 셀 높이 크기 지정
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        40
    }
}

TableViewDataSource도 마찬가지로 코드를 작성해줘야 한다.

extension ViewController: UITableViewDataSource {
    // 테이블 뷰의 indexPath마다 테이블 뷰 셀을 지정
    // indextPath는 테이블뷰의 행과 섹션을 의미
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: TableViewCell.id) as? TableViewCell else {
            return UITableViewCell()
        }
        cell.configureCell(forecastWeather: dataSource[indexPath.row])
        return cell
        }

    // 테이블 뷰 섹션에 행이 몇 개 들어가는가. 여기서 섹션은 없으니 총 행 개수만 입력하면 된다.
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        dataSource.count
    }
}

UITableViewDataSource 안에는 반드시

cellForRowAt과 NumberOfRowsInSection메서드를 포함해야 한다. (주석 참고)

이제 TableViewCell로 가서 정의해준다.

TableViewCell.swift

import UIKit
import SnapKit

final class TableViewCell: UITableViewCell {
    
    static let id = "TableViewCell"
    
    private let dtTxtLabel: UILabel = {
        let label = UILabel()
        label.backgroundColor = .black
        label.textColor = .white
        return label
    }()
    
    private let tempLabel: UILabel = {
        let label = UILabel()
        label.backgroundColor = .black
        label.textColor = .white
        return label
    }()
    // Table View의 style과 id로 초기화할 때 사용하는 코드
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        configureUI()
    }
    // 인터페이스 빌더를 통해 셀을 초기화할 때 사용하는 코드
    // 여기서는 fatalError를 통해서 명시적으로 인터페이스 빌더로 초기화하지 않음을 나타냄
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func configureUI() {
        
        contentView.backgroundColor = .black
        
        [
            dtTxtLabel,
            tempLabel
        ].forEach { contentView.addSubview($0) }
        
        dtTxtLabel.snp.makeConstraints {
            $0.centerY.equalToSuperview()
            $0.leading.equalToSuperview().inset(20)
        }
        
        tempLabel.snp.makeConstraints {
            $0.centerY.equalToSuperview()
            $0.trailing.equalToSuperview().inset(20)
        }
    }
    
    public func configureCell(forecastWeather: ForecastWeather) {
        dtTxtLabel.text = "\(forecastWeather.dtTxt)"
        tempLabel.text = "\(forecastWeather.main.temp)°C"
    }

}

처음에는 configureUI()를 만들어 놓고 초기화 공간에서 호출하지 않아서 하얀 테이블뷰만 나왔었다.. ㅎㅎ

커스텀한 UI class를 생성할 때는 override init과 required init을 모두 써줘야 한다. (주석 참고)

이제 테이블뷰에 대한 UI는 작업이 어느정도 되었기 때문에

ForecastWeatherData에다가 서버에서 가져올 데이터 형식에 대해 정의해준다.

ForecastWeatherResult.swift

import Foundation


//Codable을 채택하는 구조체 생성
struct ForecastWeatherResult: Codable {
    let list: [ForecastWeather]
    
}

struct ForecastWeather: Codable {
    let main: WeatherMain
    let dtTxt: String
    
    enum CodingKeys: String, CodingKey {
        case main
        case dtTxt = "dt_txt"
    }
}

여기서도 마찬가지로 openWeather에서는 dtTxt에 대해 스네이크 표기법을 쓰고 있기 때문에 camel 형식을 쓰는 Swift에서 한번에 JSON Decoding이 안 되기 때문에 파싱이 되도록 enum과 case로 코드를 입력해준다.

currentWeather 때와 마찬가지로 fetchData메서드를 통해 서버데이터를 불러와준다.

ViewController.swift

// 서버에서 5일 간 날씨 데이터를 불러오는 메서드
    private func fetchForecastData() {
        var urlComponents = URLComponents(string: "https://api.openweathermap.org/data/2.5/forecast")
        urlComponents?.queryItems = self.urlQueryItems
        
        guard let url = urlComponents?.url else {
            print("잘못된 URL")
            return
        }
        
        fetchData(url: url) { [weak self] (result: ForecastWeatherResult?) in
            guard let self, let result else { return }
            
            // 콘솔에다가 데이터 잘 불러왔는지 찍어보기
            for forecastWeather in result.list {
                print("\(forecastWeather.main)\n\(forecastWeather.dtTxt)\n\n")
            }
            DispatchQueue.main.async {
                self.dataSource = result.list
                self.tableView.reloadData() // reloadData()를 해야 반영 됨
            }  
        }
    }

마찬가지로 url을 불러올 때 쿼리 이전까지 불러온다. 쿼리아이템은 위에서 선언해준 것을 재활용한다. (url 바로 뒤 코드 참고)

위 코드를 보면 콘솔에다가 데이터를 잘 불러왔는지 확인할 수 있도록 DataSource를 선언해준 것을 불러온다.

아래는 DataSource 선언해준 코드이다.

ViewController.swift

    //데이터소스 타입은 항상 리스트
    private var dataSource = [ForecastWeather]()

작업해준 테이블뷰가 보일 수 있도록

뷰생성을 해주고, 제약조건을 마무리한다.

테이블뷰의 뷰생성과, 제약조건이 포함된 configureUI 메서드

ViewController.swift

private func configureUI() {
        view.backgroundColor = .black
        
        //각 프로퍼티 뷰 생성
        [
            titleLabel,
            tempLabel,
            tempStackView,
            imageView,
            tableView
        ].forEach { view.addSubview($0) }
        
        //tempStackView에 들어갈 최저기온과 최고기온 뷰 추가
        [
            tempMinLabel,
            tempMaxLabel
        ].forEach { tempStackView.addArrangedSubview($0) }
        
        //각 프로퍼티 제약 조건
        titleLabel.snp.makeConstraints {
            $0.centerX.equalToSuperview()
            $0.top.equalToSuperview().offset(120)
        }
        
        tempLabel.snp.makeConstraints {
            $0.centerX.equalToSuperview()
            $0.top.equalTo(titleLabel.snp.bottom).offset(10)
        }
        
        tempStackView.snp.makeConstraints {
            $0.centerX.equalToSuperview()
            $0.top.equalTo(tempLabel.snp.bottom).offset(10)
        }
        
        imageView.snp.makeConstraints {
            $0.centerX.equalToSuperview()
            $0.width.height.equalTo(160)
            $0.top.equalTo(tempStackView.snp.bottom).offset(20)
        }
        
        tableView.snp.makeConstraints {
            $0.top.equalTo(imageView.snp.bottom).offset(30)
            $0.leading.trailing.equalToSuperview().inset(20)
            $0.bottom.equalToSuperview().inset(50)
        }
        
    }
}

forecastWeather에 대해서도 fetchData 작업을 끝냈으니 viewDidLoad에서 호출해준다.

마지막으로 테이블뷰에 해줘야 하는 작업으로 테이블뷰에다 만들어준 테이블셀을 등록하는 것이 남았다.

ViewController.swift

    //5일간의 날씨데이터를 담을 테이블뷰
    private lazy var tableView: UITableView = {
        let tableView = UITableView()
        tableView.backgroundColor = .black
        // delegate: "대리자, 대신 수행 해주는 사람", Table View의 여러가지 속성 세팅을 이 View Controller에서 대신 세팅하는 코드를 작성해주겠다.
        tableView.delegate = self
        // dateSource: 테이블뷰 안에 집어넣을 데이터들, 이 View Controller에서 세팅해주겠다.
        tableView.dataSource = self
        // 테이블뷰에다가 테이블 뷰 셀 등록
        tableView.register(TableViewCell.self, forCellReuseIdentifier: TableViewCell.id)
        return tableView
    }()

실행하면 콘솔창에서도 데이터 로드가 확인되고, UI도 원하는대로 구성된 것을 확인할 수 있다.

날씨앱만들기 (3) UI 구성 2

bluewiper — Mon, 15 Jul 2024 16:45:37 +0900

서버데이터를 불러오는 메서드까지 작성했다면

날씨앱만들기 (2) UI 구성 1

일단은 UI 구성이 잘 되었는지 확인이 필요하니까 임의의 컬러, 텍스트값을 넣어서 UI 구성을 해준다. 더보기import UIKitimport SnapKitclass ViewController: UIViewController { //현재 위치한 도시를 알려주는 라

bluewiper.tistory.com

이제는 서버에서 현재 날씨 데이터를 불러오는 메서드를 작성해야 한다.

아래는 ViewController인데 여기서 함수만 일단 만들어주고, 미리 만들어 놓은 CurrentWeatherData 화면에서 작업을 이어간다.

    //서버에서 현재 날씨 데이터를 불러오는 메서드
    private func fetchCurrentWeatherData() {
        
    }

이전에 API 데이터를 불러왔을 때 어떤 형태로 받았는지 확인하고, 실질적으로 사용할 만한 데이터의 값을 추리고,

미리 만들어둔 CurrentWeatherResult에 해당 데이터 형태에 맞는 구조체를 만들어 준다.

아래는 API 사이트에서 제공하는 API response 예시이다.

이중에서 weather, main 부분만 쓸 예정이다.

CurrentWeatherResult.swift

import Foundation

//Codable을 채택하는 구조체 생성
struct CurrentWeatherResult: Codable {
    let weather: [Weather]
    let main: WeatherMain
}

struct Weather: Codable {
    let id: Int
    let main: String
    let description: String
    let icon: String
}

struct WeatherMain: Codable {
    let temp: Double
    let tempMin: Double
    let tempMax: Double
    
    enum CodingKeys: String, CodingKey {
        case temp
        case tempMin = "temp_min"
        case tempMax = "temp_max"
    }
    
}

다시 private func fetchCurrentWeatherData()로 돌아가서 작성을 이어간다.

    //서버에서 현재 날씨 데이터를 불러오는 메서드
    private func fetchCurrentWeatherData() {
       var urlComponents = URLComponents(string: "https://api.openweathermap.org/data/2.5/weather")
        }

맨 위에서 urlComponent를 살펴보면 query 이전까지의 url만 복사해서 불러왔다.

currentWeather, forecastWeather의 url 커리가 똑같이 사용되고 있어서 각각 적어주지 않고, 불러올 수 있도록 쿼리에 대한 프로퍼티를 생성해준다.

API call을 확인해서 필요한 값을 파악한다. 우리는 위치를 확인하기 위해 lat, lon이 필요하고, api key를 넣을 수 있도록

appid, 그리고 metric 시스템을 적용하기 위해 units를 쿼리아이템으로 만들어줄 것이다.

ViewController.swift

프로퍼티들이 모여있는 곳에 정의해줬다.

    //URL 쿼리아이템들(Current Weather, Forcast Weather 두가지이지만 똑같은 쿼리를 쓰는 URL을 쓰기 때문에 미리 정의
    //서울역 위경도
    private let urlQueryItems: [URLQueryItem] = [
        URLQueryItem(name: "lat", value: "37.5"),
        URLQueryItem(name: "lon", value: "126.9"),
    URLQueryItem(name: "appid", value: "dd36828ea83a2a55cfdfab1d88773876"),
    URLQueryItem(name: "units", value: "metric")
    ]

ViewController.swift

    //서버에서 현재 날씨 데이터를 불러오는 메서드
    private func fetchCurrentWeatherData() {
       var urlComponents = URLComponents(string: "https://api.openweathermap.org/data/2.5/weather")
        urlComponents?.queryItems = self.urlQueryItems
        
        guard let url = urlComponents?.url else {
            print("잘못된 url")
            return
        } 
        
        fetchData(url: url) { [weak self] (result: CurrentWeatherResult?) in
            guard let self, let result else { return }
            
            // 메인스레드에서 작동하도록 하는 메서드
            DispatchQueue.main.async {
                self.tempLabel.text = "\(Int(result.main.temp))°C" // 서버에서 가져온 현재 날씨 데이터가 불러와짐
                self.tempMinLabel.text = "최저: \(Int(result.main.tempMin))°C"
                self.tempMaxLabel.text = "최고: \(Int(result.main.tempMax))°C"
            }
            guard let imageUrl = URL(string: "https://openweathermap.org/img/wn/\(result.weather[0].icon)@2x.png") else {
                return
            }
            
            // image를 로드하는 작업은 백그라운드 쓰레드 작업
            if let data = try? Data(contentsOf: imageUrl) {
                if let image = UIImage(data: data) {
                    DispatchQueue.main.async {
                        self.imageView.image = image
                    }
                }
            }
        }
    }

* Notice

서버데이터를 불러오는 작업은 백그라운드 스레드에서 실행되는데

UI 작업은 메인 스레드에서 해야하기 때문에 DispatchQuene.main.async{} 코드 안에서 UI 작업을 해준다.

이렇게 작업해주면 기존에 tempLabel 등의 text를 임의로 지정해줬던 곳에 서버 데이터가 들어오게 된다.

예시

    //기온을 나타내는 라벨
    private let tempLabel: UILabel = {
        let label = UILabel()
        label.text = "20도"
        label.textColor = .white
        label.font = .boldSystemFont(ofSize: 50)
        return label
    }()

                DispatchQueue.main.async {
                    self.tempLabel.text = "\(Int(result.main.temp))°C"
                }

UI 코드가 완료 되면 viewDidLoad에서 호출해준다.

그럼 이 화면에서 날씨 이미지까지 서버데이터를 통해 구현된다.

Alamofire를 이용하여 데이터 불러오기

bluewiper — Mon, 15 Jul 2024 14:57:28 +0900

Alamofire는

Swift로 작성된 강력하고 사용하기 쉬운 네트워킹 라이브러리입니다. 주로 iOS 및 macOS 애플리케이션에서 HTTP 네트워킹 작업을 간단하고 직관적으로 수행할 수 있도록 도와줍니다. Alamofire는 다음과 같은 주요 기능을 제공합니다:

주요 기능

HTTP 요청 및 응답:
- GET, POST, PUT, DELETE 등의 다양한 HTTP 메서드를 쉽게 사용할 수 있습니다.
- JSON, plist, XML 등 다양한 형식의 응답 데이터를 자동으로 파싱할 수 있습니다.
네트워크 요청 설정:
- URL, 매개변수, 헤더 등을 쉽게 구성할 수 있습니다.
- URLSessionConfiguration을 사용하여 네트워크 세션을 커스터마이즈할 수 있습니다.
응답 처리:
- 데이터 응답, JSON 응답, String 응답 등 다양한 방식으로 응답을 처리할 수 있습니다.
- 응답 검증 및 에러 처리 기능을 제공합니다.
파일 업로드 및 다운로드:
- 멀티파트 파일 업로드, 백그라운드 다운로드 등 파일 전송 작업을 간편하게 수행할 수 있습니다.
- 다운로드 진행 상황을 추적할 수 있습니다.
네트워크 리치성(Richness):
- 네트워크 리치성을 판단하고, 연결 상태 변화를 감지할 수 있습니다.
- 네트워크 요청 재시도, 연결 시간 초과 등의 네트워크 관리 기능을 제공합니다.

Alamofire는 네트워킹 요청의 응답을 처리할 때 Result 타입을 사용하여 성공과 실패를 구분합니다.

switch 구문을 사용하여 성공과 실패 케이스를 처리하는 방식을 채택하여

.success(let data):
- 요청이 성공하면 response.result는 .success 상태가 되고, data에 응답 데이터가 포함됩니다.
- 여기서 data는 JSON 형식일 수 있으며, 이를 파싱하여 사용할 수 있습니다.
.failure(let error):
- 요청이 실패하면 response.result는 .failure 상태가 되고, error에 에러 정보가 포함됩니다.
- 네트워크 문제, 서버 응답 문제, 데이터 파싱 문제 등 다양한 이유로 요청이 실패할 수 있습니다.
- 여기서 error를 처리하여 사용자에게 오류 메시지를 표시하거나, 재시도 로직을 구현할 수 있습니다.

일반적으로 서버데이터를 불러오는 메서드

// 서버 데이터를 불러오는 메서드
    private func fetchData<T: Decodable>(url: URL, completion: @escaping (T?) -> Void) {
        let session = URLSession(configuration: .default)
        session.dataTask(with: URLRequest(url: url)) { data, response, error in
            guard let data, error == nil else {
                print("데이터 로드 실패")
                completion(nil)
                return
            }
            // http status code 성공 범위는 200번대
            let successRange = 200..<300
            //HTTPURLResponse 안에 http status code를 깔기 위해 타입 캐스팅을 해준다.
            if let response = response as? HTTPURLResponse, successRange.contains(response.statusCode) {
                // 받은 데이터가 JSON 형태일테니 Swift 형태로 디코딩해준다.
                guard let decodedData = try? JSONDecoder().decode(T.self, from: data) else {
                    print("JSON 디코딩 실패")
                    completion(nil)
                    return
                }
                // guard let decodedData가 성공했을 경우
                completion(decodedData)
                //성공 범위 안에 들지 못한다면(200번대)
            } else {
                print("응답 오류")
                completion(nil)
            }
        }.resume() // resume해야 작동한다.
    }

Alamofire를 이용해 서버데이터를 불러오는 메서드

    //Alamofire를 이용해 서버 데이터를 불러오는 메서드
    private func fetchDataByAlamofire<T: Decodable>(url: URL, completion: @escaping (Result<T, AFError>) -> Void) {
        AF.request(url).responseDecodable(of: T.self) { response in
            completion(response.result)
        }
    }

Alamofire이 설치가 되어 있지 않다면?

Alamofire를 위한 서버데이터 불러오기

프레임워크에 Alamofire를 불러온다.

검색했을 때 안 나오면,

깃허브에서 url을 따서 검색해준다.

Alamofire url : https://github.com/Alamofire/Alamofire

좌측과 중앙에서 Alamofire 프레임워크가 잘 다운로드 받아진 것을 확인할 수 있다.

ViewController에 import Alamofire를 해주고, 위 코드를 작성한다.

*** Snapkit 다운로드 받을 때도 문제였는데 Daynamic까지 깔았을 때

No such file or directory: '/Users/sweetyejin/Library/Developer/Xcode/DerivedData/weatherAppPractice-ewpajbpjzttwjthftdcfwnvoswst/Build/Products/Debug-iphonesimulator/PackageFrameworks/AlamofireDynamic.framework/AlamofireDynamic' 이런류의 오류가 뜨면 프레임워크에서 Dynamic만 삭제해주면 오류 없이 실행 된다. 다운로드 받는 방법이 여러가지가 있는데 위와 같은 방법으로 할 때 적용되는 방법이다.

private func fetchCurrentWeatherData()에서 fetchData를 받아올 때 Alamofire로 서버를 불러올 수 있도록 다음과 같이 코드를 써볼 수 있다.

기존

 //서버에서 현재 날씨 데이터를 불러오는 메서드
    private func fetchCurrentWeatherData() {
       var urlComponents = URLComponents(string: "https://api.openweathermap.org/data/2.5/weather")
        urlComponents?.queryItems = self.urlQueryItems
        
        guard let url = urlComponents?.url else {
            print("잘못된 url")
            return
        }
        fetchData(url: url) { [weak self] (result: CurrentWeatherResult?) in
            guard let self, let result else { return }
            
            // 메인스레드에서 작동하도록 하는 메서드
            DispatchQueue.main.async {
                self.tempLabel.text = "\(Int(result.main.temp))°C" // 서버에서 가져온 현재 날씨 데이터가 불러와짐
                self.tempMinLabel.text = "최저: \(Int(result.main.tempMin))°C"
                self.tempMaxLabel.text = "최고: \(Int(result.main.tempMax))°C"
            }
            guard let imageUrl = URL(string: "https://openweathermap.org/img/wn/\(result.weather[0].icon)@2x.png") else {
                return
            }
            
            // image를 로드하는 작업은 백그라운드 쓰레드 작업
            if let data = try? Data(contentsOf: imageUrl) {
                if let image = UIImage(data: data) {
                    DispatchQueue.main.async {
                        self.imageView.image = image
                    }
                }
            }
        }
    }

alamofire import 후

    //서버에서 현재 날씨 데이터를 불러오는 메서드
    private func fetchCurrentWeatherData() {
       var urlComponents = URLComponents(string: "https://api.openweathermap.org/data/2.5/weather")
        urlComponents?.queryItems = self.urlQueryItems
        
        guard let url = urlComponents?.url else {
            print("잘못된 url")
            return
        }
        
        fetchDataByAlamofire(url: url) { [weak self] (result: Result<CurrentWeatherResult, AFError>) in
            guard let self else { return }
            switch result {
            case .success(let result):
                DispatchQueue.main.async {
                    self.tempLabel.text = "\(Int(result.main.temp))°C"
                    self.tempMinLabel.text = "최저: \(Int(result.main.tempMin))°C"
                    self.tempMaxLabel.text = "최고: \(Int(result.main.tempMax))°C"
                }
                
                guard let imageUrl = URL(string: "https://openweathermap.org/img/wn/\(result.weather[0].icon)@2x.png") else {
                    return
                }
                // AlamoFire를 사용한 이미지 로드
                AF.request(imageUrl).responseData { response in
                    if let data = response.data, let image = UIImage(data: data) {
                        DispatchQueue.main.async {
                            self.imageView.image = image
                        }
                    }
                }
                
            case .failure(let error):
                print("데이터 로드 실패: \(error)")
            }
            
        }
 
    }

마찬가지로 private func fetchForecastWeatherData()에서 fetchData를 받아올 때 Alamofire로 서버를 불러올 수 있도록 다음과 같이 코드를 써볼 수 있다.

AlamoFire 적용 전

    // 서버에서 5일 간 날씨 데이터를 불러오는 메서드
    private func fetchForecastData() {
        var urlComponents = URLComponents(string: "https://api.openweathermap.org/data/2.5/forecast")
        urlComponents?.queryItems = self.urlQueryItems
        
        guard let url = urlComponents?.url else {
            print("잘못된 URL")
            return
        }
        fetchData(url: url) { [weak self] (result: ForecastWeatherResult?) in
            guard let self, let result else { return }
            
            // 콘솔에다가 데이터 잘 불러왔는지 찍어보기
            for forecastWeather in result.list {
                print("\(forecastWeather.main)\n\(forecastWeather.dtTxt)\n\n")
            }
            DispatchQueue.main.async {
                self.dataSource = result.list
                self.tableView.reloadData() // reloadData()를 해야 반영 됨
            }
        }
    }

적용 후

    // 서버에서 5일 간 날씨 데이터를 불러오는 메서드
    private func fetchForecastData() {
        var urlComponents = URLComponents(string: "https://api.openweathermap.org/data/2.5/forecast")
        urlComponents?.queryItems = self.urlQueryItems
        
        guard let url = urlComponents?.url else {
            print("잘못된 URL")
            return
        }
        
        fetchDataByAlamofire(url: url) { [weak self] (result: Result<ForecastWeatherResult, AFError>) in
            
            guard let self else { return }
            switch result {
            case .success(let result):
                DispatchQueue.main.async {
                    self.dataSource = result.list
                    self.tableView.reloadData()
                }
                
            case .failure(let error):
                print("데이터 로드 실패: \(error)")
            }
            
        }
   }

날씨앱만들기 (2) UI 구성 1

bluewiper — Thu, 11 Jul 2024 18:50:29 +0900

일단은 UI 구성이 잘 되었는지 확인이 필요하니까 임의의 컬러, 텍스트값을 넣어서 UI 구성을 해준다.

import UIKit
import SnapKit

class ViewController: UIViewController {

    //현재 위치한 도시를 알려주는 라벨
    private let titleLabel: UILabel = {
        let label = UILabel()
        label.text = "서울특별시"
        label.textColor = .white
        label.font = .boldSystemFont(ofSize: 30)
        return label
    }()
    
    //기온을 나타내는 라벨
    private let tempLabel: UILabel = {
        let label = UILabel()
        label.text = "20도"
        label.textColor = .white
        label.font = .boldSystemFont(ofSize: 50)
        return label
    }()
    
    //최저기온을 나타내는 라벨
    private let tempMinLabel: UILabel = {
        let label = UILabel()
        label.text = "20도"
        label.textColor = .white
        label.font = .boldSystemFont(ofSize: 20)
        return label
    }()
    
    //최고기온 나타내는 라벨
    private let tempMaxLabel: UILabel = {
        let label = UILabel()
        label.text = "20도"
        label.textColor = .white
        label.font = .boldSystemFont(ofSize: 20)
        return label
    }()
    
    //최저기온과 최고기온을 담는 Horizontal Stack View
    private let tempStackView: UIStackView = {
        let stackView = UIStackView()
        stackView.axis = .horizontal
        stackView.spacing = 20
        stackView.distribution = .fillEqually
        return stackView
    }()
    
    //날씨이미지를 담은 이미지뷰
    private let imageView: UIImageView = {
        let imageView = UIImageView()
        imageView.contentMode = .scaleAspectFit
        imageView.backgroundColor = .gray
        return imageView
    }()
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        configureUI()

    }

    private func configureUI() {
        view.backgroundColor = .black
        
        //각 프로퍼티 뷰 생성
        [
            titleLabel,
            tempLabel,
            tempStackView,
            imageView
        ].forEach { view.addSubview($0) }
        
        //tempStackView에 들어갈 최저기온과 최고기온 뷰 추가
        [
            tempMinLabel,
            tempMaxLabel
        ].forEach { tempStackView.addArrangedSubview($0) }
            
        //각 프로퍼티 제약 조건
        titleLabel.snp.makeConstraints {
            $0.centerX.equalToSuperview()
            $0.top.equalToSuperview().offset(120)
        }
        
        tempLabel.snp.makeConstraints {
            $0.centerX.equalToSuperview()
            $0.top.equalTo(titleLabel.snp.bottom).offset(10)
        }
        
        tempStackView.snp.makeConstraints {
            $0.centerX.equalToSuperview()
            $0.top.equalTo(tempLabel.snp.bottom).offset(10)
        }
        
        imageView.snp.makeConstraints {
            $0.centerX.equalToSuperview()
            $0.width.height.equalTo(160)
            $0.top.equalTo(tempStackView.snp.bottom).offset(20)
        }
    }
}

여기까지 구성한 뒤에 서버에서 불러온 데이터로 현재 위치, 현재 기온, 최저 및 최고 기온에 대해 적용해줄 수 있는 로직을 짜야 한다.

아래가 제네릭을 사용해서 url을 가져오는 가장 일반적인 메서드라고 한다.

우리가 하나의 url만 쓰는게 아니니까 하나의 타입을 지정하는 게 아니고, 재사용을 위해 일반적인 메서드를 쓰는 것 같다.

// 서버 데이터를 불러오는 메서드
    private func fetchData<T: Decodable>(url: URL, completion: @escaping (T?) -> Void) {
        let session = URLSession(configuration: .default)
        session.dataTask(with: URLRequest(url: url)) { data, response, error in
            guard let data, error == nil else {
                print("데이터 로드 실패")
                completion(nil)
                return
            }
            // http status code 성공 범위는 200번대
            let successRange = 200..<300
            //HTTPURLResponse 안에 http status code를 깔기 위해 타입 캐스팅을 해준다.
            if let response = response as? HTTPURLResponse, successRange.contains(response.statusCode) {
                // 받은 데이터가 JSON 형태일테니 Swift 형태로 디코딩해준다.
                guard let decodedData = try? JSONDecoder().decode(T.self, from: data) else {
                    print("JSON 디코딩 실패")
                    completion(nil)
                    return
                }
                // guard let decodedData가 성공했을 경우
                completion(decodedData)
                //성공 범위 안에 들지 못한다면(200번대)
            } else {
                print("응답 오류")
                completion(nil)
            }
        }.resume() // resume해야 작동한다.
    }

제네릭과 이스케이핑..들어본 것 같은데 ㅠㅠ

private func fetchData<T: Decodable>(url: URL, completion: @escaping (T?) -> Void) {
        let session = URLSession(configuration: .default)
        session.dataTask(with: URLRequest(url: url)) { data, response, error in
            guard let data, error == nil else {
                print("데이터 로드 실패")
                completion(nil)
                return

<T> 제네릭이라 부른다.

< T: decodable> ~ (T?) 이 줄에서 (T?)에는 어떤 타입도 들어올 수 있긴하나, 앞쪽에 어떤 T 타입이냐를 물었을 때 Decodable이라고 적어줬기 때문에 Decodable 타입만 준수한다면 어떤 타입이든 들어올 수 있다. 예를 들어 Int, Double, Codable을 채택하고 있는 구조체 등도 가능하다.

@escaping 클로저?

@escaping (T?) -> Void

보통의 코드는 함수 안에서 작성 됐을 때 함수가 끝이나면 함께 책임을 다하고 소멸한다. 하지만 escaping으로 선언한 클로저는

메서드가 끝나서 탈출하더라도, 언제든지 실행이 가능하다는 것을 의미한다.

날씨앱 만들기 (1) 초기 세팅

bluewiper — Thu, 11 Jul 2024 18:15:29 +0900

파일을 만들어준다.

코드베이스로 할 것이기 때문에 main은 지워준다.

저번에 코드베이스 main 지울 때랑 이번 강의에서 알려주는 방법이 다른 것 같다..? 그래서 일단은 다 기록으로 남기려고 한다.

1. 파일메인을 지우고 나면, info에 가서 Application Scene Manifest를 날려준다.

좌 : 날리기 전, 우 : 날린 후

2. SceneDelegate도 날려준다.

3. AppDelegate에서 관련 메서드 지운다.

3. 프로젝트 파일의 Build Setting에서 main을 필터링해서 삭제한다.

4. AppDelegate에 가서 window 생성

import UIKit

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?


    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        
        let window = UIWindow(frame: UIScreen.main.bounds)
        window.rootViewController = UINavigationController(rootViewController: ViewController())
        window.makeKeyAndVisible()
        self.window = window
        
        return true
    }
}

5. ViewController 가서 초기 세팅 잘 되었는지 브레이크 포인트 걸어놓고 실행해보기

초기세팅 완료!

날씨앱 만들기 open weather API 가져오기

bluewiper — Thu, 11 Jul 2024 15:49:42 +0900

OpenWeather - API

API doc을 들어가면 API 명세를 확인할 수 있다.

코드 작성에 앞서 내가 받게 될 데이터가 어떤 내용을 담고 있을지 알아보고 싶어졌다.

테스트로 Current weather data로 들어가보면,

쭉 내려가보면 API call 예시가 나온다.

위 url을 복사하고,

새창을 열어 붙여넣어주는데

{API key}에는

생성된 나의 API Key를 넣어준다.

끝.