Origogi

[iOS][Swift] ARC (Automatic Reference Counting) 정리

Fri, 30 Aug 2024 00:00:00 +0000

서론

해당 포스트는 ARC에 대해서 정리한 포스트입니다.

ARC (Automatic Reference Counting)

ARC 는 Swift 에서 사용되는 메모리 관리 방식이다. 기본적인 원리는 객체를 소유또는 참조하는 모든 객체의 수를 추적하여 객체가 더 이상 필요하지 않을 때 메모리에서 해제하는 방식이다. 예를 들어 객체 A를 어떤 변수에 할당하면 A의 참조 카운트가 1 증가하고, 또 객체 A를 다른 변수에 할당하면 참조 카운트가 1 증가한다. 만약 변수가 nil 이 되거나 다른 객체를 참조하게 되면 참조 카운트가 1 감소한다. 참조 카운트가 0이 되면 메모리에서 해제된다.

class Person {

  deinit {
    print("Person 객체가 메모리에서 해제됨")
  }
}

var a: Person? = Person() // Person이라는 객체가 생성됨과 동시에 a 변수에 할당되어 Person 객체의 참조 카운트가 1 증가
var b: Person? = a // Person 객체의 참조 카운트가 1 증가

a = nil // Person 객체의 참조 카운트가 1 감소
b = nil // Person 객체의 참조 카운트가 1 감소, Person 객체가 메모리에서 해제되면서 deinit 메소드가 호출됨

Strong Reference

일반적은 객체 참조 방식이다. 객체를 어떤 변수가 참조하게 되면 참조 카운트가 1 증가하고, 변수가 nil 이 되거나 다른 객체를 참조하게 되면 참조 카운트가 1 감소한다. 위 예제에서 사용한 방식이 Strong Reference 이다.

Weak Reference

객체를 참조하지만 객체의 참조 카운트를 증가시키지 않는 방법이 존재한다. 이를 Weak Reference 라고 한다. 변수 키워드 앞에 weak 또는 unowned 키워드를 사용하여 객체를 참조할 수 있다.

어떻게 보면 참조 카운트를 임의로 증가시키지 않아서 무언가 위험하고 버그가 발생할 것 같고 사용하면 안되는 것처럼 보일수 있다. 하지만 iOS Framework 에서는 많은 곳에서 사용되고 있다. iOS Framework 에서는 Delegate 패턴 또는 클로져 을 많이 사용하는데 이때 Delegate 객체를 참조할 때 Weak Reference 를 적극적으로 사용한다.

Delegate 패턴

Delegate 패턴은 객체의 행동을 다른 객체에게 위임하는 패턴이다. 객체 A가 객체 B에게 자신의 행동을 위임하고, 객체 B는 객체 A의 행동을 대신 수행한다. 이때 객체 A는 객체 B를 생성하면서 B를 참조하고 있고 객체 B의 생성자에 객체 A의 참조를 전달하는 방식이다.

여기서 객체 참조에 대해서 특별한 처리를 하지 않으면 객체 A와 객체 B는 서로 참조하고 있기 때문에 참조 카운트가 1 증가하고 두 객체는 메모리에서 해제되지 않는다. 이러한 문제를 해결하기 위해 Delegate 객체를 참조할 때 Weak Reference 를 사용한다.

Sample Code (Strong Reference)

class Person {
    let name: String
    init(name: String) { self.name = name }
    var apartment: Apartment?
    deinit { print("\(name) is being deinitialized") }
}


class Apartment {
    let unit: String
    init(unit: String) { self.unit = unit }
    var tenant: Person?
    deinit { print("Apartment \(unit) is being deinitialized") }
}

var john: Person?
var unit4A: Apartment?

john = Person(name: "John Appleseed")
unit4A = Apartment(unit: "4A")

위 코드는 Person과 Apartment 객체가 있고 Person john은 Apartment의 unit4A를 참조하고 있고, Apartment unit4A는 Person john을 참조하고 있다. 이때 객체 Person과 Apartment는 서로 참조하고 있고 또 변수에서 각각 참조하고 있기 때문에 각각 참조 카운트는 2이다.

이 때 john과 unit4A의 변수에 nil 를 할당하면 어떻게 될까?

john = nil
unit4A = nil

단순히 생각하면 객체를 외부에서 직접 참조하는 변수가 없기 때문에 메모리에서 해제가 될 것 같고 실제로 해제가 되어야 한다. 만약 여기서 해제가 되지 않는다면 해당 객체는 메모리에서 살아있지만 실제로 접근할 수 없는 상태 즉 메모리 누수가 발생한다.

위 코드를 실행해보면 안타깝게도 메모리에서 해제되지 않는다. 이유는 서로 참조하고 있기 때문에 참조 카운트가 1이 남아있기 때문이다.

위 그림과 같이 Person 객체와 Apartment는 살아있지만 프로그램에서 접근할수 없는 상태가 된다. 즉 개발자 또는 프로그램이 객체를 컨트롤 할 수 없고 메모리에서 자리만 차지하고 있는 상태, 즉 메모리 누수가 발생한 것이다.

위와 같은 상황은 swift 환경 뿐만 아니라 다른 언어에서도 발생할 수 있는 문제이다. 이러한 문제 때문에 엄격하게 상호 참조를 허용하지 않는다. 하지만 iOS Framework 에서는 Delegate 패턴을 많이 사용하는데 Delegate 패턴에서는 서로 참조하는 경우가 많다. 이런 경우에는 어떻게 해야할까?

위 문제를 해결하기 위해 약한 참조(Weak Reference)를 사용한다.

위 Person, Apartment 예제 코드에서 Apartment 를 다음과 같이 수정해보자.

class Apartment {
    let unit: String
    init(unit: String) { self.unit = unit }
    // var tenant: Person?
    weak var tenant: Person?
    deinit { print("Apartment \(unit) is being deinitialized") }
}

weak 키워드를 사용하여 Person 객체를 약한 참조를 하도록 하였다.

앞에서 설명했듯이 weak 를 사용하면 레퍼런스 카운트는 증가하지 않는다고 하였다. 따라서 Person 객체의 참조 카운트는 1 이 되고 Apartment 객체의 참조 카운트는 2 이다.

조금 이해하기 쉽게 설명하자면 위 그림에서 각 객체를 가리키는 굵은 화살표 갯수를 보면 알수 있다. Person 객체를 가리키는 화살표는 1개이고 Apartment 객체를 가리키는 화살표는 2개이다.

여기서 john에 nil 을 할당하면 어떻게 될까?

john = nil

Person 객체의 참조 카운트가 1 감소하고 0 이 되면서 Person 객체가 메모리에서 해제된다. 그렇게 되면 Apartment 객체의 tenant 변수에 저장된 값은 어떻게 될까? 바로 nil 이 된다.

여기서 핵심은 tenant 변수에 따로 nil 을 할당하지 않았는데도 자동으로 nil 이 된다는 것이다. 과연 이게 가능한 것일까?

weak 로 선언된 변수는 어떻게 동작하는가?

weak 로 선언된 변수는 다음과 같은 특징을 가진다.

weak 로 선언된 변수는 참조 카운트를 증가시키지 않는다.
weak 로 선언된 변수는 참조하고 있는 객체가 메모리에서 해제되면 자동으로 nil 이 된다.

여기서 2 번째 특징이 중요하다.

weak 참조와 nil 할당

weak 로 선언된 변수가 참조하는 객체가 메모리에서 해제될 때, 해당 weak 변수는 자동으로 nil로 설정됩니다. 이 과정은 Swift 런타임 시스템에 의해 자동으로 처리된다.

구체적으로는

Swift 런타임 : Swift의 런타임 시스템이 이 작업을 담당합니다.
ARC : Swift는 ARC를 사용하여 메모리를 관리합니다. ARC는 객체의 참조 카운트를 추적하고 관리한다.
해제 과정 :
- 객체의 참조 카운트가 0이 되면 메모리에서 해제된다.
- 이 때, Swift 런타임 은 해당 객체를 참조하고 있는 모든 weak 변수를 nil로 설정한다. 이 과정을 Zeroing Weak Reference 라고도 한다.

Swift의 weak 참조 관리 메커니즘

Side Table :
- Swift 런타임은 각 객체에 대한 side table 이라는 추가적인 메모리 구조를 유지한다.
- 이 side table 은 해당 객체에 대한 weak 참조들의 정보를 저장한다.
Weak 참조 등록 :
- weak 참조가 생성되면, Swift 런타임은 해당 객체의 side table 에 weak 참조를 등록한다.
- 이 등록 과정은 자동으로 이루어진다.
객체 해제 과정 :
- 객체의 참조 카운트가 0이 되면, Swift 런타임은 해당 객체의 side table 을 확인한다.
- side table 에 등록된 weak 참조들을 모두 nil로 설정한다.
동시성 처리 :
- Swift 런타임은 weak 참조의 동시성 문제를 처리하기 위해 적절한 동시성 제어 메커니즘을 사용한다.
최적화 :
- Swift 런타임은 이 과정을 매우 효율적으로 수행하도록 최적화되어 있다.
- 대량의 weak 참조를 처리하는 경우에도 성능 저하가 발생하지 않도록 설계되어 있다.

unowned 참조

약한 참조를 위해서 weak 키워드 외에도 unowned 키워드를 사용할 수 있다. 위 예제에서 weak 키워드를 사용한 것을 unowned 키워드로 변경해보자.

class Apartment {
    let unit: String
    // 생성자에서 tenant 를 초기화 해주어야 한다.
    init(unit: String, tenant : Person) {     
      self.unit = unit
      self.tenant = tenant
    }
    // var tenant: Person?
    // weak var tenant: Person? 
    unowned var tenant: Person
    deinit { print("Apartment \(unit) is being deinitialized") }
}

정상적으로 메모리 누수가 발생하지 않는다. unowned 키워드는 weak 키워드와 비슷하지만 차이점이 존재한다.

unowned 참조는 기본적으로 non-optional 이다.
weak 참조는 optional operator(?)를 사용하여 값을 접근하지만, unowned 참조는 non-optional 이기 때문에 optional operator를 사용하지 않는다.
Swift 런타임은 unowned 참조가 nil이 되는 경우를 처리하지 않는다.
따라서 unowned 참조가 nil이 될 수 있고 unowned 참조를 접근하면 런타임 에러가 발생한다.
unowned 참조는 객체의 수명이 unowned 참조보다 길어야 한다는 것을 보장해야 한다.
성능상으로는 unowned 참조를 사용했을 때 weak 참조를 했을 때 보다 앱의 성능에 대해서 약간 이점이 있다. 왜냐하면 Zeroing Weak Reference 가 발생하지 않기 때문이다.
안정성 측면에서는 weak 참조를 사용하는 것이 더 안전하다.
경우에 따라서는 unowned 참조를 사용하는 것이 더 좋을수 있다. 명시적으로 nil 이 될 수 없는 경우에 사용함으로써 만약 런타임 에러가 발생한다면 이는 어딘가 잘못된 처리가 있음을 명확하게 알 수 있다. 보통은 에러가 최대한 발생하지 않도록 코드를 작성하는 것이 좋지만, 경우에 따라서는 에러가 발생하는 것이 더 좋을 수도 있다.

Reference

[iOS][Swift] UiKit 정리 - Navigation

Mon, 19 Aug 2024 00:00:00 +0000

서론

UiKit 를 공부하면서 햇갈리는 부분을 정리해보았습니다.

화면 전환

ViewController에서 새로운 ViewController로 push를 하기 위해서는 아래와 같이 사용합니다.

@IBAction func moveNext(_ sender: Any) {
    guard let secondVC = self.storyboard?.instantiateViewController(withIdentifier: "SecondVC") else {
        return
    }

    // 네비게이션 컨트롤러를 통해 전체 화면으로 전환
    self.navigationController?.pushViewController(secondVC, animated: true)
}

다만, 이 경우에는 해당 ViewController가 NavigationController 에 Embed 되어있어야 합니다. 만약 되어 있지 않으면 Modal 로 띄워야 합니다.

@IBAction func moveNext(_ sender: Any) {
    guard let secondVC = self.storyboard?.instantiateViewController(withIdentifier: "SecondVC") else {
        return
    }

    secondVC.modalTransitionStyle = .coverVertical

    self.present(secondVC, animated: true)
}

여기서 modal은 전체 화면을 다 가리기 보다는 일부만 가리는 형태로 띄워집니다. 그리고 push 는 전체 화면을 가리는 형태로 띄워집니다.

모달	전체 화면

모달 방식은 다른 말로 Present 방식이라고도 합니다.

이전 화면으로 이동

그리고 push나 modal로 띄운 ViewController는 아래와 같이 back을 할 수 있습니다.

Push 된 ViewController back

self.navigationController?.popViewController(animated: true)

self.dismiss(animated: true)

내비게이션 컨트롤러는 뷰컨트롤러의 특별한 종류입니다. 내비게이션 컨트롤러는 뷰컨트롤러를 스택에 저장하고, 스택에 저장된 뷰컨트롤러를 관리한다. 그리고 앱 내비게이션을 표시해줄수 있는 내비게이션 바가 내장되어 있습니다.

내비게이션 컨트롤러는 뷰 컨트롤러의 계층적 구조를 관리하는 역할이기 때문에, 직접 컨텐츠를 담고 화면을 구성하지 않습니다. 대신 다른 뷰 컨트롤러를 포함하고 그 뷰 컨트롤러를 관리합니다.

Root View Controller

내비게이션 컨트롤러의 루트 뷰 컨트롤러는 내비게이션 컨트롤러의 스택에 추가된 첫 번째 뷰 컨트롤러입니다. 루트 뷰 컨트롤러는 내비게이션 컨트롤러가 표시하는 첫 번째 화면이 됩니다.

내비게이션 바는 내비게이션 컨트롤러의 뷰 계층 구조에 포함되어 있습니다. 아래 화면에 표시되는 뒤로가기 버튼 즉 내비게이션 바는 개발자가 직접 추가된 것이 아닌 내비게이션 컨트롤러가 자동으로 추가한 것입니다.

[iOS][Swift] Combine 정리 (4) - Networking

Wed, 14 Aug 2024 00:00:00 +0000

서론

해당 포스트는 Combine 의 Networking 처리에 대해 정리한 내용입니다.

Networking

아래는 URLSession 을 이용하여 서버로 부터 데이터를 받고 json 데이터를 디코딩하고 AnyPublisher 로 반환하는 코드입니다.

struct Post: Codable {
    let userId: Int
    let id: Int
    let title: String
    let body: String
}

func fetchPosts() -> AnyPublisher<[Post], Error> {
    return URLSession.shared.dataTaskPublisher(for: URL(string: "https://jsonplaceholder.typicode.com/posts")!)
        .map(\.data)
        .decode(type: [Post].self, decoder: JSONDecoder())
        .eraseToAnyPublisher()
}

let cancellable = fetchPosts()
    .receive(on: DispatchQueue.main).sink { completion in
    print(completion)
} receiveValue: { posts in
    print(posts)
}

dataTaskPublisher()

URLSession.shared.dataTaskPublisher(for: URL) 는 URLSession 의 dataTaskPublisher(for: URL) 을 이용하여 URL 로 부터 데이터를 받아오는 Publisher 를 생성합니다.

eraseToAnyPublisher()

dataTaskPublisher() 의 리턴값은 단순한 Publisher 타입이 아닌 좀 더 복잡한 타입입니다. 하지만 데이터를 수신하는 쪽에서는 복잡한 타입이 아닌 단순한 Publisher 타입을 원합니다. 이때 eraseToAnyPublisher() 를 사용하여 복잡한 타입을 단순한 Publisher 타입으로 변환합니다.

만약 eraseToAnyPublisher() 를 사용하지 않으면 아래와 같은 타입의 Publisher 가 리턴됩니다.

func fetchPosts() -> Publishers.Map<Publishers.Decode<URLSession.DataTaskPublisher, [Post], JSONDecoder>, Data> {
    // 실제로는 더 복잡할 수도 있음
}

따라서 eraseToAnyPublisher() 를 호출하여 사용하기 단순한 AnyPublisher 타입으로 변환합니다.

Error Handling

아래는 네트워크 요청 중 발생하는 에러를 처리하는 코드입니다.

struct Post: Codable {
    let userId: Int
    let id: Int
    let title: String
    let body: String
}

enum NetworkError: Error {
    case badServerResponse
}

func fetchPosts() -> AnyPublisher<[Post], Error> {
    return URLSession.shared.dataTaskPublisher(for: URL(string: "https://jsonplaceholder.typicode.com/posts")!)
        .tryMap { _, _ in
            print("retries")
            throw NetworkError.badServerResponse

//            guard let httpResponse = response as? HTTPURLResponse, httpResponse.statusCode == 200 else {
//                throw NetworkError.badServerResponse
//            }
//            return data
        }
        .retry(3)
        .decode(type: [Post].self, decoder: JSONDecoder())
        .eraseToAnyPublisher()
}

let cancellable = fetchPosts().receive(on: DispatchQueue.main).sink { completion in
    print(completion)
} receiveValue: { posts in
    print(posts)
}

tryMap 연산자를 이용해서 예외를 발생시키고 retry 연산자를 이용해서 지정된 횟수만큼 재시도합니다. 그리고 completion 을 받아서 에러를 처리합니다.

두 개의 Publisher(네트워크 요청)를 합치기

두 개의 Publisher 를 합치는 방법은 CombineLatest 연산자를 사용하면 됩니다.

아래 코드는 두 개의 Publisher 를 합치는 예제입니다.

struct MovieResponse: Decodable {
    let Search: [Movie]
}

struct Movie: Decodable {
    let title: String

    private enum CodingKeys: String, CodingKey {
        case title = "Title"
    }
}

func fetchMovies(_ searchTerm: String) -> AnyPublisher<[Movie], Error> {
    guard let url = URL(string: "https://www.omdbapi.com/?s=\(searchTerm)&page=2&apiKey=564727fa") else {
        fatalError("Invalid URL")
    }

    return URLSession.shared.dataTaskPublisher(for: url)
        .map(\.data)
        .decode(type: MovieResponse.self, decoder: JSONDecoder())
        .map(\.Search)
        .eraseToAnyPublisher()
}

let cancellable = Publishers.CombineLatest(fetchMovies("batman"), fetchMovies("superman"))
    .sink(receiveCompletion: { completion in
        print(completion)
    }, receiveValue: { batmanMovies, supermanMovies in
        print("Batman Movies: \(batmanMovies.count)")
        print("Superman Movies: \(supermanMovies.count)")
    })

fetchMovies() 함수를 이용해서 두 개의 Publisher 를 생성하고 CombineLatest 연산자를 이용해서 두 개의 Publisher 를 합칩니다. 그리고 두 개의 Publisher 가 모두 값을 방출하면 receiveValue 클로저가 호출됩니다.

[iOS][Swift] Combine 정리 (3) - Subject

Mon, 12 Aug 2024 00:00:00 +0000

서론

해당 포스트는 Combine 의 Subject 에 대해 정리한 내용입니다.

Subjects

Subject 는 Publisher 이자 Subscriber 입니다. Subject 는 Publisher 로서 데이터를 발행할 수 있고, Subscriber 로서 데이터를 받을 수 있습니다.

Subject 는 다음과 같은 종류가 있습니다.

PassthroughSubject

PassthroughSubject 는 가장 일반적인 Subject 입니다. PassthroughSubject 는 데이터를 받으면 그대로 다시 발행합니다. 그리고 초기값을 가질 수 없습니다. 그리고 구독을 한 시점 이후에 발행된 데이터만 받을 수 있습니다.

import Combine

let subject = PassthroughSubject<Int, Never>()

subject.send(1) // nothing happens

let cancellable = subject.sink { value in
    print("Received value: \(value)")
}

subject.send(2) // 0
subject.send(3) //1

CurrentValueSubject

CurrentValueSubject 는 초기값을 가질 수 있는 Subject 입니다. CurrentValueSubject 는 가장 최근의 값을 저장하고, 새로운 Subscriber 가 구독을 시작하면 가장 최근의 값을 전달합니다.

let subject = CurrentValueSubject<Int, Never>(-1)

subject.send(0)

let subscription = subject.sink { value in  // 구독을 시작 한 시점에 가장 최근 값인 0을 받는다.
    print("Received value: \(value)")
}

subject.send(1)
subject.send(2)

Custom Subject

Subject 를 상속받아서 커스텀 Subject 를 만들 수 있습니다.

아래 코드는 짝수만 발행하는 EvenNumberSubject 를 만드는 예제입니다.

class EvenSubject<Failure: Error>: Subject {
    typealias Output = Int

    private let wrapped: CurrentValueSubject<Int, Failure>

    init(initialValue: Int) {
        let evenInitialValue = initialValue % 2 == 0 ? initialValue : 0

        wrapped = CurrentValueSubject(evenInitialValue)
    }

    func send(_ value: Int) {
        if value % 2 == 0 {
            wrapped.send(value)
        }
    }

    func send(completion: Subscribers.Completion<Failure>) {
        wrapped.send(completion: completion)
    }

    func receive<S>(subscriber: S) where S: Subscriber, Failure == S.Failure, Int == S.Input {
        wrapped.receive(subscriber: subscriber)
    }

    func send(subscription: Subscription) {
        wrapped.send(subscription: subscription)
    }
}

let evenSubject = EvenSubject<Never>(initialValue: 2)
let cancellable = evenSubject.sink { value in.  // 최초 구독하자마자 2를 수신
    print("Received value: \(value)")
}


 evenSubject.send(3) // 3은 짝수가 아니므로 무시
 evenSubject.send(4)  // 4를 수신
 evenSubject.send(5)  // 5는 짝수가 아니므로 무시

[iOS][Swift] Combine 정리 (3) - 예외 처리

Sun, 11 Aug 2024 00:00:00 +0000

서론

해당 포스트는 Combine 의 예외 처리에 대해 정리한 내용입니다.

tryMap

일반적으로 Publisher 는 예외를 던지지 못합니다. 아래 코드에서 컴파일 에러가 발생합니다.

enum CustomError: Error {
    case operationFailed
}

let pub = [1, 2, 3, 4, 5].publisher

let cancellable = pub
    .map {   // 컴파일 에러!!! No exact matches in call to instance method 'map'
        if $0 == 3 {
            throw CustomError.operationFailed
        }
        return $0
    }.sink {
        print($0)
    }

예외처리를 위해서는 map 대신 tryMap 을 사용해야합니다. 추가적으로 예외를 받아서 처리해야하는 코드를 작성해야합니다.

catch

예외가 발생했을 시 예외처리를 위한 가장 기본적인 방법은 catch 연산자를 사용하는 것입니다.

enum CustomError: Error {
    case operationFailed
}

let pub = [1, 2, 3, 4, 5].publisher

let cancellable = pub
    .tryMap {
        if $0 == 3 {
            throw CustomError.operationFailed
        }
        return $0
    }
    .catch { error in
        print("Error: \(error)")  
        return Just(-1)  // 예외가 발생하면 예외를 처리하고 새로운 값을 방출해야한다. 그리고 새로운 값은 방출되지 않는다.
    }.sink { value in
        print("Value: \(value)")
    }

replaceError

replaceError 연산자는 예외가 발생했을 때 대체 값을 방출합니다. catch 연산자보다 더 간단하게 사용할 수 있습니다.

let cancellable = pub
    .tryMap {
        if $0 == 3 {
            throw CustomError.operationFailed
        }
        return $0
    }
    .replaceError(with: -1)  // -1 을 방출하고 Publisher 를 종료한다.
    .sink {
        print($0)
    }

위 코드는 catch 와 동일한 결과를 반환합니다.

retry

retry 연산자는 예외가 발생했을 때, 지정된 횟수만큼 재시도합니다.

let pub = [1, 2, 3, 4, 5].publisher

let cancellable = pub
    .tryMap {
        if $0 == 3 {
            throw CustomError.operationFailed
        }
        return $0
    }
    .retry(2)
    .sink { completion in  // 반드시 completion 을 받아야합니다.
        print(completion)
    } receiveValue: {
        print($0)
    }

// 1
// 2
// 1
// 2
// 1
// 2
// failure(__lldb_expr_87.CustomError.operationFailed) , 두번 재시도했지만 실패

retry 를 사용할때 반드시 sink 에서 completion 을 받아야합니다. 그렇지 않으면 컴파일 에러가 발생합니다.

[iOS][Swift] Combine 정리 (2) - 변환 연산자, 결합 연산자

Thu, 08 Aug 2024 00:00:00 +0000

서론

해당 포스트는 Combine 에 대해 정리한 두 번째 포스트입니다.

변환 연산자

대표적인 변환 연산자는 map, flatMap, merge 등이 있습니다.

Map

가장 기본적인 변환 연산자로, Publisher로부터 전달된 값을 변환합니다. 정수형인 정수 값을 받아서 2배로 변환할수 있고 심지어 정수형이 아닌 다른 타입으로 변환할 수도 있습니다.

[1, 2, 3, 4, 5].publisher
    .map { $0 * 2 }
    .sink { print($0) }

// 2, 4, 6, 8, 10

[1, 2, 3, 4, 5].publisher
    .map { "Value is \($0)" }
    .sink { print($0) }

// Value is 1, Value is 2, Value is 3, Value is 4, Value is 5

FlatMap

Publisher로부터 전달된 값을 다른 Publisher로 변환합니다. map 은 단일 값을 반환하지만, flatMap 은 여러 값 즉 새로운 Publisher를 반환합니다. 하지만 sink로 값을 받을 때는 단일 값으로 받습니다.

let namePublisher = ["Alice", "Bob", "Charlie"].publisher

let flatMapPublisher = namePublisher.flatMap { name in
    ["Hello, \(name)!", "Hi, \(name)!"].publisher
}

flatMapPublisher.sink { value in
    print(value)
}

Merge

여러 Publisher를 하나의 Publisher로 변환합니다.

let publisher1 = [1, 2, 3].publisher
let publisher2 = [4, 5, 6].publisher
let publisher3 = [7, 8, 9].publisher

let merged = publisher1.merge(with: publisher2, publisher3)

merged.sink { value in
    print(value)
}

Filter

Publisher로부터 전달된 값을 필터링합니다.

[1, 2, 3, 4, 5].publisher
    .filter { $0 % 2 == 0 }
    .sink { print($0) }

// 2, 4  짝수만 출력

CompactMap

Publisher로부터 전달된 값을 변환하고, nil이 아닌 값만 반환합니다.

["1", "2", "3", "four", "5"].publisher
    .compactMap { Int($0) }
    .sink { print($0) }

// 1, 2, 3, 5  
// "four"는 Int로 변환할 수 없기 때문에 제외됩니다.

결합 연산자

Combine 에서는 여러 Publisher를 결합하는 연산자가 있습니다. 대표적으로 Zip, CombineLatest 등이 있습니다.

CombineLatest

여러 Publisher로부터 최신 값을 결합합니다.

let publisher1 = CurrentValueSubject<Int, Never>(1)
let publisher2 = CurrentValueSubject<Int, Never>(2)

let combinedPublisher = publisher1.combineLatest(publisher2)

let cancellable = combinedPublisher.sink { value1, value2 in
    print("Received values: \(value1), \(value2)")
}

publisher1.send(3)
publisher2.send(4)

// Received values: 1, 2
// Received values: 3, 2
// Received values: 3, 4

추가로 서로 결합하는 Publisher 가 서로 다른 타입이라도 결합이 가능합니다.

let publisher1 = CurrentValueSubject<Int, Never>(1)
let publisher2 = CurrentValueSubject<String, Never>("A")

let combinedPublisher = publisher1.combineLatest(publisher2)
let cancellable = combinedPublisher.sink { value1, value2 in
    print("Received values: \(value1), \(value2)")

}

// Received values: 1, A

Zip

CombineLatest 와 비슷하지만, Publisher로부터 전달된 값이 모두 있을 때만 값을 전달합니다. 즉 두 Publisher 중 하나라도 값이 없으면 값을 전달하지 않습니다.

let publisher1 = CurrentValueSubject<Int, Never>(1)
let publisher2 = CurrentValueSubject<Int, Never>(2)

let combinedPublisher = publisher1.combineLatest(publisher2)

let cancellable = combinedPublisher.sink { value1, value2 in
    print("Received values: \(value1), \(value2)")
}

publisher1.send(3)  // publisher2에 값이 없기 때문에 출력되지 않음
publisher2.send(4)  // publisher1, publisher2 모두 값이 있기 때문에 출력됨

// Received values: 1, 2
// Received values: 3, 4

추가로 Publishers 에 확장함수를 이용해서 Zip을 생성할수 있고 3 개 이상의 Publisher 를 결합할 수 있습니다.

zipPub = Publishers.zip(pub1, pub2)
zipPub = Publishers.Zip3(pub1, pub2, pub3)

SwitchToLatest

switchToLatest()는 Combine 프레임워크에서 사용되는 연산자로, 여러 퍼블리셔를 다룰 때 유용하게 사용됩니다.

동작 원리를 살펴보자면

먼저 Publisher 가 하나 존재하고 이를 Outer Publisher 가 있다고 가정합니다. Outer Publisher 는 일반적인 값이 아닌 또 다른 Publisher 를 방출합니다.

let outer = PassthroughSubject<AnyPublisher<Int, Never>, Never>()

이제 Outer Publisher 가 방출하는 Publisher 를 Inner Publisher 라고 부르겠습니다.

let inner1 = CurrentValueSubject<Int, Never>(1)
let inner2 = CurrentValueSubject<Int, Never>(2)

이제 Outer Publisher 가 Inner Publisher 를 방출하도록 설정합니다.

outer.send(AnyPublisher(inner1))

이제 SwitchToLatest 연산자를 사용하여 Inner Publisher 를 구독하고 Inner Publisher 가 방출하는 값을 출력합니다.

outer
    .switchToLatest()
    .sink { value in
        print(value)
    }
// 1

만약 outer 에서 switchToLastest() 를 사용하지 않고 바로 sink 를 사용하게 되면 Inner publisher 의 값을 구독하지 않고 publisher 자체를 구독하게 됩니다.

outer
    .sink { value in
        print(value)
    }
// AnyPublisher<Int, Never>

그리고 inner1 에 새로운 값을 전달하면 switchToLatest() 는 새로운 값을 출력합니다.

outer
    .switchToLatest()
    .sink { value in
        print(value)
    }

inner1.send(3)
// 3

다음 새로운 inner publsiher 를 변경해보겠습니다.

outer
    .switchToLatest()
    .sink { value in
        print(value)
    }

outer.send(AnyPublsiher(inner2))  // inner2 로 변경이 되고 inner1 은 무시됩니다. 그리고 inner2 의 값이 출력됩니다.
inner2.send(4) // 4
inner1.send(5) // outer 는 이미 inner2 로 변경되었기 때문에 inner1 의 값은 출력되지 않습니다.

switchToLatest()를 사용자 입력에 활용하는 좋은 예는 검색 기능을 구현할 때입니다. 사용자가 검색어를 입력할 때마다 네트워크 요청을 보내야 한다고 가정해 보겠습니다. 이 경우 사용자가 빠르게 입력을 변경할 수 있기 때문에, 이전 검색어에 대한 요청은 취소하고 가장 최근의 검색어에 대한 요청만 처리해야 합니다. switchToLatest()를 사용하면 이러한 동작을 쉽게 구현할 수 있습니다.

import Combine
import Foundation

// 검색어 입력을 받는 퍼블리셔
let searchTextPublisher = PassthroughSubject<String, Never>()

// 네트워크 요청을 시뮬레이션하는 함수
func search(query: String) -> AnyPublisher<String, Never> {
    // 실제 네트워크 요청 대신 1초 후에 결과를 반환하는 퍼블리셔
    return Just("Results for \(query)")
        .delay(for: 1.0, scheduler: RunLoop.main)
        .eraseToAnyPublisher()
}

// 검색어가 변경될 때마다 새로운 네트워크 요청을 생성하는 퍼블리셔
let searchResultsPublisher = searchTextPublisher
    .map { query in
        search(query: query)
    }
    .switchToLatest() // 가장 최근의 검색 결과만 구독
    .sink(receiveValue: { result in
        print(result)
    })

// 사용자가 입력하는 시뮬레이션
searchTextPublisher.send("Swift")
searchTextPublisher.send("SwiftUI")
searchTextPublisher.send("Combine")

// 이 경우 "Combine"에 대한 검색 결과만 출력됩니다.

[iOS][Swift] Combine 정리 (1) - 소개, Key Concepts, 사용 예시

Wed, 07 Aug 2024 00:00:00 +0000

서론

해당 포스트는 Combine 에 대해 정리한 내용입니다.

Combine 이란?

Combine은 Swift에서 비동기 및 이벤트 기반 코드를 작성하는 데 사용되는 프레임워크입니다. Combine은 비동기 및 이벤트 기반 코드를 보다 간소화되고 읽기 위운 방식으로 처리하도록 설계되었습니다.
애플은 WWDC 2019 에 첫 공개되었고 반응형 프로그래밍을 간소화시키는 것이 목표입니다.

Key Concepts

Publisher, Subscriber, Operator, Subject

Publisher

Publisher는 값을 생성하고 전달하는 객체입니다.
대표적인 예 : 센서, API 호출, 사용자 입력 등

Subscriber

Subscriber는 Publisher로부터 값을 받아 처리하는 객체입니다.
데이터 스트림을 구독하고, 값을 받아 처리합니다.
대표적인 예 : UI 컴포넌트, Data Processors

Operator

Operator는 Publisher로부터 전달된 값을 변환하거나, 조작하는 객체입니다.
예제 : map, filter, merge, combineLatest 등

Subject

Subject는 Publisher와 Subscriber의 역할을 모두 수행할 수 있는 객체입니다.
동시에 여러 Subscriber에게 값을 전달할 수 있습니다. (Multicast)
예제 : 실시간 데티어 스트리밍, 사용자 인터페이스 업데이트

Combine 장점

비동기 코드를 간소화하고, 읽기 쉽게 만들어줍니다.
쉬운 데이터 조작
확장성과 응답성이 뛰어납니다. (이벤트가 발생하면 구독자는 이벤트를 수신한 다음 사용자 인터페이스를 업데이트할 수 있습니다.)

Combine 사용 예시

Simple Example

import Combine
import UIKit

let publisher = Just("Hello Combine")

let cancellable = publisher.sink { value in
    print(value)
}

cancellable.cancel()

Just는 값을 한 번만 발행하는 Publisher입니다.
sink 함수는 Subscriber를 생성하고, 값을 받아 처리합니다. 값을 받아 처리하 기 위해 sink 함수에 클로저를 전달합니다.
sink 함수의 리턴값은 AnyCancellable 객체입니다. 이 객체를 통해 구독을 취소할 수 있습니다.

Array Example

let numbers = (1 ... 10).publisher
let doublePublisher = numbers.map { Double($0) }

numbers.sink { value in
    print(value)
}

doublePublisher.sink { value in
    print(value)
}

참고로 모든 데이터가 소비되면 AnyCancellable 객체가 자동으로 해제됩니다.

Timer Example

let timerPublisher = Timer.publish(every: 1, on: .main, in: .common)

timerPublisher
    .autoconnect()
    .sink { date in
        print(date)
    }

Timer.publish는 주어진 간격으로 타이머를 생성하는 Publisher입니다.
every 매개변수는 타이머의 간격을 나타냅니다.
on 매개변수는 타이머가 실행되는 스레드를 나타냅니다. 여기서 .main은 메인 스레드를 나타냅니다. 즉 해당 클로저에서 ui 업데이트가 가능합니다.
in 매개변수는 타이머가 실행되는 모드를 나타냅니다. .common과 .default가 있지만 차이점은 없습니다.

connect() vs autoconnect()

connect() 함수는 Publisher를 수동으로 연결하는 함수입니다. 이 함수를 호출해야만 Publisher가 값을 발행합니다. 반면 autoconnect() 함수는 Subscriber가 생기면 자동으로 Publisher를 연결하는 함수입니다.

모든 publisher 에서 사용할수 없으며, connectable publisher 에서만 사용할 수 있습니다. 대표적인 connectable publisher로는 Timer가 있습니다.

final public class TimerPublisher : ConnectablePublisher {
  ///
}

선택 기준

connect(): 세밀한 제어가 필요하거나, 여러 구독자를 설정한 후 동시에 시작해야 하는 경우
autoconnect(): 간단한 사용 사례, 즉시 시작이 필요한 경우

사용 예시

connect()

let publisher = Timer.publish(every: 1, on: .main, in: .common)
let cancellable = publisher
    .sink { date in
        print(date)
    }
// 나중에 원하는 시점에 시작
let connection = publisher.connect()

autoconnect()

let cancellable = Timer.publish(every: 1, on: .main, in: .common)
    .autoconnect()
    .sink { date in
        print(date)
    }  // 바로 시작

.store(in: &set) 메소드

Combine 프레임워크를 사용하다 보면 자주 마주치는 store(in:) 메서드에 대해 알아보겠습니다. 이 메서드는 구독(subscription) 관리에 매우 유용한 도구입니다.

store(in:) 메서드란?

store(in:) 메서드는 AnyCancellable 객체를 지정된 컬렉션에 저장하는 Combine의 유틸리티 메서드입니다. 주로 구독의 수명 주기를 관리하고 메모리 누수를 방지하는 데 사용됩니다.

주요 특징

목적: 구독의 수명 주기 관리 및 메모리 누수 방지
작동 방식: AnyCancellable 객체를 지정된 컬렉션(주로 Set<AnyCancellable>)에 추가
자동 취소: 컬렉션이 해제될 때 저장된 모든 구독도 자동으로 취소됨

AnyCancellable 은 deinit 될 때 자동으로 구독을 취소하는 객체입니다. 따라서 cacellable 프로퍼티가 deinit 될 때, 구독도 자동으로 취소됩니다.

참고: [iOS]Combine의 Cancellable 딥다이브(1)

사용 예시

@main
struct MyApp: App {
    private var cancellables: Set<AnyCancellable> = []

    init() {
        NotificationCenter.default.publisher(for: UIDevice.orientationDidChangeNotification)
            .sink { _ in
                let currentOrientation = UIDevice.current.orientation
                print("Orientation changed to \(currentOrientation)")
            }.store(in: &cancellables)
    }

    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

여기서 store() 를 사용하지 않으면, NotificationCenter.default.publisher(for: UIDevice.orientationDidChangeNotification) 의 구독이 즉시 해제되어, sink 클로저가 호출되지 않습니다.

장점

코드 간결성 : 구독 취소 로직을 별도로 작성할 필요 없음
자동 관리 : 뷰 컨트롤러 들이 해제될 때, 저장된 모든 구독도 자동으로 취소됨
다중 구독 관리 : 여러 개의 구독을 한 번에 관리할 수 있음

예외 처리

enum NumberError: Error {
    case operationFailed
}

let numberPublisher = [1, 2, 3, 4, 5].publisher

let doublePublisher = numberPublisher.tryMap { num in
    if num == 4 {
        throw NumberError.operationFailed
    }

    return num * 2
}.catch { error in
    if let error = error as? NumberError {
        print("Error: \(error)")
    }
    return [1, 2, 3, 4].publisher
}

let subscriber = doublePublisher.sink { value in
    print(value)
}

tryMap은 map과 유사하지만, 클로저가 에러를 던질 수 있습니다.

public func tryMap<T>(_ transform: @escaping (Self.Output) throws -> T) -> Publishers.TryMap<Self, T>

catch는 에러를 처리하고, 새로운 Publisher 를 반환합니다. 그리고 남은 Publisher 는 버려지고 catch 블록에서 반환된 Publisher 가 대신 사용됩니다.

아니면 catch를 사용하지 않고, sink에서 에러를 처리할 수도 있습니다.

```swift
let numberPublisher = [1, 2, 3, 4, 5].publisher

let doublePublisher = numberPublisher.tryMap { num in
    if num == 4 {
        throw NumberError.operationFailed
    }

    return num * 2
}

let subscriber = doublePublisher.sink { completion in
    print("Completion: \(completion)")
} receiveValue: { value in
    print("Value: \(value)")
}

위 코드를 실행 한 결과는 다음과 같습니다.

Value: 2
Value: 4
Value: 6
Completion: failure(__lldb_expr_31.NumberError.operationFailed)

진정한 시니어 개발자란?

Tue, 06 Aug 2024 00:00:00 +0000

시니어 개발자가 되기 위한 조건 또는 스킬

엉망인 코드를 읽을 수 있는 능력
엉망인 코드를 고칠 수 있는 능력
엉망인 코드를 작성하지 않고 또 다른 사람이 엉망인 코드를 작성하지 않도록 지도할 수 있는 능력
정시에 퇴근
Automation Testing
단순 반복 작업 자동화
CI/CD
Clean Code
Architecture Principle & Design Pattern

시니어 개발자가 되기 전 흔히 하는 실수

나쁜 환경(회사)에서 학습
- 나쁜 환경에서는 나쁜 습관을 배울 수 밖에 없다.
자동화된 테스트 코드를 작성하지 않음
- 테스트 코드를 작성하는 시간이 없다고 생각하지만, 테스트 코드를 작성하지 않으면 더 많은 시간을 낭비하게 된다.
- 테스트 코드를 작성하지 않으면 절대 프로젝트를 성공적으로 마칠 수 없다.
- You can only go fast if you go well.
- 생산적인 CI/CD 파이프라인을 통해서 자동화된 Test Suite 를 확보해야 한다.
- 자동화가 없어도 더 빠르게 진행할 수 있다고 믿는 개발자는 실제로 더 느리게 진행하게 된다.

[Flutter] E2E Test (2) - CI에 통합하기

Tue, 13 Feb 2024 00:00:00 +0000

Overview

이번 포스팅에서는 E2E Test를 CI에 적용하는 방법에 대해 알아보겠습니다. 여기서는 E2E Test를 지원하기 위해 기본 integration_test 패키지를 사용하지 않고 patrol 패키지를 사용하고 있습니다.

patrol 패키지에 대해서 알아보시려면 E2E Test (1) - Patrol 패키지 사용하기 포스팅을 참고해주세요.

환경

CI

Flutter CI 를 지원하는 여러 서비스 중에서 Github Actions 를 이용해서 설정을 진행하겠습니다.

Test 환경

CI 환경에서 테스트를 진행할 때 고려할 수 있는 몇 가지 옵션이 있습니다:

시뮬레이터
Firebase Test Lab
AWS Device Farm

이 중 시뮬레이터 사용은 추천하지 않습니다. 실제로 시뮬레이터를 이용한 테스트는 속도가 느리고, 예기치 못한 오류로 인해 테스트가 제대로 수행되지 않는 경우가 많기 때문입니다.

본 포스트에서는 Firebase Test Lab을 사용하여 테스트하는 방법에 초점을 맞추겠습니다.

Firebase Test Lab

Firebase Test Lab은 Google Cloud의 일부로서, 개발자가 다양한 기기와 구성에서 자신의 Android 및 iOS 애플리케이션을 테스트할 수 있게 해주는 클라우드 기반의 앱 테스팅 서비스입니다. 이 서비스를 사용하면 개발자는 실제 기기를 소유하고 있지 않아도, 여러 기기와 운영 체제 버전에서 앱의 성능과 안정성을 테스트하고 문제를 식별할 수 있습니다.

Firebase Test Lab의 주요 기능은 다음과 같습니다:

다양한 기기와 환경에서의 테스트: Firebase Test Lab은 실제 기기 뿐만 아니라 에뮬레이터와 시뮬레이터를 통해 여러 안드로이드와 iOS 기기 및 버전에서 앱을 테스트할 수 있는 환경을 제공합니다.
테스트 결과 및 로그: 테스트 실행 후, Firebase Test Lab은 자세한 결과, 스크린샷, 비디오, 로그를 제공하여 개발자가 문제를 쉽게 식별하고 수정할 수 있게 해줍니다.
통합과 접근성: Firebase Test Lab은 Firebase 및 Google Cloud 플랫폼과 밀접하게 통합되어 있어, CI/CD 파이프라인과 같은 다른 개발 도구와 쉽게 연동할 수 있습니다.

Github Actions Workflow 구성

다음 단계로는 Github Actions Workflow를 구성하는 방법에 대해 알아보겠습니다.

먼저 전체적인 flow는 아래와 같습니다.

준비

Github Actions 에서 Firebase Test Lab 과 통신하기 위해서는 GCP를 통해서 생성된 service-account.json 파일이 필요하고 해당 파일은 Github Actions의 Secret에 미리 저장해두어야 합니다.

service-account.json 파일을 생성하는 방법은 아래 링크를 참고해주세요.

CI 설정 중 firebase 서비스 계정 json 다운로드

그리고 Firebase Test Lab 의 결과값을 저장하기 위해서는 bucket 이 필요합니다. 여기서 bucket 은 Firebase Console 에서 Storage 에서 생성할 수 있습니다. 기존의 bucket 을 사용하거나 새로 생성하여 사용하시면 됩니다. 저는 새로운 bucket 을 생성하여 사용하는 것을 추천드립니다.

Android

먼저 Android 같은 경우 아래와 같이 Workflow를 구성하였습니다.

해당 yaml 파일은 아래와 같습니다.

name: Run Flutter E2E (android) test

jobs:
  e2e:
    runs-on: ubuntu-latest
    outputs:
      SLACK_MESSAGE_TITLE: Flutter E2E Test on ${{ matrix.os }} ${{ matrix.os_version }}
      TESTS_EXIT_CODE: ${{ steps.tests_step.outputs.TESTS_EXIT_CODE }}
      URL_TO_DETAILS: ${{ steps.tests_step.outputs.URL_TO_DETAILS }}
    
    strategy:  # 테스트를 하고자 하는 디바이스 설정
      matrix:
        os: ['Android API']
        include:
          - device_model: 'oriole'
            os_version: '33'

    steps:
      # 1. 코드 체크아웃
      - uses: actions/checkout@v3  

      # 2.1 Flutter 설치
      - uses: subosito/flutter-action@v2
        with:
          channel: 'stable'

      # 2.2. 의존성 설치
      - name: Install dependencies 
        run: flutter pub get

      # 2.3. Gradle wrapper 생성
      - name: Generate Gradle wrapper  
        run: flutter build apk --config-only

      # 3.1. Patrol CLI 설치
      - name: Set up Patrol CLI  
        run: dart pub global activate patrol_cli

      # 3.2. Patrol 빌드
      - name: patrol build android  
        run: patrol build android

      # 4.1. service-account.json 인증
      - name: Authenticate to Google Cloud  
        uses: google-github-actions/auth@v1
        with:
          credentials_json: '${{ secrets.GCP_STAGE_SERVICE_ACCOUNT_JSON }}'

      # 4.2. gcloud 설정
      - name: Set up Cloud SDK   
        uses: google-github-actions/setup-gcloud@v1

      # 5. Firebase Test Lab 에 APK 업로드 및 테스트 실행
      - name: Upload APKs to Firebase Test Lab and wait for tests to finish  
        id: tests_step
        env:
          ANDROID_DEVICE_MODEL: ${{ matrix.device_model }}
          ANDROID_DEVICE_VERSION: ${{ matrix.os_version }}
        run: |
          set +e
          set -euo pipefail
         
          # Firebase Test Lab 실행 및 결과 저장
          output=$(set -euo pipefail && \
          gcloud firebase test android run \
            --type instrumentation \
            --app build/app/outputs/apk/debug/app-debug.apk \
            --test build/app/outputs/apk/androidTest/debug/ap-debug-androidTest.apk \
            --device model="$ANDROID_DEVICE_MODEL",version="$ANDROID_DEVICE_VERSION",locale=en,orientation=portrait \
            --timeout 10m \
            --results-bucket="<버킷 이름 입력>" \
            --use-orchestrator \
            --environment-variables clearPackageData=true 2>&1)

          TESTS_EXIT_CODE=$?
          set -e

          # Extract the last link using grep, tail, and sed, and write it to Github Summary
          link="$(echo "$output" | grep -o 'https://[^ ]*' | tail -1 | sed 's/\[//;s/\]//')"
          echo "[Test details on Firebase Test Lab]($link) (Firebase members only)" >> "$GITHUB_STEP_SUMMARY"

          echo "URL_TO_DETAILS=$link" >> "$GITHUB_OUTPUT"
          echo "TESTS_EXIT_CODE=$TESTS_EXIT_CODE" >> "$GITHUB_OUTPUT"
          exit $TESTS_EXIT_CODE
  
  # 6. Slack 메시지 전송
  call_send_slack_message:  
    name: Notify on Slack
    uses: ./.github/workflows/send_slack_message.yml
    needs: e2e
    if: always()
    with:
      TESTS_EXIT_CODE: ${{ needs.e2e.outputs.TESTS_EXIT_CODE }}
      SLACK_MESSAGE_TITLE: ${{ needs.e2e.outputs.SLACK_MESSAGE_TITLE }}
      URL_TO_DETAILS: ${{ needs.e2e.outputs.URL_TO_DETAILS }}
    secrets: inherit

위 workflow 에서 slack 메시지 전송 부분은 별도의 파일로 분리하여 사용하였습니다. slack 메시지 전송은 필수가 아니기 때문에 slack 메시지 전송 상세 워크플로우는 생략하겠습니다.

iOS

iOS 같은 경우 아래와 같이 Workflow를 구성하였습니다.

iOS 의 경우 Code Signing 이 필요하기 때문에 Fastlane 을 사용하여 Code Signing 을 진행하였습니다.

name: Run Flutter E2E (ios) test

jobs:
  e2e:
    runs-on: macos-latest
    outputs:
      SLACK_MESSAGE_TITLE: Flutter E2E Test on ${{ matrix.os }} ${{ matrix.os_version }}
      TESTS_EXIT_CODE: ${{ steps.tests_step.outputs.TESTS_EXIT_CODE }}
      URL_TO_DETAILS: ${{ steps.tests_step.outputs.URL_TO_DETAILS }}
    strategy:
    # 테스트를 하고자 하는 디바이스 설정
      matrix:  
        device_model: ['iphone14pro']
        os_version: ['16.6']
        os: [iOS]
    steps:
      # 1. 코드 체크아웃
      - uses: actions/checkout@v3 
    
      # 2.1 Flutter 설치
      - uses: subosito/flutter-action@v2 
        with:
          channel: 'stable'

      # 2.2. 의존성 설치
      - name: Install dependencies 
        run: flutter pub get
    
      # 3.1 Ruby 설치 (Fastlane 사용을 위해)
      - name: Install Ruby  
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: 2.7.2
          bundler-cache: true
        
      # 3.2 bundle 설치 (Fastlane 사용을 위해)
      - name: Install bundle  
        run: |
          cd ios
          bundle config path vendor/bundle
          bundle install --jobs 4 --retry 3

      # 4. Fastlane 사용하여 Certificate, Provisioning Profile 설치
      # 5. Fastlane 사용하여 Xcode Code Signing 변경
      - name: Sign iOS app  
        uses: maierj/fastlane-action@v3.0.0
        with:
          lane: code_sign_developemnt
          subdirectory: ios
      
      # 6.1 Patrol CLI 설치
      - name: Set up Patrol CLI   
        run: dart pub global activate patrol_cli

      # 6.2 Patrol 빌드
      - name: patrol build ios
        run: patrol build ios

      # 7.1 service-account.json 인증
      - name: Authenticate to Google Cloud  
        uses: google-github-actions/auth@v1
        with:
          credentials_json: '${{ secrets.GCP_STAGE_SERVICE_ACCOUNT_JSON }}'

      # 7.2 gcloud 설정
      - name: Set up Cloud SDK  
        uses: google-github-actions/setup-gcloud@v1

      # 8. Firebase Test Lab 에 APK 업로드 및 테스트 실행
      - name: Upload iOS App to Firebase Test Lab and wait for tests to finish  
        id: tests_step
        env:
          IOS_DEVICE_MODEL: ${{ matrix.device_model }}
          IOS_DEVICE_VERSION: ${{ matrix.os_version }}
        run: |
            set +e

            # iOS 테스트 준비 및 Firebase Test Lab 실행
            output=$(cd build/ios_integ/Build/Products && \
                    rm -f ios_tests.zip && \
                    zip -r ios_tests.zip Release-iphoneos/*.app *.xctestrun && \
                    cd - && \
                    gcloud firebase test ios run \
                      --type xctest \
                      --test "build/ios_integ/Build/Products/ios_tests.zip" \
                      --device model="$IOS_DEVICE_MODEL",version="$IOS_DEVICE_VERSION",locale=en_US,orientation=portrait \
                      --timeout 10m \
                      --results-bucket=""<버킷 이름 입력>" 2>&1)

            TESTS_EXIT_CODE=$?
            set -e

            # 출력 및 링크 추출
            echo "$output"
            link="$(echo "$output" | grep -o 'https://[^ ]*' | tail -1 | sed 's/\[//;s/\]//')"
            echo "[Test details on Firebase Test Lab]($link) (Firebase members only)" >> "$GITHUB_STEP_SUMMARY"
            echo "URL_TO_DETAILS=$link" >> "$GITHUB_OUTPUT"
            echo "TESTS_EXIT_CODE=$TESTS_EXIT_CODE" >> "$GITHUB_OUTPUT"
            exit $TESTS_EXIT_CODE
  
  # 9. Slack 메시지 전송
  call_send_slack_message:  
    name: Notify on Slack
    uses: ./.github/workflows/send_slack_message.yml
    needs: e2e
    if: always()
    with:
      TESTS_EXIT_CODE: ${{ needs.e2e.outputs.TESTS_EXIT_CODE }}
      SLACK_MESSAGE_TITLE: ${{ needs.e2e.outputs.SLACK_MESSAGE_TITLE }}
      URL_TO_DETAILS: ${{ needs.e2e.outputs.URL_TO_DETAILS }}
    secrets: inherit

Code Signing 을 위한 Fastlane 은 내부적으로 Fastlane match 를 사용하였습니다. Fastlane match 를 사용하면 Code Signing 관리를 쉽게 할 수 있습니다. Fastlane match 은 설정이 조금 복잡하고 어렵기 때문에 해당 포스팅에서는 Fastlane match 설정에 대해서는 다루지 않겠습니다.

Fastlane match 를 통해 Code Signing 을 진행할 때 development 타입 인증서와 provisioning profile 를 사용하는 것을 권장드립니다. 그 이유는 E2E Test binary 를 실행하기 위해서는 provisioning profile의 entitlements에 get-task-allow가 포함되어 있어야 하며 development 타입 인증서와 provisioning profile 에는 get-task-allow가 포함되어 있기 때문입니다.

실행 결과

위와 같이 Workflow를 구성하고 실행하면 아래와 같이 Firebase Test Lab 에서 테스트가 진행되고 결과가 저장됩니다.

테스트 유형에서 XCTest 는 iOS 테스트를 의미하고 도구 작동 은 Android 테스트를 의미합니다.

상세 결과를 확인하고 싶다면 항목 하나를 클릭하면 아래와 같이 상세 결과(로그, 실행 동영상)를 확인할 수 있습니다.

마무리

Patrol 패키지를 사용하여 E2E Test를 CI에 적용하는 방법에 대해서 알아보았습니다. 위에 정리된 워크플로우에 대해서는 각각의 상황에 맞게 수정하여 사용하시면 됩니다.

처음 이 방법을 도입할 때는 여러 오류와 문제에 직면할 수 있습니다. 하지만, 이러한 문제를 해결하고 나면, CI/CD 파이프라인을 구축하는 과정이 매우 즐거운 경험이 될 것입니다. 혹시나 문제가 발생하거나 궁금한 점이 있으시면 언제든지 댓글로 남겨주세요.

그리고 다음 포스팅에서는 아래와 같은 내용을 다루도록 하겠습니다.

Patrol를 이용하여 Google Login 같은 외부 서비스와의 상호작용 및 테스트

감사합니다.

Reference

[Flutter] E2E Test (1) - Test 소개 및 Patrol package 적용하기

Sat, 03 Feb 2024 00:00:00 +0000

Overview

위 포스트에서는 Flutter E2E 자동화 테스트를 적용해보는 내용에 대해서 다루고 있습니다.

1. E2E(End to End) Test 란?

E2E(End-to-End) 테스트는 앱이 실제 사용 환경에서 예상대로 작동하는지 확인하기 위해 전체 시스템을 테스트하는 과정입니다. 이는 실제 기기와 서버를 사용하여 앱의 시작부터 끝까지(한 ‘End’에서 다른 ‘End’까지) 모든 기능을 검사합니다. 전통적으로는 수동으로 수행되었지만, 시간 소모가 크고 오류 가능성이 높은 단점이 있습니다.

이를 극복하기 위해, E2E 테스트의 자동화가 중요해졌습니다. 자동화는 테스트의 일관성을 높이고 시간을 절약하며, 오류 가능성을 줄여줍니다.

특히, 지속적인 통합 및 배포(CI/CD) 파이프라인에서 중요한 역할을 하며, 각 릴리스가 사용자가 요구하는 높은 품질과 신뢰성을 충족하도록 돕습니다.

Flutter와 같은 플랫폼에서는 integration_test 패키지를 통해 E2E 테스트를 자동화할 수 있으며, 이는 앱의 모든 부분이 실제 조건에서 정상적으로 작동하는지 확인하는 데 유용합니다.

E2E Test vs Integration Test vs Instrument Test

해당 포스트에서 E2E Test 와 Integration Test 용어를 혼재하고 있지만 둘은 다른 의미를 가지고 있습니다.

E2E Test: 앱의 전체적인 기능과 성능을 검증하는 테스트로, 사용자의 관점에서 앱의 동작을 검증합니다. 이는 앱의 시작부터 끝까지(Client 에서 Server까지) 모든 기능을 검사합니다.
Integration Test: 앱의 여러 부분이 함께 작동하는지 확인하는 테스트로, 서로 다른 부분들이 함께 잘 작동하는지 확인합니다. 이는 특정 기능이 다른 기능과 잘 통합되는지 확인하는 데 사용됩니다.

그리고 또 Instrument Test 라는 용어가 있습니다. 해당 테스트의 정의는 아래와 같습니다.

Instrument Test: 앱의 UI와 같은 인터페이스를 테스트하는 테스트로, 실제 디바이스나 에뮬레이터에서 실행되는 테스트를 의미합니다. 사용자 인터페이스와 애플리케이션의 통합된 부분이 예상대로 동작하는지 검증합니다. 주로 앱의 성능과 사용자 인터랙션을 포함한 전반적인 기능을 확인합니다.

해당 포스트에서 소개하는 테스트는 엄밀히 따지면 Instrument Test 라고 할 수 있으며 추가로 다른 종단(Server)의 동작 확인도 같이 커버가 되기 때문에 E2E Test 영역에도 속할 수 있습니다.

만약 서버를 Simulator 나 Mocking 을 통해서 테스트를 진행한다면 해당 테스트는 오로지 Instrument Test 에 속하게 됩니다.

flutter에서는 integration_test 이라는 패키지 명을 사용하고 있어서 혹시 오해가 있을 수 있으니 참고하시기 바랍니다.

E2E 자동화 Test 한계점

매우 복잡한 시나리오인 경우 테스트 코드 자체를 작성하는 것이 실제 개발하는 것보다 더 어렵고 시간이 오래 걸릴수가 있습니다.
다양한 예외처리 (예를 들어 서버가 실패하는 시나리오) 를 검증하기 어렵습니다.

E2E 자동화 Test를 적용해야 하는 타겟

앱의 모든 기능에 대해서 E2E 자동화 테스트를 적용하는 것은 현실적으로 어려울 수 있습니다. 따라서, E2E 자동화 테스트를 적용할 때에는 다음과 같은 기준을 고려하여 적용하는 것이 좋습니다.

중대한 핵심 기능: E2E 테스트는 시스템의 가장 중요하고 핵심적인 기능들, 특히 실패 시 심각한 결과를 초래할 수 있는 기능들에 초점을 맞춰야 합니다. 이러한 기능들은 시스템의 안정성과 사용자 경험에 직접적인 영향을 미치기 때문에, 신중하게 테스트되어야 합니다.
개발 완료 및 UI 변경 가능성이 낮은 기능: 개발이 완전히 마무리된 기능들, 특히 추후에 UI 시나리오나 기능 자체에 대한 변경 가능성이 낮은 기능들은 E2E 테스트의 이상적인 대상입니다. 이러한 기능들은 테스트 스크립트를 자주 수정할 필요가 없어, 테스트의 유지 관리 부담을 줄일 수 있습니다.

2. Flutter Sample app 에 E2E Test 적용하기

먼저 아래 간단한 예제를 통해서 E2E Test 를 적용해보겠습니다.

Sample App 소개 및 코드

아래 플로팅 버튼을 누르면 카운터가 증가하는 간단한 앱을 예제로 사용하겠습니다.

Dart Code

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Counter App',
      home: MyHomePage(title: 'Counter App Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // Provide a Key to this button. This allows finding this
        // specific button inside the test suite, and tapping it.
        key: const Key('increment'),
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

integrate test 패키지 추가

Integrate test 를 사용하기 위해서는 integration_test 패키지를 추가해야 합니다.

dev_dependencies:
  flutter_test:
    sdk: flutter
  integration_test:
    sdk: flutter

Sample App E2E Test 코드

해당 앱에 대한 E2E Test 코드는 아래와 같습니다.

Dart Code

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:integration_test/integration_test.dart';
import 'package:introduction/main.dart';

void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized(); // 테스트 코드의 최상단에 해당 코드를 호출합니다.

  group('end-to-end test', () {
    testWidgets('tap on the floating action button, verify counter',
        (tester) async {
      // 최상위 위젯을 로드 합니다.
      await tester.pumpWidget(const MyApp());

      // 첫 화면에서 텍스트 0을 찾습니다.
      expect(find.text('0'), findsOneWidget);

      // 플로팅 액션 버튼을 찾습니다. 여기서 Key 값은 위젯의 Key 값과 동일해야 합니다.
      final fab = find.byKey(const Key('increment'));

      // 플로팅 액션 버튼을 탭합니다.
      await tester.tap(fab);

      // 화면을 갱신합니다.
      await tester.pumpAndSettle();

      // 텍스트 1을 찾습니다.
      expect(find.text('1'), findsOneWidget);
    });
  });
}

E2E Test 실행

아래 명령어를 수행하면 현재 컴퓨터에 연결된 디바이스나 에뮬레이터에서 E2E Test 가 실행됩니다.

flutter test integration_test/app_test.dart

Flutter `integration_test` 패키지 설명

flutter integration test 를 이해하기 위해서는 아래 Tester, Finder, Assertion 에 대한 이해가 필요합니다.

Tester

Flutter에서의 테스트 과정을 이해하는 데 있어, 실제 사용자나 테스터가 단말기를 조작하는 행위를 모방하는 것이 핵심입니다. 이를 위해 Flutter 테스트 프레임워크는 사용자의 상호작용을 재현할 수 있는 Teseter 를 제공합니다. 특히, 화면 탭(tap), 화면 스크롤(scroll), 텍스트 입력(TextField) 과 같은 기본적인 사용자 상호작용을 시뮬레이션할 수 있는 API들이 포함되어 있습니다.

또한, Flutter 테스트에서는 위젯의 상태 변화와 애니메이션 처리를 위한 중요한 API들이 제공됩니다:

pumpWidget() 은 테스트 환경에서 특정 위젯을 초기화하고 렌더링하는 데 사용됩니다. 이는 앱이 시작될 때 runApp()에 의해 실행되는 주 위젯을 설정하는 과정과 유사합니다. 이 메서드를 통해, 테스트하고자 하는 위젯을 테스트 트리의 루트로 설정할 수 있습니다.
pump() 는 위젯 트리에 단일 프레임을 트리거하는 데 사용되며, 선택적으로 특정 시간 동안 대기할 수 있습니다. 예를 들어, pump(Duration(seconds: 1))을 호출하면, 위젯 트리가 업데이트되고 1초 동안 대기한 후 다음 코드 라인이 실행됩니다. 이는 애니메이션 진행이나 UI 변화가 한 단계씩 진행될 때 유용합니다.
pumpAndSettle() : 애니메이션과 같은 비동기 작업들이 완료될 때까지 여러 번 프레임을 트리거합니다. 이는 애니메이션이나 다른 비동기 이벤트들이 완료되고 위젯 트리가 안정화될 때까지 반복적으로 프레임을 생성합니다. 기본적으로, 이 메서드는 100ms 간격으로 프레임을 생성하며, 최대 300번 시도한 후에 멈춥니다. 애니메이션이나 비동기 이벤트들이 모두 완료될 때까지 기다리는 상황에서 매우 유용합니다.

Finder

Flutter 테스트에서 find는 위젯을 찾는 데 사용되는 다양한 방법들을 제공합니다. find를 통해 테스트하려는 위젯을 정확하게 식별하고 검증할 수 있습니다. 다음은 몇 가지 일반적인 위젯 찾기 방법들입니다:

텍스트로 찾기: find.text를 사용하여 특정 텍스트를 포함하는 Text 위젯을 찾습니다. 예를 들어, find.text('Hello')는 화면에 ‘Hello’라는 텍스트를 포함하는 모든 위젯을 찾습니다.
키로 찾기: find.byKey를 사용하여 특정 Key를 가진 위젯을 찾습니다. 예를 들어, find.byKey(Key('uniqueKey'))는 ‘uniqueKey’라는 키를 가진 위젯을 찾습니다.
타입으로 찾기: find.byType를 사용하여 특정 타입의 위젯을 찾습니다. 예를 들어, find.byType(IconButton)는 모든 IconButton 위젯을 찾습니다.
아이콘으로 찾기: find.byIcon을 사용하여 특정 아이콘을 가진 Icon 위젯을 찾습니다. 예를 들어, find.byIcon(Icons.add)는 ‘add’ 아이콘을 가진 위젯을 찾습니다.
위젯 특성으로 찾기: find.byWidgetPredicate를 사용하여 특정 조건을 만족하는 위젯을 찾습니다. 예를 들어, 특정 위젯이 Container이고 특정 색상을 가지는지 확인할 수 있습니다.
애니메이션으로 찾기: find.byAnimation을 사용하여 특정 Animation을 가진 위젯을 찾습니다. 예를 들어, 특정 애니메이션 컨트롤러를 사용하는 위젯을 찾을 수 있습니다.
조건을 충족하는 첫 번째/마지막 위젯 찾기: find.first나 find.last를 사용하여 조건을 충족하는 첫 번째나 마지막 위젯을 찾습니다.

Assertion

Flutter 테스트 프레임워크에서는 다양한 종류의 assertion을 제공합니다. 이들은 테스트 중에 특정 조건이 충족되는지 확인하는 데 사용됩니다. 여기 몇 가지 자주 사용되는 assertion들을 소개합니다:

findsOneWidget: expect 함수와 함께 사용될 때, 이 assertion은 정확히 하나의 위젯이 찾아지기를 기대합니다. 예를 들어, expect(find.text('Hello'), findsOneWidget);은 ‘Hello’라는 텍스트를 포함하는 위젯이 정확히 하나만 존재해야 함을 검증합니다.
findsNothing: 이 assertion은 주어진 조건을 만족하는 위젯이 하나도 없어야 함을 검증합니다. 예를 들어, expect(find.text('Goodbye'), findsNothing);은 ‘Goodbye’라는 텍스트를 포함하는 위젯이 없어야 함을 의미합니다.
findsWidgets: 이 assertion은 하나 이상의 위젯이 찾아지기를 기대합니다. 예를 들어, expect(find.byType(TextButton), findsWidgets);는 하나 이상의 TextButton 위젯이 존재해야 함을 검증합니다.
findsNWidgets: 특정 수의 위젯이 찾아지기를 기대합니다. 예를 들어, expect(find.byIcon(Icons.add), findsNWidgets(3));는 ‘add’ 아이콘을 가진 위젯이 정확히 세 개 존재해야 함을 의미합니다.

기본 Integrated test package의 한계

Native 요소와의 상호 작용 한계: 예를 들어, 퍼미션 팝업: 일부 네이티브 요소, 특히 시스템 권한 요청과 같은 팝업은 E2E 테스트 도구로 직접 상호 작용하는 것이 불가능합니다.
서버 응답 대기 시간 추정 필요성: 서버와의 통신 과정에서 발생하는 로딩 시간을 고려하여, 테스트에서 얼마나 오랫동안 응답을 기다려야 할지를 예측하고 설정해야 합니다. 이는 테스트의 신뢰성과 실행 시간에 직접적인 영향을 미칩니다.
pump 및 pumpAndSettle 사용에 대한 혼란: 특정 액션 후에 위젯 업데이트를 기다리기 위해 pump 또는 pumpAndSettle을 호출해야 하는데, 어느 것을 사용해야 할지 결정하는 것이 혼란스러울 수 있습니다. 이 둘은 위젯 상태의 변화를 처리하는 방식에서 차이가 있으며, 적절한 선택이 중요합니다.
위젯 상호 작용의 복잡성: 위젯과 상호 작용하기 위해 finder를 사용하여 위젯을 찾고, assertion을 통해 실제로 존재하는지 확인한 후, tap과 같은 액션 API를 호출하고, 이후에 pump 또는 pumpAndSettle을 호출하는 과정은 번거롭고 가독성이 떨어질 수 있습니다. 이러한 절차는 테스트 코드의 복잡성을 증가시킵니다.

Patrol 라이브러리 도입 및 장점

Patrol 라이브러리는 기본 integrated test package의 문제점을 해결하기 위해 특별히 설계된 혁신적인 도구입니다. 이 라이브러리의 주요 목적은 개발자들이 앱의 전체적인 기능과 성능을 보다 효율적으로 검증할 수 있도록 지원하는 것입니다. Patrol을 사용함으로써, 테스트 작성과 관리의 복잡성이 대폭 감소합니다.

Patrol 라이브러리의 주요 장점

네이티브 요소와의 상호 작용 가능: Patrol을 사용하면 네이티브 요소와의 상호 작용이 가능해져, 이전에는 테스트하기 어려웠던 시나리오들을 다룰 수 있게 됩니다.
서버 응답 대기 시간 설정의 용이성: Patrol에서는 서버 응답을 기다리는 시간을 사용자가 직접 설정할 수 있습니다. 설정된 시간은 최대 대기 시간으로 작용하며, 응답이 빠르게 도착하면 즉시 다음 테스트 단계로 넘어갑니다.
pump 및 pumpAndSettle의 간소화: Patrol은 내부적으로 pump 및 pumpAndSettle를 적절히 호출합니다. 따라서 개발자는 이러한 함수를 직접 호출할 필요가 거의 없어지며, 테스트 코드 작성이 더 간편해집니다.
코드 간소화 및 가독성 향상: Patrol은 특정 위젯과의 상호 작용을 위한 복잡한 코드를 단순화합니다. 이를 통해 가독성이 높고 직관적인 코드 작성이 가능해지며, 불필요한 보일러플레이트 코드가 대폭 줄어듭니다.

Patrol 설치

Patrol 라이브러리를 사용하기 위해서는 pubspec.yaml 파일에 추가하는 것 뿐만 아니라 patrol cli 도 설치해야 합니다. 설치 방법 및 셋팅은 Patrol 공식 웹사이트에서 확인할 수 있습니다.

Patrol Finder

Patrol 라이브러리에서 가장 장점중 하나가 기존 Package 보다 향상된 Widget finder 를 통해서 직관적으로 짧은 코드로 구현이 가능하다는 점입니다.

예시를 하나 들어서 살펴보겠습니다. 만약 버튼 하나를 찾아서 클릭하는 테스트 코드를 작성한다고 가정해보겠습니다.

final fab = find.byKey(const Key('increment'));
await tester.tap(fab);
await tester.pumpAndSettle();

위 코드를 Patrol에서는 아래와 같이 간단하게 작성이 가능합니다.

await $(#increment).tap();

Patrol 라이브러리에서 $ 기호는 매우 중요한 역할을 합니다. 이 기호는 기존의 Finder, Tester 그리고 Assertion 기능을 통합한 것으로, 위젯을 찾고 상호 작용하는 데 사용됩니다. 이러한 통합은 테스트 코드를 간소화하고 가독성을 높이는 데 크게 기여합니다.

또한, # 기호는 위젯의 key 값을 지정하는 데 사용됩니다. 예를 들어, #increment는 key 값이 increment인 위젯을 찾는 데 사용됩니다. 이는 특정 위젯을 식별하고 테스트 코드에서 참조하기 쉽게 만들어 줍니다.

Patrol 라이브러리의 사용성과 간소화된 코드 구조는 아래 예제를 통해 더욱 명확하게 이해할 수 있습니다.

SignUp 화면에서 Email, Name, Password 입력 후 SignUp 버튼을 클릭하는 테스트 코드를 작성한다고 가정해보겠습니다.

먼저 기본 Integrated test 패키지를 사용한 코드입니다.

testWidgets('signs up', (WidgetTester tester) async {
  await tester.pumpWidget(AwesomeApp());
  await tester.pumpAndSettle();

  await tester.enterText(
    find.byKey(Key('emailTextField')),
    'charlie@root.me',
  );
  await tester.pumpAndSettle();

  await tester.enterText(
    find.byKey(Key('nameTextField')),
    'Charlie',
  );
  await tester.pumpAndSettle();

  await tester.enterText(
    find.byKey(Key('passwordTextField')),
    'ny4ncat',
  );
  await tester.pumpAndSettle();

  await tester.tap(find.byKey(Key('termsCheckbox')));
  await tester.pumpAndSettle();

  await tester.tap(find.byKey(Key('signUpButton')));
  await tester.pumpAndSettle();

  expect(find.text('Welcome, Charlie!'), findsOneWidget);
});

그 다음 Patrol 라이브러리를 사용한 코드입니다.

patrolWidgetTest('signs up', (PatrolTester $) async {
  await $.pumpWidgetAndSettle(AwesomeApp());

  await $(#emailTextField).enterText('charlie@root.me');
  await $(#nameTextField).enterText('Charlie');
  await $(#passwordTextField).enterText('ny4ncat');
  await $(#termsCheckbox).tap();
  await $(#signUpButton).tap();

  await $('Welcome, Charlie!').waitUntilVisible();
});

단순 코드를 비교해도 코드량이 줄어들고 코드 자체가 매우 직관적으로 변화하는 것을 확인할 수 있습니다.

Native 요소와의 상호 작용

Patrol에서는 네이티브 요소와의 상호 작용이 가능해져, 이전에는 테스트하기 어려웠던 시나리오들을 다룰 수 있게 됩니다. 예를 들어, 퍼미션 팝업과 같은 네이티브 요소들을 테스트하는 것이 가능해집니다.

void main() {
  patrolTest('demo', (PatrolIntegrationTester $) async {
    await $.pumpWidgetAndSettle(AwesomeApp());
    // prepare network conditions
    await $.native.enableCellular();
    await $.native.disableWifi();

    // toggle system theme
    await $.native.enableDarkMode();

    // handle native location permission request dialog
    await $.native.selectFineLocation();
    await $.native.grantPermissionWhenInUse();

    // tap on the first notification
    await $.native.openNotifications();
    await $.native.tapOnNotificationByIndex(0);
  });
}

위 OS 레벨의 상호작용 뿐만 아니라 Google Login 같이 외부 서비스와의 상호작용도 가능합니다. 해당 내용은 다음 포스트에서 자세히 다루도록 하겠습니다.

실제 Product 에 Patrol 라이브러리 적용해보기

먼저 제가 속해있는 팀에서 개발 중인 앱, B^ Discover에 대해 소개드리겠습니다. 이 앱은 AI 기술을 활용하여 사용자가 입력한 텍스트(Prompt)를 바탕으로 다양한 멀티미디어 콘텐츠를 생성해 주는 서비스를 제공합니다. 사용자의 아이디어를 시각적 형태로 변환해주어, 창의적인 작업을 더 쉽고 효율적으로 만들어줍니다.

관심 있으신 분들은 다음 링크를 통해 다운로드 받으실 수 있습니다

그리고 저는 해당 앱 프로젝에서 Patrol 라이브러리를 적용해 보았으며, 이를 통해 앱의 성능과 사용자 경험을 한층 더 향상시키고자 하였습니다.

테스트 시나리오 구성

사용자가 앱을 실행하고, 특정 텍스트를 입력하고, 이를 바탕으로 AI가 이미지를 생성하는 과정을 테스트하고자 합니다.

구체적인 시나리오와 테스트 코드는 아래와 같습니다.

최종 실행 결과

위 시나리오와 같이 테스트 코드를 작성하고 Patrol 라이브러리를 적용한 결과, 아래와 같이 테스트가 성공적으로 실행되었습니다. 아래는 실제로 Patrol 라이브러리를 적용해서 실행되는 것을 캡처한 화면입니다.

마치며

Fluttter E2E Test 를 작성할 때 기본 패키지보다는 Patrol 라이브러리를 사용하는 것이 훨씬 효율적이고 가독성이 좋다는 것을 알 수 있었습니다. 위 시나리오에 대해서 기본 패키지로 구현하게 된다면 훨씬 더 많은 코드(250줄 정도)를 작성해야 하고 그리고 또한 pump 및 pumpAndSettle 을 잘못 사용하게 되면 테스트가 실패할 수도 있습니다. 그래서 디버깅을 하고 오류를 찾는 과정이 매우 고통스웠습니다.

하지만 Patrol 라이브러리를 사용하게 되면 훨씬 더 간단하고 직관적인 코드(100줄 미만)를 작성할 수 있었습니다. 그리고 또한 네이티브 요소와의 상호작용이 가능해져서 테스트하기 어려웠던 시나리오들을 다룰 수 있게 됩니다.

요약을 하자면

Patrol 라이브러리를 사용하면 훨씬 더 간단하고 직관적인 코드를 작성할 수 있습니다.
네이티브 요소와의 상호작용이 가능해져서 테스트하기 어려웠던 시나리오들을 다룰 수 있게 됩니다.

그리고 다음 포스팅에서는 아래와 같은 내용을 다루도록 하겠습니다.

Patrol를 이용하여 Google Login 같은 외부 서비스와의 상호작용 및 테스트
E2E Test 과정을 Github actions 의 CI에 적용하는 방법

Reference

[iOS] iOS 배포 시 Certification, Provisioning Profile 정리

Wed, 24 Jan 2024 00:00:00 +0000

서론

해당 포스트는 iOS app 을 빌드 과정 및 배포 과정에서 사용되는 Certification, Provisioning Profile 에 대해 정리한 내용입니다. 특히 CI/CD 환경에서 iOS 앱을 빌드할 때 Certification, Provisioning Profile 을 어떻게 셋팅하는지 알아보도록 하겠습니다.

코드 서명이란?

iOS에서 코드 서명(Code Signing)이 필요한 이유는 여러 가지가 있습니다. 이는 주로 보안, 신뢰성 및 사용자 경험과 관련이 있습니다:

보안 강화: 코드 서명은 앱이 변조되지 않았으며 신뢰할 수 있는 소스에서 왔음을 확인합니다. 이는 악성 소프트웨어가 시스템을 해치는 것을 방지하는 데 도움이 됩니다.
신뢰성 보장: 애플은 개발자가 등록하고 고유한 인증서를 통해 앱을 서명하도록 요구함으로써, 개발자가 그들의 앱에 대한 책임을 질 것임을 보장합니다. 이는 사용자에게 해당 앱이 신뢰할 수 있는 개발자에 의해 생성되었다는 확신을 줍니다.
App Store 정책 준수: iOS 앱은 Apple의 App Store를 통해 배포됩니다. App Store에 앱을 제출하기 위해서는 코드 서명이 필요합니다. 이는 애플이 앱의 품질과 보안을 관리하고, 사용자에게 안전하고 신뢰할 수 있는 앱만 제공하도록 하는 데 중요한 역할을 합니다.
시스템 무결성 및 안정성 유지: 코드 서명은 앱이 iOS 시스템의 기본 보안 정책과 호환되도록 보장합니다. 이는 앱이 시스템의 안정성이나 다른 앱의 기능에 부정적인 영향을 미치지 않도록 합니다.
사용자 개인정보 보호: 코드 서명을 통해 애플은 개발자가 iOS 장치의 보안 기능을 우회하거나 사용자의 개인 정보를 부적절하게 수집하는 앱을 배포하지 못하도록 방지합니다.

코드 서명 과정

iOS에서의 코드 서명 과정은 인증서(Certification)와 프로비저닝 프로파일(Provisioning Profile) 두 가지 주요 요소를 이용합니다. 이 과정은 대략 다음과 같이 진행됩니다:

개발자 인증서 생성 및 등록: 개발자는 먼저 Apple Developer Program에 등록합니다. 그 후, 개발자는 자신의 Mac에서 고유한 공개 키/개인 키 쌍을 생성합니다. 이 개인 키는 개발자만이 알고 있어야 합니다. 공개 키는 Apple에 제출되어 개발자 인증서(Certificate)를 생성하는 데 사용됩니다. 이 인증서는 앱이 해당 개발자에 의해 개발되었음을 증명하는 역할을 합니다.
프로비저닝 프로파일 생성: 프로비저닝 프로파일은 특정 앱, 특정 디바이스, 그리고 특정 개발자 인증서에 대한 정보를 포함합니다. 이 프로파일은 애플의 개발자 웹사이트에서 생성되며, 앱이 설치될 수 있는 디바이스와 이를 개발할 수 있는 인증서를 명시합니다.
앱 서명: 개발자는 앱을 빌드하고, 자신의 개인 키를 사용하여 앱에 서명합니다. 이 과정에서 개발자의 인증서와 프로비저닝 프로파일이 사용됩니다. 서명된 앱은 프로비저닝 프로파일에 명시된 디바이스에서만 실행될 수 있으며, 해당 인증서로 인증된 개발자에 의해 생성된 것으로 인식됩니다.
앱 배포 및 검증: 서명된 앱은 이제 배포될 준비가 되었습니다. 사용자가 앱을 설치할 때, iOS는 앱의 서명을 검증하여 인증서의 유효성과 프로비저닝 프로파일의 정보가 일치하는지 확인합니다. 이 검증 과정을 통해 앱의 신뢰성과 안전성이 확보됩니다.

인증서 (Certification)

인증서는 개발자의 신원을 확인하고, 애플리케이션의 코드가 안전하게 서명되었음을 보증하는 데 사용됩니다. 인증서는 목적에 따라서 다음과 같이 나뉩니다.

개발 인증서(Development Certificate):

목적: 개발 중인 앱을 테스트하기 위해 사용됩니다.
사용: 이 인증서를 사용하여 서명된 앱은 등록된 테스트 디바이스에서만 실행될 수 있습니다.
특징: 개발 인증서는 개별 개발자 또는 개발 팀에 할당됩니다.

배포 인증서(Distribution Certificate):

목적: 앱 스토어에 앱을 배포하거나 Firebase App Distribution 배포를 위해 사용됩니다.

프로비저닝 프로파일 (Provisioning Profile)

프로비저닝 프로파일의 역할

디바이스 식별: 프로비저닝 프로파일은 특정 앱이 특정 iOS 디바이스에서 실행될 수 있도록 합니다. 이를 통해 개발자는 앱을 특정 디바이스에 설치하고 테스트할 수 있습니다.
앱 서명: 개발자가 앱에 서명하는 데 사용되는 인증서를 포함합니다. 이는 앱이 해당 개발자에 의해 만들어졌음을 보증합니다.
앱 실행 권한 관리: 프로비저닝 프로파일은 앱이 어떤 환경(개발 또는 배포)에서 실행될 수 있는지 정의합니다.

프로비저닝 프로파일의 유형

development
- 앱을 개발하고 테스트하는 동안 사용됩니다.
- 특정 개발자 계정과 연결된 디바이스에서만 앱을 실행할 수 있도록 합니다.
appstore
- 앱을 App Store 나 TestFlight 에 배포할 때 사용됩니다.
ad-hoc
- 앱을 특정 디바이스에 배포할 때 사용됩니다.
- 특정 개발자 계정과 연결된 디바이스에서만 앱을 실행할 수 있도록 합니다.
enterprise
- 기업이 자체 개발한 iOS 애플리케이션을 그들의 직원이나 구성원에게 배포할 때 사용됩니다.
- Apple의 공식 App Store를 거치지 않고, 기업 내부에서만 사용되는 애플리케이션을 직접 관리하고 배포할 수 있습니다.

요약

Fastlane 을 이용한 iOS Build

CI/CD 를 이용할 때 보통 Fastlane 을 이용하여 iOS 앱을 빌드하고 배포하는 경우가 많습니다. Fastlane 을 이용하여 iOS 앱을 빌드하는 과정에서 Certification, Provisioning Profile 을 어떻게 사용하는지 알아보도록 하겠습니다.

CI/CD 를 이용하여 iOS 앱을 서명할 때는 보통 수동으로 설정하고 match 를 이용하여 코드 서명을 진행합니다. 여기서 match 에 대해서는 해당 포스트에서 다루지 않겠습니다.

제가 match 를 통해서 관리하는 Certification, Provisioning Profile 은 아래와 같습니다.

인증서는 development, distribution 나누어져 있고, 프로비저닝 프로파일은 adhoc, appstore, development 로 나누어져 있습니다.

참고로 아래 Fastlane code는 중요한 부분만 간략하게 작성한 것이며, 실제로는 더 많은 코드가 있습니다. 자신의 환경에 맞게 코드를 작성하시면 됩니다.

앱의 번들 아이디는 com.sample.app 이라고 가정하겠습니다.

1. Firebase App Distribution 배포

Firebase App Distribution 을 이용하여 iOS 앱을 배포하는 경우는 사용되는 인증서와 프로비저닝 프로파일은 아래와 같습니다.

인증서	프로비저닝 프로파일
distribution	adhoc

추가적으로 enterprise 프로비저닝 프로파일을 사용할 수도 있습니다.

Fastlane 은 아래와 같이 구성합니다.

match(
  type: "adhoc",
  app_identifier: ["com.sample.app"],
)

update_code_signing_settings(
  use_automatic_signing: false,
  path: "Runner.xcodeproj",
  code_sign_identity: 'iPhone Distribution'
)

update_target_provision(
  target: 'Runner', 
  config: 'Release' 
)

build_app(
  export_method: "ad-hoc",  
)

firebase_app_distribution()

2. TestFlight or Appstore 배포

Firebase App Distribution 을 이용하여 iOS 앱을 배포하는 경우는 사용되는 인증서와 프로비저닝 프로파일은 아래와 같습니다.

인증서	프로비저닝 프로파일
distribution	appstore

Fastlane 은 아래와 같이 구성합니다.

match(
  type: "appstore",
  app_identifier: ["com.sample.app"],
)

update_code_signing_settings(
  use_automatic_signing: false,
  path: "Runner.xcodeproj",
  code_sign_identity: 'iPhone Distribution'
)

update_target_provision(
  target: 'Runner', 
  config: 'Release' 
)

build_app(
  export_method: "app-store",
)

upload_to_testflight()

3. Firebase Test Lab 배포

Firebase Test Lab 을 이용해서 E2E Test 또는 Integration Test 를 진행하는 시나리오에 대해서 알아보겠습니다. 이때 XCode 에서는 XCTest 을 위한 Runner 가 추가로 존재하고 해당 번들 아이디는 com.sample.app.RunnerUITests 라고 가정하겠습니다.

그리고 사용되는 인증서와 프로비저닝 프로파일은 아래와 같습니다.

인증서	프로비저닝 프로파일
development	development

// 주의할 점은 XCode 에 사용되는 번들 아이디는 com.sample.app.RunnerUITests 이지만 실제 provisioning profile 에는 com.sample.app.RunnerUITests.xctrunner 를 사용해야 합니다.

match(
  type: "development",
  app_identifier: ["com.sample.app", "com.sample.app.RunnerUITests.xctrunner"],  
)

update_code_signing_settings(
  use_automatic_signing: false,
  path: "Runner.xcodeproj",
  code_sign_identity: 'iPhone Distribution'
)

update_target_provision(
  target: 'Runner', 
  config: 'Release' 
)

update_target_provision(
  target: 'RunnerUITests', 
  config: 'Release' 
)

// XCTestRunner 를 빌드합니다.
// 자세한 것은 아래 링크를 참고하세요.
// https://firebase.google.com/docs/test-lab/ios/run-xctest?hl=ko#project

# xcodebuild -project PATH/TO/YOUR_WORKSPACE/YOUR_PROJECT.xcodeproj \
#    -scheme YOUR_SCHEME \
#    -derivedDataPath FOLDER_WITH_TEST_OUTPUT \
#    -sdk iphoneos build-for-testing

// XCTesetRunner 를 zip 파일로 압축합니다.
# cd build/ios_integ/Build/Products
# zip -r ios_tests.zip Release-iphoneos/*.app *.xctestrun

// firebase test lab에 업로드
# gcloud firebase test ios run \
# 	--type xctest \
# 	--test "build/ios_integ/Build/Products/ios_tests.zip" \
# 	--device model="$IOS_DEVICE_MODEL",version="$IOS_DEVICE_VERSION",locale=en_US,orientation=portrait \
# 	--timeout 10m \
# 	--results-bucket= Firebase Storage 이름 \

Reference

https://sujinnaljin.medium.com/ios-certificate-%EC%99%80-provisioning-profile-e1b9455e8a51

2023년 회고

Mon, 01 Jan 2024 00:00:00 +0000

해당 포스트는 2023년 한 해를 되돌아보며, 그간의 경험과 성과를 정리하고 리뷰하는 내용을 담고 있습니다.

1. Job

저는 현직에서 Flutter 개발자로 재직 중입니다. Flutter 라는 강력한 프레임워크를 활용해 사용자 친화적이면서도 기술적으로 앞선 애플리케이션을 개발하는 것이 제 주업무입니다.

현재 개발 중인 B^ Discover 는 AI를 활용하여 이미지, 캐릭터, 영상을 생성하는 앱입니다. 이 앱은 Flutter 프레임워크를 사용하여 개발되었으며, iOS 및 Android 플랫폼에서 사용할 수 있습니다. ‘B^ Discover’는 사용자가 AI 기술을 통해 쉽고 빠르게 창의적인 콘텐츠를 만들 수 있게 도와줍니다.

앱의 다운로드 링크는 아래와 같습니다.

특히 올해는 저희 팀에게 매우 의미 있는 시간이었습니다. 저희는 B^ Discover 2.0 이라는 대규모 업데이트를 진행했으며, 그 결과 연말에는 AI 우수상’을 수상했습니다. 이러한 성과는 저희 팀원들의 노력 덕분이었고, 저도 그 노력의 일부분을 담당했음에 감사하게 생각합니다.

그리고 Flutter 외에도 B^ Discover 서비스의 백엔드 부분 개발도 진행하였습니다.

B^ Discover 서비스 백엔드 영역은 Cloud Functions 를 사용하고 있었습니다. 초기에는 JavaScript로 개발되어 있었으나, 서비스의 규모가 커지면서 JavaScript만으로는 한계에 부딪혔습니다.

이에 따라, 우리 팀은 JavaScript 코드를 TypeScript로 마이그레이션하는 중대한 결정을 내렸습니다. TypeScript는 더 강력한 타입 시스템과 개발 시 오류를 줄일 수 있는 기능을 제공함으로써, 서비스의 확장성과 유지보수성을 크게 향상시켰습니다.

2. 자격증

근 제가 근무하는 회사에서는 주로 Google Cloud Platform(GCP)을 사용하고 있습니다. 개발 과정에서 GCP의 다양한 서비스를 활용하면서 자연스럽게 GCP에 대해서 관심을 가지게 되었습니다. 이러한 경험을 바탕으로 GCP에 대한 더 깊은 지식을 쌓고자 했고, 결국 GCP Associate Cloud Engineer 자격증을 취득하게 되었습니다.

GCP Associate Cloud Engineer 자격증 취득 후기는 아래 링크를 참고 바랍니다.

GCP Associate Cloud Engineer 자격증 취득 후기

3. 개발 공부

올해 저는 아래와 같은 강의와 도서를 통해 개발 공부를 진행했습니다.

3.1. 강의

3.2. 개발 관련 도서

Gof의 디자인 패턴
함수형 코딩
HTTP 완벽 가이드

3.3 교양 도서

데일 카네기 인간관계론
이와타씨에게 묻다
유난한 도전
조엘 온 소프트웨어
육각형 개발자
개발자 원칙

4. 2023 년 정리

4.1. 향상 된 점

JavaScript 를 중급 정도로 사용할 수 있게 되었습니다.
TypeScript 를 처음 사용해봤고 초중급 정도로 사용할 수 있게 되었습니다.
Node.js 를 처음 사용해봤고 간단한 스크립트를 작성할 수 있게 되었습니다.
Github Actions 를 사용하여 CI/CD를 구축할 수 있게 되었습니다.
iOS 앱 빌드 과정을 이해하게 되었습니다.
Fastlane 을 사용하여 iOS 앱 배포 과정을 자동화할 수 있게 되었습니다.
GCP 에 대한 기본적인 지식을 쌓을 수 있었습니다.
함수형 프로그래밍 에 대해서 심화된 지식을 쌓았으며 실제 Product에 적용하여 복잡한 코드를 직관적이고 단순하게 리팩토링을 적용한 경험이 있습니다.

4.2. 아쉬운 점

Android 를 거의 손 놓고 있었습니다. Android 를 조금 더 공부해야겠습니다.
육아/업무를 병행 하면서 건강 관리를 소홀히 했습니다.(특히 몸무게) 앞으로는 건강 관리에 더 신경써야겠습니다.
블로그 포스팅을 거의 하지 못했습니다. 앞으로는 블로그 포스팅을 좀 더 자주 해야겠습니다.

5. 2024 년 목표

iOS 에 대해서 공부, 특히 Swift Ui 를 사용해서 사이드 프로젝트를 진행
한 달에 1회 이상 블로그 포스팅
Flutter Integrate Test 를 적용해보기
한 달에 1권 이상의 도서 읽기

6. 마치며

2023년은 제게 많은 변화를 가져온 해였습니다. 그 중에서도 가장 큰 변화는 아이가 태어난 것이었습니다. 육아는 상상 이상으로 육체적, 정신적으로 도전적인 일이었고, 육아, 업무, 개인적 성장 등 어느 하나 확실히 잘하고 있다는 느낌이 들지 않아 우울함을 많이 느꼈습니다. 하지만 시간이 지나면서 아기도 저도 성장하며 서서히 서로 적응하고 있습니다.

올해는 많은 목표를 세우기보다는 몇 가지 확실한 목표에 집중하고자 합니다. 특히 건강 관리에 더 많은 신경을 쓰려고 합니다. 그리고 열심히 일하고, 열심히 공부하고, 열심히 살아가는 모습을 아이에게 보여주고 싶습니다.

끝으로 2024년도 저에게 많은 변화가 있을 것이라고 생각합니다. 그 변화를 기대하며, 2023년을 마무리하겠습니다.

[Flutter] Github actions 에서 CCache 를 적용해서 iOS 빌드 속도를 개선해 보기

Thu, 07 Dec 2023 00:00:00 +0000

Overview

이번 포스트에서는 Github Actions 을 이용한 Flutter CI/CD workflow에서 Ccache 를 적용하여 ios 빌드 성능을 개선하였던 내용에 대해서 다루고 있습니다.

1. 문제 인식

Ccache 를 적용하기 앞서서 먼저 아래 포스트를 참고하시면 좋을 것 같습니다.

Flutter Github actions 에서 iOS 빌드/배포 속도 개선

위 포스트를 보면 iOS 빌드 속도를 줄이기 위해 firebase-prebuilt library를 사용하고 있었는데요 Firebase 버전을 최신으로 올리면서 해당 Library를 사용하게 되면 앱이 빌드가 안되는 문제가 발견되었습니다. 이 문제는 아직 수정이 되지 않고 있습니다. 해당 문제는 아래 링크를 참고하시면 좋을 것 같습니다.

any version 10.17.0 or higher: Error (Xcode): Undefined symbol

2. Local 환경에서 Ccache 적용

Ccache 는 C/C++ 컴파일러를 위한 캐시 시스템으로 컴파일된 오브젝트 파일을 캐시에 저장하여 다음 빌드 시에 재사용할 수 있도록 해줍니다. 이를 통해서 빌드 시간을 줄일 수 있습니다.

1. Ccache 설치

brew 를 통해서 Ccache 를 설치합니다.

brew install ccache

설치가 완료되면 아래 명령어를 통해서 Ccache 가 잘 설치되었는지 확인합니다.

ccache -V

2. 환경 변수 추가

.bashrc, .bash_profile 나 .zshrc 파일에 아래와 같이 환경 변수를 추가합니다.

export PATH="/opt/homebrew/opt/ccache/libexec:$PATH"

3. 심볼릭 링크 걸기

아래와 같이 심볼릭 링크를 걸어줍니다.

ln -s $(which ccache) /usr/local/bin/gcc
ln -s $(which ccache) /usr/local/bin/g++
ln -s $(which ccache) /usr/local/bin/cc
ln -s $(which ccache) /usr/local/bin/c++
ln -s $(which ccache) /usr/local/bin/clang
ln -s $(which ccache) /usr/local/bin/clang++

4. 설정 확인

아래 명령어를 통해서 Ccache 설정이 잘 되었는지 확인합니다.

which gcc

정상적으로 설정이 되었다면 아래와 같이 출력이 됩니다.

 which gcc
/opt/homebrew/opt/ccache/libexec/gcc

5. ios/Podfile 수정

ios/Podfile 에 아래와 같이 스크립트를 추가합니다.

...
post_install do |installer|
  installer.generated_projects.each do |project|
      project.targets.each do |target|
        target.build_configurations.each do |config|
            config.build_settings["CC"] = "clang"
            config.build_settings["LD"] = "clang"
            config.build_settings["CXX"] = "clang++"
            config.build_settings["LDPLUSPLUS"] = "clang++"
        end
      end
  end

6. 빌드 시간 측정

아래 명령어를 통해서 빌드 시간을 측정합니다.

flutter build ipa

첫 번째 빌드 시간은 아래와 같이 327,777ms 가 소요되었습니다. 그리고 ccache -s 명령어를 통해서 캐시 효율을 확인해보면 0% 입니다. 왜냐하면 첫 번째 빌드이기 때문에 아직 cache 가 생성되지 않았기 때문입니다.

"flutter ipa" took 327,777ms.

 ccache -s
Cacheable calls:    2655 / 2655 (100.0%)
  Hits:                0 / 2655 ( 0.00%)
    Direct:            0
    Preprocessed:      0
  Misses:           2655 / 2655 (100.0%)
Local storage:
  Cache size (GiB):  0.6 /  5.0 (11.18%)
  Hits:                0 / 2655 ( 0.00%)
  Misses:           2655 / 2655 (100.0%)

두 번째 빌드 시간은 아래와 같습니다.

"flutter ipa" took 130,970ms.

 ccache -s
Cacheable calls:    5310 / 5310 (100.0%)
  Hits:             2655 / 5310 (50.00%)
    Direct:         2655 / 2655 (100.0%)
    Preprocessed:      0 / 2655 ( 0.00%)
  Misses:           2655 / 5310 (50.00%)
Local storage:
  Cache size (GiB):  0.6 /  5.0 (11.18%)
  Hits:             2655 / 5310 (50.00%)
  Misses:           2655 / 5310 (50.00%)

시간이 절반으로 줄어들었습니다. 그리고 ccache -s 명령어를 통해서 캐시 효율을 확인해보면 50% 입니다. 즉, 캐시가 잘 생성되었다는 것을 알 수 있습니다. 50%인 이유는 두 번째 빌드 시에는 첫 번째 빌드 시에 생성된 캐시를 사용하기 때문입니다.

자 이제 Github Actions 에서 Ccache 를 적용해보도록 하겠습니다.

3. Github Actions 에서 Ccache 적용

1. 워크플로우 구성

- name: Update env  // Ccache 환경 변수 추가
  run: |
    echo "/usr/lib/ccache:/usr/local/opt/ccache/libexec:$PATH" >> $GITHUB_PATH
    echo "CCACHE_SLOPPINESS=clang_index_store,file_stat_matches,include_file_ctime,include_file_mtime,ivfsoverlay,pch_defines,modules,system_headers,time_macros" >> $GITHUB_ENV
    echo "CCACHE_FILECLONE=true" >> $GITHUB_ENV
    echo "CCACHE_DEPEND=true" >> $GITHUB_ENV
    echo "CCACHE_INODECACHE=true" >> $GITHUB_ENV

  - name: Install Ccache  // Ccache 설치
    uses: hendrikmuhs/ccache-action@v1.2
    with:
      key: $-v2
      max-size: 5G

  - name: Build ipa  // 빌드
    run: flutter build ipa

2. 확인

workflow 를 실행하면 최초 빌드 시 캐시가 없기 때문에 시간이 오래 걸리지만 두 번째 빌드 시에는 캐시를 사용함으로써 빌드 시간이 단축되었습니다. 그리고 workflow 의 출력을 통해 Ccahe의 캐시 효율을 확인해볼수 있습니다.

3. 결과

Ccache 를 적용한 결과 빌드 시간은 약간 유동적이긴 하지만 분명히 빌드 시간을 크게 줄이는 데 성공했습니다.

Ccache 적용 전

Ccache 적용 후

Reference

[Dart] Dart 3.0 Alpha 정리

Thu, 26 Jan 2023 00:00:00 +0000

해당 포스트는 Dart 3.0 에 추가되는 New feature를 정리한 포스트입니다.

1. Multiple Returns

Dart 2.x 에서는 여러 개의 값을 리턴하기 위해서 아래 예제 처림 data class 선언해서 사용했어야 합니다.

class UserInfo {
  final String name;
  final int age;

  UserInfo(this.name, this.age)
}

UserInfo userInfo(Map<String, dynamic> json) {
  return UserInfo(json['name'] as String, json['age'] as int);
}

main() {
  var info = userInfo(json);
  var name = info.name;
  var age = info.age;
}

하지만 Dart 3.0 에서는 아래와 같이 여러개의 값을 리턴이 가능하여 더이상 data class 객체를 선언하지 않아도 됩니다.

(String,int) userInfo(Map<String, dynamic> json) {
  return (json['name'] as String, json['age'] as int);
}

main() {
  var info = userInfo(json);
  var name = info.$1;
  var age = info.$2;
}

이 때 (String, int) 처럼 N 개의 Data 를 담고 있는 타입을 Records 라고 합니다.

What are records?

First Class : Records 는 일급 객체로 취급하여 함수에 인자로 넘기기, 변수에 할당하기 등 다양한 연산이 가능하다.
Object : 객체로 취급이 된다.
Value semantics : == , hashcode 가 자동으로 define 되어 동등성 체크가 바로 가능하다.

Record destructuring

Records 을 아래와 같이 바로 분해해서 변수에 할당하는 것도 가능합니다.

var (name, age) = userInfo(json);

2. Control Flow in Argument Lists

위젯에서 상태에 따라서 속성이나 child widget 을 부여할 때 3항 연산자를 주로 사용하게 됩니다. 아래 예제는 hasNextStep 이라는 상태에 따라서 속성을 추가할지 아니면 null 로 set 할지를 결정하는 코드입니다.

ListTile(
  leading ; const Icon(Icons.weekend),
  title : const Text('Welcome'),
  enabled : hasNextStep,
  subtitle : hasNextStep ? const Text('Tap to Advance.') : null,
  onTap : hasNextStep ? () { advance(); } : null,
  trailing : hasNextStep() ? null : const Icon(Icons.stop)
)

다만 이런 코드가 많을 수록 가독성이 안 좋아지기 마련입니다. 하지만 Dart 3.0 에서는 이러한 부분이 개선되어 Widget 안에 if 문을 사용하여 좀 더 가독성있는 코드를 구현이 가능해집니다.

ListTile(
  leading ; const Icon(Icons.weekend),
  title : const Text('Welcome'),
  enabled : hasNextStep,

  if (hasNextStep) ...(
    subtitle : const Text('Tap to Advance.') ,
    onTap : () { advance(); },
  ) else ...(
    trailing : const Icon(Icons.stop)
  )
)

3. JSON Destructuring

일반적으로 JSON 내에서 내가 원하는 값을 파싱하기 위해서는 아래와 같이 코드를 작성하게 되며 그리고 원하는 값은 한번에 하나 씩만 가져올수 있었습니다.

var json = {'user' : ['Lily', 13]};

var name = json['user']![0];
var age = json['user']![1];

dart 3.0 에서는 한번에 여러개의 값을 파싱이 가능합니다.

var json = {'user' : ['Lily', 13]};
var {'user' : [name, age]} = json;

3. Usable Switches

dart 2.x 의 switch 문은 단순히 비교하는 값과 일치하는 label 로 점프를 해주는 기능만 제공하였습니다.

switch (charCode) {
  case slash:
    if (nextCharCode == slash) {
      skipComment ();
    } else {
      operator (charCode);
    }
  case star:
  case plus:
  case minus:
    operator (charCode);
  default:
    if (charCode >= digitO && charCode <= digit9) {
      number () ;
    } else {
      invalid ();
    }
}

dart 3.0 에서는 switch 문에 아래와 같이 다양한 기능이 추가가 되어 가독성을 향상 시킬수 있습니다.

switch (charCode) {
  case slash when nextCharCode == slash: // 조건을 더 추가 할수 있다.
    skipComment ();
  case slash || star || plus || minus: // case 를 여러 개로 묶어서 한줄로 표현이 가능하다.
    operator (charCode);
  case >= digito && <= digit9:       // 조건문 을 사용할수 았다.
    number();
  default:
    invalid();
}

그리고 switch 문 자체에 값을 return 이 가능해집니다. 따라서 switch 문의 실행 결과를 변수에 바로 할당이 가능합니다.

var token = switch (charCode) {
  slash when nextCharCode == slash => skipComment (), 
  slash || star || plus | minus => operator (charCode) ,
  >= digitO && <= digit9 => number () ,
  _ => throw invalid()
};

Switch 문과 JSON 파싱하는 코드를 결합하여 JSON 유효성 검사 및 데이터 파싱을 너무나 쉽게 할수 있습니다.

var json = {'user': ['Lily', 13]};

switch (json) {
  case ('user': [String name, int age]}:
    print ('User $name is $age years old.');
  default:
    throw 'Unknown message'
}

4. Next Steps

현재 Dart 3.0 은 alpha 버전이며 23년 중반에 stable 로 출시를 목표로 하고 있습니다.

Reference

Bringing pattern matching to Dart

GCP Associate Cloud Engineer 자격증 취득 후기

Sun, 15 Jan 2023 00:00:00 +0000

0. 들어가며

Cloud 의 C 자도 모르는 프론트엔드 개발자가 Google Associate Cloud Engineer (ACE) 자격증을 취득한 후기를 남겨봅니다.

1. GCP 자격증 소개

먼저 GCP 란 Google Cloud Platform 의 약자로 Cloud Bigtech 3 대장중 하나입니다. Cloud 3 대장이라 하면 아래와 같습니다.

AWS
MS Azure
Google Cloud Plateform

위 각 Cloud 플랫폼마다 Cloud 관련 지식을 인증하는 자격증이 있으며 Cloud 세부 분야에 대해서 자격증이 존재합니다. 그 중 GCP 는 아래와 같은 가격증이 있습니다.

그 중에 저는 Associate Cloud Engineer 등급의 자격증을 취득했습니다.

2. GCP-ACE 시험 방식

장소 : On Site/Remote 선택, Remote 를 할 경우 시험비가 할인이 됩니다.
시간 : 2시간
문항 : 50문제/객관식
준비물 : 여권, 웹캠(카메라가 달린 노트북으로 추천)

3. 공부 기간

약 1달
매일 2시간 씩 꾸준히 공부

4. 시작하게 된 계기

현재 제가 재직중에 있는 회사에서 GCP 를 사용하고 있습니다. 제가 주로 하는 업무가 MVP, PoC 형태의 서비스를 개발하다보니 팀원 규모도 작고 빨리 빨리 개발해보고 다른 걸 또 시도하다보니 프론트엔드/백엔드의 룰이 엄격하게 나누어 있지 않습니다. 그러다 보니 저도 GCP 를 조금씩 보게 되었는데요,

GCP 를 처음 접했을 때 수 많은 메뉴를 보고 멘붕(?) 를 경험했습니다. 그래서 GCP에 대해서 조금 자세히 알고 싶어서 GCP를 공부하게 되었고 추가적으로 공부 했던 지식에 대해서 Milestone 를 남기고 자 GCP 자격증 취득을 목표로 하였습니다.

5. 공부 방법

강의

Coursera ⭐⭐⭐⭐⭐

기본적으로 Coursera 강의를 들으면서 기본적인 GCP 에서 제공하는 서비스에 대해서 숙지하는 것이 좋습니다.

Link

처음 등록하고 1주일 동안 무료이니 1주일 동안 빡세게 듣는 것을 추천 드립니다.

Youtube ⭐⭐⭐⭐

그리고 두 번째로 Youtube 강의 중에 아래 강의도 추천드립니다.

Link

GCP에 대해서 요약이 매우 잘 되어 있습니다. 총 20시간이라서 부담스럽긴 합니다. 해당 강의는 각 잡고 보기보다는 출퇴근 시간에 버스나 지하철에서 보는 것을 추천드립니다. 저는 주로 재택 근무라서 집에서 워킹 패드를 하면서 봤는데 시간이 정말 잘 갑니다 :)

강의를 보면 GCP 에서 실습을 하는데 만약 공부 시간이 충분하면 실습을 따라하는 게 좋지만 시간이 없다면 실습을 패스하는 것을 추천드립니디.

Dump 문제 풀기

자격증을 취득하기 위해서 위 강의만 듣는 것으로는 부족하기에 아래 언급된 Dump를 풀면서 연습하는 것이 중요합니다.

Examtopics ⭐⭐⭐⭐⭐

Link

약 100문제 정도를 무료로 볼수 있습니다. 해당 덤프의 문제가 실제 GCP 시험 문제와 가장 비슷하기에 여러번 풀면서 확실히 숙지하는 것을 추천 드립니다.

문제는 정답이라고 표기한 것이 80% 이상이 오답입니다. 그래서 저는 아래 방법으로 해결했습니다.

블로그에서 확인하기
- 어떤 분이 친절히 풀이를 정리했습니다.
ChatGPT 활용하기
- 문제를 그대로 복붙하면 정답 및 풀이를 자세히 설명합니다. 이 방법도 추천드립니다.
Discussion 확인하기
GCP Document 확인하기

Cloud Gru ⭐⭐⭐

Link

회원 가입을 하면 덤프 문제 및 강의도 1 주일 동안 무료로 제공합니다. 다만 문제 난이도가 실제 시험보다 높은 편이라 시간이 없으면 굳이 볼 필요가 없습니다.

GCP Sample 문제 ⭐⭐⭐⭐

Link

20 문제 샘플 문제를 제공합니다. 문제 난이도는 실제 시험과 비교했을 때 살짝 더 어려운 거 같습니다.

gcp-examquestions.com ⭐⭐⭐

Link

쉬운 문제도 있지만 너무 어려운 문제도 섞여 있습니다. 공부 시간이 별로 없다면 패스해도 무방합니다.

5. 시험 방식

시험 시작하기 10 분전에 미리 공유된 링크에 접속하면 버튼이 활성화 되면서 버튼을 누르게 되면 시험을 시작하게 되는데 그 전에 상담원과 챗으로 신분증과 카메라로 주위환경을 보여달라고 요청을합니다.

시험 시간은 총 2시간이고 카메라로 관찰을 하기 때문에 함부러 자리를 이탈하면 안됩니다. 만약 화장실이 급하다면 상담원에게 요청을 하면 5분정도 휴식 시간을 주어집니다.

시험 문제를 제출하게 되면 아래와 같이 Pass/Fail 여부를 알수 있어서 좋았습니다. 그리고 최종 확인은 10일 내로 알려준다고 합니다.(부정 행위가 있는지 확인 하는 듯)

저 같은 경우 4일 정도 소요가 됬습니다.

6. 시험 후기

저는 10년 이상의 프론트엔드(모바일 App) 개발자로 쭈욱 일해왔습니다. 이 전 회사같은 경우 규모가 꽤 큰 편이라서 백엔드 개발자 또는 팀이 따로 존재하였고 그래서 저는 백엔드/인프라 분야에 볼 일도 없었고 별로 흥미도 없었습니다.

하지만 최근에 스타트업이 붐을 일으키면서 많은 회사에서 인프라를 기존 On-premise 방식이 아닌 Cloud로 사용하면서 저도 Cloud에 대해서 배워야 겠다는 생각이 많이 들었습니다.

마지막으로 자격증을 땄다고 해서 제가 당장 GCP 를 잘 쓸수 있다고 생각하지는 않습니다. 하지만 제가 얻게 된 성취는 다음과 같습니다.

Infra/Cloud 에 대한 전반적인 지식 습득
GCP 콘솔을 볼 때 헤매거나 멘붕하지 않게됨
새로운 문제나 요구사항를 마주칠 때 이때 GCP 어떤 서비스를 이용하면 되겠다 라는 인사이트 획득
인프라/백엔드 개발자와 커뮤니케이션을 더 잘할수 있을거 같음

2022년 회고

Sun, 08 Jan 2023 00:00:00 +0000

해당 포스트는 2022년 한 해를 돌아보며 정리 및 리뷰를 해보았습니다.

1. Job

Good bye 11번가

2020.02에 입사하였고 2022.02 월에 퇴사를 하였습니다.

11번가에서는 11번가 Android app 개발자로 근무하였고 기억에 남는 프로젝트는 11번가 아마존 런칭이였습니다. 말도 많도 탈도 많았지만 그래도 무사히 출시하여 개인적으로 매우 뿌듯하였습니다.

개인적으로 같은 팀원 분들도 모두 괜찮았고 워라벨도 좋아서 매우 만족하면서 일을 다녔는데요 조금 과장해서 저는 월요병을 겪어보지 않고 즐겁게 회사에 출근하였습니다.

다만 중간에 코로나 때문에 입사 한 지 얼마 안되서 재택을 하는 바람에 팀원들과 깊이 있게 교류를 하지 못한 점은 개인적으로 아쉬웠습니다.

Hello Kakaobrain

22.03 에 입사를 하여 현재까지 근무를 하고 있습니다.

카카오브레인에 대해서 조금 생소할수 있는데요 저 또한 헤드헌터한테 소개받았을 때 카카오에 그런 회사가 있었나?? 라고 갸우뚱했었거든요

카카오브레인에 대해서 간략히 소개하면 AI 관련 분야를 전문적으로 연구하는 회사입니다. 그래서 그런지 회사내에서는 정말 똑똑하신 석*박사님이 참 많습니다.

원래는 주로 연구 위주의 회사였는데 22년 부터는 AI를 활용한 서비스를 개발하는 것으로 기조가 바뀌면서 AI 전문가 뿐만 아니라 저 같이 어플리케이션 개발자를 채용을 하였고 운이 좋게도 제가 채용이 된 것이죠~

현재 저는 기존 Android 개발이 아닌 Flutter 개발자로 커리어를 변경하였습니다.

제가 카카오브레인에 이직을 하게 된 주요 원인은 Android 외에 Flutter 로 커리어를 확장하고 싶었고 마침 카카오브레인에서 Flutter 관련 개발자를 찾고 있었기에 냉큼 지원을 했었습니다.

지금 생각해보면 역시 이직은 운/타이밍이 70%인거 같습니다. :)

다음은 2022년 카카오 브레인에서 제가 개발한 앱은 다음과 같습니다.

Remy (22.06 v1.0 Release)

Remy 는 제가 입사하고 처음으로 출시한 앱입니다.

Remy 는 영어학습을 도와주는 앱으로 사람이 영어를 학습할 때 청킹 이라는 사람이 쉽게 인식할수 있는 단위로 잘라서 영어를 읽어서 학습 능률을 극대화 시킵니다.

Flutter 기반으로 개발이 되었으며 제가 Flutter 를 이용해서 처음으로 상용화한 서비스라 그런지 애착이 가는 앱입니다.

B^ Discover (22.10. v1.0 Release)

B^ Discover 는 문장(Text) 를 입력하면 해당 문장을 분석해서 알맞은 그림으로 그려주는 앱입니다.

이러한 서비스를 T2I(Text To Image) 라고 하며 내부적으로 Karlo 라는 카카오브레인에서 자체 개발한 AI 모델을 사용합니다.

해당 앱은 마찬가지로 Flutter 기반으로 개발되었습니다.

현재 저는 B^ Discover 앱을 고도화 및 신규 기능을 개발하고 있습니다.

2. 기술 스택

현재 커리어가 Android 에서 Flutter 로 변경을 하였기 때문에 주로 Flutter 위주로 기술 스택을 향상 시켰습니다. 하지만 Android 에 대해서 완전 손을 놓기 보다는 감각(?) 을 유지하기 위해서 Compose 를 공부하고 있습니다.

그리고 회사 업무 외에 사이드 프로젝트로 웹을 주로 공부를 했습니다. 지금은 웹 쪽이 시들시들 해지고 그대신 현재 Cloud Computing 을 공부하고 있고 GCP 자격증을 준비 중입니다.

Flutter
- Riverpod
Android
- Compose
Web
- React
- NextJS
Github Actions
Cloud Computing
- GCP

3. Life

모각코

저는 김포에 한 아파트에 거주하고 있는데요 아파트 내에서 개발에 관심을 가지고 있는 입주민과 함께 22.04 월부터 지금까지 꾸준히 모각코 모임을 가지고 있습니다.

모각코 멤버는 개발자 뿐만 아니라 다양한 직업을 가진 사람들이 참여하고 있습니다. 이 중에 가장 눈에 띄는 분은 스타트업 CEO 이신데 노코드에 관심을 가지고 노코드를 열심히 공부하고 있습니다.

모각코를 통해 다양한 사람들과 이야기를 하면서 개발 외적으로도 많은 것을 배울수 있었습니다.

4. 2023 년 목표

GCP 자격증

원래는 22년 12월에 따는 것이 목표였지만 12월에 회사일이 너무 바빠서 결국 이루지 못하였습니다. 올해 1월에 취득을 목표로 하고 있습니다.

iOS

Flutter 를 개발하면서 iOS 분야 지식에 대한 필요성이 많이 느껴졌습니다. 그래서 올 해 iOS 에 좀 더 깊게 공부해서 iOS 로 앱을 하나 개발하는 것이 목표입니다.

오프라인 밋업 발표

올해 다양한 오프라인 밋업을 참여하면서 저도 한번 발표를 하고 싶어졌습니다. Flutter 전문가가 되기 위해서는 대중 앞에서 내가 아는 지식을 설명하고 발표를 할수 있어야 생각합니다. 그래서 올 해 Flutter 관련해서 오프라인 밋업 행사에서 발표를 하는 것이 목표입니다.

[Flutter] Github actions 에서 iOS 빌드/배포 속도 개선

Fri, 06 Jan 2023 00:00:00 +0000

Overview

이번 포스트에서는 Github Actions 을 이용한 Flutter CI/CD 구축 중에 iOS 빌드/배포 속도를 어떻게 개선했는지에 대해서 정리를 하였습니다.

1. 문제 인식

먼저 저는 현업에서 개발 중인 Flutter App 을 Github actions 를 이용하여 CI/CD 환경을 구축하는 업무를 진행하였고 거의 완성 되었을 때 iOS 빌드/배포 소요 시간이 너무 느리다는 것을 파악했습니다.

먼저 안드로이드 같은 경우 빌드/배포까지 평균 10분 정도 소요가 됨으로 그럭저럭 쓸만한 성능을 내고 있습니다.

하지만 iOS 같은 경우 빌드/배포까지 50분~60분 정도 소요가 되었습니다.

앱 빌드/배포하는데 1시간이나 걸리게 되면 개발자의 편의성을 위해서 CI/CD 를 구축하는게 의미가 없어집니다. 따라서 이 문제를 해결하기 위해 많은 시행 착오를 겪었습니다.

2. Flutter iOS 빌드/배포 분석

먼저 iOS 빌드/배포 성능을 개선하기 위해서는 iOS 빌드/배포를 알아야 합니다.

보통 Flutter CI/CD는 아래와 같이 구축을 하게 됩니다.

여기서 시간이 가장 소요되는 것은 flutter build ios 부분입니다. 총 32분이 소요되었습니다.

flutter build ios 를 보면 내부적으로 pod install, xcode build 두 과정을 수행하게 됩니다.

pod install 은 약 10분 그리고 xcode build 은 약 22분이 소요가 되었습니다.

그래서 flutter build ios 이 부분를 개선해보도록 하겠습니다.

3. 개선 작업 (1)

먼저 pod install 과정을 개선해보겠습니다. pod install 은 ios 를 빌드할 때 필요한 외부라이브러리를 다운받고 설치하는 과정입니다. 여기서 사용되는 대표적인 외부 라이브러리는 Firebase 관련 라이브러리입니다. 그중 Firestore 관련 라이브러리가 시간을 어머어마하게 잡아먹습니다.

그래서 해결 방법은 Pre-build 된 Firestore 라이브러리를 직접 사용하는 것입니다. 아래와 같이 ios/Podfile 에 Pre-build 된 Firestore 라이브러리를 사용하도록 스크립트를 추가합니다.

target 'Runner' do
  pod 'FirebaseFirestore', :git => 'https://github.com/invertase/firestore-ios-sdk-frameworks.git', :tag => '10.3.0'
  // ~~~
end

주의할 점은 Firestore tag 는 pubspec.yaml 의 firestore 의 버전에 따라 달라집니다. 꼭 버전을 확인해서 알맞은 tag 를 사용하도록 합니다.

좀 더 자세한 내용은 아래 링크를 확인 바랍니다.

How to speed-up Cloud Firestore Xcode builds on your Flutter apps

3. 개선 작업 (2)

flutter build ios 를 실행하면 내부적으로 xcode build 를 수행하게 되는데 문제는 Fastlane에서 xcode build 를 다시 수행하기 때문에 먼저 수행되는 xcode build 는 수행할 필요가 전혀 없습니다. 따라서 이 과정을 스킵하기 위해서 flutter build ios 를 수행할 때 --config-only 를 붙입니다.

flutter build ios –flavor prod –release –config-only –no-codesign -t lib/dev/main.dart

4. 결과

위 개선 작업을 적용한 결과 아래와 같이 iOS 빌드/배포 시간이 18분 정도로 약 30분 정도 시간을 단축하였습니다.

[리팩토링] YAGNI

Sat, 30 Jul 2022 00:00:00 +0000

YAGNI

You Ain’t Gonna Need It

Do it

깨끗하게
변경이 쉽게
유지보수 용이

Do not it

당장 필요하지 않는 기능
사용하지 않는 기능
지나치게 미래지향적

Reference

리팩터링 2판

[리팩토링] Chapter 3. 코드에서 나는 악취

Fri, 29 Jul 2022 00:00:00 +0000

코드에서 나는 악취

냄새 나면 당장 갈아라

코드에서 악취가 난다는 기준은 아래와 같이 정리할수 있다.

3.1 기이한 이름

함수, 모듈, 변수, 클래스 등은 그 이름만 보고도 각각이 무슨 일을 하고 어떻게 사용해야 하는지 명확히 알수 있도록 신경 써서 이름을 지어야 한다.

이름에 관련한 리팩터링은 아래와 같다.

함수 선언 바꾸기
변수 이름 바꾸기
필드 이름 바꾸기

3.2 중복 코드

중복 코드 관련 리팩터링은 아래와 같다.

함수 추출하기
문장 슬라이드
메서드 올리기 : 같은 부모로부터 파생된 서브 클래스들에 코드가 중복되어 있다면 중복된 코드를 부모의 메서드로 정의하는 것

3.3 긴 함수

함수가 길수록 사람들은 함수를 이해하기 힘들다.

긴 함수 관련 리팩터링 작업은 아래와 같다.

함수 추출하기 : 99% 는 이 작업을 수행한다.
조건문 분해하기 > case 문 마다 함수 추출하기 > 조건부 로직을 다향성으로 바꾸기
반복문 쪼개기

3.4 긴 매개 변수 목록

매개변수 목록이 길어질수록 코드를 이해하기 어렵다.

이와 관련 리팩터링 작업은 아래와 같다.

매개 변수를 질의 함수로 바꾸기
객체 통째로 넘기기
매개변수 객체 만들기
여려 함수를 클래스로 묶기

3.5 전역 데이터

전역 데이터는 코드베이스 어디에서든 건드를 수 있고 값을 누가 바꿨는지 찾아낼 메커니즘이 없다는 게 문제다.

이와 관련한 리팩터링 작업은 아래와 같다.

변수 캡슐화 하기 : 데이터를 수정하는 부분을 쉽게 찾을 수 있고 접근을 통제할수 있게 된다.

3.6 가변 데이터

데이터를 변경했더니 예상치 못한 결과나 골치 아픈 버그로 이어지는 경우가 종종 있다. 코드의 다른 곳에서는 다른 값을 기대한다는 사실을 인식하지 못한 채 수정해버리면 프로그램이 오작동을 한다.

이와 관련한 리팩터링 작업은 아래와 같다.

변수 캡슐화하기
질의 함수와 변경 함수 분리하기
세터 제거하기
참조를 값으로 바꾸기 : 내부 필드를 직접 수정하지 말고 구조체를 통째로 교체

3.7 뒤엉킨 변경

코드를 수정할 때는 시스템에서 고쳐야 할 딱 한 군데를 찾아서 그 부분만 수정할 수 있기를 바란다. 이렇게 할 수 없다면 뒤엉킨 변경 과 산탄총 수술 중 하나가 풍긴다.

뒤엉킨 변경은 단일 책임 원칙이 제대로 지켜지지 않을 때 나타난다.

이와 관련한 리팩터링 작업은 아래와 같다.

단계 쪼개기
함수 옮기기
함수 추출하기
클래스 추출하기

3.8 산탄총 수술

산탄총 수술은 뒤엉킨 변경과 비슷하면서도 정반대다.

이 냄새는 코드를 변경할 때마다 자잘하게 수정해야 하는 클래스가 많을 때 풍긴다. 변경할 부분이 코드 전반에 퍼져 있다면 찾기도 어렵고 꼭 수정해야 할 곳을 지나치기 쉽다.

이와 관련한 리팩터링 작업은 아래와 같다.

함수 옮기기, 필드 옮기기 로 한 모듈에 묶어둔다.
여러 함수를 클래스로 묶기
어설프게 분리된 로직을 함수 인라인하기, 클래스 인라인하기 를 통해 하나로 묶는다.

3.9 기능 편애

기능 편애는 어떤 함수가 자기가 속한 모듈의 함수나 데이터보다 다른 모듈의 함수나 데이터와 상호 작용할 일이 더 많을 때 풍기는 냄새다.

함수를 상호 작용할 모듈로 이동시키면 된다(함수 옮기기)

3.10 데이터 뭉치

데이터 항목은 서로 뭉치는 경향이 있다. 이렇게 몰려다니는 데이터 뭉치는 보금자리를 따로 마련해줘야 한다.

데이터 뭉치를 찾아서 클래스 추출하기
매개변수 객체 만들기 나 객체 통째로 넘기기

3.11 기본형 집착

자신에게 주어진 문제에 딱 맞는 기초 타입(화폐, 좌표, 구간 등)을 직접 정의하기를 몹시 꺼리는 사람이 많다. 예를 들어 전화번호를 단순히 문자 집합으로만 표현하기에는 아쉬움이 많다. 최소한 사용자에게 보여줄 때는 일관된 형식으로 출력해주는 기능이라도 갖추어야 한다.

기본형을 객체로 바꾸기
타입 코드를 서브클래스로 바꾸기
조건부 로직을 다형성으로 바꾸기

3.12 반복되는 switch 문

switch 문은 조건부 로직을 다형성으로 바꾸기 로 최대한 리팩토링을 해야한다.

3.13 반복무

반복문을 파이프라인으로 바꿔서 리팩토링을 해보자

filter, map, ..

3.14 성의 없는 요소

본문 코드를 그대로 쓰는 것과 다름 없는 함수나 실질적으로 메서드가 하나뿐인 클래스들을 리팩토링을 통해 제거하자

함수 인라인하기
클래스 인라인하기
계층 합치기

3.15 추측성 일반화

나중에 필요할 거야 라는 생각으로 당장은 필요 없는 모든 종류의 후킹 포인트와 특이 케이스 처리 로직을 작성해둔 코드에서 풍긴다. 실제로 사용하게 되면 다향이지만, 그렇지 않는다면 쓸데없는 낭비일 뿐이다. 당장 걸리적거리는 코드는 눈 앞에서 치워버리자.

하는 일이 거의 없는 추상 클래스는 계층합치기 로 제거
함수 인라인, 클래스 인라인
사용되지 않는 매개변수는 함수 선언 바꾸기 로 제거

3.16 임시 필드

간혹 특정 상황에서만 값이 설정되는 클래스도 있다. 하지만 객체를 가져올 때는 당연히 모든 필드가 채워져 있으리라 기대하는 게 보통이라, 이렇게 임시 필드를 갖도록 작성하면 코드를 이해하기 어렵다.

클래스 추출하기, 함수 옮기기 를 통해 임시 필드들과 관련된 코드를 모조리 새 클래스에 몰아 넣는다.
임시 필드들이 유효한지를 확인한 후 동작하는 조건부 로직이 있을 수 있는데, 특이 케이스 추가하기 로 필드들이 유효하지 않을 때를 위한 대안 클래스를 만들어서 제거할수 있다.

3.17 메시지 체인

메시지 체인은 클라이언트가 한 객체를 통해 다른 객체를 얻은 뒤 방금 얻은 객체에 또 다른 객체를 요청하는 식으로, 다른 객체를 요청하는 작업이 연쇄적으로 이어지는 코드를 말한다. 이는 클라이언트가 객체 내비게이션 구조에 종속됐음을 의미한다. 그래서 내비게이션 중단 단계를 수정하면 클라이언트 코드도 수정되어야 한다.

위임 숨기기
함수 추출하기 로 결과 객체를 사용하는 코드 일부를 따로 빼낸 다음 함수 옮기기 로 체인을 숨길 수 있는지 살펴보자.

3.18 중개자

객체의 대표적인 기능 하나로, 캡슐화가 있다. 캡슐화하는 과정에서 위임이 자주 활용이 되는데, 하지만 지나치면 문제가 된다. 클래스가 제공하는 메서드 중 절반이 다른 클래스에 구현을 위임하고 있다면 어떤가?

중개자 제거하기 를 활용하여 실제로 일을 하는 객체와 직접 소통하게 하자

3.19 내부자 거래

모듈 사이의 데이터 거래가 많으면 결합도가 높아진다. 일이 돌아가게 하려면 거래가 이뤄질 수 밖에 없지만, 그 양을 최소로 줄이고 모두 투명하게 처리해야 한다.

은밀히 데이터를 주고받는 모듈들이 있다면 함수 옮기기 와 필드 옮기기 기법으로 떼어놓아서 사적으로 처리하는 부분을 줄인다.
여러 모듈이 같은 관심사를 공유한다면 공통 부분을 정식으로 처리하는 제 3의 모듈을 만들거나 위임 숨기기 를 이용한다.

3.20 거대한 클래스

한 클래스가 너무 많은 일을 하려다 보면 필드 수가 상당히 늘어난다.

클래스 추출하기
슈퍼 클래스 추출하기
타입 코드를 서브 클래스로 바꾸기

3.21 서로 다른 인터페이스의 대안 클래스

3.22 데이터 클래스

데이터 클래스란 데이터 필드와 게터/세터 메서드로만 구성된 클래스를 말한다.

public 필드가 있다면 레코드 캡슐화하기
변경하면 안 되는 필드는 세터 제거하기

3.23 상속 포기

서브 클래스는 부모로부터 메서드와 데이터를 물려받는다. 하지만 부모의 유산을 원치 않거나 필요 없다면 어떻게 해야 할까? 수 많은 유산 중에 관심 있는 몇 개만 받고 끝내려는 경우는 얾마든지 있을 수 있다.

서브 클래스를 위임 으로 바꾸기나 슈퍼클래스를 위임 으로 바꾸기 를 활용해서 상속 메커지즘에서 벗어나보자.

3.24 주석

주석을 남겨야겠다는 생각이 들면, 가장 먼저 주석이 필요 없는 코드로 리팩터링해본다.

Reference

리팩터링 2판

[리팩토링] Chapter 2. 리팩터링 원칙

Fri, 29 Jul 2022 00:00:00 +0000

사전적 의미

리팩터링 : [명사] 소프트웨어의 겉보기 동작은 그대로 유지한 채, 코드를 이래하고 수정하기 쉽도록 내부 구조를 변경하는 기법

리팩터링 : [동사] 소프트웨어의 겉보기 동작은 그대로 유지한 채, 여러자기 리팩터링 기법을 적용해서 소프트웨어를 재구성한다.

리팩터링 정의

커드를 정리하는 작업을 모조리 리팩터링 이라고 표현하는데 특정한 방식 에 따라 코드를 정리하는 것만이 리팩터링이다.

“누군가가 리팩터링하다가 코드가 깨져서 며칠이나 고생했다.” 라고 한다면, 십중팔구 리팩터링한 것이 아니다.

리팩터링 과정에서 발견된 버그는 리팩터링 후에도 그대로 남아 있어야 한다.
리팩터링은 성능 최적화와 비슷하며 리팩터링의 목적은 코드를 이해하고 수정하기 쉽게 만드는 것이다.

두 개의 모자

기능을 추가할 때는 기능 추가 모자를 쓴 다음 기존 코드를 절대 건드리지 않고 새 기능을 추가하기만 한다. 리팩터링 모자를 쓴 다음 기능 추가는 절대로 하지 않고 오로지 코드 재구성에만 전념한다.

리팩터링하는 이유

리팩터링하면 소프트웨어 설계가 좋아진다.

리팩터링하지 않으면 소프트웨어의 내부 설계가 썩기 쉽다. 시간이 지나면 코드 구조가 무너지기 시작하면 악효과가 누적된다. 같은 일을 하더라고 설계가 나쁘면 코드가 길어지기 십상이다. 그래서 중복 코드 제거는 설계 개선 작업의 중요한 축을 차지한다.

리팩터링을 하면 소프트웨어를 이해하기 쉬워진다

프로그래밍은 여러 면에서 마치 컴퓨터와 대화하는 것과 같다. 그래서 컴퓨토에게 시키려는 일과 이를 표현한 코드의 차이를 최대한 줄여야한다.

리팩터링은 코드를 잘 읽히게 도와준다. 그리고 코드의 목적이 더 잘 드러나게 내의도를 더 명확하게 전달하도록 개선할 수 있다.

리팩터링하면 버그를 쉽게 찾을 수 있다.

코드를 이해하기 쉽다는 말은 버그를 찾기 쉽다는 말이다.

리팩터링을 하면 프로그래밍 속도를 높일수 있다

내부 설계가 잘 된 소프트웨어는 새로운 기능을 추가할 지점과 어떻게 고칠지를 쉽게 찾을 수 있다. 모듈화 가 잘 되어 있으면 전체 코드베이스 중 작은 일부만 이해하면 된다. 코드가 명확하면 버그를 만들 가능성도 줄고 디버깅하기가 훨씬 쉽다. 설령 프로그램의 요구사항이 바뀌더라도 설계를 지속해서 개선할 수 있다.

언제 리팩터링해야 할까?

3의 법칙
1. 처음에는 그냥한다.
2. 비슷한 일을 두 번째로 하게되면 일단 계속 진행한다.
3. 비슷한 일을 세 번째하게 되면 리팩터링한다.

준비를 위한 리책터링 : 기능을 쉽게 추가하게 만들기

리팩터링하기 가장 좋은 시점은 코드베이스에 기능을 새로 추가하기 직전이다.

이해를 위한 리팩터링 : 코드를 이해하기 쉽게 만들기

코드를 수정하려면 먼저 그 코드가 하는 일을 파악해야 한다. 리팩터링을 하면 머리로 이해한 것을 코드에 옮겨 담을 수 있다.

랄프 존슨은 이런 초기 단계의 리팩터링을 밖을 잘 내다보기 위한 창문 닦기에 비유한다. 코드를 분석할 때 리팩터링을 해보면 깊은 수준까지 이해하게 된다.

쓰레기 줍기 리팩터링

간단히 수정할 수 있는 것은 즉시 고치고, 시간이 좀 걸리는 일은 짧은 메모만 남긴 다음, 하던 일을 끝내고 처리한다.
캠핑 규칙이 제안하듯, 항상 처음 봤을 때 보다 깔끔하게 정리하고 떠나자

계획된 리팩터링과 수시로 하는 리팩터링

리팩터링 일정을 따로 잡아두지 않고, 기능을 추가하거나 버그를 잡는 동안 리팩터링도 함께한다.

오래 걸리는 리팩터링

팀 전체가 리팩터링에 매달리기 보다는 주어진 문제를 몇 주에 걸쳐 조금씩 해결해가는 편이 효과적일 때가 많다.

코드 리뷰에 리팩터링 활용하기

코드 리뷰는 개발팀 전체에 지식을 전파하는데 좋다. 리팩터링은 코드 리뷰의 결과를 더 구체적으로 도출하는데 도움이 된다.

관리자에게는 뭐라고 말해야 할까?

“리팩터링은 누적된 오류를 잡는 일이거나, 혹은 가치 있는 기능을 만들어내지 못하는 작업” 이라고 오해하여 리팩터링이 금기어가 돼버린 조직도 있다. 리팩터링을 위한 일정을 몇 주씩 잡는 개발팀을 보면 오해는 더욱 커진다.
하지만 리팩터링을 하면 소프트웨어를 빠르게 만드는 데 아주 효과적이다. 프로개발자에게 주어진 임무는 새로운 기능을 빠르게 구현하는 것이고, 가장 빠른 방법은 리팩터링이다. 그래서 리팩터링 부터 한다.

리팩터링하지 말아야 할 때

지저분한 코드를 발견해도 굳이 수정할 필요가 없다면 리팩터링을 하지 않는다. 리팩터링하는 것보다 처음부터 새로 작성하는 게 쉬울 때도 리팩터링하지 않는다.

리팩터링, 아키텍처, 야그니(YAGNI)

소프트웨어 설계와 아키텍쳐는 코드로 작성된 뒤로는 변경할수 없고 부주의로 부패할 밀만 남았다고 여기곤 했다.

리팩터링은 이런 관점을 크기 바꿔놓았다. 리팩터링을 통해 수년 동안 운영되던 소프트웨어라도 아키텍쳐를 대폭 변경할 수 있었다.
리팩터링이 아키텍처에 미치는 실질적 효과는 요구사항 변화에 자연스럽게 대응하도록 코드 베이스를 잘 설계해준다에 있다.

코딩 전에 아키텍쳐를 확정지으려 할 때 대표적인 문제는 소프트웨어의 요구사항을 사전에 모두 파악해야한다는 것이다. 하지만 막상 해보면 실현할 수 없는 목표일 때가 많다.
한 가지 방법은 유연성 메커니즘을 적용하는 것이다. 예를 들어 함수를 작성할 때 다양항 예상 시나리오를 대응하기 위한 매개변수들을 추가한다. 하지만 모든 사항을 고려하려다 보면 유연성 메커니즘이 오히려 변화에 대응하는 능력을 떨어뜨릴 때가 많다.

리팩터링을 활용하면 다르게 접근할 수 있다. 그저 현재까지 파악한 요구사항만을 해결하는 소프트웨어를 구축한다. 단 이 요구를 멋지게 해결하도록 설계한다. 진행하면서 사용자의 요구사항을 더 잘 이해하게 되면 그에 맞게 리팩터링해서 바꾼다.
이런 식으로 설계하는 방식을 간결한 설계, 점진적 설계, YAGNI 등으로 부른다.

리팩터링과 소트트웨어 개발 프로세스

리팩터링이 퍼지기 시작한 것은 익스트림 프로그래밍(XP) 이 도입때문이다.

XP의 특징은 지속적인 통합, 자기 테스트, 리팩터링 등의 개성이 강하면서 상호 의존하는 기법들을 하나로 묶은 프로세스라는 점이다.

자가 테스트와 리팩터링을 묶어서 테스트 주도 개발(TDD) 이라 한다.

리팩터링과 성능

리팩터링하면 프로그래 성능이 느려질까봐 걱정하는 사람이 많다.
성능에 대한 흥미로운 사실은, 대부분 프로그램은 전체 코드 중 극히 일부에서 대부분의 시간을 소비한다는 것이다.

프로그램을 잘 리팩터링해두면 이런 식의 최적화에 두 가지 면에서 도움이 된다.

성능 튜닝에 투입할 시간을 벌수 있다.
리팩터링이 잘 되어 있는 프로그램은 성능을 더 세밀하게 분석할 수 있다.

리팩터링은 성능 좋은 소프트웨어를 만드는 데 기여한다.

Reference

리팩터링 2판

[CSS] Flexbox 정리

Wed, 12 Jan 2022 00:00:00 +0000

Overview

예제 코드를 통해서 CSS의 속성 중 Flexbox 의 동작 방식에 대해 정리한 포스트입니다.

1. Flexbox란?

아래와 같이 Container 에 여러개의 item 을 배치를 개발자가 쉽게 컨트롤할수 있도록 도와준다.

예를 들어 각 아이템의 height 를 동일하게 하거나 각 아이템의 간격을 동일하게 하는 작업을 좀 더 편하게 수행할수 있다.

flexbox 는 크게 두 가지 타입에 대해 적용하게 되는 데

container : item 을 담고 있는 박스
item : container 에 포함되어 있는 요소들

container

container에 지정되어 있는 속성은 아래와 같다.

item

item에 지정되어 있는 속성은 아래와 같다.

axis

flexbox 는 수평 축, 수직 축을 가지고 있고 둘중 하나를 main axis으로 선택하면 남은 하나는 cross axis 가 된다.

2. container flexbox 속성 적용

아래와 같이 10개의 블록을 선언해보자

위 샘플 코드는 아래와 같다.

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
    <div class="item item10">10</div>
  </div>
</body>
</html>

CSS

.container {
  background : beige;
  height :100vh;
}

.item {
  width : 40px;
  height :40px;
}

.item1 {
  background : #e57373;
}

.item2 {
  background : #f06292;
}

.item3 {
  background : #ba68c8;
}

.item4 {
  background : #9575cd;
}

.item5 {
  background : #7986cb;
}

.item6 {
  background : #64b5f6;
}

.item7 {
  background : #4fc3f7;
}

.item8 {
  background : #4dd0e1;
}

.item9 {
  background : #4db6ac;
}

.item10 {
  background : #81c784;
}

container 를 flexbox 로 적용하기 위해서 display:flex 를 추가하면 아래와 같이 블록이 정렬이 되는 것을 확인할 수 있다.

2.1. flex-direction

블록의 방향을 변경할 때 사용하며 기본 값은 row 이다.

.container {
  background : beige;
  height : 100vh;
  display :flex;
  flex-direction: row;
}

그 외 값은 아래와 같다.

row	row-reverse

column	column-reverse

2.2. flex-wrap

한 줄에 아이템이 너무 많을 경우 아이템을 다른 줄로 줄 바꿈을 할지 아님 아이템 사이즈를 축소시켜서 한 줄에 표시할지를 결정한다.

{
  ... 
  flex-wrap : nowrap; // or `wrap`
}

기본 값은 nowrap 이며 nowrap 일 경우 아래와 같이 item 을 감싸는 container 가 작아져도 무조건 한줄로 표시됨을 볼 수있다.

flex-wrap 값을 wrap 으로 지정한 경우 아래와 같이 container 가 작아지면 자동으로 줄 바꿈을 하는 것을 볼수 있다.

2.3. justify-content

중심 축 기준으로 item 을 어떻게 배치할지 결정한다.

{
    justify-content : start // or end, space-around, ...
}

start

디폴트 값으로 중심 축이 수평 방향이면 item 을 왼 쪽에 그리고 수직 방향이면 item 을 위 쪽에 배치를 한다.

end

중심 축이 수평 방향이면 아이템을 오른 쪽 에 그리고 수직 방향이면 아이템을 아래 쪽에 배치를 한다.

center

item 을 중앙으로 배치한다.

space-around

중심 축이 수평 방향이면 아이템 좌 우에 동일한 크기의 space 가 추가된다. 그리고 수직 방향이면 위, 아래에 동일한 크기의 space 가 추가된다.

space-between

item 과 item 사이의 space 의 사이즈는 모두 동일하고 item 과 container 의 space 사이즈는 0가 된다.

space-evenly

item 과 item 사이 그리고 item 과 container 의 space 사이즈는 모두 동일하다.

2.4. align-content

반대 축의 item 을 어떻게 배치할지 결정

center	space-around	space-between

{
    align-content : start // or end, space-around, ...
}

3. item flexbox 속성 적용

다음은 item 에 대해서 적용되는 여러 flexbox 의 속성을 알아보자 먼저 아래와 같이 container 애 item 이 있다고 가정할 때

Output

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
</body>
</html>

CSS

.container {
  background : beige;
  height :100vh;
  display : flex;
}

.item {
  width : 40px;
  height :40px;
  border : 1px solid black;
}

.item1 {
  background : #e57373;
}

.item2 {
  background : #f06292;
}

.item3 {
  background : #ba68c8;
}

3.1. flex-grow

item 이 container 에 여유 공간이 있으면 사이즈를 차지하려고 할 때 사용되는 값이다.

{
  flex-grow : 1 // defalt : 0
}

item1 의 flex-grow 를 1로 지정하게 되면 아래와 같이 item1 이 남은 공간을 모두 차지하는 것을 볼수 있다.

그리고 모든 item 들에 대해서 flex-grow 를 1로 지정하게 되면 아래와 같이 모든 item 들이 동일한 크기로 남은 공간을 차지하게 된다.

위 상태에서 item1 flex-grow 를 2로 변경하게 되면 item1은 item2, item3 의 두 배의 사이즈를 차지하게 된다.

3.1. flex-shrink

container 에 여유 공간이 없을 때 item 의 사이즈를 결정하는 속성이다. flex-grow 의 반대 속성이다.

아래 화면은 item1의 flex-shrink 값을 2로 하고 나머지는 flex-shrink 를 1로 했을 때 어떻게 동작하는 지 보여준다.

3.2. flex-basis

container 의 사이즈가 늘어나거나 줄어들때 동일한 비율을 유지할 때 사용되는 속성이다.

{
   flex-basis : 10% // default : auto, 0%~100%
}

각 item 의 속성을 아래와 같이 지정했을 때

.item1 {
  background : #e57373;
  flex-basis : 70%
}

.item2 {
  background : #f06292;
  flex-basis : 20%
}

.item3 {
  background : #ba68c8;
  flex-basis : 10%
}

결과 화면이 아래와 같이 출력되는 것을 볼수 있다.

3.3. align-self

하나의 item에 대해 위치를 변경하고 싶을 때 사용한다.

.item {
    align-self : center // start ,end ...
}

item1 의 align-self 값을 center 로 변경하게 item1이 container 중앙에 배치되는 것을 볼수 있다.

4. 참고 자료

4.1. Guide to Flexbox

좀 더 자세한 flexbox 정보는 아래 사이트 참고

A Complete Guide to Flexbox

4.2. FLEXBOX FROGGY

flexbox 를 학습하기 위한 game 형식 사이트

FLEXBOX FROGGY

5. Reference

youtube, 드림코딩 by 엘리

[CSS] 레이아웃 정리(display, position)

Mon, 10 Jan 2022 00:00:00 +0000

Overview

예제 코드를 통해서 CSS의 속성 중 display 와 position 의 동작 방식을 정리한 포스트입니다.

display

CSS 의 display 속성은 태그를 inline 또는 block 타입으로 변경을 할수 있다.

예를 들어 아래와 같이 div 와 span 을 정의하였다고 할 때 div 는 기본적으로 block 타입 이고 span 은 inline 타입이다.

여기서 span 의 display 를 block 으로 선언하면 div 와 똑같이 한줄에 한 개 씩 표시가 된다.

그리고 div 를 inline-block 으로 변경하게 되면 한줄에 여러개의 블록이 표시가 된다.

추가적으로 div 를 inline 으로 변경하게 되면 아무것도 표시가 되지 않는데 그 이유는 inline 은 내부 컨텐츠를 꾸며주는 것이고 현재 div 에는 컨텐츠가 아무것도 없기 때문이다.

따라서 div 에 컨텐츠를 추가하면 span 처럼 화면에 표시가 되는 것을 볼수 있습니다.

position

position은 태그의 위치를 지정할 때 사용하는 속성이다.

static

예를 들어 아래와 같이 태그들이 존재할 때 container 의 위치를 left, top 를 사용해서 변경을 하려고 한다.

하지만 container 의 위치는 변경이 되지 않는데 그 이유는 positon 의 디폴트 값은 static 이며 static 의 의미는 position을 따로 지정하지 않는다 이다.

relative

따라서 position 을 static 에서 relative 로 변경을 하게 되면 노란색 container 의 위치가 오른 쪽에서 20px, 아래 쪽으로 20px 이동이 됨을 볼수 있다.

정리하자면 relative 는 원래 위치해야하는 포지션 기준으로 태그를 이동한다.

absolute

추가적으로 box 의 position 을 absolute 로 변경을 하게되면 아래와 같이 포지션이 container 기준으로 오른 쪽에서 20px, 아래 쪽으로 20px 이동이 됨을 볼수 있다.

정리하자면 absolute 는 현재 태그를 담겨있는 상자를 기준으로 태그를 이동한다.

fixed

box 의 position 을 fixed 로 변경하면 아래와 같이 창을 기준으로 오른 쪽에서 20px, 아래 쪽으로 20px 이동이 됨을 볼수 있다.

fixed 는 태그를 window 를 기준으로 이동을 시킨다.

sticky

box 의 position 을 sticky 로 변경하면 아래와 같이 스크롤을 할 때 사라지지 않고 상단에 계속 붙어있는 것을 볼수 있다.

Reference

youtube, 드림코딩 by 엘리

[CSS] 셀렉터, 기초 이론 정리

Sun, 09 Jan 2022 00:00:00 +0000

Overview

CSS 의 가장 기본 및 기초에 대해 정리한 포스트입니다.

1. 의미, 정의

CSS 는 Cascading Style Sheet 의 약자이다.
CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어이다.

Cascading

HTML 의 스타일 적용 우선 순위는 Author Style > User Style > Browser Style 순으로 결정이 된다.

Author Style 은 .css 의 문서를 뜻하며 User Style 은 유저가 선택한 스타일이다. 예를 들어 다크 모드나 라이드 모드 전환이 있다. 마지막으로 Browser Style 은 웹 브라우저에 내장된 스타일를 뜻한다.

HTML 의 요소의 디자인/스타일을 결정할 때 위에 언급된 우선 순위로 탐색을 하기 때문에 Cascading 특징을 가진다.

추가적으로 위 스타일의 연결고리를 끊고 싶을 때에는 !important 키워드를 사용한다. 하지만 가능다면 !important 사용을 배제를 해야한다.

2. Selector

CSS 에서 Selector 란 HTML 에서 어떤 태그를 골라서 스타일을 적용할지 를 결정하는 문법

Universal

HTML 내에 모든 태그에 대해서 적용

* {
  color : green;
}

위 CSS 를 적용하면 모든 태그에 대해 색상이 green 으로 적용이 된다.

Type

HTML 내에 지정된 같은 타입의 태그들에 대해서 스타일 적용

li {
  color : blue;
}

위 CSS 를 적용하면 li 태그에 대해 색상이 blue 로 적용이 된다.

ID

문서 안에 있는 단 하나의 태그에 스타일을 적용하는 경우에 사용합니다. 선택자에 샤프(#)와 id명(임의의 이름)을 붙여 식별한다.

html

<li id="special">First</li>

css

#special {
  color : pink;
}

위 코드를 적용하면 HTML에 special id를 가진 태그를 선택해서 스타일을 적용한다.

Class

HTML 내에 같은 class 이름을 가진 복수의 태그에 대해 스타일을 적용할 경우에 사용한다. 피리어드(.)와 class명(임의의 이름)을 붙여 구별한다.

html

<div class="red"></div>
 ....
<div class="red"></div>

css

.red {
  background: red;
  width : 300px;
  height : 300px;
}

위 코드를 적용하면 HTML에 red class를 가진 모든 태그에 대해서 스타일을 적용한다.

State

태그의 특정 상태에 대해서 스타일을 적용할수 있다. 이때 적용하고자 하는 태그 뒤에 콜론(:) 과 상태를 붙여서 정의한다.

button:hover {
  color : red
}

위 코드를 적용하면 버튼에 마우스 커서를 올리게 되면 색상이 red 로 변경이 된다.

Attribute

태그가 가진 특정 attribute에 대해서 스타일을 적용할수 있다.

예를 들어 HTML 문서에 아래와 같이 태그가 정의가 되어있을 때

<a href="naver.com">Naver</a>  # 1. 
<a href="googlenaver.com">Google</a>  # 2. 
<a>empty</a>   # 3. 

아래와 같이 CSS를 적용하게 되면

a[href] {
  color : red;
}

1번과 2번 태그의 색상이 red로 변경이 된다.

추가적으로 특정 attribute의 값을 가지고 있는 태그에 대해서 선택이 가능하다.
예를 들어 아래와 같이 CSS를 적용하게 되면

1번 태그만 색상이 red로 변경이 된다.

a[href="naver.com"] {
  color : red;
}

Appendix

아래 간단한 게임을 통해서 seletor에 대해서 학습/복습을 해보자.(이미지를 클릭!)

Reference

youtube, 드림코딩 by 엘리

[HTML] Sections

Sun, 09 Jan 2022 00:00:00 +0000

HTML Section

HTML 에서 권장하는 기본 레이아웃 구성

Type

Tag는 아래와 같이 크게 두 종료가 있으며

Box 는 또 다른 Tag 들을 묶어주는 역할을 하며 사용자에게 보여지지 않는다.
Item 은 사용자에게 컨텐츠를 보여주는 역할을 한다.

Block, Inline

태그는 Block 또는 Inline 타입으로 나눠진다. 예를 들어 아래 그림에서 핑크색 태그가 있는 상태에서 노란 색 태그를 배치하고자 할 때

Block 타입은 핑크 색 태그 옆에 충분한 공간이 있음에도 불구하고 다음 줄에 배치된 것을 볼수 있는데, 즉 Block 타입은 한줄에 하나 만 배치를 한다.

Inline 타입은 핑크 색 태그 옆에 여유 공간에 노란 색 블록이 배치가 되는 데, 즉 Inline 은 공간이 허용이 되면 한 줄에 여러개의 태그를 배치할수 있다.

Tag & Element

꺽쇠로 감싸 있는 부분을 Tag 라 하며 Opening Tag 와 Closing Tag 사이를 Content 라고 한다. 그리고 Tag 와 Content 를 합쳐서 Element 또는 Node 라고 한다.

자주 사용하는 Tag 들

A tag (Anchor Tag)

  <a href="https://www.google.com" target=_blank />Click</a>

하이퍼링크를 가능하게 하는 태그, 즉 다른 페이지로 이동이 가능하다.

P tag (Paragraph Tag)

  <p>This is a sentence. <b>That</b> is.. </p> 
  <p>This is a sentence. <span>That</span> is.. </p> 
  <p>This is a sentence. <div>That</div> is.. </p> 

문단을 정의하는 태그이며 b, span, div 태그를 포함 할수 있다.

ol 태그는 순서가 있는 태그이다.

 <ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ol>

위 코드를 실행하면 브라우져에서 아래와 같이 순서를 나타내는 prefix가 추가가 된다.

ul 태그는 순서가 없는 태그이다.

 <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>

위 코드를 실행하면 브라우져에서 아래와 같이 기호 prefix가 추가가 된다.

Input tag

<lable>Name: </lable>
<input id="input_name" type="text">

사용자로 부터 입력받을수 있는 태그이다. 보통 앞에 label 태그를 붙여서 어떤 데이터를 입력받을지를 나타낸다.

attr의 id 같은 경우 하나의 page에 여러개의 input 태그가 존재할 경우 각 태그들을 구별하기 위해 사용한다.

attr 의 type 같은 경우 date, color, number, password, checkbox 등 다양한 타입이 존재한다.

Reference

Youtube, 드림코딩 by 엘리

[React] 자주 사용하는 라이브러리

Wed, 29 Dec 2021 00:00:00 +0000

Overview

자주 사용하는 React Library 를 정리한 포스트 입니다.

1. Material UI (MUI)

npm install @mui/material

Icons

npm install @mui/icons-material

MUI 사용 시 Module not found: Can't resolve '@emotion/react' 에러가 발생 시 아래 패키지를 추가로 설치

npm install @emotion/react 
npm install @emotion/styled

[React] 스니펫 단축키 정리

Tue, 14 Dec 2021 00:00:00 +0000

Overview

VS Code extension 스니펫 단축키를 정리한 포스트입니다.

Reference

link

Import

Commnad	Method
imp	import moduleName from ‘module’
imr	import React from ‘react’
impt	import PropTypes from ‘prop-types’
imrpc	import React, { PureComponent } from ‘react’
imrpcp	import React, { PureComponent } from ‘react’ & import PropTypes from ‘prop-types’

Component

rcc

import React, { Component } from 'react'

export default class FileName extends Component {
  render() {
    return <div>$2</div>
  }
}

rpcp

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

export default class FileName extends PureComponent {
  static propTypes = {}

  render() {
    return <div>$2</div>
  }
}

[React] Debounce, Throttle

Thu, 28 Oct 2021 00:00:00 +0000

디바운스와 쓰로틀

디바운스와 쓰로틀은 지연 처리 를 효율적으로 처리하기 위한 알고리즘 혹은 기법입니다. 두 개념은 서버의 데이터를 요청하거나 UI 이벤트를 처리하는 과정에서 작업에서 생기는 부하를 크게 줄여주기에 꼭 알아두는 것이 좋습니다.

디바운스

디바운스(Debounce) 는 어떤 내용을 입력하다가 특정 시간 동안 대기하고 있으면 마지막에 입력된 내용을 바탕으로 서버 요청을 하는 벙법입니다. 즉 쉽게 말해 짧은 시간(특정 시간) 동안 이벤트가 계속 발생하면 그중 마지막 이벤트를 처리하는 것입니다. 예를 들어 네이버나 구글 검색창에 내용을 입력할 때는 검색창 하단에 아무 내용도 나오지 않다가 입력을 멈추면 검색창 하단에 연관 검색어 목록이 나타납니다. 이것이 디바운스를 적용한 것입니다.

Code

function debounce(func, delay) {
    let inDebounce
    return function(...args) {
        if (inDebounce) {
            clearTimeout(inDebounce)
        }
        inDebounce = setTimeout(() => func(...args), delay)
    }
}


const run = debounce(val => console.log(val), 2000)

run('a')
run('b')
run(2) // 2초 이후 2 를 출력

쓰로틀

쓰로틀(Throttle) 은 디바운스 개념과 비슷하지만 입력되는 동안에도 바로 이전에 요청한 작업을 주기적으로 실행한다는 점 이 다릅니다. 쉽게 말해 이벤트를 일정 주기마다 한 번씩만 발생하도록 해줍니다. 이벤트가 한 번 실행이 되면 설정한 시간이 자니고 나서야 다음 이벤트를 실행하며 특정 시간 동안 입력된 모든 이벤트들은 마지막 이벤트를 제외한 나머지는 무시하게 됩니다.

쓰로틀이 적용된 예를 들면 페이스북의 타임라인은 스크롤을 내리는 동안 계속해서 다음 내용이 출력되는 일명 무한 스크롤 기능이 구현되어 있습니다.

만약 사용자가 지연 시간 동안 스크롤을 계속 움직이면 여러번의 서버 요청이 발생합니다. 쓰로틀은 첫 번째 요청이 지연 실행되는 동안에는 중복된 요청을 무시하게 됩니다.

Code

function throttle(func, delay) {
  let lastFunc;
  let lastRan;

  return function (...args) {
    const context = this;
    if (!lastRan) {
      func.call(context, ...args);
      lastRan = Date.now();
    } else {
      if (lastFunc) {
        clearTimeout(lastFunc);
      }
      lastFunc = setTimeout(function() {

        if (Date.now() - lastRan >= delay) {
            func.call(context, ...args);
            lastRan = Date.now();
        }

      }, delay - (Date.now() - lastRan));
    }
  };
}


const run = throttle(val => console.log(val), 2000)

run('a')  // a를 바로 출력
run('b')   // b를 무시
run(2) // 2초 이후 2 를 출력

[Flutter] Amplify 와 Flutter 연동하기 (6) - Google OAuth 인증

Thu, 15 Jul 2021 00:00:00 +0000

Overview

해당 포스트는 Amplify 의 인증 기능 중 Google 계정으로 OAuth 기능을 어떻게 구현하는지에 대해 정리해보았습니다. 참고로 Facebook 이나 Google OAuth 같은 경우 코드로 구현하기 보다는 설정하는 것이 어렵고 복잡함으로 혹시 따라하시다가 막히는 부분이 있을 시 댓글로 남겨주시기 바랍니다.

1. Google 앱 생성

Google Develop console 에 접속합니다.
아래 순서대로 프로젝트를 생성합니다.

OAuth 동의화면에 들어가서 만들기를 선택합니다.

그 다음 필수 입력란에 앱 정보와 개발자 연락처를 입력하여 설정을 완료합니다.
사용자 인증 정보 > +사용자 인증 정보 만들기 > OAuth 클라이언트 ID 를 선택합니다.

어플리케이션 타입을 웹 어플리케이션 그리고 이름을 입력을 하여 생성합니다. 이 때 OAuth URL 정보를 비워 놓습니다.
생성이 완료되면 아래와 같이 클라이언트 ID, 클라이언트 보안 비밀번호 가 생성이 되며 이 정보를 노트패드에 저장합니다.

2. Amplfy Auth 설정

Flutter Project로 돌아가서 Terminal를 실행하고 명령어를 입력합니다.

amplify update auth
// 만약 기존에 auth 서비스를 생성하지 않았다면 amplify add auth

추가로 아래와 같이 설정을 합니다.

you want to use the default authentication and security configuration? 
    `Default configuration with Social Provider (Federation)`
? How do you want users to be able to sign in? 
    `Username`
? Do you want to configure advanced settings? 
    `No, I am done.`
? What domain name prefix you want us to create for you? 
    `(default)`
? Enter your redirect signin URI: 
    `myapp://`
? Do you want to add another redirect signin URI 
    `No`
? Enter your redirect signout URI: 
    `myapp://`
? Do you want to add another redirect signout URI 
    `No`
? Select the social providers you want to configure for your user pool: 
    `<choose your provider and follow the prompts to input the proper tokens>`

중간에 Social Provider를 선택을 해야하는데 이때 Google 를 선택합니다. 추가로 Facebook 도 같이 사용한다면 Facebook 도 같이 선택합니다.
Google 을 선택했을 때 클라이언트 ID, 클라이언트 보안 비밀번호 를 입력해야하며 추가적으로 Facebook 를 선택했을 경우 추가적으로 앱 ID 와 시크릿 코드 를 입력해야 합니다.
Facebook의 앱 ID, 앱 시크릿 코드 생성 방법은 아래 링크를 참고바랍니다.
Amplify Facebook OAuth 인증 (5)

설정이 완료되었다면 amplify push 를 입력하여 Amplify Auth service 를 업데이트 합니다.

3. Google 앱 업데이트

구글 콘솔을 다시 엽니다.
사용자 인증 정보 에 들어가서 OAuth Client를 수정합니다.

URI 와 승인된 리디렉션 URI 에 URI 를 입력합니다.

URI 에 는 아래 형식의 데이터를 입력합니다.

https://<your-user-pool-domain>

승인된 리디렉션 URI 에 는 아래 형식의 데이터를 입력합니다.

https://<your-user-pool-domain>/oauth2/idpresponse

저장 버튼을 눌러 설정을 완료합니다.

4. Flutter App 설정

만약 Facebook 인증 과정에서 이미 설정하였다면 이 과정을 스킵해도 됩니다.

안드로이드 설정

android 디렉토리에 AnroidMenifest.xml 에 아래 Activity 정보를 추가합니다.

...
<activity
    android:name="com.amazonaws.mobileconnectors.cognitoauth.activities.CustomTabsRedirectActivity">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />

        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />

        <data android:scheme="myapp" />
    </intent-filter>
</activity>
...

iOS 설정

ios 디렉토리의 Info.plist 에 아래 정보를 추가합니다.

<plist version="1.0">

<dict>
<!-- YOUR OTHER PLIST ENTRIES HERE -->

<!-- ADD AN ENTRY TO CFBundleURLTypes for Cognito Auth -->
<!-- IF YOU DO NOT HAVE CFBundleURLTypes, YOU CAN COPY THE WHOLE BLOCK BELOW -->
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>myapp</string>
        </array>
    </dict>
</array>

<!-- ... -->
</dict>

5. Flutter API 구현

아래와 같은 화면에 OAuth button을 추가하고

만약 사용자가 button을 눌렀을 경우 아래 API를 호출하도록 코드를 추가합니다.

try {
    var res = await Amplify.Auth.signInWithWebUI(provider: AuthProvider.google `);
} on AmplifyException catch (e) {
    print(e.message);
}

실행화면

총평

이번 시간에는 Amplify와 OAuth provider 중 Google 과 연동하는 방법에 대해 알아 보았습니다.

이전 단계

Amplify Facebook OAuth 인증 (5)

Reference

AWS Amplify for Flutter -Social sign in with web UI

[Flutter] Amplify 와 Flutter 연동하기 (5) - Facebook OAuth 인증

Thu, 15 Jul 2021 00:00:00 +0000

Overview

해당 포스트는 Amplify 의 인증 기능 중 Facebook 계정으로 OAuth 기능을 어떻게 구현하는지에 대해 정리해보았습니다. 참고로 Facebook 이나 Google OAuth 같은 경우 코드로 구현하기 보다는 설정하는 것이 어렵고 복잡함으로 혹시 따라하시다가 막히는 부분이 있을 시 댓글로 남겨주시기 바랍니다.

1. Facebook 앱 생성

Facebook developer 계정을 생성합니다.
로그인 후 내 앱 을 선택합니다.

앱 만들기 를 선택하여 앱을 생성합니다.

설정 > 기본 설정에서 해당 App의 앱 ID, 앱 시크릿코드 를 메모장이나 노트패드에 저장합니다.

2. Amplfy Auth 설정

Flutter Project로 돌아가서 Terminal를 실행하고 명령어를 입력합니다.

amplify update auth
// 만약 기존에 auth 서비스를 생성하지 않았다면 amplify add auth

추가로 아래와 같이 설정을 합니다.

you want to use the default authentication and security configuration? 
    `Default configuration with Social Provider (Federation)`
? How do you want users to be able to sign in? 
    `Username`
? Do you want to configure advanced settings? 
    `No, I am done.`
? What domain name prefix you want us to create for you? 
    `(default)`
? Enter your redirect signin URI: 
    `myapp://`
? Do you want to add another redirect signin URI 
    `No`
? Enter your redirect signout URI: 
    `myapp://`
? Do you want to add another redirect signout URI 
    `No`
? Select the social providers you want to configure for your user pool: 
    `<choose your provider and follow the prompts to input the proper tokens>`

중간에 social Provider를 선택을 해야하는데 이때 Facebook를 선택합니다.
그리고 앱 ID와 시크릿 코드를 물어보게 되면 미리 메모장에 저장 한 값을 입력합니다.

설정이 완료되었다면 amplify push 를 입력하여 Amplify Auth service 를 업데이트 합니다.

3. Facebook 앱 업데이트

설정 > 기본 설정에 앱 도메인 에 Cognito user pool 도메인 주소를 입력합니다.

https://<your-user-pool-domain>

Dashboard에서 Facebook 로그인 의 설정을 클릭합니다.

웹을 선택합니다.

Site Urls 입력창에 아래 형식의 주소를 입력하고 저장을 합니다.

https://<your-user-pool-domain>/oauth2/idpresponse

Facebook 로그인 > 빠른 설정 에 오게 되면 빨간 경고 창이 뜨고 Get Advanced Access 를 선택합니다.

public profile 를 활성화합니다.

Dashboard로 돌아가 유효한 OAuth 리디렉션 URI 에 아래와 같이 URL를 입력합니다.

https://<your-user-pool-domain>/oauth2/idpresponse

4. Flutter App 설정

안드로이드 설정

android 디렉토리에 AnroidMenifest.xml 에 아래 Activity 정보를 추가합니다.

...
<activity
    android:name="com.amazonaws.mobileconnectors.cognitoauth.activities.CustomTabsRedirectActivity">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />

        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />

        <data android:scheme="myapp" />
    </intent-filter>
</activity>
...

iOS 설정

ios 디렉토리의 Info.plist 에 아래 정보를 추가합니다.

<plist version="1.0">

<dict>
<!-- YOUR OTHER PLIST ENTRIES HERE -->

<!-- ADD AN ENTRY TO CFBundleURLTypes for Cognito Auth -->
<!-- IF YOU DO NOT HAVE CFBundleURLTypes, YOU CAN COPY THE WHOLE BLOCK BELOW -->
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>myapp</string>
        </array>
    </dict>
</array>

<!-- ... -->
</dict>

5. Flutter 설정

아래와 같은 화면에 OAuth button을 추가하고

만약 사용자가 button을 눌렀을 경우 아래 API를 호출하도록 코드를 추가합니다.

try {
    var res = await Amplify.Auth.signInWithWebUI(provider: AuthProvider.facebook);
} on AmplifyException catch (e) {
    print(e.message);
}

실행화면

총평

이번 시간에는 Amplify와 OAuth provider 중 Facebook 과 연동하는 방법에 대해 알아 보았으며 다음 포스트에는 Google과 연동하는 방법에 대해 알아보도록 하겠습니다.

이전 단계

Amplify Log in/Out 구현 (4)

다음 단계

Amplify Google OAuth 인증 (6)

Reference

AWS Amplify for Flutter -Social sign in with web UI

[Android] Dark mode 와 Light mode 에 대해 Status bar 색상 변경

Sat, 10 Jul 2021 00:00:00 +0000

Overview

보통 앱을 개발하게 되면 App bar 의 색상과 Status bar의 색상을 서로 일치하고자 하는 니즈가 생기게 되는데요 왜냐하면 일반적으로 서로 색상이 서로 일치하게 되면 앱의 UI 가 좀 더 깔끔하게 보여지기 때문입니다.

따라서 Light mode 와 Dark mode 일 경우 Status bar 를 어떻게 셋팅하는지 에 대해 알아보도록 하겠습니다.

Light Mode Theme

Status bar 의 색상을 변경하기 위해서는 res/values/theme.xml 를 수정해야 합니다.

<resources xmlns:tools="http://schemas.android.com/tools">
  ...
  <item name="android:statusBarColor" tools:targetApi="l">@color/white</item>
  ...
</resources>

그 중 android:statusBarColor 를 App bar와 일치하는 색상으로 변경하면 됩니다. 하지만 만약 색상을 White로 셋팅하는 경우 statusBar text 색상이 White로 나타내기 때문에 아래와 같이 보이게 됩니다.

따라서 위와 같이 Status 정보가 아무것도 보이지 않는 문제가 발생합니다.

위 문제를 해결하기 위해 아래와 같이 xml 에 android:windowLightStatusBar 라는 새로운 값을 추가 합니다.

<resources xmlns:tools="http://schemas.android.com/tools">
  ...
  <item name="android:statusBarColor" tools:targetApi="l">@color/white</item>
  <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
  ...
</resources>

android:windowLightStatusBar 값을 true 로 set 하는 경우 status bar text 색이 black 으로 노출이 되어 아래와 같이 정상적으로 Status 정보가 노출이되는 것을 확인할 수 있습니다.

Dark Mode Theme

Dark mode 일 경우 App bar의 색상을 Black으로 하고 싶은 경우 res/values/theme.xml (night) 를 수정해야 합니다.

그리고 theme.xml 의 값을 아래와 같이 수정합니다.

<resources xmlns:tools="http://schemas.android.com/tools">
  ...
  <item name="android:statusBarColor" tools:targetApi="l">@color/black</item>
  <item name="android:windowLightStatusBar" tools:targetApi="m">false</item>
  ...
</resources>

그리고 설정에서 Dark mode 를 적용하게 되면 아래와 같이 화면이 보이게 됩니다.

Origogi

[iOS][Swift] ARC (Automatic Reference Counting) 정리

서론

ARC (Automatic Reference Counting)

Strong Reference

Weak Reference

Delegate 패턴

Sample Code (Strong Reference)

weak 로 선언된 변수는 어떻게 동작하는가?

weak 참조와 nil 할당

Swift의 weak 참조 관리 메커니즘

unowned 참조

Reference

[iOS][Swift] UiKit 정리 - Navigation

서론

화면 전환

이전 화면으로 이동

Push 된 ViewController back

Modal 로 띄운 ViewController back

Navigation Controller

Root View Controller

Navigation Bar

[iOS][Swift] Combine 정리 (4) - Networking

서론

Networking

dataTaskPublisher()

eraseToAnyPublisher()

Error Handling

두 개의 Publisher(네트워크 요청)를 합치기

[iOS][Swift] Combine 정리 (3) - Subject

서론

Subjects

PassthroughSubject

CurrentValueSubject

Custom Subject

[iOS][Swift] Combine 정리 (3) - 예외 처리

서론

tryMap

catch

replaceError

retry

[iOS][Swift] Combine 정리 (2) - 변환 연산자, 결합 연산자

서론

변환 연산자

Map

FlatMap

Merge

Filter

CompactMap

결합 연산자

CombineLatest

Zip

SwitchToLatest

[iOS][Swift] Combine 정리 (1) - 소개, Key Concepts, 사용 예시

서론

Combine 이란?

Key Concepts

Publisher

Subscriber

Operator

Subject

Combine 장점

Combine 사용 예시

Simple Example

Array Example

Timer Example

connect() vs autoconnect()

.store(in: &set) 메소드

store(in:) 메서드란?

주요 특징

사용 예시

장점

예외 처리

진정한 시니어 개발자란?

시니어 개발자가 되기 위한 조건 또는 스킬

시니어 개발자가 되기 전 흔히 하는 실수

[Flutter] E2E Test (2) - CI에 통합하기

Overview

환경

CI

Flutter `integration_test` 패키지 설명