핫 리로딩
달리는 기차를 멈추거나 승객을 내리게 하지 않고, 객실의 전등과 커튼만 즉시 새것으로 교체하는 기술이에요.
정의 핫 리로딩(Hot Reloading)은 실행 중인 앱이나 웹 프로그램을 완전히 껐다 켜지 않고도, 수정한 코드 부품만 실시간으로 화면에 쏙 바꿔 끼우는 기술이에요. 프로그램이 진행 중이던 작업 내용이나 화면 상태를 그대로 보존하면서 바뀐 부분만 바로 확인할 수 있게 해줘요.
코드 한 줄 고칠 때마다 기다려야 한다면?
글을 쓸 때 오타 하나를 고칠 때마다 문서를 저장하고 컴퓨터를 재부팅해야 한다면 어떨까요? 상상만 해도 답답하고 일이 제대로 진행되지 않을 거예요. 과거의 소프트웨어 개발이 바로 이와 비슷한 방식으로 이루어졌어요.
예전에는 개발자가 버튼 색상이나 글자 크기 하나만 바꾸더라도, 전체 프로그램을 처음부터 다시 조립(컴파일과 빌드)하고 앱을 처음부터 다시 켜야 했어요. 이 과정에 적게는 수십 초에서 길게는 몇 분씩 걸리다 보니, 개발자는 코드 한 줄 고치고 멍하니 기다리기를 수없이 반복해야 했죠.
핫 리로딩은 이런 기다림을 완전히 없애주었어요. 코드를 저장하는 순간 1초도 안 되는 찰나에 바뀐 디자인이나 기능이 화면에 번쩍 나타나요. 덕분에 개발자는 흐름을 끊기지 않고 마치 캔버스에 실시간으로 물감을 칠하듯 즉각적인 결과를 보며 작업할 수 있게 되었어요.
새로고침과 핫 리로딩의 결정적 차이
흔히 웹 브라우저의 '새로고침(F5)' 버튼을 떠올리기 쉽지만, 핫 리로딩은 단순한 새로고침과 차원이 달라요. 일반적인 새로고침(라이브 리로딩)은 페이지를 백지상태로 만들고 처음부터 다시 불러오기 때문에, 입력창에 쓰던 글이나 로그인 정보 같은 화면의 데이터가 전부 날아가 버려요.
예를 들어 쇼핑몰 앱에서 상품을 장바구니에 담고, 배송지를 입력한 뒤 결제 버튼의 모양을 수정한다고 해볼게요. 일반 새로고침을 하면 처음 홈 화면으로 튕겨 나가서 상품 담기부터 다시 진행해야 해요.
반면 핫 리로딩은 입력해 둔 배송지와 장바구니 목록을 현재 상태 그대로 유지한 채 오직 결제 버튼의 코드만 바꿔치기해요. 깊숙한 화면을 테스트할 때 번거롭게 이전 단계를 반복할 필요가 없어서 개발 효율이 어마어마하게 올라가요.
조금 더 정확히 말하면
조금 더 정확히 말하면, 핫 리로딩은 모듈(독립된 코드 조각) 교체 기술을 바탕으로 작동해요. 개발자가 사용하는 컴퓨터 안에서 작은 통신망(웹소켓)이 열려 있어, 에디터에서 파일이 수정되는 순간 실행 중인 앱으로 바뀐 코드 조각만 빠르게 전송돼요.
앱은 전달받은 새 코드를 메모리에서 즉시 덮어쓰고, 화면의 해당 부분만 다시 그려내요. 이를 전문 용어로 '핫 모듈 교체(HMR, Hot Module Replacement)'라고도 불러요.
하지만 핫 리로딩이 마법의 만능열쇠는 아니에요. 화면에 보이는 단순한 디자인이나 개별 로직 수정에는 완벽하게 작동하지만, 앱의 뼈대가 되는 핵심 구조나 기초 설정 파일이 바뀌었을 때는 전체 프로그램을 완전히 재시작해야만 안전하게 반영돼요.
🤔 흔한 오해
핫 리로딩과 웹 브라우저 새로고침(F5)은 똑같은 기술이다.
새로고침은 화면을 백지로 초기화하고 처음부터 다시 불러오지만, 핫 리로딩은 입력 중이던 데이터나 화면 상태를 유지하면서 바뀐 코드만 교체해요.
🧺 일상에서 만나요
핫 리로딩은 작업 중이던 화면 상태를 잃지 않고, 수정한 코드만 실시간으로 즉시 갈아 끼워주는 개발 기술이에요.