프레임워크는 왜 쓸까? (Codex)

조립 설명서가 있는 가구 키트

AI가 자주 고르는 도구들

이름	무엇인가요?	이럴 때
React	화면을 컴포넌트로 만드는 가장 많이 쓰이는 도구	로그인·목록·입력이 많은 웹앱
Vite	React 같은 프로젝트를 빠르게 만들고 미리 보게 해 주는 개발 도구	React 웹앱을 가볍게 시작할 때
Next.js	React에 페이지 이동, 서버 기능까지 갖춘 큰 프레임워크	규모가 큰 서비스 (Vercel에서 가장 편해요)
Astro	글·소개 위주 사이트에 강한 프레임워크 (이 교육 사이트도 Astro예요)	블로그, 포트폴리오, 회사 소개
Vue, Svelte	React와 비슷한 역할의 다른 선택지	팀이나 취향에 따라

꼭 알아 둘 세 가지 말

프레임워크를 쓰면 HTML 파일을 더블클릭해서 여는 방식이 아니게 돼요. Codex가 이런 말을 하면 이렇게 이해하세요.

Codex의 말	뜻	비유
“패키지를 설치할게요” (`npm install`)	필요한 부품(남이 만든 코드)을 내려받아요. `node_modules` 폴더가 생겨요	키트 부품 상자 받기
“개발 서버를 켰어요” (`localhost:5173`)	내 컴퓨터에서만 열리는 미리보기 주소예요. 고치면 바로 반영돼요	공방 안에서 시험 조립
“빌드했어요” (`npm run build`)	배포용 파일을 만들어요. 보통 `dist` 폴더에 생겨요	완성품 포장

Codex에게 맡기기

AI 코딩 도구에게 이렇게 말해 보세요

동네 모임 예약 웹앱을 만들려고 해. Vite와 React로 프로젝트를 시작해 줘.
- 왜 이 도구를 쓰는지, 폴더 구조가 어떻게 되는지 초보자 눈높이로 설명해 줘.
- 개발 서버를 켜서 미리보기 화면을 보여 줘.
- node_modules 폴더와 비밀 정보 파일(.env)은 Git에 올라가지 않게 해 줘.
- Cloudflare에 배포할 때 넣어야 할 빌드 명령과 결과 폴더 이름도 알려 줘.

배포 설정이 하나 늘어요

4-4 레슨에서 Cloudflare와 GitHub를 연결할 때, 정적 HTML은 빌드 설정을 비워 뒀죠. 프레임워크 프로젝트는 두 가지를 알려 줘야 해요.

설정	Vite + React의 보통 값
빌드 명령 (Build command)	`npm run build`
결과 폴더 (Build output)	`dist`
환경 변수	Supabase 주소와 공개용 키 (예: `VITE_SUPABASE_URL`)

퀴즈

Codex가 '개발 서버를 켰어요. localhost:5173에서 볼 수 있어요'라고 했어요. 이 주소를 친구에게 보내면?

프레임워크는 왜 쓸까?