지연 초기화(Lazy Initialization)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

Client
   |
   v
DBConnectionManager
   |
   v
(초기화 여부 확인, 필요시 DB 연결 생성 및 캐싱)
   |
   v
Return DB Connection

1

[사용자 요청] --> [웹 서버] --> [이미지 로딩 로직] --> [이미지 캐시] --> [이미지 저장소]

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

// 엔티티 정의
@Entity
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    
    private String name;
    private String email;
    
    // 지연 로딩 설정
    @OneToMany(mappedBy = "user", fetch = FetchType.LAZY)
    private List<Order> orders = new ArrayList<>();
    
    // 생성자, getter, setter
    public User() {}
    
    public User(String name, String email) {
        this.name = name;
        this.email = email;
    }
    
    // Lazy 로딩 확인 메서드
    public List<Order> getOrders() {
        // Hibernate는 이 시점에서 프록시를 통해 실제 데이터 로드
        return orders;
    }
}

@Entity
public class Order {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    
    private LocalDateTime orderDate;
    private BigDecimal totalAmount;
    
    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name = "user_id")
    private User user;
    
    // 생성자, getter, setter
    public Order() {}
    
    public Order(LocalDateTime orderDate, BigDecimal totalAmount) {
        this.orderDate = orderDate;
        this.totalAmount = totalAmount;
    }
}

// 서비스 계층에서의 활용
@Service
@Transactional
public class UserService {
    
    @Autowired
    private UserRepository userRepository;
    
    // 사용자 기본 정보만 조회
    public User getUserBasicInfo(Long userId) {
        return userRepository.findById(userId).orElse(null);
        // 이 시점에서는 주문 정보가 로드되지 않음
    }
    
    // 사용자와 주문 정보 함께 조회
    public User getUserWithOrders(Long userId) {
        User user = userRepository.findById(userId).orElse(null);
        if (user != null) {
            // 이 시점에서 지연 로딩이 트리거됨
            int orderCount = user.getOrders().size();
            System.out.println("User has " + orderCount + " orders");
        }
        return user;
    }
    
    // N+1 문제 해결을 위한 페치 조인 사용
    @Query("SELECT u FROM User u LEFT JOIN FETCH u.orders WHERE u.id = :userId")
    public User getUserWithOrdersOptimized(@Param("userId") Long userId) {
        return userRepository.findUserWithOrdersById(userId);
    }
}

// 스레드 안전한 지연 초기화 구현
public class ThreadSafeLazyInitializer<T> {
    private volatile T instance;
    private final Supplier<T> supplier;
    
    public ThreadSafeLazyInitializer(Supplier<T> supplier) {
        this.supplier = supplier;
    }
    
    public T getInstance() {
        // Double-checked locking 패턴
        if (instance == null) {
            synchronized (this) {
                if (instance == null) {
                    instance = supplier.get();
                }
            }
        }
        return instance;
    }
}

// 사용 예시
public class DatabaseConnectionManager {
    private final ThreadSafeLazyInitializer<DataSource> dataSourceLazy;
    
    public DatabaseConnectionManager() {
        this.dataSourceLazy = new ThreadSafeLazyInitializer<>(() -> {
            // 비용이 높은 DataSource 초기화
            HikariConfig config = new HikariConfig();
            config.setJdbcUrl("jdbc:mysql://localhost:3306/mydb");
            config.setUsername("user");
            config.setPassword("password");
            return new HikariDataSource(config);
        });
    }
    
    public DataSource getDataSource() {
        return dataSourceLazy.getInstance();
    }
}

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154

// 현대적인 브라우저 지원 확인 및 폴백 구현
class LazyImageLoader {
    constructor() {
        this.images = document.querySelectorAll('img[loading="lazy"]');
        this.imageObserver = null;
        
        // 브라우저 네이티브 지원 확인
        if ('loading' in HTMLImageElement.prototype) {
            // 네이티브 지연 로딩 지원
            this.setupNativeLazyLoading();
        } else {
            // 폴백: Intersection Observer 사용
            this.setupObserverLazyLoading();
        }
    }
    
    setupNativeLazyLoading() {
        // 네이티브 지연 로딩 사용 시 추가 최적화
        this.images.forEach(img => {
            img.addEventListener('load', () => {
                img.classList.add('loaded');
            });
        });
    }
    
    setupObserverLazyLoading() {
        // Intersection Observer를 사용한 폴백 구현
        if ('IntersectionObserver' in window) {
            this.imageObserver = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const img = entry.target;
                        this.loadImage(img);
                        observer.unobserve(img);
                    }
                });
            }, {
                rootMargin: '50px 0px', // 뷰포트 진입 50px 전에 로드
                threshold: 0.01
            });
            
            this.images.forEach(img => {
                this.imageObserver.observe(img);
            });
        } else {
            // 최종 폴백: 스크롤 이벤트 사용
            this.setupScrollLazyLoading();
        }
    }
    
    loadImage(img) {
        // 실제 이미지 로딩
        const src = img.dataset.src;
        const srcset = img.dataset.srcset;
        
        if (src) {
            img.src = src;
        }
        if (srcset) {
            img.srcset = srcset;
        }
        
        img.classList.add('loading');
        
        img.addEventListener('load', () => {
            img.classList.remove('loading');
            img.classList.add('loaded');
        });
        
        img.addEventListener('error', () => {
            img.classList.add('error');
        });
    }
    
    setupScrollLazyLoading() {
        // 스크롤 기반 폴백 (성능상 권장하지 않음)
        let ticking = false;
        
        const checkImages = () => {
            this.images.forEach(img => {
                if (this.isInViewport(img)) {
                    this.loadImage(img);
                }
            });
            ticking = false;
        };
        
        const requestTick = () => {
            if (!ticking) {
                requestAnimationFrame(checkImages);
                ticking = true;
            }
        };
        
        window.addEventListener('scroll', requestTick);
        window.addEventListener('resize', requestTick);
    }
    
    isInViewport(element) {
        const rect = element.getBoundingClientRect();
        return rect.top < window.innerHeight && rect.bottom > 0;
    }
}

// 페이지 로드 시 초기화
document.addEventListener('DOMContentLoaded', () => {
    new LazyImageLoader();
});

// React 컴포넌트에서의 지연 로딩 구현
import React, { useState, useEffect, useRef } from 'react';

const LazyImage = ({ src, alt, className, placeholder }) => {
    const [imageSrc, setImageSrc] = useState(placeholder);
    const [imageRef, setImageRef] = useState();
    const [loaded, setLoaded] = useState(false);
    
    useEffect(() => {
        let observer;
        
        if (imageRef && imageSrc === placeholder) {
            observer = new IntersectionObserver(
                entries => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            setImageSrc(src);
                            observer.unobserve(imageRef);
                        }
                    });
                },
                { threshold: 0.1 }
            );
            observer.observe(imageRef);
        }
        
        return () => {
            if (observer && observer.unobserve) {
                observer.unobserve(imageRef);
            }
        };
    }, [imageRef, imageSrc, placeholder, src]);
    
    return (
        <img
            ref={setImageRef}
            src={imageSrc}
            alt={alt}
            className={`${className} ${loaded ? 'loaded' : 'loading'}`}
            onLoad={() => setLoaded(true)}
        />
    );
};

export default LazyImage;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

from functools import lru_cache

@lru_cache(maxsize=1)
def get_db_connection():
    print("Initializing DB connection")
    return Database.connect(…)

def query_user(id):
    conn = get_db_connection()
    # execute query …