BoreumiOS

[iOS] iTunes Search API

_보름 — Thu, 6 Jan 2022 16:48:31 +0900

iTunes Search API

iTunes Search API는 iTunes Store 및 Apple Books Store 내에서 콘텐츠를 검색할 수 있는 API입니다.
AppStore 구현을 하며 iTunes Search API를 사용하게 되어 학습 목적으로 글을 작성합니다.

검색

웹 사이트의 필드에서 콘텐츠를 검색하고 웹 사이트에 결과를 표시하려면 정규화된 URL 콘텐츠 요청을 iTunes Store로 전달하는 검색 필드를 생성하여야 합니다.

정규화된 URL의 형식은 다음과 같아야 합니다.

https://itunes.apple.com/search?parameterkeyvalue

여기서 parameterkeyvalue는 쿼리의 세부 정보를 나타내는 하나 이상의 매개 변수 키 및 값 쌍일 수 있습니다.

매개변수 키와 값 쌍을 구성하려면 각 매개변수 키를 = 및 값 문자열로 연결해야 합니다.

key1=value1

매개변수 키 및 값 쌍의 문자열을 생성하려면 &를 사용하여 각 쌍을 연결해야 합니다.

key1=value1&key2=value2&key3=value3

ParameterKey

콘텐츠를 검색하기 위하여 지정할 수 있는 매개변수 키와 값을 설명하겠습니다.

term

검색하려는 URL의 인코딩 된 텍스트 문자열입니다.
URL 인코딩은 공백을 +로 바꾸고 문자, 숫자, ., -, _, *를 제외한 모든 문자가 인코딩 됩니다.

country

검색하려는 스토어의 두 자리 국가 코드입니다.
검색은 지정된 국가에 대한 기본 스토어 정보를 사용합니다.

국가 코드 목록은 http://en.wikipedia.org/wiki/ ISO_3166-1_alpha-2에서 확인할 수 있습니다.

한국은 KR 이니까 country=KR로 지정해주면 되겠네요!

media

검색하려는 미디어 유형입니다.
movie, podcast, music, musicVideo, audiobook, shortFilm, tvShow, software, ebook, all을 값으로 입력할 수 있습니다.

앱스토어를 구현하기 위해서는 software가 필요하겠네요.

entity

지정된 미디어 유형과 관련하여 반환하려는 결과 유형입니다.
software의 값에는 software, iPadSoftware, macSoftware가 있습니다.

attribute

지정된 미디어 유형과 관련하여 스토어에서 검색하려는 속성입니다.
기본값은 지정된 미디어 유형과 관련된 모든 속성입니다.

software 유형에 대해 softwareDeveloper 속성을 사용할 수 있습니다.

all 유형에 대해선 languageTerm, releaseYearTerm, titleTerm, ratingIndex, keywordsTerm, descriptionTerm, authorTerm, mixTerm, ratingTerm 등의 속성을 사용할 수 있습니다.

callback

웹 사이트에 검색 결과를 반환할 때 사용할 자바스크립트 콜백 함수의 이름입니다.
교차 사이트 검색용으로 wsSearchCB 값을 사용할 수 있습니다.

limit

iTunes Store에서 반환할 검색 결과의 수를 제한합니다.
기본 값은 50이며 1에서 200의 값으로 제한할 수 있습니다.

lang

검색 결과를 반환할 때 사용할 언어를 5자리 코드명을 사용하여 지정합니다.
기본값은 en_us입니다.

version

검색에서 다시 수신하려는 검색 결과 키 버전입니다.
기본값은 2입니다.

explicit

검색 결과에 명시적 콘텐츠를 포함할지 여부를 나타내는 플래그입니다.
기본값은 Yes입니다.

검색 예시

다음은 특정 검색 요청에 대한 정규화된 URL의 예입니다.

모든 Jack Johnson 콘텐츠를 검색하는 URL은 다음과 같습니다.

https://itunes.apple.com/search?term=jack+johnson

모든 Jack Johnson 콘텐츠를 검색하고 처음 25개 항목만 반환하려면 URL은 다음과 같습니다.

https://itunes.apple.com/search?term=jack+johnson&limit=25

Jack Johnson 뮤직 비디오만 검색하려면 URL은 다음과 같습니다.

https://itunes.apple.com/search?term=jack+johnson&entity=musicVideo

모든 Jim Jones 콘텐츠를 검색하고 Canada iTunes Store의 결과만 반환하려면 URL은 다음과 같습니다.

https://itunes.apple.com/search?term=jim+jones&country=ca

조회 예시

iTunes ID, UPC/EAN, AMG(All Music Guide) ID를 기반으로 스토어에서 콘텐츠를 검색하기 위한 조회 요청을 생성할 수도 있습니다.
ID 기반 조회는 더 빠르고 오탐 결과가 더 적습니다.

다음은 특정 조회 요청에 대한 정규화된 URL의 예입니다.

ID로 Jack Johnson 조회

https://itunes.apple.com/lookup?id=909253

AMG 아티스트 ID로 Jack Johnson 조회

https://itunes.apple.com/lookup?amgArtistId=468749

AMG 아티스트 ID로 여러 아티스트 조회

https://itunes.apple.com/lookup?amgArtistId=468749,5723

Jack Johnson의 모든 앨범 조회

https://itunes.apple.com/lookup?id=909253&entity=album

UPC로 앨범 또는 비디오 조회

https://itunes.apple.com/lookup?upc=720642462928

13자리 ISBN으로 책 조회

https://itunes.apple.com/lookup?isbn=9780316069359

검색 결과

API는 검색 결과를 JSON 형식으로 반환합니다.

JSON은 객체와 배열 두 가지 구조를 기반으로 합니다.
객체는 {로 시작하여 }로 끝나는 이름/값 쌍의 정렬되지 않은 집합입니다.
각 이름은 ""로 묶이고 그 뒤에 :이 옵니다. 이름/값 쌍은 ,로 구분됩니다.
배열은 [로 시작하여 ]로 끝나는 정렬된 값 모음입니다. 값은 ,로 구분됩니다.

모든 JSON 결과는 UTF-8로 인코딩 됩니다.

이제 JSON 결과 키와 값을 설명하겠습니다.

wrapperType

검색 요청에서 반환된 개체의 이름입니다.
반환 값의 예시로는 track, collection, artistFor이 있습니다.

kind

검색 요청에 의해 반환된 콘텐츠의 종류입니다.
book, pdf, software-package 등과 같은 값이 반환됩니다.

artworkUrl100, artworkUrl60

반환된 미디어 유형과 관련된 아트웍의 URL로, 크기는 100x100 픽셀 또는 60x60픽셀입니다. 아트웍이 있는 경우에만 반환됩니다.

*viewURL

반환된 미디어 유형과 연결된 콘텐츠의 URL입니다.
URL을 클릭하여 iTunes Store에서 콘텐츠를 볼 수 있습니다.

iTunes Search API

[iOS] Calendar 구조체로 달력 구현하기 (4) - 달력 표시, 버튼 기능 구현하기

_보름 — Wed, 5 Jan 2022 16:51:45 +0900

이번 달 달력 표시하기

커스텀 셀

이번 달 달력을 표시해주기 위하여 CalendarCollectionViewCell의 configure()를 수정하겠습니다.

self.dayLabel.text = "0"

dayLabel의 텍스트를 "0"으로 설정해주는 코드를 삭제합니다.

    private func configure() {
        self.addSubview(self.dayLabel)
        self.dayLabel.font = .boldSystemFont(ofSize: 12)
        self.dayLabel.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            self.dayLabel.topAnchor.constraint(equalTo: self.topAnchor, constant: 5),
            self.dayLabel.centerXAnchor.constraint(equalTo: self.centerXAnchor)
        ])
    }

그럼 configure()가 위와 같아지겠죠?

    func update(day: String) {
        self.dayLabel.text = day
    }

그다음 위의 메서드를 추가해줍니다.
day로 들어오는 문자열로 dayLabel을 설정해주는 코드입니다!

뷰 컨트롤러

이제 ViewController로 돌아오겠습니다.

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return self.days.count
    }

numberOfItemsInSection을 수정해주겠습니다.
days에 있는 값으로 셀을 설정해주기 위해 위의 코드처럼 self.days.count로 바꿔줍니다.

2022년 1월 기준으로 days에 37개의 값이 들어가 있으니 37개의 셀이 생성되겠네요.

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: CalendarCollectionViewCell.identifier, for: indexPath) as? CalendarCollectionViewCell else { return UICollectionViewCell() }
        cell.update(day: self.days[indexPath.item])
        return cell
    }

그다음 커스텀 셀에서 만들어 둔 update(day:)를 cellForItemAt에서 불러주겠습니다.

self.days[indexPath.item]을 통하여 0번부터 36번까지 days에 접근하여 문자열을 가져와 update(day:)에 넣어주게 됩니다.
update(day:)는 dayLabel을 받은 문자열로 설정하게 되겠죠?

여기까지 하고 실행해보니 이번 달 달력이 화면에 잘 표시되네요!

버튼 기능 구현하기

이전 달, 다음 달 이동하기

    @objc private func didPreviousButtonTouched(_ sender: UIButton) {
        self.minusMonth()
    }

    @objc private func didNextButtonTouched(_ sender: UIButton) {
        self.plusMonth()
    }

위의 코드를 ViewController에 추가해줍니다.
didPreviousButtonTouched()에서는 minusMonth()를 didNextButtonTouched()에서는 plusMonth()를 불러줍니다.

이제 이 코드를 버튼에 적용해야겠죠?

    private func configurePreviousButton() {
        self.contentView.addSubview(self.previousButton)
        self.previousButton.tintColor = .label
        self.previousButton.setImage(UIImage(systemName: "chevron.left"), for: .normal)
        self.previousButton.addTarget(self, action: #selector(self.didPreviousButtonTouched), for: .touchUpInside)
        self.previousButton.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            self.previousButton.widthAnchor.constraint(equalToConstant: 44),
            self.previousButton.heightAnchor.constraint(equalToConstant: 44),
            self.previousButton.trailingAnchor.constraint(equalTo: self.titleLabel.leadingAnchor, constant: -5),
            self.previousButton.centerYAnchor.constraint(equalTo: self.titleLabel.centerYAnchor)
        ])
    }

addTarget()을 이용하여 .touchUpInside가 됐을 때 didPreviousButtonTouched()를 부르도록 지정해주면 됩니다.
아무 데나 해당 코드를 넣어도 되지만 저는 configurePreviousButton()에 넣어주었습니다.

self.nextButton.addTarget(self, action: #selector(self.didNextButtonTouched), for: .touchUpInside)

nextButton에도 addTarget()을 해줍니다.

실행해보면 이전 달, 다음 달 버튼이 잘 작동할 것입니다!

이번 달로 이동하기

달력 하면 빠질 수 없는 이번 달로 이동하는 기능을 구현해보겠습니다.

private func configureCalendar() { 
    let components = self.calendar.dateComponents([.year, .month], from: Date()) 
    self.calendarDate = self.calendar.date(from: components) ?? Date() 
    self.dateFormatter.dateFormat = "yyyy년 MM월" 
    self.updateCalendar() 
}

위의 코드는 기존의 configureCalendar()입니다.

초기 설정에서 calendarDate, dateFormatter를 설정해준 후 updateCalendar()를 불러주는데,
이번 달로 이동할 때 calendarDate 설정 후 updateCalendar()를 불러주어야 해서 3줄의 코드가 중복됩니다.

중복되는 코드를 작성하기는 싫으니 configureCalendar()를 분리하겠습니다.

    private func today() {
        let components = self.calendar.dateComponents([.year, .month], from: Date())
        self.calendarDate = self.calendar.date(from: components) ?? Date()
        self.updateCalendar()
    }

today() 메서드를 추가한 후 초기 설정과 이번 달 이동 기능의 중복되는 코드를 분리시켜줍니다.

    private func configureCalendar() {
        self.dateFormatter.dateFormat = "yyyy년 MM월"
        self.today()
    }

configureCalendar()에서 today()를 불러주면 분리 전과 같은 동작을 하게 됩니다.

이제 today()를 이용하여 todayButton의 기능을 추가해보겠습니다.

    @objc private func didTodayButtonTouched(_ sender: UIButton) {
        self.today()
    }

didTodayButtonTouched()를 추가한 후 여기서도 today()를 불러줍니다.

self.todayButton.addTarget(self, action: #selector(self.didTodayButtonTouched), for: .touchUpInside)

addTarget()만 해주면 이번 달로 이동하는 기능도 완성입니다.

co3oing/Calendar - 달력 표시, 버튼 기능 구현하기 Github 소스 코드

[iOS] Calendar 구조체로 달력 구현하기 (3) - 메서드 구현하기

_보름 — Tue, 4 Jan 2022 23:10:47 +0900

프로퍼티

private let calendar = Calendar.current
private let dateFormatter = DateFormatter()
private var calendarDate = Date()
private var days = [String]()

먼저 필요한 프로퍼티는 위와 같습니다.
하나씩 설명해 드릴게요!

calendar : Calendar 구조체를 사용하기 위하여 사용자의 현재 달력으로 초기화해놓은 프로퍼티입니다.
dateFormatter : 2022년 01월과 같은 형태로 타이틀을 만들어 주기 위한 DateFormatter입니다.
calendarDate : 달력에 표시될 날짜를 저장합니다. 이전 달이나 다음 달로 이동하게 되면 이동한 달이 포함된 날짜를 가지고 있습니다.
days : 달력에 날짜를 표시하기 위한 String 배열입니다. 1일이 화요일부터 시작된다면 ["", "", "1", "2"...]와 같은 형태로 저장이 됩니다.

메서드

필요한 메서드

configureCalendar() : 달력을 표시해주기 위하여 calendarDate와 dateFormmatter를 초기화합니다.
startDayOfTheWeek() -> Int : calendarDate가 해당하는 달의 1일이 시작되는 요일을 리턴합니다.
endDate() -> Int : calendarDate가 해당하는 달의 날짜 개수를 리턴합니다.
updateTitle() : titleLabel에 2022년 01월과 같이 년, 월을 업데이트합니다.
updateDays() : startDayOfTheWeek()과 endDate()를 이용하여 days에 String 배열을 만들어 넣습니다.
updateCalendar() : 달력을 처음 띄우거나 달을 이동할 때 마다 updateTitle(), updateDate()를 호출합니다.
minusMonth() : calendarDate의 달을 이전 달로 변경합니다.
plusMonth() : calendarDate의 달을 다음 달로 변경합니다.

필요한 메서드는 위와 같습니다.
이제 하나하나 구현 해볼게요!

configureCalendar()

let components = self.calendar.dateComponents([.year, .month], from: Date())
self.calendarDate = self.calendar.date(from: components) ?? Date()

현재 날짜에서 년, 월만 뽑아냅니다. 2022년 1월 03일 17:41 이면 2022년 1년만 뽑아내는 거죠!
년, 월만 뽑아낸 DateComponents 타입을 date(from:)을 이용하여 Date 타입으로 바꿔주고 calendarDate에 저장합니다.

self.dateFormatter.dateFormat = "yyyy년 MM월"

dateFormatter 도 원하는 포맷으로 설정해줍니다.
저는 2022년 01월과 같이 표시하고 싶어서 yyyy년 MM월로 설정해줬어요!

startDayOfTheWeek() -> Int

return self.calendar.component(.weekday, from: self.calendarDate) - 1

component()를 이용하여 1일이 시작하는 요일을 계산하면 1은 일요일, 7은 토요일로 반환이 됩니다.
days 배열의 0번 인덱스를 일요일로 표시해주기 위하여 -1 을 해준 후 반환합니다.

2022년 1월은 1일이 토요일부터 시작이니 6이 반환되겠네요.

endDate() -> Int

return self.calendar.range(of: .day, in: .month, for: self.calendarDate)?.count ?? Int()

range(of:, in:, for:)를 이용하여 calendarDate가 해당하는 달의 날짜가 며칠까지 있는지 계산하여 반환합니다.
2022년 1월은 31일까지 있으니 31이 반환되겠죠?

updateTitle()

let date = self.dateFormatter.string(from: self.calendarDate)
self.titleLabel.text = date

dateFormmater를 이용하여 calendarDate를 설정해놓은 포맷으로 만들어준 후 타이틀에 적용시킵니다.

updateDays()

self.days.removeAll()
let startDayOfTheWeek = self.startDayOfTheWeek()
let totalDays = startDayOfTheWeek + self.endDate()

updateDays()가 불렸을 때 이전의 데이터는 필요 없어지기 때문에 days를 비워줍니다.
startDayOfTheWeek에 요일의 시작 인덱스를 저장해주고 totalDays에 시작 인덱스와 날짜 개수를 더해서 넣어줍니다.

2022년 1월은 1일이 토요일이니까 6, 총 31일까지 있으니 31. 따라서 totalDays에 37이 저장됩니다.

for day in Int()..<totalDays {
    if day < startDayOfTheWeek {
        self.days.append("")
        continue
    }
    self.days.append("\(day - startDayOfTheWeek + 1)")
}

0부터 36까지 총 37번 동안 for문을 돌면서 days에 문자열을 넣어줍니다.
for문 안의 코드를 자세히 보겠습니다.

if day < startDayOfTheWeek {
    self.days.append(String())
    continue
}

day가 startDayOfTheWeek 보다 작으면 days에 빈 문자열을 넣어줍니다.
즉, 1일이 시작하는 요일의 인덱스 전까지 빈 문자열을 넣는 겁니다.

2022년 1월 기준으로 days에 ["", "", "", "", "", ""]가 들어가겠네요.

self.days.append("\(day - startDayOfTheWeek + 1)")

day가 6이 되면 if문에 걸리지 않겠네요. 6번 인덱스부터 1부터 31까지의 숫자가 들어갑니다.
day가 6일 때 startDayOfTheWeek이 6이니까 1이 들어가게 되고,
day가 7일 때 2, day가 8일 때 3... 이 들어가게 됩니다.

for문이 끝나면 days의 값이 ["", "", "", "", "", "", "1", "2", "3", "4", ... "31"]로 업데이트됩니다.

self.collectionView.reloadData()

메서드 마지막에 reloadData()를 불러 바뀐 days에 맞게 collectionView를 업데이트하도록 해줍니다.

updateCalendar()

self.updateTitle()
self.updateDays()

타이틀과 날짜를 업데이트해주는 메서드를 불러줍니다.

private func configureCalendar() {
    let components = self.calendar.dateComponents([.year, .month], from: Date())
    self.calendarDate = self.calendar.date(from: components) ?? Date()
    self.dateFormatter.dateFormat = "yyyy년 MM월"
    self.updateCalendar()
}

아까 작성한 configureCalendar()에서 updateCalendar()를 불러주겠습니다.

여기까지 작성하고 실행해주면 위의 사진과 같이 타이틀에 년, 월 정보가 표시되는 것을 볼 수 있습니다.
날짜 부분의 업데이트는 Calendar 구조체로 달력 구현하기 (4)에서 다루겠습니다!

minusMonth()

self.calendarDate = self.calendar.date(byAdding: DateComponents(month: -1), to: self.calendarDate) ?? Date()
self.updateCalendar()

date(byAdding:, to:)를 이용해서 -1 연산을 해준 후 updateCalendar()를 불러줍니다.

plusMonth()

self.calendarDate = self.calendar.date(byAdding: DateComponents(month: 1), to: self.calendarDate) ?? Date()
self.updateCalendar()

minusMonth()와 같은 메서드를 이용하여 +1 연산을 해줍니다.

달력 구현을 위한 메서드 구현이 끝났습니다.
구현한 메서드를 이용하여 날짜를 표시해주고, 버튼을 설정하는 과정은 다음 글에서 다루겠습니다.

co3oing/Calendar - 메서드 구현하기 Github 소스 코드

[iOS] Calendar 구조체로 달력 구현하기 (2) - 달력 뷰 구성하기

_보름 — Mon, 3 Jan 2022 17:14:33 +0900

달력 뷰 미리 보기

Calendar 구조체도 알아봤으니 이제 달력 구현을 위하여 뷰를 구성해 보겠습니다.

위의 사진과 같은 심플한 달력을 만들 겁니다.
각각 뭐하는 친구들인지 설명도 적어드릴게요!

titleLabel : 2022년 01월과 같이 년, 월 정보를 보여줍니다.
previousButton : 이전 달로 이동하는 버튼입니다.
nextButton : 다음 달로 이동하는 버튼입니다.
todayButton : 현재 달로 이동합니다.
weekStackView : 일요일부터 토요일까지 요일을 보여줍니다.
collectionView : 1일부터 날짜를 보여줍니다.

달력 뷰 구성하기

프로젝트 생성 및 초기 설정

iOS App으로 프로젝트를 생성하겠습니다.

Product Name에 원하는 앱 이름을 적어주세요.

저는 스토리보드 없이 코드로만 작성할 거라서 스토리보드를 삭제했습니다.
스토리보드 없이 뷰 컨트롤러 연결하는 방법은 여기에서 확인해주세요!

import UIKit

final class ViewController: UIViewController {

    private lazy var scrollView = UIScrollView()
    private lazy var contentView = UIView()
    private lazy var titleLabel = UILabel()
    private lazy var previousButton = UIButton()
    private lazy var nextButton = UIButton()
    private lazy var todayButton = UIButton()
    private lazy var weekStackView = UIStackView()
    private lazy var collectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())

ViewController에 필요한 프로퍼티를 생성해줍니다.
작은 화면에서도 잘리지 않고 잘 보였으면 해서 UIScrollView도 생성해줬습니다.

    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = .systemBackground
        self.configure()
    }

    private func configure() {
        self.configureScrollView()
        self.configureContentView()
        self.configureTitleLabel()
    }

    private func configureScrollView() {

    }

    private func configureContentView() {

    }

    private func configureTitleLabel() {

    }

viewDidLoad()에서 뷰의 색상을 .systemBackground로 바꿔주고, 설정 메서드를 모아 놓은 메서드인 configure()를 불러주겠습니다.
configure()에서는 scrollView, contentView, titleLabel을 설정해 주는 메서드를 불러주세요.

    private func configureScrollView() {
        self.view.addSubview(self.scrollView)
        self.scrollView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            self.scrollView.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor),
            self.scrollView.leadingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.leadingAnchor),
            self.scrollView.trailingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.trailingAnchor),
            self.scrollView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor)
        ])
    }

    private func configureContentView() {
        self.scrollView.addSubview(self.contentView)
        self.contentView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            self.contentView.topAnchor.constraint(equalTo: self.scrollView.topAnchor),
            self.contentView.leadingAnchor.constraint(equalTo: self.scrollView.leadingAnchor),
            self.contentView.trailingAnchor.constraint(equalTo: self.scrollView.trailingAnchor),
            self.contentView.bottomAnchor.constraint(equalTo: self.scrollView.bottomAnchor),
            self.contentView.widthAnchor.constraint(equalTo: self.scrollView.widthAnchor)
        ])
    }

self.view에 scrollView를 넣고 scrollView에 contentView를 넣어주었습니다.
위아래로만 스크롤할 거니 contentView의 width를 scrollView의 width와 같게 제약사항을 줍니다.

이제 이 contentView에 타이틀, 요일 스택 뷰, 달력 등을 넣어주면 됩니다.

년, 월 타이틀

    private func configureTitleLabel() {
        self.contentView.addSubview(self.titleLabel)
        self.titleLabel.text = "2000년 01월"
        self.titleLabel.font = .monospacedSystemFont(ofSize: 18, weight: .bold)
        self.titleLabel.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            self.titleLabel.topAnchor.constraint(equalTo: self.contentView.topAnchor, constant: 20),
            self.titleLabel.centerXAnchor.constraint(equalTo: self.contentView.centerXAnchor)
        ])
    }

contentView에 titleLabel을 넣고 텍스트, 폰트 설정을 주고 상단에서 20 떨어진 위치 중앙에 배치를 해줍니다.

그 후 실행해 보면 위와 같은 화면을 확인할 수 있습니다.

버튼

이전 달, 다음 달, 이번 달로 이동하는 버튼을 설정해주겠습니다.

    private func configure() {
        self.configureScrollView()
        self.configureContentView()
        self.configureTitleLabel()
        self.configurePreviousButton()
        self.configureNextButton()
        self.configureTodayButton()
    }

설정 메서드를 만들어주고 configure()에서 불러줍니다.
앞으로 만드는 메서드들은 생성 후 모두 configure()에서 불러주면 됩니다!

    private func configurePreviousButton() {
        self.contentView.addSubview(self.previousButton)
        self.previousButton.tintColor = .label
        self.previousButton.setImage(UIImage(systemName: "chevron.left"), for: .normal)
        self.previousButton.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            self.previousButton.widthAnchor.constraint(equalToConstant: 44),
            self.previousButton.heightAnchor.constraint(equalToConstant: 44),
            self.previousButton.trailingAnchor.constraint(equalTo: self.titleLabel.leadingAnchor, constant: -5),
            self.previousButton.centerYAnchor.constraint(equalTo: self.titleLabel.centerYAnchor)
        ])
    }

    private func configureNextButton() {
        self.contentView.addSubview(self.nextButton)
        self.nextButton.tintColor = .label
        self.nextButton.setImage(UIImage(systemName: "chevron.right"), for: .normal)
        self.nextButton.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            self.nextButton.widthAnchor.constraint(equalToConstant: 44),
            self.nextButton.heightAnchor.constraint(equalToConstant: 44),
            self.nextButton.leadingAnchor.constraint(equalTo: self.titleLabel.trailingAnchor, constant: 5),
            self.nextButton.centerYAnchor.constraint(equalTo: self.titleLabel.centerYAnchor)
        ])
    }

똑같이 contentView에 넣어주고 색상, 이미지, 제약 사항을 설정해줍니다.

    private func configureTodayButton() {
        self.contentView.addSubview(self.todayButton)
        self.todayButton.setTitle("Today", for: .normal)
        self.todayButton.setTitleColor(.systemBackground, for: .normal)
        self.todayButton.backgroundColor = .label
        self.todayButton.layer.cornerRadius = 5
        self.todayButton.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            self.todayButton.widthAnchor.constraint(equalToConstant: 60),
            self.todayButton.heightAnchor.constraint(equalToConstant: 30),
            self.todayButton.trailingAnchor.constraint(equalTo: self.contentView.trailingAnchor, constant: -10),
            self.todayButton.centerYAnchor.constraint(equalTo: self.titleLabel.centerYAnchor)
        ])
    }

이번 달로 이동하는 버튼은 타이틀과 배경색을 모두 설정해주었습니다.
약간 둥근 사각형을 만들고 싶어서 cornerRadius를 5로 주었습니다.
위치는 contentView.trailing 에서 -10 떨어진 위치에 todayButton.trailing이 오게 설정해주었습니다.

버튼 설정이 끝났습니다.

요일 스택 뷰

    private func configureWeekStackView() {
        self.contentView.addSubview(self.weekStackView)
        self.weekStackView.distribution = .fillEqually
        self.weekStackView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            self.weekStackView.topAnchor.constraint(equalTo: self.titleLabel.bottomAnchor, constant: 40),
            self.weekStackView.leadingAnchor.constraint(equalTo: self.contentView.leadingAnchor, constant: 5),
            self.weekStackView.trailingAnchor.constraint(equalTo: self.contentView.trailingAnchor, constant: -5)
        ])
    }

weekStackView의 distribution을 .fillEqually로 설정하여 스택 뷰에 들어가는 아이템이 모두 같은 크기를 가지게 해 줍니다.
스택 뷰 설정이 끝났으니 아래에서 스택 뷰에 들어갈 아이템을 생성해주겠습니다.

    private func configureWeekLabel() {
        let dayOfTheWeek = ["일", "월", "화", "수", "목", "금", "토"]

        for i in 0..<7 {
            let label = UILabel()
            label.text = dayOfTheWeek[i]
            label.textAlignment = .center
            self.weekStackView.addArrangedSubview(label)

            if i == 0 {
                label.textColor = .systemRed
            } else if i == 6 {
                label.textColor = .systemBlue
            }
        }
    }

배열에 요일을 넣어 준 후 for문을 돌며 UILabel을 만들어 weekStackView에 넣어줍니다.

요일 스택 뷰 설정도 끝났습니다!

달력 컬렉션 뷰

이제 진짜 마지막입니다.
가장 중요한 collectionView설정만 해주면 끝입니다!

커스텀 셀을 위하여 새로운 파일을 만들어줍니다.

Cocoa Touch Class를 선택해 준 후 Class이름을 설정해주세요.

    static let identifier = "CalendarCollectionViewCell"
    private lazy var dayLabel = UILabel()

CalendarCollectionViewCell에 identifier와 dayLabel을 추가해 줍니다.

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        self.configure()
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.configure()
    }

    private func configure() {
        self.addSubview(self.dayLabel)
        self.dayLabel.text = "0"
        self.dayLabel.font = .boldSystemFont(ofSize: 12)
        self.dayLabel.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            self.dayLabel.topAnchor.constraint(equalTo: self.topAnchor, constant: 5),
            self.dayLabel.centerXAnchor.constraint(equalTo: self.centerXAnchor)
        ])
    }

required init?(coder: NSCoder)과 override init(frame: CGRect)에서 configure()를 불러줍니다.
잘 보이는지 확인하기 위해 텍스트를 "0"으로 설정해줬습니다.

다시 ViewController로 돌아가겠습니다.

    private func configureCollectionView() {
        self.contentView.addSubview(self.collectionView)
        self.collectionView.dataSource = self
        self.collectionView.delegate = self
        self.collectionView.register(CalendarCollectionViewCell.self, forCellWithReuseIdentifier: CalendarCollectionViewCell.identifier)
        self.collectionView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            self.collectionView.topAnchor.constraint(equalTo: self.weekStackView.bottomAnchor, constant: 10),
            self.collectionView.leadingAnchor.constraint(equalTo: self.weekStackView.leadingAnchor),
            self.collectionView.trailingAnchor.constraint(equalTo: self.weekStackView.trailingAnchor),
            self.collectionView.heightAnchor.constraint(equalTo: self.collectionView.widthAnchor, multiplier: 1.5),
            self.collectionView.bottomAnchor.constraint(equalTo: self.contentView.bottomAnchor)
        ])
    }

collectionView를 설정해주는 메서드를 생성한 후 collectionView의 dataSource와 delegate를 self로 설정해줍니다.
아까 생성한 커스텀 셀을 넣어주기 위해서 register도 해줍니다.

extension ViewController: UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {

}

ViewController에서 UICollectionView 설정에 필요한 프로토콜 세 가지를 채택합니다.

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 42
    }

테스트용으로 42개의 셀을 생성해주겠습니다.

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: CalendarCollectionViewCell.identifier, for: indexPath) as? CalendarCollectionViewCell else { return UICollectionViewCell() }
        return cell
    }

아까 만들어준 커스텀 셀을 collectionView에 넣어주도록 설정합니다.


    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let width = self.weekStackView.frame.width / 7
        return CGSize(width: width, height: width * 1.3)
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return .zero
    }

셀의 크기와 간격을 위와 같이 설정해줍니다.

실행시켜 보면 위와 같은 화면을 만날 수 있습니다.
달력 뷰 구성이 끝났습니다!

다음부터 만들어진 뷰로 본격적인 달력 구현에 들어가겠습니다!

co3oing/Calendar - 달력 화면 구성하기 Github 소스 코드

[TIL] 2021.12.27

_보름 — Mon, 27 Dec 2021 16:03:49 +0900

오늘 한 일

VIPER, RIBs, VIP 아키텍처 학습하기
CPU 스케줄링 다시 정리하기

오늘 느낀 것

VIPER, RIBs, VIP 아키텍처에 대하여 학습했는데, 글로만 읽어서는 확실히 모르겠다. 직접 써봐야 확실히 알 것 같다.

내일 할 일

네이버 코딩 테스트 준비하기

[TIL] 2021.12.26

_보름 — Mon, 27 Dec 2021 00:08:47 +0900

오늘 한 일

스노우 지원서 작성하기
아프리카TV 지원서 작성하기
class 메서드와 static 메서드 학습하기
Delegate, Notification 학습하기

오늘 느낀 것

Jira를 꼭 써야 한다는 말을 들었지만, 아직도 써보지 못했다. iOSDeveloperKR에 Jira 관련 글이 올라왔는데 직접 써보면서 ticket 없이는 업무도 없다는 말이 뭔지 직접 느껴보고 싶다!

내일 할 일

Ribs, VIP 아키텍처 학습하기

[TIL] 2021.12.25

_보름 — Sat, 25 Dec 2021 23:41:29 +0900

오늘 한 일

네이버 지원서 작성하기
스노우 지원서 작성하기

오늘 느낀 것

나의 크리스마스, 지원서로 대체되었다. 그래도 지원서 넣을 수 있는 것 만으로도 감사하다!

내일 할 일

스노우 지원서 작성하기

[TIL] 2021.12.18

_보름 — Sat, 18 Dec 2021 23:53:57 +0900

오늘 한 일

카카오페이 지원서 작성하기
라인 지원서 작성하기
알고리즘 풀이 - python

오늘 느낀 것

부스터샷은 생각보다 아프지 않다. 코로나 검사는 생각보다 아프다.
카카오엔터프라이즈 코딩테스트에 swift가 안 된대서 python을 연습 중이다. Django 이후로 써본 적이 없어서인지 Lv.1도 힘들다.

내일 할 일

3-way hand shake, 4-way hand shake 흐름 학습하기
스택, 큐 학습하기
오버로딩, 오버라이딩 학습하기
Singleton 패턴 학습하기
Optional 학습하기
Dynamic Dispatch 학습하기

[TIL] 2021.12.16

_보름 — Thu, 16 Dec 2021 23:37:10 +0900

오늘 한 일

면접 스터디
위드버디 프로젝트 회의
알고리즘 풀이 - 행렬 테두리 회전
카카오페이 지원서 작성하기

오늘 느낀 것

오랜만에 팀원들과 프로젝트 회의를 하니 재밌었다! 바쁘지만 계속 재미있게 프로젝트를 하고싶다!
동료 피드백을 받았다. 부족한게 많다고 생각했는데 너무 좋은 말을 많이들 써줬다..ㅠㅠ 더 열심히 해야겠다! 개선할건 개선하고!!
알고리즘 안하다 하려니 너무 힘들다.. 2단계 올클 할 수 있겠지..?

내일 할 일

부스터샷 접종받고 푹 쉬기

[TIL] 2021.12.15

_보름 — Thu, 16 Dec 2021 00:33:59 +0900

오늘 한 일

카카오엔터프라이즈 지원서 작성하기
Race Condition 학습하기
프로세스, 스레드 학습하기
class의 성능 향상 방법 학습하기
NSObject부터 UIButton까지 상속 과정 학습하기

오늘 느낀 것

상속하지 않는 class에 final 키워드를 붙이면 성능이 향상된다고 알고 있었지만 그 이유를 몰랐다. 앞으로는 "왜?"라는 생각을 해야겠다!

내일 할 일

카카오페이, 라인 지원서 작성하기