Preview는 어떻게 그림을 그리는 걸까? is that hotreload?

2025. 3. 1. 20:02·SWIFT개발

이전에 플러터로 개발했을때 플러터에는 Hot reload라는 아주 핫하고 편리한 기능이 있었습니다. 이는 코드를 변경을 하면 즉시 실시간으로 UI를 업데이트해서 뷰짤때 너무나 효율이 올라간 느낌.. 이 기능이 가능한 이유는 Dart언어와 그 실행환경때문입니다ㅣ.

Flutter Hot reload프로세스

1. 변경감지:  개발자가 Dart 소스 코드를 수정하고 저장하면, Flutter의 IDE가 이를 감지한다.
2. 코드전달: 수정된 코드가 Dart VM에 전달된다. Flutter는 앱을 실행 중인 가상머신과 연결되어 있어, 이 변경사항을 실시간으로 보낼 수 있ㄷ.

3. 클래스업데이트:  DartVM은 변경된 소스 기반으로 앱의 클래스를 업뎃한다.

4. 위젯 재빌드: 필요한 최소한의 위젯만 다시 빌드한다.  그리고 UI반영.

JIT vs AOT 컴파일방식

물론 디버그 모드에서만 가능했습니다. 이유는 디버그모드는 JIT (Just in time) 이지만 릴리즈는 AOT(Ahead-of-Time)이여서 인데 좀더 자세하게 얘기해볼께요.

JIT(justInTime)

  • 런타임 환경에서 코드가 필요할때 필요한 만큼만 컴파일.
  •  즉 프로그램 실행하는 도중 컴파일을 한다.
  • 그래서 코드 변경사항을 즉시 반영 가능
  • 단점: 하지만 프로그램내에서컴파일 필요한 부분 갈때마다 컴파일해줘야해서 느리다.

AOT(Ahead of Time)

  • 일반적으로 우리가 아는 컴파일방식
  • 실행속도 빠르고 안정적
  • 코드 변경 시 전체 앱을 다시 컴파일 해야한다.

자 서론이 길었다.

이제 Swift가 나온다.

Swift 컴파일 방식과 SwiftUI프리뷰

Swift는 AOT방식으로 컴파일 된다. 안정성과 성능을 더 중시하기 때문에!!

이전에 Swift컴파일관련 글을 작성했는데 이를 보면 더 이해가 잘된다. 간단하게 복습하자면

Swift 소스코드 -> AST 추상구문트리(타입 체크 및 최적화) -> SIL -> LLVM IR -> Machine Code

JIT의 문제점 중 하나인 런타임에 새로운 기계코드로 코드인젝션이 발생할 수 있는 가능성을 원천차단한다.

그래서 캔버스를 통한 프리뷰를 제공해주는 것이다. 빠른 UI개발을 위해!!

소스파일의 최상위 단계에서 작성되어 다른타입이나 함수에 중첩되지 않는 간결한 구조를 가진다.

프리뷰는 프로젝트의 Swift 코드를 아무거나 편집하면 Xcode가 편집한걸 살펴보고 최소한의 코드만 다시 컴파일한다. 그리고 다시 미리보기를 실행한다. 

자 어떻게 그럴수 있는걸까? JIT 컴파일하나?

ㄴㄴ 답은 동적라이브러리이다.

1. 별도의 프로세스에서 실행 
먼저 Preview는 별도의 프로세스에서 실행된다고 한다. 정확히는 com.apple.dt.Xcode.Preivews라는 별도의 프로세스 실행하여 미리보기 담당한다. 

2.  동적 라이브러리 생성 및 활용
Swift 컴파일러가 미리보기용 동적 라이브러리를 생성한다. Swift파일이 변경될때 Xcode는 코드를 컴파일하여 .dylib파일 생성. 생성된 .dylib은 프리뷰 프로세스에서 동적으로 로드되어 변경 사항 즉시 적용.

3. XPC를 통해 Xcode와 Previews 프로세스가 통신

XPC? macOS iOS사용되는 프로세스간 통신 방식.

Xcode가 코드 변경이 감지되면 미리보기 프로세스에 변경 사항을 전달한다. 이를 통해 전체 앱 재컴파일 할 필요 없이 업뎃 ㄱㄴ.

💡 중요: Xcode Preview는 실제 앱을 실행하는 것이 아니라, 분리된 환경에서 UI를 렌더링합니다.

정적 링크와 동적 링크의 차이와 프리뷰 영향

📌 정적 링크에서는 앱이 빌드될 때 모든 코드가 미리 고정되기 때문에, Preview에서 변경 사항을 동적으로 반영할 수 없음!
참고하여야할것이 정적 링크된 앱에서는 동적 로딩이 불가능하여 프리뷰가 작동하지 않는다.

예전에 했던 CocoaPods을 사용하여 정적 라이브러리로 빌드된 앱은 오류가 생기는겨..

반면 SPM은 동적 라이브러리를 사용하므로 문제없다. 

---ㅓ---

정적라이브러리: 앱이 빌드될때, 모든 코드를 실행 파일에 포함하는 방식으로 앱실행속도가 빠르다.

동적라이브러리: 앱 실행시 필요한 라이브러리를 별도로 로드하여 라이브버리를 독립적으로 업뎃하고 런타임에 필요한 라이브러리

 

'SWIFT개발' 카테고리의 다른 글

이미지 최적화 3탄(kingFisher를 삭제하고 Custom)  (0) 2025.04.16
이미지 최적화 적용하기  (1) 2025.03.06
ScrollView 꾸미기? Deep Dive  (0) 2025.02.22
MemoryLeak을 찾아보자(강한참조순환인가?) - 실전편2  (0) 2025.01.16
Memory Leak을 찾아보자 실전편(1)  (0) 2025.01.14
'SWIFT개발' 카테고리의 다른 글
  • 이미지 최적화 3탄(kingFisher를 삭제하고 Custom)
  • 이미지 최적화 적용하기
  • ScrollView 꾸미기? Deep Dive
  • MemoryLeak을 찾아보자(강한참조순환인가?) - 실전편2
2료일
2료일
좌충우돌 모든것을 다 정리하려고 노력하는 J가 되려고 하는 세미개발자의 블로그입니다. 편하게 보고 가세요
  • 2료일
    GPT에게서 살아남기
    2료일
  • 전체
    오늘
    어제
    • 분류 전체보기 (120)
      • SWIFT개발 (29)
      • 알고리즘 (25)
      • Design (6)
      • ARkit (1)
      • 면접준비 (30)
      • UIkit (2)
      • Vapor-Server with swift (3)
      • 디자인패턴 (5)
      • 반응형프로그래밍 (12)
      • CS (3)
      • 도서관 (1)
  • 인기 글

  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.4
2료일
Preview는 어떻게 그림을 그리는 걸까? is that hotreload?
상단으로

티스토리툴바