이제 컴포넌트에 대한
대략적인 설명을 했으니
리액트 프로젝트를 실행하여
컴포넌트와 코드 작성을 시작하겠습니다
이 강의에 있는
CodeSandbox 링크에서
준비된 리액트 프로젝트를 확인할 수 있습니다
오늘 사용할
데모 프로젝트의
기초 프로젝트입니다
브라우저 기반 환경을 사용하기 싫고
로컬 환경에서 작업하기를 원한다면
이 압축파일을 사용합니다
함께 첨부되어 있고
다운 받고 압축 해제하면
동일한 기초 프로젝트를 찾을 수 있습니다
이제 여러분 각자의 로컬 시스템에서
작업을 할 수 있게됩니다
CodeSandbox 대신 로컬 환경을 사용한다면
압축 해제된 파일을
Visual Studio Code와 같이
여러분이 원하는 코드 편집기로 실행해야 합니다
그리고 가장 먼저 프로젝트의
시스템 터미널에서
프로젝트 폴더에 'npm install'을 실행합니다
이 명령은 프로젝트에 필요한
모든 제3자 패키지를 다운 받도록 합니다
예로 리액트 코드를 브라우저에서도
사용 가능한 코드로 변환 시키는
리액트 라이브러리와
빌드 도구가 있습니다
첫 강의에서 언급한 것 같이
리액트 작업물에서 작성하는 코드는 브라우저에서
실행이 안되도록 자동 설정되어 있기 때문입니다
npm 설치는 초기에 한 번만 시행하면 되고
그 후 'npm run dev'를 실행하면
개발 서버가 열립니다
이 개발 서버에서
웹사이트를 미리 볼 수 있어
리액트 앱이 실제 사용되는 것을 확인할 수 있습니다
작업 중 지속적으로
이 개발 서버를 운영하는 이유는
코드를 수정할 때마다
코드를 관찰하여
미리보기 웹사이트를
새로고침하기 때문입니다
미리보기 웹사이트는
'npm run dev' 실행 후
출력되는 주소에서 확인할 수 있습니다
동일한 기초 프로젝트이므로
CodeSandbox 환경에서 볼 수 있는
데모 웹사이트와 같습니다
CodeSandbox에서 작업한다면
CodeSandbox에서 자동으로 설정하므로
'npm install'과 'npm run dev'를 실행할 필요가 없습니다
로컬 작업물에서는
Ctrl+C를 눌러 작업을
중단할 수 있습니다
그러고 코딩을 다시 시작할 때
'npm run dev'를 명령하여 간단하게 재시작할 수 있습니다
마찬가지로 CodeSandbox에서는
이 단계를 거칠 필요가 없습니다