0장_리액트 환경구축(얼렁뚱땅 구축하기..)

 

깃으로부터 리액트 다운받기

cmd 명령어 창을 띄우고 다음의 명령어를 입력한다.

리액트 깃으로부터 다운 받기

 

 

 

Node.js 설치

- 다운로드 & 설치

  - 다운로드 : https://nodejs.org/dist/v16.13.0/ 

  - 설치파일 : node-v16.13.0-x64.msi

node.js 프로그램 설치하기 (window기준_아래줄에서 5번째꺼 다운로드)

 

cmd 명령어 창을 켜서 

 

위의 코드를 명령어 창에 검색해서 버전 확인하기

 

 

위의 사진과 같이 버전을 확인해보쟈

 

 

 

 

 

 

yarn 설치와 리액트 앱 생성

1) yarn 설치

npm으로 yarn을 설치한다.

아래와 같이 cmd 창에서 yarn install -g yarn 해서 설치하기

 

2) 리액트 앱 생성

Visual Studio code 를 실행시키고 터미널을 켜고 다음의 사진에 나오는 것처럼 순서대로 명령어를 실행시킨다.

 

리액트 앱 생성 실행 명령어

 

 

위의 코드 명령어를 입력하면 아래와 같이 창이 나온다.

 

실행 결과(index.js 실행 > App.js 실행 > function App() 된 결과)

 

 

리액트 앱 생성하면 아래의 사진처럼 client 라는 리액트 앱으로 만든 패키지가 생성된다.

client 패키지안에는 node_modules, public, src 가 있는데 src 는 리액트가 만든 소스 코드들이 들어있다.

 

src안에는 리액트가 만든 소스코드들이 들어있다.

 

 

<App /> 란 App.js 를 import 해서 띄우는 것을 의미한다.

 

App.js 에 있는 App() 실행시키게 된다.

 

App() 함수가 실행된 결과 창이 이 사진의 화면이 된다.

 

 

 

package.json 은 pom.xml 과 같은 역할을 하는 아이

package.json 에 들어가는 설정 코드들에 따라서 node_modules 에 들어가는 아이들이 달라진다.

 

 

 

** 리액트 포트 내리고 싶다면 ? ------> 터미널 창에서 ctrl + c 누르면 된다. **