바이브 코딩 1인 창업 9: React·Vite·Next.js, 셋의 관계만 알면 됩니다

React, Vite, Next.js. 이 세 단어에서 막히는 사람이 많습니다. 셋 다 웹 화면을 만드는 데 쓰이는 도구인데, 이름만 봐서는 무엇이 무엇을 포함하는지 알 수 없습니다. 강의 3주차 중반이 이 관계를 정리하고, 이어서 서버리스라는 개념까지 나갑니다.

바이브 코딩으로 만들 계획이라면 직접 다룰 일은 거의 없습니다. 다만 AI가 "Next.js로 만들까요"라고 물었을 때 판단은 해야 합니다. 그 정도의 이해를 목표로 합니다.

이 편이 다루는 목차 구간

위치	목차
1:46:45	(3주차) React, Vite의 개념, Next.js의 차이
1:49:14	(3주차) React 웹 구현하기
1:53:16	(3주차) 서버리스(Serverless)의 개념

(3주차 · 1:46:45) 세 이름의 관계

이름	하는 일	한 줄로
React	화면을 조각으로 나눠 만드는 방식	부품 단위로 화면 조립
Vite	만드는 동안 빠르게 돌려보게 해주는 도구	작업 속도를 올리는 보조 장비
Next.js	React에 필요한 것들을 미리 갖춘 틀	React 기반의 완성형 패키지

관계를 한 문장으로 정리하면 이렇습니다. React는 방식, Vite는 작업 환경, Next.js는 React를 포함한 더 큰 틀입니다. 셋 중 하나를 고르는 문제가 아니라, React를 쓰면서 Vite로 작업하거나 Next.js 안에서 쓰는 식입니다.

왜 React 같은 방식이 필요한가는 실제로 겪어봐야 압니다. 화면이 커지면 같은 모양이 반복됩니다. 버튼, 카드, 목록. 이걸 매번 새로 쓰지 않고 부품으로 만들어 재사용하는 것이 핵심입니다. 한 번 고치면 쓰인 데가 다 바뀝니다.

초보자가 고를 기준

• 페이지 몇 장짜리 소개 사이트 — 이 도구들이 필요 없습니다. 단순한 파일 몇 개가 낫습니다.
• 기능이 있고 로그인이나 저장이 붙는 서비스 — Next.js처럼 갖춰진 틀이 편합니다.
• 검색 노출이 중요한 콘텐츠 사이트 — 이 부분은 도구에 따라 차이가 있어 처음부터 확인하는 편이 좋습니다.

AI에게 물을 때는 목적을 먼저 말하는 것이 요령입니다. "블로그처럼 글이 쌓이고 검색에 잘 잡혀야 한다"고 하면 그에 맞는 답이 나옵니다. 도구 이름을 먼저 말하면 그 도구 안에서만 답이 나옵니다.

(3주차 · 1:49:14) React 웹 구현 — 따라 하되 붙잡히지 말 것

실습 구간입니다. 여기서 중장년 학습자가 자주 겪는 상황이 있습니다. 화면이 강의와 다르게 나오는 것입니다. 도구 버전이 올라가면 초기 화면이나 폴더 구조가 바뀝니다.

대응은 간단합니다. 다르다는 사실 자체를 AI에게 말하면 됩니다. "강의에서는 이런 화면이 나온다는데 내 화면은 이렇다"고 캡처와 함께 물어보면 대개 해결됩니다. 다른 것이 잘못된 것은 아닙니다.

(3주차 · 1:53:16) 서버리스 — 서버가 없다는 뜻이 아닙니다

이름이 오해를 부르는 대표적인 용어입니다. 서버가 없는 게 아니라 내가 서버를 관리하지 않는다는 뜻입니다.

구분	예전 방식	서버리스
준비	서버를 빌리고 설정합니다	코드만 올립니다
비용	안 써도 매달 나갑니다	호출된 만큼만
관리	보안 업데이트를 직접	맡깁니다

1인 창업자에게 이 방식이 유리한 이유가 분명합니다. 사람이 안 오면 돈이 거의 안 나갑니다. 시작하는 입장에서 고정비가 없다는 것은 큰 차이입니다. 반대로 갑자기 많이 쓰이면 비용이 뜁니다. 그래서 4편에서 말한 사용량 상한 설정이 여기서도 필요합니다.

고정비가 없다는 것은 접을 때 손실이 작다는 뜻입니다. 퇴직 후 시도에서 이 성질은 생각보다 중요합니다.

다음 편 예고

10편은 1:55:48부터입니다. API와 AI API를 다룹니다. 남이 만든 기능을 내 서비스에 끌어다 쓰는 방법이고, 지금 시점에서 가장 실용적인 구간이기도 합니다. OpenAI의 글 생성과 이미지 생성 실습이 이어집니다.

출처

이 글은 유튜브 영상 「이 영상이 당신 인생을 바꿉니다. 바이브 코딩 1인 창업 3시간 통합본」(조코딩 JoCoding)의 목차 가운데 1:46:45~1:55:48 구간을 출발점으로 삼아, 퇴직 전후 중장년 독자의 관점에서 다시 구성한 것입니다. 강의의 실제 설명과 실습 화면은 원본 영상에서 직접 확인하시기 바랍니다.

개발 도구와 클라우드 서비스의 기능·요금은 수시로 바뀝니다. 사용량 기반 과금 서비스는 한도 설정 여부와 초과 시 정책을 각 서비스의 공식 안내에서 확인하시기 바랍니다.