[React 2022] 2-실습 환경 구축 요약

 https://ko.reactjs.org/ 시작하기 클릭  온라인 플레이그라운드 개발 환경을 내 PC에 설치하는게 아니라, 온라인 서비스를 이용하는 것. CodePen, CodeSandbox, Stackblitz  앱 만들기   추천 툴체인 툴체인: React 개발을 위해 필요한 환경을 기본적으로 제공함 Create React App 클릭 앱 사용 ...

<a href="https://ko.reactjs.org/" target="_blank">https://ko.reactjs.org/</a>

<code class="inline-code">시작하기</code> 클릭

개발 환경을 내 PC에 설치하는게 아니라, 온라인 서비스를 이용하는 것.

<a href="https://ko.reactjs.org/redirect-to-codepen/hello-world" target="_blank">CodePen</a><span style="color: rgb(0, 0, 0); font-family: -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, Roboto, Oxygen, Ubuntu, Cantarell, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif; white-space: normal;">,&nbsp;<a href="https://codesandbox.io/s/new" target="_blank">CodeSandbox</a>,<span style="color: rgb(0, 0, 0); font-family: -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, Roboto, Oxygen, Ubuntu, Cantarell, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif; white-space: normal;">&nbsp;<a href="https://stackblitz.com/fork/react" target="_blank">Stackblitz</a>

<a href="https://ko.reactjs.org/docs/create-a-new-react-app.html" target="_blank">앱 만들기</a> &gt; 추천 툴체인

툴체인: React 개발을 위해 필요한 환경을 기본적으로 제공함

<a href="https://github.com/facebook/create-react-app" target="_blank"><code class="inline-code">Create React App</code></a> 클릭

앱 사용 방법: <a target="_blank" href="https://create-react-app.dev/">create-react-app.dev</a>

사용하기 위해 터미널에서 명령어 입력 필요 (아래에 나옴)

npx 실행을 위해 <a href="https://nodejs.org/en/" target="_blank">node.js</a> 설치 필요

(LTS가 안정적이라 그런지 강의에선 이 버전 설치)

<a href="https://code.visualstudio.com/Download" target="_blank">Visual Code Studio</a> 설치 필요

<code class="inline-code">폴더 열기</code> 클릭 &gt; 바탕화면에 추가

React 이름은 오동작 할 수 있어서 다른 이름 추천

새 터미널 클릭 &gt; 명령어로 제어 가능

<code class="inline-code">npx&nbsp;create-react-app .</code> 입력

<code class="inline-code">.</code> 은 현재 디렉토리를 의미

작동 잘 안하면 터미널 종류 바꿔보거나 vscode 종료 후 재실행

npm~ 들은 사용 가능한 명령어들

<code class="inline-code">npm start</code> 입력시 리액트 개발 가능한 환경 세팅됨

만약 3000 포트 관련 문구가 뜨면 Y 누르기.

 https://ko.reactjs.org/ 시작하기 클릭  온라인 플레이그라운드 개발 환경을 내 PC에 설치하는게 아니라, 온라인 서비스를 이용하는 것. CodePen, CodeSandbox, Stackblitz  앱 만들기   추천 툴체인 툴체인: React 개발을 위해 필요한 환경을 기본적으로 제공함 Create React App 클릭 앱 사용 방법: create-react-app.dev 사용하기 위해 터미널에서 명령어 입력 필요 (아래에 나옴) npx 실행을 위해 node.js 설치 필요 (LTS가 안정적이라 그런지 강의에선 이 버전 설치)   Visual Code Studio 설치 필요   프로젝트 폴더 등록 폴더 열기 클릭   바탕화면에 추가 React 이름은 오동작 할 수 있어서 다른 이름 추천 ex. react-app   새 터미널 클릭   명령어로 제어 가능 npx create-react-app . 입력 . 은 현재 디렉토리를 의미 작동 잘 안하면 터미널 종류 바꿔보거나 vscode 종료 후 재실행 Git 설치 필요시 설치하기  npm~ 들은 사용 가능한 명령어들  npm start 입력시 리액트 개발 가능한 환경 세팅됨 샘플 리액트 앱이 뜸 만약 3000 포트 관련 문구가 뜨면 Y 누르기.         