Custom Modifier란?​

SwiftUI에서 Custom Modifier란 사용자가 정의한 수정자. SwiftUI에서는 ViewModifier 프로토콜을 준수하는 구조체로 이를 구현하여 사용자 정의 수정자를 만들 수 있다.

• CustomModifier.swift

  import SwiftUI
  
  struct CustomModifier: ViewModifier {
      func body(content: Content) -> some View {
          content
              .padding(10)
              .background(Color.gray)
              .cornerRadius(10)
      }
  }
  
  extension View {
      func customViewModifier() -> some View {
          modifier(CustomModifier())
      }
  }
  
  extension View {
      func customViewModifier2() -> some View {
          self
              .font(.title)
              .padding(10)
              .foregroundColor(.red)
      }
  }
  
  

• CustomButtonView.swift

  import SwiftUI
  
  struct CustomButtonView<Content: View>: View {
      let content: Content
      let action: () -> Void
      
      public init(
      @ViewBuilder content: () -> Content,
      action: @escaping () -> Void
      ) {
      self.content = content()
      self.action = action
      }
      
      public var body: some View {
          Button(action: {
              action()
          }) {
              content
                  .padding(10)
                  .background(Color.red)
                  .cornerRadius(10)
                  .foregroundColor(.white)
          }
      }
  }
  

Custom Modifier 적용​

NSObject란?​

SwiftUI는 Swift 기반의 UI 프레임워크이지만, Objective-C와의 상호운용성을 고려하여 설계됨. 따라서 NSObject를 사용하여 Objective-C 코드와의 호환성을 유지하거나 기존 코드를 재활용하는 경우에는 NSObject를 사용.

• Objective-C 호환성: SwiftUI는 Objective-C와의 상호운용성을 제공하기 때문에, Objective-C에서 정의된 클래스나 라이브러리를 SwiftUI에서 사용할 수 있다.

• UIKit과의 연동: UIKit 기반의 앱에서 SwiftUI를 점진적으로 도입하는 경우, NSObject를 사용하여 UIKit 뷰 컨트롤러와 상호작용 필요.

• 기존 코드 재사용: 기존 Objective-C 또는 UIKit 프로젝트에서 사용하던 NSObject 클래스나 라이브러리를 SwiftUI에서 재사용하려면 NSObject를 상속하거나 포함해야 됨.

struct MyView: View {
	var body: some View {
	    VStack {
	        titleView
	        titleView2()
			TitleView3()
	    }
	}
	
    // MARK: 프로퍼티
	var titleView: some View {
	    Text("title")
	}
	
    // MARK: 메서드
	func titleView2() -> some View {
	    Text("title2")
	}
}


// MARK: 구조체 하위뷰
private struct TitleView3: View {
    fileprivate var body: some View {
        Text("title3")
    }
}

구조체로 정의​

장점:​

• 재사용 가능한 커스텀 View를 정의할 수 있습니다.

• SwiftUI가 자동으로 상태 관리를 처리하기 때문에, 데이터의 변경에 대한 업데이트를 처리하기 쉽습니다.

단점:​

인터페이스(Interface) 개념을 지원하는 Swift 기능.

프로토콜은 특정 동작이나 속성의 청사진 또는 규약을 나타내는 추상적인 타입.

프로토콜 구현 예제​

protocol ProtocolName {
    // 메서드 요구사항
    func methodName()
    
    // 속성 요구사항
    var property: Type { get set }
}

struct MyStruct: ProtocolName {
    // ProtocolName 프로토콜의 메서드와 속성을 구현
    func methodName() {
        // 구현 내용
    }
    
    var property: Type {
        get {
            // getter 구현
        }
        set {
            // setter 구현
        }
    }
}

비교 : SwiftUI , TS , JAVA​

SwiftUI​

제네릭(Generic)은 데이터 형식이나 함수를 일반화하고, 재사용 가능한 코드를 작성하는 데 도움을 주는 기능.

제네릭은 특정한 데이터 형식에 의존하지 않고, 여러 다양한 데이터 형식에 대해 동일한 코드를 작성할 수 있음.

비교 : SwiftUI , TS , JAVA​

SwiftUI​

import SwiftUI

struct MyArray<T> {
    var data: [T] = []
    
    mutating func append(_ item: T) {
        data.append(item)
    }
    
    func printAll() {
        data.forEach { item in
            print(item)
        }
    }
}

struct ExamGeneric_Previews: PreviewProvider {
    static var previews: some View {
        
        var myInt = MyArray<Int>()
        var myStr = MyArray<String>()
        
        myInt.append(1)
        myInt.append(2)
        myInt.printAll()
        
        myStr.append("A")
        myStr.append("B")
        myStr.printAll()
        
        return Text("Hello, world!")
    }
}

TS​

struct와 class 비교​

Swift에서 구조체(struct)와 클래스(class)는 둘 다 데이터를 그룹화하고 동작을 정의하는데 사용되지만 몇가지 차이점이 있다.

1. 값 타입(Value Type): 구조체는 값 타입(value type)이다. 구조체의 인스턴스가 복사되어 전달될 때 데이터가 복사된다는 것을 의미합니다. 클래스는 참조 타입(reference type)이므로 인스턴스가 참조로 전달되고 공유됨. 이러한 값 타입 특성은 데이터의 불변성을 쉽게 유지하고 예기치 않은 부작용을 방지.
2. 불변성(Immutability): 구조체의 속성을 선언할 때 상수(let)로 정의하면 해당 속성은 변경할 수 없다. 이것은 데이터의 불변성을 강제함. 클래스는 속성을 상수로 선언해도 인스턴스의 내용을 변경할 수 있기 때문에 불변성을 갖추기가 어려움.
3. 스레드 안전(Thread Safety): 구조체는 스레드 간에 데이터를 공유하지 않으므로 스레드 안전성을 제공. 클래스는 여러 스레드에서 공유되므로 동시 접근에 대한 조치를 취해야 함.

옵셔널 타입 변수​

UI 요소의 상태나 속성이 정의되지 않았거나 초기화되지 않았을 때 사용. 도중에 nil 을 할당할 수 있다.

• 옵셔널 바인딩

  옵셔널 변수의 값을 안전하게 추출하기 위해 if let 또는 guard let 문을 사용할 수 있음.

  var age: Int? = 30
  
  age = 20
  age = nil
  
  if let unwrappedAge = age {
      print("나이는 \(unwrappedAge)세 입니다.")
  } else {
      print("나이 정보가 없습니다.")
  }
  

implicitly unwrapped optional​

Server-Sent Events(SSE) 란?​

서버에서 클라이언트로 실시간으로 데이터를 보낼 수 있게 해주는 웹 기술.

SSE는 HTTP 연결을 사용하며, 클라이언트가 'text/event-stream'이라는 MIME 타입으로 GET 요청을 서버에 보내고, 서버는 이 연결을 유지. 이후 서버가 새로운 이벤트를 이 연결을 통해 전송함.

웹소켓과 비슷하지만, SSE는 단방향 통신만을 지원함. 만약 클라이언트에서 요청을 보내기 위해서는 별도의 HTTP 요청을 사용해야 됨.

RN 에서의 SSE​

Promise.all​

Promise.all()을 사용하면 여러 개의 Promise 객체를 동시에 실행함. Promise.all()은 배열 형태로 여러 개의 Promise 객체를 받아들이며, 모든 Promise 객체가 완료될 때까지 기다렸다가, 모든 Promise 객체의 결과 값을 배열 형태로 반환.

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('첫번째 작업 완료!');
  }, 3000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('두번째 작업 완료!');
  }, 2000);
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('세번째 작업 완료!');
  }, 1000);
});

Promise.all([promise1, promise2, promise3])
  .then(results => {
    console.log(results);
  })
  .catch(error => {
    console.error(error);
  });


// ["첫번째 작업 완료!","두번째 작업 완료!","세번째 작업 완료!"]

async/await 사용​

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function parallel() {
  const task1 = async () => {
    await sleep(3000);
    return '첫번째 작업 완료!';
  }

  const task2 = async () => {
    await sleep(2000);
    return '두번째 작업 완료!';
  }

  const task3 = async () => {
    await sleep(1000);
    return '세번째 작업 완료!';
  }

  const [result1, result2, result3] = await Promise.all([task1(), task2(), task3()]);
  console.log(result1, result2, result3);
}

parallel();

// "첫번째 작업 완료!" "두번째 작업 완료!" "세번째 작업 완료!"

이벤트 루프란?​

자바스크립트는 싱글 스레드(single-thread) 기반으로 동작됨. 즉, 한 번에 하나의 작업만 처리할 수 있다는 것을 의미. 하지만 자바스크립트는 이벤트 루프(event loop)를 통해 비동기적으로 동작할 수 있도록 지원.

이벤트 루프는 자바스크립트 엔진의 메인 스레드에서 동작하는 무한 루프. 이 루프는 실행 중인 코드와 이벤트 큐(event queue)를 관찰하고, 이벤트 큐에 이벤트가 들어오면 해당 이벤트를 처리하는 작업을 수행.