Vue.js 심화 2탄 46강: 세상 밖으로! 우리 성을 공개해요 (Build & Deploy)

안녕하세요! 가족과 함께하는 스마트 라이프입니다. 드디어 우리가 만든 마법 성이 완공되었어요! 하지만 지금까지는 우리 집 컴퓨터 안에서만 볼 수 있는 비밀 성이었죠? 오늘은 이 성을 아주 작고 튼튼하게 포장해서, 전 세계 친구들이 주소를 치고 놀러 올 수 있게 만드는 마법 성의 완성(Build)과 행진(Deploy)을 배워볼게요!

[IMAGE_1]

1. Build: 흩어진 재료를 하나로 뭉치기

Build(빌드)는 성을 짓기 위해 여기저기 흩어두었던 도구와 재료들을 커다란 상자 하나에 쏙 담는 과정이에요.

  • 다이어트 마법: 코드가 너무 길면 손님들이 성에 들어올 때 시간이 오래 걸려요. 빌드를 하면 컴퓨터가 읽기 좋게 아주 작고 빠르게 압축해준답니다.
  • 정리 정돈: 수많은 파일이 딱 몇 개의 파일로 합쳐져서 관리가 아주 쉬워져요.

2. Deploy: 전 세계에 우리 성 주소 만들기

포장이 끝났다면 이제 인터넷 세상에 우리 성을 세워야겠죠? 이걸 Deploy(배포)라고 해요.

마치 넓은 땅(서버)을 빌려 우리 성을 옮겨 놓는 것과 같아요. 배포가 끝나면 `https://my-magic-castle.com` 같은 우리 성만의 고유한 주소가 생기고, 전 세계 어디서든 이 주소만 알면 우리 성에 놀러 올 수 있답니다!

3. 실전 마법: 성 포장 주문 외우기

우리가 사용하던 Vite 도구에게 포장을 부탁하는 주문은 아주 간단해요!

# 터미널이라는 마법 창에 입력해요
npm run build

이 주문을 외우면 `dist`라는 이름의 보물 상자가 생겨요. 이 상자 안에 든 내용물만 인터넷 땅(서버)에 올리면 배포 끝!

[IMAGE_2]

4. 스마트 라이프를 위한 가족 코딩 팁

아이들에게 ‘전시회’에 비유해 보세요. 집에서 그린 그림들을 예쁜 액자에 담아 미술관에 걸어두면, 많은 사람이 와서 감상할 수 있는 것과 같다고요. 아이와 함께 만든 ‘에듀패드’를 실제로 배포해서 아이의 태블릿이나 엄마, 아빠의 휴대폰으로 접속해 보세요. 내가 만든 프로그램이 진짜 인터넷 세상에 존재한다는 사실을 확인하는 순간, 아이는 세상을 변화시키는 개발자의 꿈을 꾸게 될 거예요.

마치며: 위대한 성주가 된 여러분을 축하합니다!

축하합니다! 이제 여러분의 마법 성은 세상 모든 사람에게 기쁨을 줄 준비가 되었습니다. 심화 2탄의 긴 여정을 함께해주셔서 정말 감사합니다. 다음 시간에는 **’마법 성의 업그레이드(Final Review)’**를 통해 우리가 배운 모든 기술을 복습하고, 앞으로 어떤 더 멋진 마법을 배울 수 있을지 이야기해볼게요! 내일 아침 9시에 만나요!