개발환경에서 우리가 애플리케이션을 실행시킨다면 localhost를 사용하여 접속한다
나에게 익숙한 localhost는 react와 node.js의 기본 포트인 localhost:3000이나,
Vite의 기본포트인 localhost:5173이다
여기서 공통적인 부분은 localhost부분이다
내가 바닐라 html을 처음 배울 때부터 localhost를 사용해 왔는데,
정작 이게 정확이 뭔지, 또 어떻게 작동하는 건지 몰랐다
나의 PC의 OS가 window이기 때문에 window를 중점으로 설명을 하겠다
Localhost
로컬호스트는 나의 PC에서 자기 자신을 가리키는 주소다
엄밀히 말하자면 localhost는 그저 호스트 명일뿐이고 실상은 그 ip주소인 127.0.0.1을 칭하는 말이고,
나의 PC에서 localhost로 요청을 보내면 그 요청은 밖으로 나가지 않고 다시 나의 PC로 돌아온다
작동방식
localhost의 작동방식을 설명하려면 등록, hosts파일, 그리고 loopback의 개념에 대해서 알아야 한다
등록
localhost라는 글자는 PC가 부팅될 때 라우팅 테이블에 127.0.0.1로 자동으로 등록이 된다
//window cmd
route print
// mac 기본 터미널 & Linux 터미널 (1택)
netstat -rn
route -n
ip route해당 명령어를 사용하면 현제 라우팅 테이블을 확인할 수 있다
// window cmd
IPv4 경로 테이블
===========================================================================
활성 경로:
네트워크 대상 네트워크 마스크 게이트웨이 인터페이스 메트릭
0.0.0.0 0.0.0.0 x.x.x.254 x.x.x.71 35
x.x.0.0 255.255.0.0 연결됨 x.x.0.2 261
x.x.0.2 255.255.255.255 연결됨 x.x.0.2 261
x.x.255.255 255.255.255.255 연결됨 x.x.0.2 261
127.0.0.0 255.0.0.0 연결됨 127.0.0.1 331
127.0.0.1 255.255.255.255 연결됨 127.0.0.1 331
127.255.255.255 255.255.255.255 연결됨 127.0.0.1 331
x.x.x.0 255.255.255.0 연결됨 x.x.x.71 291
x.x.x.71 255.255.255.255 연결됨 x.x.x.71 291
x.x.x.255 255.255.255.255 연결됨 x.x.x.71 291
224.0.0.0 240.0.0.0 연결됨 127.0.0.1 331
224.0.0.0 240.0.0.0 연결됨 x.x.x.71 291
224.0.0.0 240.0.0.0 연결됨 x.x.0.2 261
255.255.255.255 255.255.255.255 연결됨 127.0.0.1 331
255.255.255.255 255.255.255.255 연결됨 x.x.x.71 291
255.255.255.255 255.255.255.255 연결됨 x.x.0.2 261
===========================================================================
IPv6 경로 테이블
===========================================================================
활성 경로:
IF 메트릭 네트워크 대상 게이트웨이
1 331 ::1/128 연결됨
39 261 fe80::/64 연결됨
39 261 fe80::xxxx:xxxx:xxxx:xxxx/128
연결됨
1 331 ff00::/8 연결됨
39 261 ff00::/8 연결됨
===========================================================================
영구 경로:
없음이러한 메시지가 출력되는데 여기서 우리가 말한 localhost는 127.*.*.*쪽을 확인하면 된다
이제 localhost가 127.0.0.1을 가리키게 해야 한다
hosts 파일
hosts파일은 컴퓨터 시스템에서 도메인 이름을 IP주소로 변환하는 데에 사용되는 파일이다
// window
C:\Windows\System32\drivers\etc\hosts
// Linux/Mac
/etc/hosts
원래였다면 DNS가 처리해야 할 일이지만,
hosts파일을 사용하면 로컬에서 해당 작업을 처리하는 방법을 제공한다
메모장에서 C:\Windows\System32\drivers\etc\hosts 해당 주소를 입력해 파일을 열게 된다면
매핑된 IP주소들과 도메인의 이름을 확인할 수 있다
# localhost name resolution is handled within DNS itself.
# 127.0.0.1 localhost
# ::1 localhost이런 식으로 127.0.0.1과 ::1은 localhost란 이름으로 매핑이 되어있는 것이 명시되어 있다
왜 명시되었나고 표현을 했다면,
확인해보면 주소가 # 로 주석 처리가 되어있다
그이유는 localhost는 운영체제에서 일종의 예약어로 불린다
즉 localhost는 임의로 hosts파일을 수정해서 다른 IP주소랑 매핑하지 않는 이상 localhost는 무조건 127.0.0.1과 ::1을 가리킨다는 말이다
우리가 localhost:3000을 브라우저 창에 입력하면
브라우저가 localhost라는 도메인 이름을 127.0.0.1로 해석하기 위해 hosts 파일을 참조한다
운영체제가 IP 주소가 127.0.0.1 임을 확인하고, 127.0.0.1은 루프백 주소이므로, 요청은 네트워크를 거치지 않고 곧바로 자신의 컴퓨터 내에서 처리된다
loopback
루프백이란 자기 자신에게 되돌아오는 통신을 말한다
loopback ip주소로 나 자신을 가리키는 IP주소로
네트워크 요청을 보내면 실제 네트워크를 거치지 않고 운영체제 내부에서 다시 자신에게 되돌아온다. 그래서 이를 loopback이라고 부른다.
여기서 말하는 나를 가리키는 IP주소는 127.0.0.1, ::1등을 의미한다
우리의 PC에는 네트워크 통신에 사용되는 여려 장치들이 있다
이러한 장치들을 network interface(NI)라고 부른다
lan, wifi. 그리고 지금 설명하고 있는 loopback 역시 네트워크 통신에 사용되는 장치이다
네트워크 통신을 할 때 우리의 OS는 라우팅 테이블을 참조해 어떤 NI를 사용할지 결정한다
위에서 말했던 것처럼 loopback NI 역시 존재하는데,
PC에 OS를 설치만 하면 자동으로 생기는 가장의 장치이다
witi나 lan이 없어도 사용할 수 있다
loopback NI는 127.*.*.* 영역과 ::1 요청을 처리한다
그중 우리가 localhost에서 사용하는 127.0.0.1는 첫 번째 IP로
당연히 127로 시작하기 대문에 나 자신을 가리킨다
내가 127.0.0.1로 보낸 요청은 외부 네트워크를 거치지 않고, 내 컴퓨터 안에서 돌아와 내가 직접 처리한다.
이 요청의 응답도 내 컴퓨터 안에서 바로 나에게 전달된다
node.js에서 작동원리
내가 가장 많이 사용하는 프레임위크인 node.js를 예시로 설명하겠다
// 개발환경 실행
npm run dev
개발환경을 실행하면 localhost를 사용해 127.0.0.1 또는 ::1와 연결된다
$ npm run dev
> shadcn-practice@0.1.0 dev
> next dev
▲ Next.js 15.3.2
- Local: http://localhost:3000 // <--- 개발환경
- Network: http://10.5.0.2:3000
✓ Starting...
✓ Ready in 7.9s
○ Compiling / ...
✓ Compiled / in 22.2s (700 modules)
GET / 200 in 25797ms
주소는 http://127.0.0.1:3000을 의미하기 때문에
이를 브라우저 창에 입력하면 hosts파일을 참조해서 도메인을 확인하고
127로 시작하기 때문에 loopback을 사용해 외부로 나가지 않고 자기 자신으로 돌아온다
그러면 나의 PC에서 localhost:3000 서버가 실행 중이니 3000으로 요청을 보내면
localhost:3000이 응답을 나의 브라우저로 보낸다
그래서 localhost:3000으로 접속하면 나의 앱이 렌더링 된다
참고
확인 명령어
1. route print - window 라우팅 테이블 확인
2. ping localhost - localhost의 ip주소 확인