[React] 272샘의 React2 (개발환경 구축)

 

node.js설치 아래 url참고

https://deahan.tistory.com/413

[React] Node.Js설치

 

 

Visual Studio Code 설치

https://code.visualstudio.com/

위 URL 가서 다운로드 받아서 냅 next를 누르면 끝

 

 

d: 드라이브(없다면 c: 드라이브)에

reactstudy 라고 디렉토리를 1개 만들고, vscode의 open folder 메뉴로 reactstudy를 연다

#VsCode 에서 터미널 열기 명령어
#Ctrl키 위에 Shift키가 있고 Shift키위에 Tab키 위에 `키가 있다 모두 키보드 왼쪽 끝에 몰려있다
Ctrl + Shift + `

 

Terminal에 cmd라 치면 powershell이 cmd 창으로 바뀐다.

node -v 를 쳐보자. 버젼이 표시가 되어야 한다. 만약 안 된다면 vscode를 다시 실행

그래도 안된다면.... 다시 처음으로 돌아가 순서대로 확인....

 

 

 

간단히 아래와 같은 내용의 test.js를 만들자

Terminal에 node test.js 라 입력.

나는 지금 브라우져 바깥에서 자바스크립트를 실행시켰다.. (node가 있으면 이것이 가능하다고 한다...) 

 

 

react 개발 환경 구축에는 facebook에서 만들어준 create-react-app (보통 CRA라 부름) 이 있고

vue.js를 만든 사람이 만든 vite란 것이 있는데

CRA 보다 vite가 훨씬 편하고 빠르당. facebook에서도 vite를 쓴다고 함.

 

NPM => Node Package Manager 

그냥 Node에서 사용하는 패키지(라이브러리로 봐도 무방)

 

 

#노드 패키지 매니저 최신버전(마지막버전) 설치
npm create vite@latest

Terminal에  npm create vite@latest 라 치고 아래 그림과 같이 선택해 주면

reactfirst 디렉토리가 자동으로 생성되고 그 안에 여러가지 필요한 파일들이 자동으로 생성.

그 다음에 할 일이 자동으로 화면에 표시된다

 

👍붐 다운 에서 엔터
✔️체크 표시가 그 다음에 할 일이다.. 이 명령어를 그대로 순서대로 입력한다

 

마지막 ✔️ 표시된 URL  Ctrl + 클릭

 

 

 

 

이렇게 나오면 끝

 

출처 : https://e-7-e.tistory.com/250