어코모 :: 2021 하계 모각코 3회차 결과

3회차 7/21(수)
목표

📂 2회차 마무리 :: 샘플 프로젝트 - News App
	API로 받아온 데이터(JSON) 파싱
    1. 테이블 셀에 기사 제목 띄우기
    2. 뉴스 상세 내용에 대한 화면 만들기
    3. 기사 제목 셀 클릭👆 시 상세 내용에 대한 화면으로 이동
    - delegate 방식, segue 방식
📂 제작(1) :: 어플 초안 구상 및 구현

결과

📂 2회차 마무리 :: 샘플 프로젝트 - News App

1. 테이블 셀에 기사 제목 띄우기

api 이용 사이트 https://newsapi.org
- 하루 500회까지 무료 이용 가능

빨간색 박스 🟥 해당 url session에서 아무것도 건드리지않은 상태로 데이터를 print한 모습
초록색 박스 🟩 받은 데이터를 json 형태로 콘솔창에 print하도록 한 화면
	Json 데이터 내의 배열 중 값이 title인 원소✨가 있음
    인코딩이 필요한 것처럼 보이지만 일단 title이라는 값의 원소를 불러오도록 파싱

json은 보통 다음과 같은 형태 - 배열의 원소들이 json형태로 구성
    {
        [
            {"돈":"100"},
            {"돈":"1000"},
            {"돈":"10000"}
        ]
    }

< API로 불러온 news의 JSON 형태 >
articles에는 여러 기사들이 배열의 원소로 저장되어 있고, 한 원소에는 source, author, title, description 등의 값을 가진 데이터가 저장되어 있음.
=> Json은 Dictionary

for문을 이용하여 기사의 수만큼 반복하는데, 배열의 enumerated() 함수를 이용해 배열의 수를 알수 있음. 원소 하나가 Dictionary<String, Any>로 적절한 형태를 취하고 있으면 해당 원소에 "title"이라는 값을 가진 데이터를 출력하도록 함.
➡️ Optional이라는 이상한 수식어가 붙었지만 제목이 성공적으로 출력되었다.

콘솔에 출력한 내용을 table view에 띄워주는건데, 기사 제목을 깨끗하게 가져오기위해 중간에 "title"의 데이터에 대한 변수를 따로 생성해준 후 타입 검사가 통과되면 셀의 레이블 텍스트로 입력해주었다.
...
if let title = r["title"] as? String
...

📂 2회차 마무리 :: 샘플 프로젝트 - News App

2. 뉴스 상세 내용에 대한 화면 만들기

root controller(초기 화면)으로 설정하는 법

새 화면(view controller)와 클래스 연결
1) 새 컨트롤러 생성 후 스토리보드의 적절하게 위치
2) 스토리보드 ID를 설정
3) 위에서 설정한 ID와 같은 이름의 swift 클래스 생성 후 클래스 기본 코드 구현
4) 해당 뷰 컨트롤러의 Custom Class 속성 내의 클래스 이름을 연결할 클래스로 설정

순서대로 image view(기사 사진이 들어갈 자리)에 대한 상세 제약 조건,
기사 내용이 들어갈 label의 상세 제약 조건,
위에서 설정한 label의 bottom alignment constraint에 디테일 설정.

각각의 요소들을 클래스와 연결하고, 기사내용이 첨부될 화면을 기본 구성.

📂 2회차 마무리 :: 샘플 프로젝트 - News App

3. 기사 제목 셀 클릭👆 시 상세 내용에 대한 화면으로 이동
    - delegate 방식, segue 방식

seque way - show 방법으로 스토리보드에서 먼저 설정. 해당 seque way의 identifier 설정

데이터를 클릭 이벤트 이후에 상세화면으로 전환하면서 받아오는 것이 아니라, 값을 모두 받은 다음에 화면을 전환하여 그 값(데이터, 즉 기사)를 띄우도록 한다. 뷰 컨트롤러간의 데이터 전달은 prepare함수에서 구현하고 이뤄진다. 
클릭 이벤트를 담은 함수와 prepare함수에 겹치는 코드가 있는데 따로 함수를 구현해서 쓰는 걸로 수정해봐도 좋을 것 같다. 

위에서 나온 기사 목록 중 하나를 클릭해보면 연결된 이미지와 기사에 대한 description을 상세하게 볼 수 있다. 제공되는 기사 상세 내용이 짧고 자체적으로 함축되어 있어서 조금 아쉽다

📂 제작(1) :: 어플 초안 구상 및 구현

다음 시간에 구상하도록 한다..! 

🔖 오늘 활동 마무리

API로 JSON형태의 데이터를 받아와, 파싱하여 테이블 뷰에 띄워보았다. 뷰 컨트롤러 간 데이터 전달을 위해 사용하는 prepare함수로 만들어보았고, 
화면 전환 방식에는 delegate, segue way 방식이 있는데 오늘은 segue 방식에 대해 알아보았다. segue는 데이터를 전달할 뷰끼리 참조하는 방식이고, delegate는 전혀 써보지않아서 잘 모르지만
여러 뷰가 아닌 하나의 뷰가 서브뷰를 지정해 데이터를 위임하는 방식이라고 한다.
다른 것보다 항상 느끼지만 스토리보드와 클래스를 연결하는 부분이 가장 실수가 많이 생기고 어려운 것 같다. 화면 전환하는 부분이 어려워서 내가 제작할 어플을 구상하는 것까지 하려고했는데 못했다! 다음 시간에 구상하며 시작할 예정이다. 직접 어플을 제작하는 과정은 시간이 걸릴 것 같아서 데이터베이스, 서버 부분에 대한 공부를 어떻게 할 지 다시 계획해볼 필요도 있을 것 같다.
늦은 업로드 죄송합니당 ,, 이번 모각코도 수고하셨습니다 ◡̈