[무료 강의] 142~151쪽, 프런트엔드 기술 리액트 이해하기, 편집자P 키우기 게임 만들기

프론트엔드가 뭔지, 리액트는 왜 쓰는 건지 궁금하셨나요? 이번 영상에서는 리액트의 개념부터 시작해서 실제로 클리커 게임을 만들어보고, 리액트 네이티브와 엑스포를 이용해 모바일 앱으로 전환하는 과정까지 한 번에 다룹니다. AI 에이전트 시대에 왜 리액트를 골라야 하는지, 그 이유가 명확해질 거예요.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 프론트엔드란 무엇인가
1:54 리액트 소개 — 셰프의 도구 비유
3:04 리액트를 써야 하는 이유와 AI 모델의 학습 데이터
5:30 리액트 클리커 게임 소개
5:57 게임 에셋 만들기 (젬이나이 + 어도비 배경 제거)
9:04 커서에서 프로젝트 세팅 및 개발 시작
11:49 플랜 모드로 게임 개발 계획 세우기
13:34 웹 브라우저에서 모바일 화면 확인하기
14:50 게임 실행 및 기능 테스트
16:01 게임 기능 추가 — 초당 수익, 애니메이션 효과
17:24 리액트 네이티브로 모바일 앱 전환
19:18 엑스포(Expo) 설치 및 모바일 연결

오늘 다룬 내용
- 프론트엔드의 정의 — 웹뿐 아니라 게임, 셋톱박스 등 화면에 보이는 모든 것
- 리액트를 써야 하는 이유 — AI 모델이 리액트 코드를 압도적으로 잘 알고 있다
- 리액트 클리커 게임 개발 — 에셋 준비부터 커서로 게임 완성까지
- 프롬프트 하나로 게임 기능 확장하기 — 초당 수익, 레벨업 애니메이션
- 리액트 네이티브 + 엑스포로 웹 게임을 모바일 앱으로 전환하는 방법

#프론트엔드 #리액트 #React #리액트네이티브 #ReactNative #클리커게임 #바이브코딩 #커서AI #Cursor #엑스포 #Expo #웹개발 #모바일앱개발 #AI코딩 #비개발자코딩 #코딩입문 #게임개발 #프롬프트엔지니어링 #노코드 #에이전트시대