웹 브라우저의 숨겨진 작동 방식: 외부 파일 요청
Day 4. Multiple Files & Requests
웹 개발을 하다 보면 HTML과 CSS를 분리하는 것이 좋은 관행이라고 배운다. 그런데 이런 분리가 실제로 브라우저에서 어떻게 작동하는지 이해하고 있는 개발자는 생각보다 많지 않다. 오늘은 웹 브라우저가 외부 파일을 처리하는 방식에 대한 중요한 인사이트를 나누고자 한다.
1. 웹의 작동 원리 되돌아보기
첫 번째 강의 섹션에서 배웠던 슬라이드로 돌아가보자. 웹사이트와 HTML, CSS 같은 브라우저 지침은 브라우저가 요청을 보내면 서버가 응답하여 전달한다. 우리가 지금까지 작업한 페이지에서도 이런 과정이 일어났다. 물론 아직 실제 웹 서버는 없고 로컬에 저장된 파일을 브라우저에 로드하고 있지만, 큰 그림에서는 여전히 적용된다.
2. 외부 파일 포함의 실제 메커니즘
이전 강의에서 우리는 HTML 파일에 별도의 CSS 파일을 link 태그로 포함시켰다. 중요한 것은 이런 외부 파일 포함이 이 과정에서만 쓰이는 것이 아니란 점이다. 코스를 진행하면서 더 많은 CSS 파일을 추가할 뿐만 아니라, 나중에는 JavaScript 코드와 외부 JavaScript 파일도 HTML에 포함시키게 될 것이다.
3. 가장 흔한 오해: 파일 병합의 착각
꼭 이해해야 할 점은 이런 외부 파일을 포함한다고 해서 CSS 파일의 코드가 마법처럼 HTML 파일에 병합되는 것이 아니라는 사실이다. 두 파일은 별도로 유지되며, 브라우저는 HTML 파일을 로드한 후 별도의 요청으로 CSS 파일을 요청한다. 이는 원래 웹의 설계 방식이며, 모든 웹사이트가 이렇게 작동한다.
4. 네트워크 탭으로 확인하는 실제 통신
브라우저 개발자 도구의 '네트워크' 탭에서 이 과정을 직접 확인할 수 있다. 개발자 도구를 열고 네트워크 탭을 선택한 후 페이지를 새로고침하면, 두 개의 요청이 발생하는 것을 볼 수 있다: 하나는 index.html 파일용, 다른 하나는 daily-challenge.css 파일용이다. 이 사실이 바로 이 강의의 중요한 핵심이다.
5. 요청의 순서와 의존성
HTML 파일은 항상 가장 먼저 요청되는 파일이다. 콘텐츠, 구조, 메타데이터를 포함하고 있기 때문이다. 이 파일이 의존하는 다른 파일들(CSS, 이미지, JavaScript 등)은 첫 번째 요청이 처리된 후 브라우저에 의해 자동으로 요청된다. 더 크고 복잡한 웹사이트에서는 페이지가 로드될 때 수십 개의 요청과 응답이 오가는 것이 전혀 이상한 일이 아니다.
6. 최적화와 캐싱의 역할
이 모든 과정은 꽤 빠르게 진행되며, 브라우저는 캐싱과 같은 다양한 최적화 기술을 적용한다. 이미 과거에 로드한 파일을 저장해두는 것이다. 그러나 여전히 페이지가 로드될 때 모든 파일은 별도의 요청-응답 사이클로 요청된다는 점을 기억해야 한다.
7. 개발자의 시각에서 이해하기
우리가 외부 파일을 HTML 파일에 '포함' 또는 '가져온다'고 말할 때, 실제로는 추가 파일을 가리키고 브라우저가 페이지를 로드할 때 그 추가 파일을 요청한다는 의미다. 이런 기본 원리를 이해하는 것이 웹 성능 최적화의 첫걸음이며, 나중에 더 복잡한 웹 애플리케이션을 다룰 때 큰 도움이 될 것이다.
웹 개발자로서 겉으로 드러나는 코드만 알기보다는 이런 내부 작동 방식을 이해하는 것이 중요하다. 표면적으로는 단순해 보이는 link 태그 하나가 실제로는 브라우저의 별도 네트워크 요청을 유발한다는 사실을 알게 되면, 웹사이트 성능과 사용자 경험을 개선하는 데 더 나은 결정을 내릴 수 있다. 결국 개발자의 성장은 '어떻게'뿐만 아니라 '왜'에 대한 이해에서 비롯된다.
