콘솔에서 배포 대시보드 만들기
이 무료 강좌는 10장으로 구성되어 있어요. 빈 페이지에서 시작해 라우트, 데이터, 테스트를 갖춘 Acme Deploys 앱을 만들고 배포해요. 각 장을 읽는 동안 예제가 DevTools에서 실시간으로 실행돼요.
진행 상황0/10
- 01시작하기앱을 만들고 첫 페이지를 렌더링한 뒤 키 입력에 반응하세요.5분
- 02Box로 레이아웃 구성셀 단위 Flexbox로 상단 바, 사이드바, 카드가 있는 대시보드 틀을 만드세요.7분
- 03텍스트와 스타일색상, 텍스트 속성, 테마 토큰으로 배포 카드를 꾸미세요.6분
- 04입력과 키맵키보드로 배포 항목을 탐색하고 ? 도움말 오버레이를 추가하세요.8분
- 05라우팅공유 레이아웃, 단축키가 있는 링크, 방문 기록을 갖춘 라우트로 앱을 나누세요.8분
- 06데이터와 라우트 핸들러app/api에서 배포 데이터를 제공하고, 페이지에서 가져오고, 새 데이터를 전송하세요.8분
- 07Table, List와 차트직접 만든 행을 정렬 가능한 Table과 레이아웃을 밀어내지 않는 차트로 바꾸세요.7분
- 08테스트화면 밖에서 렌더링하고, 키를 누르고, 프레임을 텍스트로 검증하세요.6분
- 09터미널에서 실행text run으로 같은 대시보드를 터미널에서 전체 화면으로 실행하세요.5분
- 10출시Acme Deploys를 빌드하고, 메타데이터를 설정하고, 배포하세요.4분
- ▼수료증이름이 적힌 수료증을 콘솔에서 렌더링해 받으세요.
콘솔에서 실행되는 강좌
⌘⌥JCtrl+Shift+J⌘⌥KCtrl+Shift+K⌘⌥C로 콘솔을 열고 (먼저 개발자 기능을 켜세요), 아래를 클릭한 뒤 방향키로 장을 선택하세요.
▼ learn
콘솔 열기
⌘⌥J
CtrlShiftJ
⌘⌥K
CtrlShiftK
⌘⌥C
앱은 DevTools에서 렌더링돼요.먼저 Safari 설정 → 고급에서 ‘웹 개발자용 기능 보기’를 켜세요. 그다음 여기를 클릭하고 ↓를 누르세요.
데스크톱에서 열기
이 앱은 DevTools 콘솔에서 렌더링되므로 데스크톱 브라우저가 필요해요.