1. 리액트 앱 설치

오늘의 최종목표 

리액트 앱을 만들어라~

node module을 다운로드 받고 리액트 웹사이트 기본구조를 만들어라!

<결과: localhost:3000에 접속하면, 아래 그림같은 웹사이트를 만들어준다>

주요 명령어 : npx create-react-app (node모듈 저장 위치) 

현재 폴더 안에 설치하려면, npx create-react-app ./

1. 기본 환경 셋팅 

1) Node.js 설치

• (이미 설치되어 있는지 확인하는 방법 : 터미널에서 node -v 를 입력해서 버전명이 나오면 기존에 설치)
• 왜 설치해야 해? React 관련 모듈/라이브러리/패키지들이 모두 node에서 제공하는 모듈이기 때문이다.
  가령, React 관련 라이브러리는 npm install...로 시작한다.
  다운로드 페이지 : https://nodejs.org/ko  
• 설치방법: Node.js 홈페이지에 가서 다운로드 버튼클릭. (윈도우 버젼이 x64면, 홈페이지에 x64 버전이 알아서 나옴...)

Node.js

Node.js 다운로드 페이지(안정적인 버전을 추천한다)

 

이미 설치되어있는지 확인하는 방법

* 윈도우 : Window키 + R 를 눌러 "실행"창이 나오면, cmd 입력 ==> 터미널 열리쥬?

  터미널에서 "node -v"를 쳐보아요.

node.js 설치확인~

2) 코딩할 에디터 설치

 보통, VS Code를 많이 씁니다. 나도 이게 편하더라구요. 

 VS Code 다운로드페이지. https://code.visualstudio.com/

 

3) React 앱 설치하기

REACT 앱이라는 건, 웹사이트를 동작시킬 어플리케이션, 즉 웹앱을 의미한다.

설치 순서

 - 프로젝트 폴더를 하나 만든다.

 예)바탕화면에 새폴더를 하나 만든다.

 - 폴더 이름은 "소문자"명으로 해야한다. 대문자는 들어가면 안됨!

 VS CODE를 열고, 만든 새폴더를 마우스로 끌어다가 VSCode 화면 아무데나 집어넣는다.

vscode에 새폴더 넣기~ 걍 마우스로 쭉 끌어다가 아무데나 넣어버려~

터미널 열기

Teminal>New Terminal

 

터미널 열어봐라~

 

React App 만들기!

터미널에다가 npx create ~~~ 명령어를 넣어라!

npx create-react-app ./ 

방금 만든 폴더 안에 만들거니깐~ ./ 요걸 꼭 붙여주길 바람

리액트 앱 만들기 명령어!

 

내가 만든 폴더(my-react)를 열어보면 각종 모듈이 설치되고 있는 현장을 목격할 수 있다!

 

npm run start

react 웹사이트 실행!

정상적으로 설최되었다면,?