개발을 진행하던 중, 버튼 안에 이미지를 넣고 싶은데 다음과 같은 문제가 발생했다.

이 문제는 이전에 해결한 적이 있었는데 어떻게 했는지 기억이 나질 않았다.

앞으로 비슷한 상황을 마주했을 때 찾아보기 위해 정리한다!!

이미지 크기 조정하기

이미지 크기를 조정하는 방법은 먼저 extension을 추가해줘야 한다.

import UIKit

extension UIImage {
    func resize(targetSize: CGSize) -> UIImage? {
        let rect = CGRect(origin: .zero, size: targetSize)
        UIGraphicsBeginImageContextWithOptions(targetSize, false, 0.0)
        self.draw(in: rect)
        let resizedImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return resizedImage
    }
}

이렇게 UIImage 익스텐션을 만들어준다.

그리고, 원하는 버튼을 세팅하는 부분에서 다음과 같이 사용하면 된다.

private let settingButton = UIButton().then {
    let imageSize = CGSize(width: 100, height: 100) // 1
    let resizedImage = UIImage(systemName: "gearshape")?.resize(targetSize: imageSize) // 2
    $0.imageView?.contentMode = .scaleToFill // 3
    $0.setImage(resizedImage, for: .normal) // 4
}

(나는 then을 사용하였다.)

1. 먼저, 이미지 크기를 CGSize를 사용하여 설정해준다. 위 코드에서는 너비와 높이 모두 100으로 설정되었다.

2. 그리고, 크기를 조정하고자 하는 이미지를 가져와 아까 만들어둔 extension을 사용해준다.

3. 이제 이미지뷰의 contentMode를 scaleToFill로 설정해 이미지가 뷰에 가득 차도록 한다.

4. UIButton에 있는 setImage함수를 사용해 이전에 크기를 조정한 이미지를 가져와준다.

이렇게 하면, UIButton 안에 원하는 이미지를 가져오고, 그 이미지 크기를 마음대로 조정할 수 있다.

개발을 하던 중, 테이블 뷰 아래 자꾸 다음과 같은 구분선이 생기는 걸 확인했다.

limitTableView.separatorStyle = .none

그럴 때는 이렇게 구분 스타일을 .none으로 바꿔주면 된다.

이제 이렇게 구분선이 사라진 걸 확인할 수 있다 !

2.1 네트워크 애플리케이션의 원리

Creating a network app

• software 개발자 관점에서는 네트워크 구조가 고정되어 있다. 하지만, application 구조는 개발자가 설계하며, 여러 종단 시스템에서 어떻게 조직되어야 하는지를 알려준다.
• 이러한 application 구조는 크게 2가지로 나뉜다.
  • Client - server 구조
  • P2P 구조

Client-server paradigm

• Server
  • 항상 동작하고 있는 서버가 존재하고, Client라는 다른 호스트들로부터 서비스 요청을 받는다.
  • 서버는 잘 알려진 고정 IP 주소를 갖는다. (permanent IP address - not change)
  • 서버가 클라이언트로부터 오는 모든 요청에 더 응답하는 것이 불가능할 때
    • 많은 수의 호스트를 갖춘 data center가 강력한 가상의 서버를 생성하는 역할로 사용된다.
    • 보통 10만개 정도의 서버를 갖추고 있다.
• Clients
  • 필요할 때 connect 한다.
  • may be intermittently connected (간접적으로, 가끔식 연결된다)
  • dynamic IP address를 갖는다.
  • Client끼리는 직접 통신하지 않는다.

P2P 구조

• Client와 server 둘 다의 responsibility를 갖는다.
• 항상 켜져있는 서버에 의존하지 않는다.
• 임의의(arbitrary) end system들은 직접 소통한다.
  • 즉, peer라는 간헐적으로 연결된 호스트 쌍이 서로 직접 통신하게 한다.
• peer는 우리가 흔히 알고 있는 Client(laptop 같은 것들)
• **Self scalability(자가확장성)**를 갖는다.
  • 즉, 사용자가 많아질수록 네트워크에 부담이 커지는 것이 아니라, 오히려 서로 도와서 네트워크의 효율성이 높아진다.
  • 예를 들어, 파일 공유 application에서는 각 peer들이 파일을 요구하여 작업 부하가 생기지만, 각 Peer들은 파일을 다른 Peer들에게 분배하여 시스템에 서비스 능력을 갖춘다.
• data center 등이 필요 없으므로 비용이 효율적이다.

👩🏻‍💻 2.1.2 프로세스 간 통신

실제 통신하는 것은 프로그램이 아니라, 실행되고 있는 프로그램인 process이다.

• 같은 host 범위 내에서, 두개의 process들은 IPC를 사용해 communication 한다.
  • Inter-process-communication : 두 개 이상의 프로세스가 데이터를 주고받는 방법
• 다른 host 범위 내에서는 exchanging messages를 통해 소통한다.
• 2개의 종단 시스템에서 프로세스는 컴퓨터 네트워크를 통한 메시지 교환으로 서로 통신한다.
• P2P 구조에서처럼 Client도 서버 프로세스가 될 수 있고, 서버도 client process가 될 수 있다.
• 송신 프로세스 : 메시지를 만들어서 보냄
• 수신 프로세스 : 메시지를 받고 역으로 메시지를 보냄으로써 응답

Client, Server process

• client process : process that initiates communication
  • 요청을 보내는 쪽의 프로세스
• server process : process that waits to be contacted
  • 요청을 받는 쪽의 프로세스

Socket

process는 socket을 통해 네트워크로 메시지를 보내고 받는다. (문 같은 개념)

• 호스트의 application 계층과 transport 계층간의 인터페이스이다.
• 애플리케이션 개발자는 소켓의 application 계층에 대한 모든 통제권을 갖지만, 소켓의 transport 계층에 대한 통제권은 거의 갖지 못한다.
  • transport protocol을 선택
  • 최대 버퍼와 최대 세그먼트 크기 같은 약간의 매개변수 설정
• sending process shoves message out door - 전송 프로세스는 메시지를 밖으로 밀어낸다.
• Application과 network 사이의 API라고도 한다.

Addressing processes

프로세스가 수행되고 있는 다른 패킷으로 프로세스를 보내기 위해서는 수신 프로세스가 주소를 갖고 있어야 한다. 수신 프로세스를 식별하기 위해서는 두 가지 정보가 필요하다.

Identifier는 IP주소와 port number를 갖는다.

1. 호스트의 주소 즉, IP 주소가 필요하다.
   1. IP 주소가 identifier가 된다.
2. 호스트 내의 수신 프로세스를 명시하는 식별자. 즉 port 번호가 필요하다.
   1. 이 port 번호로 내 process를 특정할 수 있다.
   2. 같은 IP 주소를 가진 여러 application이나 process가 동시에 수행될 수 있기 때문에 port 번호로 구분한다.

• IP를 통해 적절한 computer를 찾는다.

👩🏻‍💻 2.1.3 An Application-layer protocol defines

application 개발자는 소켓의 application 계층에 대한 모든 통제권을 갖지만, 소켓의 transport 계층에 대한 통제권은 거의 갖지 못한다. 즉, 여기에서는 그 중 애플리케이션이 어떤 transport service를 이용할 수 있는지에 대한 내용이다.

1. Data integrity
   1. 손실되지 않는 data를 전송
2. throughput
   1. 다른 session들이 network 경로를 따라 대역폭을 공유하고, 이 세션들이 생겼다 없어졌다 하기 때문에 가능한 처리율은 시간에 따라 변한다. 이는 어느 명시된 속도에서 보장된 가용 처리율을 제공한다.
   2. 이러한 처리율 요구사항 여부를 기준으로 두 가지로 나뉜다.
      1. effective app : 처리율 요구사항이 있는 민감 application
      2. elastic app : 탄력적 application. 처리율 요구사항이 없다.
3. timing
   1. 예를 들어, 송신기가 socket으로 내보내는 모든 bit가 수신자의 socket에 100ms 내에 도착하게 할 수 있다. 주로 실시간 application에서 사용한다.
4. security
   1. data를 암호화 할 수 있다.

Internet transport protocols services

인터넷 전송 프로토콜이 제공하는 서비스

1. TCP 서비스
2. UDP 서비스

TCP service

• reliable transport
• 서로 전송 제어 정보를 교환하게 한다.

UDP service

• unreliable data transefer
• hand shaking 과정이 없고, 데이터가 전달되는 것을 보장하지 않는다.

TCP vs. UDP

• TCP가 UDP보다 더 유용하지만, UDP는 더 빠르다.
• 둘 다 처리율 혹은 시간 보장 서비스를 제공하지 않는다.
  • 그래서 시간 민감 애플리케이션 같은 경우, 이러한 처리율 및 시간 지연에 잘 대처할 수 있도록 설계되어 있다.

👩🏻‍💻 2.1.5 Application layer: Protocol

다른 종단 시스템에서 실행되는 애플리케이션의 프로세스가 서로 메시지 보내는 방법을 정의한다.

• 교환 메시지의 타입
• 여러 메시지 타입의 문법(syntax)
• 필드의 의미, 즉 필드에 있는 정보의 의미(semantics)
• 언제, 어떻게 프로세스가 메시지를 전송하고 메시지에 응답 하는지를 결정하는 규칙

네트워크의 프로토콜 계층 구조와 서비스 모델, 인터넷 프로토콜 스택과 OSI 모델, 캡슐화, 역캡슐화

🍪 Why layering?

계층구조는 어떤 한 계층의 구현이 변하더라도 시스템의 나머지 부분은 변하지 않는다.
하지만, layering의 단점은 overhead가 발생할 수 있다는 것이다. duplicate할 때 overhead가 발생할 수 있다.

• 각 계층에서 추가적인 데이터와 처리를 더함으로써 비효율이 생길 수 있다.
  • 즉, 데이터를 주고 받을 때, 추가적인 정보(헤더)를 붙여야 한다.

1. 복잡한 시스템 처리:
   • 복잡한 네트워크 시스템을 계층으로 나눠서 각 계층의 기능을 명확하게 정의할 수 있음.
2. 모듈화의 장점:
   • 계층 구조 덕분에 한 계층의 구현을 변경하더라도 다른 계층에 영향을 미치지 않음. 이를 통해 시스템 유지보수 및 업데이트가 용이해짐.
3. 계층화의 단점:
   • 계층 구조는 중복된 기능을 초래할 수 있음. 예를 들어, 오류 검출 기능이 여러 계층에서 중복되어 있을 수 있음. 또한, 각 계층에서 추가되는 오버헤드로 인해 성능 저하가 발생할 수 있음.

🍪 ISO/OSI reference model

컴퓨터 네트워크가 데이터를 어떻게 주고 받는지 설명하기 위해 만든 7계층 구조의 reference model이다. 각 계층은 독립적이며, 계층간 상호작용을 통해 data를 주고 받는다.

1. Application (응용)
2. Presentation (표현)
3. Session (세션)
4. Transport (전송)
5. Network (네트워크)
6. Data Link (데이터 링크)
7. Physical (물리)

Presentation

data를 사용자에게 이해할 수 있는 형태로 변환한다. 예를 들어, 데이터 암호화 혹은 텍스트를 ASCII 코드로 변환한다.

Session

두 장치가 통신하는 동안 연결 세션을 관리하고, 유지한다.

→ 위의 Presentation과 Session 계층은 특정 상황에서만 필요할 때 사용한다.

🍪 Internet protocol stack

인터넷 프로토콜 스택은 OSI 모델보다 간소화 된 5계층 모델로 이루어져있다.

1. Application (응용) - 5계층
   1. 한 종단 system에 있는 application이 다른 종단 system에 있는 application과 정보 패킷을 교환할 때 이 프로토콜을 사용한다.
   2. IMAP, SMTP, HTTP
2. Transport (전송) - 4계층
   1. data를 주고 받을 수 있게 한다.
   2. TCP, UDP
3. Network (네트워크) - 3계층
   1. 데이터를 송수신 할 경로를 찾아주며, IP주소와 라우팅을 담당한다.
   2. IP, routing protocols
4. Link (데이터 링크) - 2계층
   1. 인접한 네트워크 장치간의 데이터 전송을 담당한다.
   2. Ethernet, Wifi, PPP
5. Physical (물리) - 1계층
   1. 물리적 매체를 통해 데이터를 전송한다.

🍪 Encapsulation / Decapsulation

데이터를 안전하고 효율적으로 전달하기 위한 핵심 개념이다.

네트워크에서 데이터가 전송될 때, 각 계층은 데이터를 처리 하면서 자신만의 헤더를 추가하는 캡슐화 과정을 거친다.
그리고 수신 측에서 이 헤더들을 제거하는 역캡슐화 과정을 거쳐 데이터가 상위 계층으로 전달된다.

• Encapsulation : higher → lower (헤더를 붙여가는 과정)
• Decapsulation : lower → higher (헤더를 떼가는 과정)

Encapsulation

1. Application Layer: 사용자가 입력한 데이터가 메시지로 전송됨.
2. Transport Layer: 메시지에 세그먼트가 추가됨.
3. Network Layer: 세그먼트에 IP 헤더를 추가하여 데이터그램이 됨.
4. Link Layer: 프레임 헤더와 프레임 트레일러가 추가됨.
5. Physical Layer: 비트로 변환되어 물리적 매체를 통해 전송됨.

Decapsulation

수신 측에서는 이 과정을 역순으로 수행함. 물리 계층에서 받은 비트 데이터를 링크 계층에서 프레임으로 처리하고, 네트워크 계층에서 데이터그램으로 변환하여 목적지까지 도달함.

Chapter 1.5 : Performance: loss, delay, throughput

인터넷을 통해 파일을 전송하고, 이메일을 보내고, 웹사이트에 접속하는 등 다양한 작업을 수행한다. 하지만 실제 네트워크 환경에서는 데이터가 즉시 전송되거나 손실 없이 완벽하게 전달되는 것이 불가능하다.

패킷 스위칭 네트워크는 데이터 전송 속도를 제한하고, 지연을 유발하며, 경우에 따라 Packet Loss가 되기도 한다.

🌱 Packet delay: four sources

1. 처리 지연(Processing Delay) : determine output link

• - router가 packet을 수신하면 먼저 packet의 header를 확인하고, 해당 packet을 어느 경로로 보낼지 결정한다. (이 때 소요되는 시간이 처리지연)
• 라우터의 성능에 따라 달라지며, 일반적으로 매우 짧은 시간이 소요됨

2. 대기 지연(Queuing Delay) : 패킷을 전송하기 위해 대기하는 시간

• 패킷이 라우터에 도착했을 때, 해당 패킷을 전송하기 위해 대기하는 시간을 의미한다.
• 라우터가 바쁘거나, 트래픽이 많은 경우 패킷은 전송되기 전, 대기열에서 기다려야 한다.
• 이 Queuing Delay는 트래픽의 양에 따라 달라지며, 네트워크의 혼잡도에 따라 지연 시간이 크게 증가할 수 있다.

3. 전송 지연(Transmission Delay) : 라우터에서 링크로 데이터를 보내기 위해 패킷의 모든 비트를 ‘밀어 넣는’데 걸리는 시간

• L : packet length (bits)
• R : link transmission rate (bps)
• Transmission Delay = L/R

4. 전파 지연(Propagation Delay) : 데이터가 물리적 매체를 통해 이동하는 데 소요되는 시간

• 패킷이 링크를 통해 다음 라우터로 전파되는 데 걸리는 시간
• 거리에 비례한다.
• 매체의 전파 속도에 따라 결정된다.
• 일반적으로 빛의 속도에 가깝다.

🌱 Packet queueing delay (revisited)

traffic intensity : 패킷이 대기열에서 대기하는 시간에 영향을 미침

traffic intensity = La/R (a : 패킷 도착률)

• La/R ≈ 0: 패킷이 거의 대기하지 않고 전송되며, 평균 지연 시간도 작음.
• La/R → 1: 대기 시간이 급격히 증가함.
• La/R > 1: 패킷 도착률이 처리 능력을 초과하므로 대기 시간이 무한대로 증가하거나 패킷이 손실될 수 있음.
• 그래서 우리는 traffic intensity가 1보다 크지 않게 설계해야 한다.
• traceroute라는 프로그램은 delay를 측정할 수 있게 하는 프로그램이다.

🌱 Packet loss

• queue의 용량이 유한하기 때문이다.
• full queue에 들어오면 packet을 drop한다.
• 버려진 packet은 retransmitted 된다.

🌱 Throughput (처리량)

주어진 시간 동안 네트워크를 통해 전송되는 데이터의 양을 의미한다.

• 처리량은 여러 요인에 의해 결정되는데, 특히 네트워크 상의 가장 병목 링크(bottleneck link_가장 느린 구간)에 의해 제한된다.
  • 즉, 서버와 클라이언트를 연결하는 모든 링크 중 가장 낮은 전송속도를 가진 링크가 전체 처리량을 결정하게 된다.

처리량 결정

각 연결의 처리량은 다음 세 가지 값 중 가장 작은 값에 의해 결정된다.

• Rc : 수신자의 수신 속도
• Rs : 송신자의 송신 속도
• R/10 : 백본 링크(R)의 대역폭이 10개의 연결로 공평하게 분배되었을 때 각 연결에 할당되는 대역폭처리량은 min(Rc, Rs, R/10)으로 결정.
• 즉, 이 세 가지 값 중 가장 작은 것이 그 연결의 처리량을 제한함.

throughput = min ( Rc, Rs, R/10)

Chapter 1.3 : Network core : packet/circuit switching, internet structure

The network core

데이터가 빠르고 효율적으로 이동하도록 돕는 중앙 네트워크 인프라.
즉, 인터넷의 고속도로같은 역할을 한다. 인터넷의 중심에서 packet switching과 link를 통해 대규모 데이터를 전달하며 여러 엣지 장치들을 연결하는 고속 데이터 경로 역할을 한다.

Packet Switching

데이터를 작은 패킷으로 나누어 네트워크를 통해 전송하는 방식이다.

각 패킷은 독립적으로 경로를 찾아가며 목적지에서 다시 결합되어 원래의 데이터를 복원한다.

작동 원리

1. 데이터 분할: 데이터가 긴 메시지일 경우, 이를 작은 패킷으로 나눔.
2. 전송 과정: 각 패킷은 라우터와 스위치를 통해 전송되며, 각 링크에서 최대 전송 속도로 패킷을 보냄.
3. 저장 후 전달 (Store-and-Forward): 라우터는 패킷의 모든 데이터를 받기 전까지 다음 링크로 전송하지 않음.

예시

패킷이 100 Mbps 속도의 링크를 통해 전송되면, **패킷 크기(L)**와 **전송 속도(R = 100 Mbps)**에 따라 전송 시간은 L/R(100 Mbps) 가 됨.

Packet transmission delay = L(bits) / R(bits/sec)

Queueing delay, loss

라우터가 여러 링크를 관리할 때, 패킷은 출력 버퍼에서 대기한다.
만약 라우터가 다른 패킷을 전송 중이라면 새로운 패킷은 대기해야 한다.
이 과정에서 큐잉 지연이 발생할 수 있는데, 버퍼가 가득 차면, 추가로 들어오는 패킷은 패킷 손실이 발생한다.

Forwarding and Routing

network-core의 주요 기능이다.

라우터는 패킷을 forwarding table을 통해 어떤 링크로 보낼지 결정한다.
패킷의 목적지 IP 주소를 확인하여 해당하는 링크로 전달한다. 이러한 테이블은 라우팅 프로토콜에 의해 자동으로 설정된다.

Forwarding

• local action

Routing

• global action : table을 결정하기 위해서는 모든 걸 알고 있어야 하기 때문이다.

Forwarding Table

각 라우터는 목적지 주소 또는 목적지 주소의 일부를 라우터의 출력 링크로 매핑해야 하는 포워딩 테이블을 가지고 있다.

라우터가 수신한 패킷을 어느 링크로 전달하는지 결정하는 과정

1. 패킷이 라우터에 도착
2. 라우터는 패킷의 IP 주소를 조사
3. 해당 목적지 주소를 이용해 forwarding table 검색
4. 그 패킷을 출력 링크로 보냄

Packet Switching vs. Circuit Switching

• 패킷 스위칭: 링크 자원을 동적으로 공유하며, 사용자가 많더라도 비활성 사용자 자원을 재사용할 수 있음.
  • Circuit 공유하므로 여러 사람이 사용할 수 있다.
• 회선 스위칭: 통신이 시작되면 일정한 자원을 고정으로 할당하지만, 자원이 비활성 상태일 때도 사용 불가함.
  • 개수의 제한이 있고, 그래서 사용자 수도 제한이 있다.
  • share하지 않아서 안정적이지만, 안쓰는 애들은 놀게 되므로 비효율적이다.

패킷 스위칭은 사용자들이 데이터를 주고받지 않는 비활성 시간 동안 자원을 다른 활성 사용자에게 재할당할 수 있으므로, 회선 스위칭보다 자원 활용이 훨씬 더 효율적임.

Circuit Switching : FDM and TDM

• FDM (Frequency Division Multiplexing)
  • total frequence band를 equival하게 나눈다.
  • 각 user에게 allocate 한다.
• TDM (Time Division Multiplexing)
  • time divided into slots (같은 단위로 나눈다)
  • transmission time이 FDM보다 짧다.

인터넷의 구조 : 네트워크의 네트워크

• 인터넷은 수많은 ISP(인터넷 서비스 제공자)들이 서로 연결된 네트워크의 네트워크임.
• 각 ISP는 고객-제공자 관계를 형성하며, 상위 계층의 ISP들은 서로 **피어링(직접 연결)**하여 트래픽을 교환함.
• 콘텐츠 제공자(예: 구글)는 자체 네트워크를 운영해 상위 ISP를 거치지 않고 직접 접속함으로써 비용을 절감하고 성능을 최적화함.

1.2 Network edge: hosts, access network, physical media

Network edge

• hosts : Clients and servers
• servers often in data centers
• 인터넷 구성 요소 중 하나인데, 사용자가 인터넷에 연결하는 부분을 의미한다.
• ex) 스마트폰, 컴퓨터, 태블릿 등 주로 end system으로 불린다.

Q. 어떻게 host가 internet에 connection 하는가?

• Wifi, LTE, Desktop, LAN 같은 것들을 사용한다. 이들은 network를 call하고, access network를 한다.
• access network : access network 함으로써 network core에 접근할 수 있다.
• 이를 통해 user can access to the internet

Network core

ISP에 의해 operate 된다. (like KT, LGU+, SK 등)

데이터 전송을 담당한다.

• interconnected routers (forward packet to the destination)
• network of networks
• internet의 중심부 역할을 한다. 데이터를 빠르고 효율적으로 전달하는 경로를 제공함.

주요 access network의 유형

1. DSL
   1. 전화선을 이용해 인터넷에 접속하는 방식
   2. 각 가정의 DSL 모뎀이 전화 신호와 데이터를 분리해 인터넷으로 전달함.
2. Cable network
   1. Cable 모뎀을 통해 인터넷 접속이 이루어짐
3. FTTH
   1. 광케이블을 사용해 매우 빠른 속도로 데이터를 전송함.
4. 5G
   1. 5G 네트워크를 사용하여 데이터를 무선으로 주고 받는 방식.
   2. 광케이블 대신 고속 무선 신호로 데이터를 전송한다.
5. Ethernet and Wifi
   1. 로컬 네트워크(LAN) 방식으로, 이더넷 케이블을 통해 유선으로 연결되거나 Wifi를 통해 무선으로 연결된다.

Links : physical media

• How to connect end systems to edge router?
  • residential access ents to connect to internet
  • institutional access networks (school, company)
  • mobile access networks (Wifi, 4G/5G)
• transmission rate
• shared or dedicated access among users?
  • type인데, shared인지 dedicated인지

물리적 매체는 데이터를 송수신 하는데 사용되는 유도 매체(Guided Media)와 비유도 매체(Unguided Media)로 구분된다.

유도 매체 (guided media- wired)

👉🏻 꼬임선 (Twisted Pair Copper Wire)

전화 및 LAN 연결에 주로 사용된다. 저렴하고 보편적으로 사용 되는 매체이며, 가정용 인터넷 접속과 회사 내부 네트워크에서 많이 사용된다.

👉🏻 동축 케이블 (Coaxial Cable)

케이블 TV 및 인터넷 네트워크에서 사용된다. 높은 데이터 전송률을 제공한다.

👉🏻 광섬유 (Fiber Optics)

빛을 사용해 데이터를 전송하는 방식으로, 장거리 전송에 주로 사용되며, 데이터 전송 속도가 매우 빠르다.

비유도 매체 (unguided media - wireless)

👉🏻 무선 전파 (Terrestrial Radio Channels)

Wifi, 모바일 네트워크와 같은 무선 통신에서 사용된다. 물리적인 케이블 없이 전파를 통해 데이터를 전송한다.

👉🏻 위성 (Satellite Channels)

지구 궤도의 위성을 통해 데이터를 전송하는 방식으로 원거리 지역에서의 인터넷 접속에 주로 사용된다.

🔗 Access networks : cable-based access

서로 공유(shared)하므로, 사용자가 많으면 아주 속도가 느려질 수 있다.

• 동축(coasial) cable로, wireless보다 stable하다.
• FDM (frequency division multiplexing) : different channels transmitted in different frequency bands
  • down stream, upstream channel 모두 공유가 되기 때문에 FDM 프로토콜은 전송을 조정하고 충돌을 피하기 위해 필요하다.
• splitter : it can transfer internet data packet to the cable modem.
  • cable modem converts the analog → digital
• CMTS : Cable Modem Termination System
  • 많은 다운스트림 가정에 있는 케이블 모뎀으로부터 송신된 아날로그 신호를 다시 디지털 포맷으로 변환하는 역할
  • 즉, DSL 네트워크의 DSLAM과 유사한 기능을 함
• HFC : hybrid fiber coax
  • asymmetric (비대칭) : downstream이 upstream보다 훨씬 BPS가 크다. 사용자가 internet에서 뭔가를 download 받을 때, 많은 사용자가 원하기 때문이다.

🔗 Access networks : digital subscriber line (DSL)

dedicated line으로, 다른 것들과 shared하지 않는다.

• DSLAM (Digital Subscriber Line Access Multiplexer)
  • 수백-수천개의 가정들이 DSLAM에 연결된다.
    1. data와 전화 신호를 분리
    2. data를 인터넷으로 송신
• Splitter
  • 가정쪽에 존재한다.
    • 가정에 도착하면 데이터와 전화 신호를 분리한다.
    • data 신호를 DSL모뎀으로 전송한다.
• DSL vs DSLAM
  • DSL 모뎀은 사용자 집에서 인터넷에 연결되는 문이고, DSLAM은 이 문들을 모아서 중앙 네트워크로 연결하는 대형 분기점

🔗 Access networks : fiber to the home (FTTH)

1. 각 가정은 ONT(Optical Network Terminator)을 가지고 있으며, 이는 지정된 광섬유로 이웃 splitter에 연결된다.
2. Splitter(Optical splitter)는 여러 가정을 하나의 공유 광섬유로 결합, 이를 텔코의 Central Office에 있는 OLT(Optimal Line Terminal)에 연결한다.
3. OLT는 광신호와 전기신호 간의 변환을 제공, 이는 텔코 라우터를 통해 인터넷에 연결된다.

🔗 Access networks : home networks

1. we have to subscribe telecommunication operation like KT, LGU+
2. From the telecommunication operator to home, we can install the various access of internet like DSL, FTTH
3. From the modem at our home, we can construct the various home networks

🔗 Access networks : wireless access networks

Shared wireless access network connects end system to router

Wireless local area networks(WLANS)

• 가능한 distance가 제한돼 있다.
• IEEE 802.11 b/g/n/ac/ax (Wifi)

Wide-area cellular access networks

• local area network보다 coverage가 훨씬 넓다.

Wireless local area vs. Wide-area

Mobility : cellular는 mobility를 허용한다.

🔗 Access networks : enterprise networks

대규모 조직에서 다양한 부서, 위치를 연결하여 데이터와 리소스를 안전하게 공유, 관리한다.

• mix of wired, wireless

주요 개념

• 인터넷은 수십억 대의 디바이스가 연결된 네트워크로, 데이터를 패킷 단위로 나누어 전송함.
• 라우터 데이터를 전달하는 중요한 장치. 데이터가 어디로 가야 하는지를 결정.
• 패킷 스위칭은 데이터를 작은 패킷으로 나누어 독립적으로 전송하는 방식이며, 네트워크의 효율성을 높임.
• 프로토콜은 데이터를 주고받을 때의 규칙과 행동을 정의하며, 네트워크 통신의 핵심임.

1.1 What is the Internet? What is a protocol?

Internet 구성 요소

인터넷은 컴퓨터 네트워크로, 가정 네트워크, 회사 네트워크, 모바일 네트워크 등을 포함한 다양한 네트워크들이 서로 연결되어 있다. 이 네트워크들은 ISP(Internet Service Provider)를 통해 서로 연결되고, 데이터를 주고 받는다.

(이런 ISP들을 연결해주는 것을 IXP라고 한다.)

인터넷을 보는 관점은 크게 두 가지가 있다.

1. nuts and bolts view

2. service view

1️⃣ nuts and bolts view

전 세계적으로 수십억 개의 컴퓨팅 장치를 연결하는 컴퓨터 네트워크

Internet have various component. Host, Packet switches, communication links. They make networks and ISP connects the network. To run the internet, we need some communication rules, that is protocol

host = end system

• 컴퓨터 네트워크에 연결된 컴퓨팅 장치
• 서버, 인터넷에 연결된 모든 인터넷 ‘사물들’
• Internet의 edge에서 network app을 실행한다.
• communication link와 packet switch의 네트워크로 연결된다.

communication link

• 다양한 전송률(transmission rate)를 이용해 packet을 전송한다.
• transmission 단위 : bps (bits per second, 초당 비트 수)
• 동축 케이블, 구리선, 광케이블, 라디오 스펙트럼을 포함한 다양한 물리 매체로 구성된다.

Packet

• 송신 종단 시스템에서 수신 종단 시스템으로 보내진다.
• 송신 종단 시스템이 보내고자 하는 데이터를 segment로 나누고, 각 segment에 header를 부착해 수신 종단 시스템으로 전송한다.
• 패킷은 목적지에서 원래의 데이트로 다시 조립된다.

Packet switch

목적 : 데이터의 빠른 전송

• 입력 통신 링크 중 하나
• 도착하는 패킷을 받아서 출력 통신 링크의 하나로 그 패킷을 전달한다.
  • 최종 목적지 방향으로 패킷을 전달
• 대표적인 두 종류
  • link-layer switch : 보통 접속 네트워크에서 사용
  • router : 보통 네트워크 코어에서 사용

Protocols

• machines 사이에서 communication 할 수 있게 함.
• 이 프로토콜을 따르지 않으면 우리는 Communication 할 수 없다.
• 가장 중요한 프로토콜 둘을 통칭하여 TCP/IP라고 한다.
  • TCP : Transmission Control Protocol
  • IP : Internet Protocol
    • 라우터와 종단 시스템 사이에서 송수신 되는 패킷 포맷을 기술한다.
• 표준 (Standards)
  • IETF (Internet Engineering Task Force)
    • 국제 인터넷 표준화 기구
    • RFC (Requests for Comment) : IETF 표준 문서 (제공되는 docment를 RFC라고 부른다.
    • TCP, IP, HTTP, SMTP 같은 프로토콜을 정의
• 3개의 factors를 가진다.
  • format
  • order
  • actions
• 메시지의 format, order를 정의하고 transmission하는 action을 수행함.
• 어떻게 일 하냐면,
  1. 먼저 TCP connection을 한다 (transfer the request message)
  2. 서버는 request를 받으면 이를 받아들일지 말지를 결정한다.
  3. transmit some response to the client
     1. action when the server receive the request messages from the client
  4. TCP connection이 established 되면, client can transmit this message

ISP (Internet Service Provider)

• 패킷 스위치와 통신 링크로 이루어진 네트워크
  • 이 ISP를 통해 network가 연결될 수 있는 것이다.
• end system에게 다양한 네트워크 접속을 제공한다.
• CP(content provider)에게 인터넷 접속을 제공한다.
  • 웹 사이트나 비디오 서버를 인터넷에 직접 연결할 수 있게 된다.
• ISP들의 상호 연결
  • 인터넷은 종단 시스템을 서로 연결하는 것이므로 종단 시스템에 접속을 제공하는 ISP들도 서로 연결되어야만 한다.

2️⃣ Service view

Function1 : Infrastructure

• internet이 우리의 request를 transfer 해준다. 그리고 우리는 response를 받는다.
• request와 response가 Infrastructure을 통해 이루어진다.

Function2: Programming interface

• Infrastructure를 쓰기 위해서는 we need to write something.
• 송장 같은 역할을 한다.
  • 우리는 infrastructure를 신경쓰지 않아도 된다. 그저 interface만 신경쓰면 된다.
• hooks allowing sending/receiving apps to “connect” to, use Internet transport service.
  • 앱들이 인터넷을 통해 데이터를 주고 받을 수 있도록 연결하는 지점
• provides service options, analogous to postal service
  • 우편의 송장 같은 역할이라는 것.

참고 자료 : https://github.com/IT-Book-Organization/Computer-Networking_A-Top-Down-Approach/tree/main/Chapter_1/1.1%20%EC%9D%B8%ED%84%B0%EB%84%B7%EC%9D%B4%EB%9E%80%20%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80%3F

다른 블로그들 보면 직접 공식문서 보면서 공부한 내용을 정리하시던데,, 나도 그렇게 하고 싶은데..

시간이 상당히 많이 걸리겠지만, 도전..해봐야지..

이전에 애플로그인을 구현할 때는 그냥 블로그들 참고해서 코드를 가져오고, 가져온 코드만 공부해서 구현했었는데

시간도 있겠다, 의욕도 있겠다 한 번 해봐야겠다.

그나저나 한글 공식문서도 있으면 너무 좋겠다.

한글 공식문서를 기다리는 것보다 내가 영어를 더 공부해서 잘하는게 빠르려나..?

일단 해보자구..

아래 공식문서를 참고해서 구현한 애플로그인이다 !

https://developer.apple.com/documentation/sign_in_with_apple/implementing_user_authentication_with_sign_in_with_apple

1. Sign in with Apple 추가하기 및 Identifier 등록하기

Targets → Signing & Capabilities → +Capability 를 눌러 추가해준다.

(이 때, Apple developer 구독을 하지 않는 개발자라면, 해당 항목을 추가할 수 없다..ㅠㅠ)

다음은 애플 개발자 사이트에서 identifier를 등록해줘야 한다.

개발자 사이트에 로그인을 하고, Account 항목에서, Identifiers를 눌러 다음과 같은 페이지에 들어간다.

만약, 이 과정을 진행하지 않는다면.. 로그인이 되지 않고, 콘솔에 출력해도 자꾸 null 값이 나오게 될 것이다.

(저도 알고싶지 않았어요..)

파란색 + 버튼을 눌러준다.

그럼 이런 창이 뜨게 되는데, App ID와 관련한 내용이므로 이 상태에서 continue를 해준다.

여기서도 계속 continue를 해준다.

그럼 다음과 같은 화면이 보인다.

Description: 특수문자를 사용할 수 없고, Identifier에 대한 간단한 설명을 적으면 된다.

Bundle ID: App의 TARGETS → Signing & Capabilities에서 확인 할 수 있다.

내용을 채우고, Sign In with Apple을 찾아 체크해준다.

그리고, Edit을 눌러 지금 진행중인 프로젝트의 app id를 선택해주었다.

이대로 next를 누르고, register까지 했는데 다음과 같은 팝업이 발생했다.

찾아보니, 이 에러는 Bundle ID 앞에 팀 ID(Apple에서 생성된)를 포함하지 않을 때 생긴다고 한다.

그냥 저기 있는 주황색 부분을 번들아이디 가장 앞에 붙여넣기만 하면 된다.

후 이제 세팅들은 모두 끝났다 !!

애플로그인을 구현할 코드만 짜면 된다.

공식 문서에서 제공한 예제 코드는 스토리보드 기반이었기에 그대로 사용할 수는 없었다.

나는 UIKit을 사용하되, 스토리보드가 아닌 코드로 어떻게 구현하는지 해보겠다 !

2. AuthenticationServices import 하기

먼저 애플로그인 구현이 필요한 AuthenticationServices를 파일에 import 해줘야 한다.

import AuthenticationServices

3. 버튼 만들기

func setupAppleLoginButton() {
    // ASAuthorizationAppleIDButton을 사용해 애플 로그인 버튼 생성
    let appleLoginButton = ASAuthorizationAppleIDButton(type: .signIn, style: .whiteOutline)
    appleLoginButton.translatesAutoresizingMaskIntoConstraints = false
    appleLoginButton.addTarget(self, action: #selector(handleAuthorizationAppleIDButtonPress), for: .touchUpInside)

    // 버튼을 화면에 추가
    self.view.addSubview(appleLoginButton)

    // 오토레이아웃 설정
    NSLayoutConstraint.activate([
        appleLoginButton.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
        appleLoginButton.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
        appleLoginButton.heightAnchor.constraint(equalToConstant: 50),
        appleLoginButton.widthAnchor.constraint(equalToConstant: 300)
    ])
}

이렇게 오토레이아웃으로 버튼의 크기와 위치를 잡아주었다.

애플은 애플로그인 API를 사용하면 알아서 버튼을 디자인해주고, default로 디자인되어 있는 로그인 버튼을 사용할 수 있다.

색상, 디자인이 이미 지정되어 있어 상황에 맞게 적절하게 사용하라고 HIG에도 가이드라인을 제시한다.

나는 일단 SignIn 타입으로 아웃라인이 흰색인 버튼을 만들었다. 

ASAuthorizationAppleIDButton이라는 함수만 가져오면 바로 생성할 수 있다 !!

이제 버튼을 클릭했을 때, 호출할 함수를 만들어줘야한다.

3. 버튼 클릭 시 애플로그인 구현하기

나는 일단 공식문서에 있는 handleAuthorizationAppleIDButtonPress 함수를 그대로 연결해주었다.

// apple id로 권한 요청하기 위한 함수
@objc func handleAuthorizationAppleIDButtonPress() {
    // 애플 ID Provider 생성 (애플로그인 요청을 생성하기 위한 ASAuthorizationAppleIDProvider객체임)
    let appleIDProvider = ASAuthorizationAppleIDProvider()
    // 애플 로그인에 필요한 request 객체 생성하기
    let request = appleIDProvider.createRequest()
    // 사용자에게 얻고자 하는 정보 지정하기 (이름, 메일)
    request.requestedScopes = [.fullName, .email]

    // 애플로그인 절차를 관리하는 컨트롤러이다.
    let authorizationController = ASAuthorizationController(authorizationRequests: [request])
    // 로그인 과정의 성공/실패 결과를 처리한다.
    authorizationController.delegate = self
    // 인증 컨트롤러가 어떤 화면에 표시될지 결정하는 부분. 보통 현재 화면을 지정한다.
    authorizationController.presentationContextProvider = self
    // 애플로그인 request 시작 !
    authorizationController.performRequests()
}

이렇게 조금은 복잡해보이지만, 우린 객체를 생성하고, 관리하는 컨트롤러를 만들어 연결하기만 하면 애플로그인 과정이 진행된다.

나는 사용자가 애플로그인을 완료하면, 로그인 한 사용자의 이름과 이메일을 서버에 넘겨줘야 하고, 앱 내에 저장해야 한다.

그 전에, 받은 정보를 잘 저장할 수 있도록 콘솔에 출력해보자 !

4. 로그인 정보 콘솔에 출력하기

공식문서에서는 성공했을 때 사용자 데이터를 키체인에 저장하라고 한다.

이게 무슨말인지 이해가 잘 안돼서 지피티한테 물어봤다.

좀 길긴 하지만,, 이해는 됐다.

필수는 아니지만 개인정보는 소중하기 때문에.. 키체인에 저장해 보안을 강화하고, 사용자가 앱을 다시 삭제하고 재설치하거나 앱을 종료한 뒤 다시 들어왔을 때 다시 로그인하는 번거로움을 없앨 수 있다는 것이다.

지금까지 애플로그인 그저 코드만 넣어서 구현해왔는데 이렇게 공부해보니,, 더 파야할 길이 있는 것 같다.

키체인 저장까지 하는 과정을 경험해보고 싶기도 하지만, 너무 복잡할까 겁이 나기도 하고, 지금 로그인보단 주기능 구현이 더 우선이기에..! 일단 난 userDefaults에 저장하는 방식을 선택하겠다.

조금 더 용감해져서 돌아올게..

다시 돌아와서, 로그인 정보를 콘솔에 출력해보자.

그 전에, 한 번 로그인하면 출력할 때 userIdentifier만 보여지기 때문에, 받아옴과 동시에 UserDefaults에 저장할 것이다.

// didCompleteWithAuthorization = 애플로그인 후 사용자 정보를 처리하는 함수
// 이 함수는 애플로그인 절차가 완료된 뒤 호출된다.
func authorizationController(controller: ASAuthorizationController, didCompleteWithAuthorization authorization: ASAuthorization) {
    switch authorization.credential {
    
    // case1: 사용자가 apple ID로 로그인했을 때 반환되는 정보를 처리
    case let appleIDCredential as ASAuthorizationAppleIDCredential:

        // Create an account in your system.
        let userIdentifier = appleIDCredential.user
        let fullName = appleIDCredential.fullName
        let email = appleIDCredential.email

        print("useridentifier: \(userIdentifier)")
        print("fullName: \(String(describing: fullName))")
        print("email: \(email ?? "failed")")

        // UserDefaults에 이름과 이메일 저장
        let defaults = UserDefaults.standard

        // Optional fullName 처리
        if let givenName = fullName?.givenName, let familyName = fullName?.familyName {
            let completeName = "\(givenName) \(familyName)"
            defaults.set(completeName, forKey: "fullName")
            print("Saved fullName: \(completeName)")
        } else {
            defaults.set("", forKey: "fullName") // 이름이 없을 경우 빈 문자열로 저장
            print("Saved fullName as empty string")
        }

        if let email = email {
            defaults.set(email, forKey: "email")
            print("Saved email: \(email)")
        } else {
            defaults.set("", forKey: "email") // 이메일이 없을 경우 빈 문자열로 저장
            print("Saved email as empty string")
        }

	// case2 : iCloud 키체인에 저장된 것을 사용해 로그인하는 방식 (여기선 사용하지 않음)	
    case let passwordCredential as ASPasswordCredential:

        // Sign in using an existing iCloud Keychain credential.
        let username = passwordCredential.user
        let password = passwordCredential.password

        print("passwordCredential = \(username)")
        print("passwordCredential = \(password)")

    default:
        break
    }
}

위 코드는 공식문서에서 가져와서 출력하고, UserDefaults에 저장하는 코드만 추가했다.

이렇게 코드를 짜고, 빌드를 해보자 !

이메일 가리기를 하면, 다음과 같이 나온다.

애플 로그인의 "이메일 가리기" 기능은 사용자가 자신의 실제 이메일 주소를 공유하지 않고도 애플 ID를 통해 서비스에 로그인할 수 있도록 하는 기능이다.

그렇기에 사용자가 '이메일 가리기'로 로그인을 하면, 애플은 사용자를 대신해 무작위로 생성된 프록시 이메일 주소를 제공하는 것이다.

user@privaterelay.appleid.com 과 같은 형태로 메일이 생성된다.

왜 앱 내에서 최초 로그인 때만 사용자 이름과 이메일이 나올까?

앞에서 말했듯, 받아옴과 동시에 UserDefault에 저장했던 이유는 최초 로그인때만 사용자의 이름과 이메일을 받을 수 있기 때문이다.

왜 그런지 궁금해서 찾아봤다.

보안에 철저한 애플은 애플 로그인을 통해 이름과 이메일을 가져오는 것은 처음 로그인할 때에만 가능하도록 한다.

이는 애플이 사용자의 개인 정보를 최소한으로 제공하는 방식을 채택했기 때문이라고 한다.

• 처음 로그인 시 정보 제공: 애플 로그인 절차에서 처음 로그인을 할 때, 사용자의 이름과 이메일을 가져올 수 있다. 이때 사용자가 애플 ID를 통해 서비스에 처음 연결될 때만 이름과 이메일이 애플에서 전달된다.
• 다음 로그인 시 이름과 이메일 제공 불가: 이후 동일한 애플 ID로 로그인할 때는 애플에서 제공하는 userIdentifier (애플 ID 고유 식별자)만 전달된다. 이름이나 이메일 주소는 다시 제공되지 않는다. 이는 사용자 데이터 보호 및 프라이버시 강화를 위한 애플의 정책이다.

하지만, userIdentifier는 계속 받아옴을 볼 수 있다.

이는 애플 ID 고유 식별자로, 이를 사용해 사용자를 식별할 수 있게 하기 위함이라고 한다.

어쩐지 아무리 로그인해도 null이 나오더라니..!

이걸 모르면 구현이 잘 안된줄 알고 삽질을 꽤나 할 것 같다 !!

이제 애플로그인은 끝났다 !!

다음에 다시 화면들을 몇개 만들고 나서, 앱 내 접근 할 때마다 로그인 여부를 확인해 적절한 화면으로 이동시키는 자동로그인을 구현하고 정리해봐야겠다 !

후 힘들었다.

지난 글에 이어 이번에는 DeviceActivity를 어떻게 구현하는지에 대한 글이다.

다음 공식 문서를 참고하였다 !

https://developer.apple.com/documentation/DeviceActivity

이번 글은 내가 진행 중인 프로젝트에서 상당히 중요한 주기능에 꼭 필요한 framework이므로, 차근차근 따라하면서 해보려고 한다.

그 전에, 이 framework는 앱 확장 기능을 사용해 사용자의 프라이버시를 유지하면서, 기기 활동을 모니터링 한다.

이전 글과 조금 겹치는 부분이 없잖아 있지만,

1. 특정 시간동안 활동을 모니터링 할 수 있다.

2. 활동이 미리 설정된 한계에 도달할 때 경고를 줄 수 있다.

3. 앱과 웹사이트에서 사용된 시간을 모니터링 한다.

이제 각각의 Topic을 하나씩 다뤄보자 !

Manage Activities

• struct DeviceActivityEvent
  • 애플리케이션, 카테고리 또는 웹사이트 활동을 나타내는 이벤트
• struct DeviceActivityName
  • 활동의 고유한 이름을 나타낸다.
• struct DeviceActivitySchedule
  • 기기 활동을 모니터링할 때의 일정 기반 스케줄을 나타낸다.
• struct DeviceActivityCenter
  • 애플리케이션의 확장이 일정에 따라 기기 활동 모니터링을 시작할 수 있도록 하는 클래스

Monitor Activity

• class DeviceActivityMonitor
  • 일정에 따라 기기 활동을 모니터링하는 객체

Errors

• enum MonitoringError
  • 활동 모니터링을 시작할 때 발생할 수 있는 오류들을 나열하는 열거형

Classes

• class DeviceActivityAuthorization
  • 기기 활동 모니터링을 위한 권한 부여를 처리하는 클래스이다.

Protocols

• protocol DeviceActivityAuthorizing
  • 기기 활동 모니터링에 대한 권한 부여를 정의하는 프로토콜이다.
• protocol DeviceActivityReportExtension
  • 기기 활동 데이터를 보고하는 앱 extension이다.
• protocol DeviceActivityReportScene
  • 사용자 정의 기기 활동 report scene을 정의하는 프로토콜이다.

Structures

• struct DeviceActivityData
  • 특정 DeviceActivityData.Device에서 DeviceActivityData.User의 활동을 나타낸다.
• struct DeviceActivityFilter
  • 보고서에 포함할 기기 활동 데이터를 필터링하는 타입.
• struct DeviceActivityReport
  • 사용자의 애플리케이션, 카테고리 및 웹 도메인 활동을 프라이버시를 보호하는 방식으로 보고하는 view이다.
• struct DeviceActivityReportBuilder
  • 하나 이상의 DeviceActivityReportScenes을 결합하여 단일 장면을 생성하는 결과 빌더.
• struct DeviceActivityResults
  • 필터링된 기기 활동 결과의 비동기 sequence.

프로젝트에 반영하기

이제 xcode에 프로젝트를 파고, 해당 api를 사용해보는 과정을 정리하려 한다.

먼저, 관련된 extension을 설치해준다.

타깃에서 하단의 + 버튼을 눌러 add target을 해준다.

그럼, 다음과 같은 팝업이 뜨는데, 이 때 DeviceActivity Monitor Extension과 Device Activity Report Extension을 각각 추가해주면 된다.

이렇게 두 개의 extension을 모두 추가했다면, 이렇게 xcode에 추가된 것을 확인할 수 있다.

이제 extension을 추가하였으면, 나와 같은 경우, 대부분의 코드를 UIKit으로 짤 예정이기에 SwiftUI 기반의 api와 UIKit을 서로 연결해주어야 한다.

즉, 두 개의 framework를 혼용해서 쓸 수 있는 환경을 세팅 해야 한다.

UIKit과 SwiftUI 혼용하기

UIHostingController를 사용하면 된다.

하지만, 아무리 사용해서 연결을 해도, 자꾸 사용하고자 하는 TotalActivityView가 scope에 없다는 메시지가 보였다.

계속 서치하고, 삽질을 하다 보니,, 내가 extension들을 add target으로 해줬으므로,, 얘네들을 모두 타깃에 추가해줘야 했다.

지난 프로젝트 당시에도 이것때문에 삽질을 꽤 했었는데.. 아차차 이걸 또 잊었다니..

오래 삽질 안하고 지금이라도 알았으니 다행이다.

먼저, viewController의 오른쪽 inspector에서 target에 ActivityReport를 체크해주었다.

그리고, TotalActivityView에서도 메인 프로젝트 타깃을 추가해주었다.

그랬더니, 이제 TotalActivityView를 잘 찾아 빌드가 성공했다.

만약 안된다면, 상단의 Product -> Clean Build Folder를 꼭 하길!!

아차차 그런데 화면에는 아무것도 보이지 않았는데, 그 이유가 SceneDelegate.swift 파일을 수정하지 않았기 때문이다..

현재는 StoryBoard로 연결되도록 돼 있어 이걸 바꿔줘야 한다.

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
    guard let windowScene = (scene as? UIWindowScene) else { return }

    let window = UIWindow(windowScene: windowScene)

    let viewController = MainViewController()

    window.rootViewController = viewController

    window.makeKeyAndVisible()

    self.window = window
}

이렇게 하고 실행하니 화면이 잘 연결된 것을 확인할 수 있었다 !

지금은 자동으로 제공되는 view만 연결했는데, 그렇기에 실제 기기에서 사용한 앱에 대한 시간들이 나오는게 아니라, 내가 해당 VC를 호출할 때 넣은 argument 값이 그대로 보여지고만 있었다.

위 실행 결과는 기존의 extension에서 준 코드를 rootView로 연결해 실행한 결과이다.

이제, ActivityReport를 직접 연결해서 보여줘야 한다 !!

그 전에, 스크린타임으로 기기에 있는 전체 앱을 가져와 제한시켜보자 !

솔직히 말하면,, 여기서 삽질을 진짜 왕많이 했다.

결국 접근 권한을 먼저 허용해줘야했다는걸 뒤늦게 깨달았다..

1. 스크린타임 접근 권한 요청하기

먼저 접근 권한을 허용하기 위해서는 family controls를 사용해야 한다.

그리고 이렇게 Family Controls를 추가하면 된다.

아차차 Family Controls의 일부만 읽고 내 프로젝트에서는 쓰지 않을거라고 자부했는데..ㅋㅎㅋㅎ

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        
    guard let windowScene = (scene as? UIWindowScene) else { return }

    // SwiftUI 뷰를 호스팅하는 UIHostingController를 생성 - 즉 SwiftUI 연결하기
    let totalActivityView = TotalActivityView(totalActivity: "hello")
    let hostingController = UIHostingController(rootView: totalActivityView)

    // UIKit의 UIWindow 설정
    window = UIWindow(windowScene: windowScene)
    window?.rootViewController = hostingController
    window?.makeKeyAndVisible()

    // 스크린타임 권한 권한 요청
    Task {
        let center = AuthorizationCenter.shared
        do {
            try await center.requestAuthorization(for: .individual)
        } catch {
            print("Fail: \(error)")
        }
    }
}

이렇게 권한 요청을 연결하면 된다 !!

이전다음

012

2. 기기의 앱 리스트 보여주기

이제 기기에 있는 모든 앱의 리스트를 보여줘야 한다.

import UIKit
import SwiftUI
import FamilyControls

struct AppListView: View {

    // 상태 관리를 위해 @State 사용하기
    // FamilyActivitySelection()은 사용자가 선택한 가족 활동 데이터를 나타내는 객체.
    @State var selection = FamilyActivitySelection()

    // isPresented는 familyActivityPicker가 화면에 표시되는지 통제함
    @State var isPresented = false

    var body: some View {
        
        // VStack은 수직으로 그리기
        VStack {
            Button {
                // 버튼이 클릭되면 isPresented 상태를 true로 설정
                isPresented = true
            } label: {
                // 버튼의 레이블 지정하기
                Text("show app list")
            }
        }
        // .familyActivityPicker는 family activity를 선택할 수 있는 Picker 화면에 보여주기
        // isPresented가 true일 때 Picker가 표시.
        // selection은 사용자가 선택한 활동 데이터를 저장함.
        .familyActivityPicker(isPresented: $isPresented, selection: $selection)
    }
}

이렇게 코드를 짜면 되는데, 나는 SwftUI를 전혀 알지 못해서 주석으로 정리를 좀 해뒀다.

나는 새로운 파일을 만들어서 리스트 불러오는 부분을 구현했는데, 이 때 빌드는 실패하고, 실패 메시지가 자꾸 보여졌다 사라졌다.

실수도 반복되면 실력인데 또 타깃 설정 문제였다.

지금 familyCotrol을 사용하려 하기 때문에 target에 activity report를 추가해줘야 한다.

그리고 빌드하니, 이렇게 잘 나오는 것을 확인할 수 있다.

이전다음

01

이제 리스트에서 선택한 앱들을 콘솔에 출력해보고, 선택한 앱들의 사용을 제한해보자.

3. 선택한 앱 사용 제한하기

먼저 선택한 앱들을 관리하기 위한 모델을 만들어준다.

import SwiftUI
import FamilyControls
import ManagedSettings

// ObservableObject 프로토콜을 채택한 Model 클래스 정의
class Model: ObservableObject {
    
    // 이 클래스의 공유 인스턴스 생성 (싱글톤 패턴)
    static var shared = Model()
    
    // ManagedSettingsStore의 인스턴스를 생성하여 설정을 관리할 수 있게 함
    let store = ManagedSettingsStore()
    
    // 사용자가 제한하려는 앱 및 카테고리 선택을 저장하는 변수, 변경될 때마다 UI 업데이트
    @Published var selectedtoLimit: FamilyActivitySelection
    
    // 초기화 메서드: selectedtoLimit을 새로운 FamilyActivitySelection 객체로 초기화
    init() {
        selectedtoLimit = FamilyActivitySelection()
    }
    
    // 사용자가 선택한 앱과 카테고리에 대해 차단 제한을 설정하는 함수
    func setShieldRestrictions() {
        // 사용자가 제한할 앱과 카테고리 선택을 가져옴
        let applications = Model.shared.selectedtoLimit
        
        // 앱 차단을 설정, 선택된 앱이 없으면 nil로 설정
        store.shield.applications = applications.applicationTokens.isEmpty ? nil : applications.applicationTokens
        
        // 앱 카테고리 차단 설정, 선택된 카테고리가 없으면 nil로 설정
        store.shield.applicationCategories = applications.categoryTokens.isEmpty
        ? nil
        : ShieldSettings.ActivityCategoryPolicy.specific(applications.categoryTokens)
    }
}

이제 모델을 추가했으니, 화면을 그리는 부분도 모델에 담고 모델 단위로 관리할 수 있도록 조금 수정해준다.

struct AppListView: View {
    
    // 상태 관리를 위해 @State 사용하기
    // FamilyActivitySelection()은 사용자가 선택한 가족 활동 데이터를 나타내는 객체.
    @State var selection = FamilyActivitySelection()
    
    // isPresented는 familyActivityPicker가 화면에 표시되는지 통제함
    @State var isPresented = false
    @EnvironmentObject var model: Model
    
    var body: some View {
        
        // VStack은 수직으로 그리기
        VStack {
            Button {
                // 버튼이 클릭되면 isPresented 상태를 true로 설정
                isPresented = true
            } label: {
                // 버튼의 레이블 지정하기
                Text("show app list")
                // .familyActivityPicker는 family activity를 선택할 수 있는 Picker 화면에 보여주기
                // isPresented가 true일 때 Picker가 표시.
                // selection은 사용자가 선택한 활동 데이터를 모델에 저장함.
            }.familyActivityPicker(isPresented: $isPresented, selection: $model.selectedtoLimit)
        }
        // 이후 선택한 앱들에 대한 shieldRestriction이 실행된다.
        .onChange(of: model.selectedtoLimit, {
            Model.shared.setShieldRestrictions()
        })
    }
}

그리고, 스크린타임에 대한 권한 요청을 AppDelegate로 넘겨준다.

// AppDelegate.swift

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
           
   guard let windowScene = (scene as? UIWindowScene) else { return }

   // `Model.shared`의 인스턴스를 생성
   let model = Model.shared

   // SwiftUI의 AppListView를 설정
   let contentView = AppListView().environmentObject(model)

   // 새로운 UIWindow를 생성하고 초기 뷰 컨트롤러로 설저
   let window = UIWindow(windowScene: windowScene)
   window.rootViewController = UIHostingController(rootView: contentView)
   self.window = window
   window.makeKeyAndVisible()
}

그리고 마지막으로, SceneDelegate를 수정해준다. 여기에 모델을 담도록 수정하고, 권한 허용 부분을 위에서 한 것 처럼 AppDelegate로 넘겨줬다.

// SceneDelegate.swift

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
           
   guard let windowScene = (scene as? UIWindowScene) else { return }

   // `Model.shared`의 인스턴스를 생성
   let model = Model.shared

   // SwiftUI의 AppListView를 설정
   let contentView = AppListView().environmentObject(model)

   // 새로운 UIWindow를 생성하고 초기 뷰 컨트롤러로 설저
   let window = UIWindow(windowScene: windowScene)
   window.rootViewController = UIHostingController(rootView: contentView)
   self.window = window
   window.makeKeyAndVisible()
}

이렇게 하고, 앱을 실행해보자 !

실행 결과

아니 이렇게 간단한 기술검증을 그때는 왜그렇게 삽질하고 힘들어했을까..

시간이 촉박하다는 이유로 reference부터 찾고, 냅다 실행해보고 넘어갔던 과거의 나.. 반성하라..

이제 애플 공식문서 구조도 어느정도 감이 잡혔고, 아직 그걸 기반으로 코드는 못짜겠지만,, 뭐,, 앞으로 차근차근 해봐야겠다 !!

다음 글에서는 이제 우리 프로젝트의 주기능을 구현해봐야지 !

참고자료

https://hongz-developer.tistory.com/246