🌐 레슨

로컬서버·localhost — 내 PC가 서버가 된다

① 오늘의 미션

localhost:3000, 거기가 어디지?

'우리동네 반찬가게'를 만들 때 늘 뜨는 그 주소 localhost:3000. 오늘은 그 'local'이 정확히 어디인지, 왜 나만 보이는지를 직접 터미널로 확인해 봅니다.

설명을 읽고 오른쪽 터미널에서 직접 쳐보며 내 PC가 잠깐 가게 서버가 되는 과정을 눈으로 봐요.

설명을 따라 진행하면, 여기서 직접 쳐보게 돼요 👇

~/my-shop

$ _

📚 「로컬서버·localhost — 내 PC가 서버가 된다」 레슨 내용 전체 텍스트로 훑어보기

localhost:3000, 거기가 어디지?

설명을 읽고 오른쪽 터미널에서 직접 쳐보며 내 PC가 잠깐 가게 서버가 되는 과정을 눈으로 봐요.

우리 가게를 만들 때 주소창에 localhost:3000 같은 게 뜨죠. 그 'local'이 가리키는 곳은?

맞아요. localhost는 '이 컴퓨터 자신'이라는 뜻이에요. 가게를 만드는 동안 내 PC가 잠깐 가게 서버 역할을 하는 거죠. 👇

우리동네 반찬가게를 예로 두 가지를 눌러 비교해 보세요.

🏠 localhost: 내 PC 안에서만 우리 가게가 돌아가요. 나만 볼 수 있고, 인터넷 없이도 동작. 상품·디자인을 고치며 바로 확인하는 연습장이에요.

🌍 공개 서버: 전 세계 손님 누구나 주소로 내 가게에 접속 가능해요. 내 PC를 꺼도 가게가 열려있죠. (뒤 레슨의 Vercel이 여기로 보내줘요!)

먼저 우리 가게 개발 서버를 켜봐요. 이 순간 내 PC가 잠깐 서버가 돼요.

npm run dev — 가게 개발 서버를 켜요

localhost:3000 에서 가게가 떴어요. 그런데 이 'localhost'가 정확히 어디일까요?

ping localhost 로 이 주소가 가리키는 곳을 물어보려고 해요. 어떤 숫자 주소가 나올까요?

맞아요. localhost는 127.0.0.1로 통해요. 어느 컴퓨터에서든 '나 자신'을 가리키는 특별한 약속 주소죠. 직접 확인할까요? 👇

이 주소가 진짜 내 컴퓨터 자신을 가리키는지 직접 물어봐요.

ping localhost — localhost가 어떤 숫자 주소인지 물어요

localhost = 127.0.0.1 = 내 컴퓨터 자신. 그래서 가게가 나에게만 보였던 거예요.

방금 'localhost = 그 컴퓨터 자신'이라는 걸 봤죠.

맞아요. localhost는 누가 입력하든 그 사람의 PC 자신을 가리켜요. 그래서 손님에게 가게를 보여주려면 공개 서버에 배포해야 하죠.

localhost가 실제로 가리키는 그 특별한 숫자 주소를 채워보세요.

맞아요. 127.0.0.1이에요. 외울 필요는 없지만, localhost가 '내 PC'라는 것만 기억하면 충분해요.

주소 뒤 :3000 은 포트(가게 입구 번호)예요. 한 PC에 여러 가게(서버)를 다른 입구로 열 수 있어요. 포트를 바꿔 다시 띄워봐요.

npm run dev -- -p 4000 — 포트 4000번으로 가게 서버를 켜요

curl -s -o /dev/null -w "%{http_code}\n" http://localhost:4000 — 두 입구가 같은 내 PC인지 확인해요

localhost=내 PC, :포트번호=입구. 같은 PC에서 여러 서버를 다른 포트로 돌릴 수 있어요.

로컬에서 가게를 만들고 확인하는 순서를 맞춰보세요. (↑↓로 정렬)

정확해요! 로컬 서버 켜기 → localhost로 확인 → 고치며 반복 → 배포. localhost는 마음껏 실험하는 안전한 연습장이에요.

한 줄로

localhost(=127.0.0.1) = 내 PC가 잠깐 가게 서버가 된 상태. 나만 보는 우리 가게 연습장이에요.

기억할 흐름

상품·디자인을 고치며 로컬(localhost)에서 확인 → 완성되면 공개 서버에 배포 → 전 세계 손님에게 공개.

다음 레슨에서

그런데 npm run dev를 칠 때, 뒤에서 묵묵히 일하는 부엌도구가 있어요. 다음 'Node와 npm — Claude가 쓰는 부엌도구'에서, Claude가 npm install을 칠 때 무슨 일이 일어나는지 들여다봐요. 🌱