시작하기
앱을 만들고 첫 페이지를 렌더링한 뒤 키 입력에 반응하세요.
이 장의 내용
- 앱 생성
- 첫 페이지
- 키 입력에 응답
10개 장에 걸쳐 DevTools 콘솔에서 렌더링되는 배포 대시보드 Acme Deploys를 만들어요. 각 장이 끝나면 작성한 코드 그대로 앱이 이 페이지의 콘솔에서 실시간으로 실행돼요.
앱 생성
create-text-app은 App Router, TypeScript, text CLI를 갖춘 프로젝트의 뼈대를 만들어요.
bunx create-text-app@latest acme-deploys --template startercd acme-deploysbun installbun devhttp://localhost:3000을 연 다음 브라우저 콘솔을 여세요. 페이지에는 포커스 패드가 표시돼요. 앱은 콘솔에서 렌더링돼요.
첫 페이지
모든 라우트는 app/ 안의 page.tsx예요. 시작 페이지를 대시보드의 제목 카드로 바꾸세요:
import { Box, Text } from "@textjs/app";export default function Page() { return ( <Box className="flex-col border rounded px-2 py-1"> <Text bold>▼ Acme Deploys</Text> <Text color="muted">Hello, console.</Text> </Box> );}파일을 저장하세요. Fast Refresh가 프레임을 다시 그리면서 컴포넌트 상태를 유지해요.
키 입력에 응답
useInput은 페이지에 포커스가 있는 동안 모든 키 입력을 받아요. 인사 횟수를 세세요:
삭제: import { Box, Text } from "@textjs/app";추가: import { useState } from "react";추가: import { Box, Text, useInput } from "@textjs/app";export default function Page() {추가: const [hellos, setHellos] = useState(0);추가: 추가: useInput((e) => {추가: if (e.key === "return") setHellos((n) => n + 1);추가: if (e.input === "r") setHellos(0);추가: });추가: return ( <Box className="flex-col border rounded px-2 py-1"> <Text bold>▼ Acme Deploys</Text>삭제: <Text color="muted">Hello, console.</Text>추가: <Text color="muted">{hellos === 0 ? "Hello, console." : `Hello, console. ×${hellos}`}</Text> </Box> );}이것으로 Text.js 앱이 완성됐어요. React 상태와 레이아웃 박스가 있고, 변경된 프레임마다 console.log를 1번 호출하며, 유휴 상태에서는 아무것도 기록하지 않아요.
사용해 보기
이 장을 마쳤을 때의 Acme Deploys 앱이 DevTools에서 실행 중이에요. 패드를 클릭한 뒤 아래 키를 사용하세요.
콘솔 열기
앱은 DevTools에서 렌더링돼요.먼저 Safari 설정 → 고급에서 ‘웹 개발자용 기능 보기’를 켜세요. 그다음 여기를 클릭하고 Enter를 누르세요.
데스크톱에서 열기
이 앱은 DevTools 콘솔에서 렌더링되므로 데스크톱 브라우저가 필요해요.
퀴즈
질문 2개장을 완료하려면 모든 문제에 답하세요.