🐨CoalaCoding
DocsExamplesTry itBoardB반
🐨CoalaCoding

개발자를 위한 한국어 웹 기술 문서

문서

  • JavaScript
  • Web Publishing
  • React
  • Python

커뮤니티

  • 게시판
  • 예제 모음
  • Try it 에디터

기타

  • GitHub
  • 관리자
© 2026 CoalaCoding. All rights reserved.
  • 01_hook
  • 02_시작
  • 03_react-vite-설치
  • 04_노코드리액트
  • 05_csrssrreact-렌더링-참조글
  • 06_컴포넌트
  • 07_시작하기
  • 08_2-scaffolding-react-project
  • 09_props
  • 10_3-웹문서-작성하기
  • 11_컴포넌트
  • 12_map과컴포넌트
  • 13_event
  • 14_4-리액트로-변경하기
  • 15_컴포넌트-데이터관리
  • 16_composition
  • 17_앱제작-준비
  • 21_환경설정
  • 24_컴포넌트-전략
  • 25_리액트-네이버-로그인
  • 26_리액트교안
  • 0_React 학습 전 필수 JavaScript 문법
  • 1_React 개발 환경 이해
  • 2_React 소스 코드 수정, 배포 및 렌더링
  • 3_JSX 문법과 컴포넌트
  • 4_Props (속성)
  • 5_이벤트 처리
  • 6_Hook
  • 7_useContext로 전역 상태 관리
  • 8. React Router
  • 9_CSS 리액트에 넣는 5가지 방법
  1. 홈
  2. 문서
  3. React
  4. React 기초
  5. 08_2-scaffolding-react-project

08_2-scaffolding-react-project

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

1. Scaffolding React Project

  1. 프로젝트 폴더를 최상위로 연다.
  2. 필요 없는 파일 삭제 (이미지에 표시된 파일을 삭제)

  1. 코드수정 - 표시된 부분을 삭제

  1. App.tsx 코드 추가수정→표시된 부분 삭제 하고 코드작성

function App() {
  return <h1>HI</h1>;
}

export default App;

  1. 앱 실행 하기 npm run dev

  1. 터미널에 응답이 출력되면서 local 주소가 확인되면 브라우저 주소창에 해당 링크로 이동하여 렌더링 결과를 확인한다.

  1. 실행 화면 확인

목차

  • 구문