자바스크립트 과외를 들으면서 평소에 그냥 넘겼던 개념들을 제대로 짚고 가는 시간이 있었다. 로컬호스트, 네트워크 탭, defer... 다 안다고 생각했는데 막상 설명을 들으니 머릿속에서 정리가 안 됐던 것들이었다. 이 참에 제대로 정리해두려고 글을 쓴다.
로컬호스트 (127.0.0.1) 란 뭔가
로컬호스트는 127.0.0.1로 고정된 IP 주소다. 사실 서버 역할을 할 수 있는 건 모든 PC가 다 할 수 있다. 특별한 서버용 컴퓨터가 따로 있는 게 아니라, 내 PC 자체가 서버가 될 수 있다는 얘기다.
- 로컬 서버가 돈다는 것 = 내 PC가 서버 역할을 하고 있다는 것
- 로컬호스트는 외부 서버를 두지 않고, 내 PC 자체를 서버화해서 동작시키는 방식
- 그래서 개발 중에
localhost:3000같은 주소로 접속하면, 사실 내 컴퓨터에 요청을 보내는 것이다
처음엔 그냥 "개발할 때 쓰는 주소" 정도로만 알고 있었는데.. 내 PC가 곧 서버라는 관점으로 보니까 훨씬 와닿았다.
index.html 이 특별한 이유
브라우저는 어떤 경로에 접근할 때 index.html 파일을 가장 먼저 탐색한다. 루트 경로에 index.html이 있으면 자동으로 그걸 먼저 가져온다.
- 예를 들어
localhost:3000/에 접속하면 브라우저는 자동으로index.html을 찾아서 렌더링 - 명시적으로 파일명을 안 써도 되는 이유가 바로 이것
그냥 관행인 줄만 알았는데, 브라우저와 웹서버가 약속한 기본 탐색 규칙이라는 게 생각보다 마음에 들었다..
네트워크 탭은 서버에 요청한 것들의 기록
브라우저 개발자 도구의 네트워크 탭은 서버에 요청한 것들을 기록해서 보여주는 곳이다.
- 페이지가 로드될 때 브라우저가 서버에 보낸 요청 목록이 전부 찍힌다
- HTML, CSS, JS, 이미지, API 호출까지 전부
- 각 요청의 상태 코드, 응답 시간, 응답 크기 등도 확인할 수 있다
사실 그동안 네트워크 탭을 API 요청 확인할 때만 썼는데.. 페이지 로딩 전체 흐름을 추적할 수 있다는 게 새삼 강력하게 느껴졌다.
Content-Type은 확장자를 보고 결정된다
웹서버는 파일의 확장자를 보고 Content-Type을 결정해서 응답에 같이 내려준다.
.html→text/html.js→application/javascript.png→image/png
브라우저는 이 Content-Type을 보고 어떻게 파일을 처리할지 결정한다. 확장자가 단순한 이름 규칙이 아니라, 서버-브라우저 간의 타입 협상에 쓰인다는 게 생각보다 깊은 내용이었다.
즉시실행함수 (IIFE)
즉시실행함수는 익명함수를 선언하자마자 바로 실행하는 패턴이다. 스크립트 블록을 활용해서 쓰는 함수라고 볼 수 있다.
javascript (function () { console.log('즉시 실행!'); })();
- 전역 스코프를 오염시키지 않기 위해 사용
- 변수나 함수를 외부에 노출하지 않고 독립적인 스코프를 만들 수 있다
- 모듈 시스템이 없던 시절에 많이 쓰던 패턴
요즘은 ES 모듈 덕분에 덜 쓰이긴 하지만, 레거시 코드에서 자주 보이니까 알아두면 좋다.
defer — 왜 생겼을까
defer가 생기기 전에는 JS 파일을 <body> 하단에 넣거나, window.onload 이벤트를 기다리는 방법밖에 없었다.
html
이 방법들의 문제는..
body하단 배치는 코드 구조가 지저분해지고load이벤트는 이미지까지 다 로드된 다음에야 실행돼서 느릴 수 있었다
그래서 등장한 게 defer다.
html
- HTML 파싱을 막지 않고 JS 파일을 백그라운드에서 다운로드
- HTML 파싱이 완료된 후에 JS를 실행
- 스크립트 순서도 보장됨
defer가 생기면서 스크립트를 <head>에 깔끔하게 넣을 수 있게 됐다는 게 생각보다 감동이었다.. 별거 아닌 것 같아도 히스토리를 알고 나면 왜 이렇게 됐는지가 납득이 된다.
마치며
과외를 들으면서 "이미 아는 것들이겠지" 하고 가볍게 생각했는데, 막상 하나하나 다시 보니까 겉만 알고 속은 잘 몰랐던 개념들이 꽤 있었다. 특히 로컬호스트를 "내 PC가 서버"라는 관점으로 본 게 제일 인상 깊었고, defer의 등장 배경을 알고 나니 그냥 쓰던 속성이 훨씬 다르게 보였다.
앞으로도 당연하게 써왔던 것들을 한 번씩 의심하고 파고드는 습관을 들여야겠다는 생각이 들었다.