최종 마무리: 인터넷에 배포

전체 앱을 인터넷에 게시하고 첫 번째 <h1>부터 여기까지의 여정을 되돌아보세요.

여행의 마지막 단계

네 앱은 네 컴퓨터에 있는 localhost에서 실행돼. 마스터의 마지막 기술은 실제 주소로 보내는 것야. 프런트엔드와 백엔드는 별도로 배포돼. 이것이 바로 우리가 처음에 이들을 별도로 구축한 이유야.

프런트엔드 배포(React)

Vite는 다음 명령 하나로 앱을 완성된 파일로 변환할 수 있어.

npm run build

이것은dist/폴더 – 일반 HTML, CSS 및 JavaScript. 그리고 너는 그것을 어디에 두어야 할지 이미 알고 있어: 그것은 레벨 1과 마찬가지로 정적 웹사이트야!

GitHub 페이지 – 콘텐츠 업로드dist/레벨 1에서 알고 있는 방식으로 저장소에 저장해.
또는 더 편리하게 Netlify / Vercel – 무료로 GitHub 계정에 연결하면 변경 사항이 있을 때마다 자동으로 배포돼. 그 중 하나를 부모님과 함께 시험해 보세요. 몇 번의 클릭만으로 설정 안내를 통해 안내를 받을 수 있어.

백엔드 배포(Node.js)

서버에는 항상 켜져 있는 컴퓨터가 필요해. 이것이 Render 또는 Railway와 같은 서비스의 목적야. 이 서비스에는 학교 프로젝트에 충분한 무료 등급이 있어.

업로드`my-server`폴더를 GitHub의 자체 저장소에 추가해(`node_modules`– 서버에 자동으로 설치돼.)
render.com(상위 항목 포함)에서 *New → Web Service*를 선택하고 GitHub 저장소를 연결하고 다음을 설정해. Build Command`npm install`, 시작 명령`node server.js`.
Render는 다음과 같은 주소를 제공해.`https://my-server.onrender.com`. 노력하다`.../api/messages`네 브라우저에서 – 네 API는 인터넷에 게시되어 있어!
마지막 세부사항: 프런트엔드에서 모든 항목을 교체해.`http://localhost:3900`새 서버 주소로 프런트엔드를 다시 배포해.

⚠️

**방명록을 세상에 공개하기 전에 경비원처럼 생각하해. ** 인터넷상의 누구나 찾을 수 있어. 서버에서 메시지 길이를 확인하고(지난 강의에서 확인했어!) 메시지를 원시 HTML로 표시하지 마해(React는 이를 자동으로 방지해. 이를 사용하는 또 다른 이유야). 그리고 때때로 책을 확인하도록 부모와 동의해. 대형 웹사이트에는 이를 위한 전체 팀이 있어. 이를 중재라고 해.

🏆 축하드립니다, 스승님!

잠시 시간을 내어 어디서 시작했는지 되돌아보세요.

레벨 1: 빈 파일 →<h1>It works!</h1>→ GitHub 페이지의 HTML 및 CSS 전체 웹사이트.
레벨 2: 변수, 조건, 함수 → 다크 모드, 갤러리, 퀴즈, 양식.
레벨 3: 터미널, Node.js, React, 구성 요소, 상태, Express, API → 인터넷의 전체 스택 앱.

너이 지금 알고 있는 것은 웹 개발자 기술의 진정한 기초야. 장난감 버전이 아닌 실제 기반야. 실제 회사와 동일한 도구, 동일한 프로세스, 동일한 사고 방식.

다음은 어디로 갈까?

여기에서 자연스럽게 이어지는 몇 가지 방향은 다음과 같어.

데이터베이스 – 서버를 다시 시작해도 메시지가 유지돼(SQLite는 시작하기 가장 친숙한 곳야).
TypeScript – 오류 검사 기능이 있는 JavaScript; 회사에서는 표준.
터미널의 Git –git add,git commit,git push파일을 직접 업로드하는 대신
너만의 아이디어 – 최고의 선생님이 있어. 수업을 위한 앱이 있나요? 네 클럽을 위한 토너먼트 대진표가 필요하십니까? 이제 빌드 방법을 알았어.

✅

**자신을 확인하고 작별 인사를 해.** 프런트엔드와 백엔드 모두 공개 주소에서 실행되고 있으며 방명록은 전 세계의 메시지를 받아들야. 가족에게 주소를 보내세요. 그리고 모든 것을 두 손으로 직접 만들었다고 말하는 것도 잊지 마세요. 🚀

이번 수업에서 배울 점

프론트엔드:npm run build→ 정적 파일 → GitHub Pages/Netlify/Vercel.
백엔드: GitHub 저장소 → Render/Railway → 공개 API 주소 → 프런트엔드에서 localhost를 대체해.
공개 앱은 책임이 있어. 서버측 확인과 사물을 감시하는 성인야.