React 설치/ 기본 구동/종료

React 를 쓰면

새로고침 없이 앱처럼 동작을 한다!

이런것들을 웹앱이라고 한다.

 

Web-app 웹앱의 장점

- 모바일앱으로 발행이 쉬움, 앱처럼 뛰어난 ux , 웹사이트보다 비즈니스적 강점

 

1. node.js 설치 - 신버전으로 설치하기

(npm툴 ,create-react-app 라이브러리 설치를 위해서 설치한다!)

https://nodejs.org/en

Node.js

 

설치된 노드 버전 확인 하는법

cmd -> node -v

 

 

2. visual studio code 설치하기

- 터미널 쓰기 좋아서 써보기좋음

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

3.  리엑트 프로젝트 폴더 원하는 경로에 만들기

파일 - 폴더열기 - 아까만든 폴더 선택

file - open folder - 아까만든 폴더 선택

 

Do you trust the authors of the files in this folder? 

라고 뜨면 폴더 신뢰  여부 에 따른 확인이니 그냥 yes누르면된다 

 

yes누르면 모든 편집 기능 가능

no 면 제한모드 되서 tasks, debugging 등  편집기능 등을 사용 할 수 없게 된다.

 

4. 비주얼 스튜디오에서 터미널 창 열기

 

5. 터미널에 명령어 쓰기

npx create-react-app blog

 

 

명령어가 비정상 동작 할때 아래 포스트를 참고해보자

https://leggo.tistory.com/222

npx create-react-app 오류 , 작동하지 않을 때

정상 적으로 설치되면 아래와같이 된다

?.? success라고 뜬다는  자료도있엇으나?(비교적 예전 꺼라 그런거 같음)

happy hacking이라고 뜨면 정상 설치가 완료 된것으로 보인다.

 

해당 디렉토리에 가면 아래 그림과같이 하위 폴더에 

react 개발에 필요한 모든 파일이 다운 받아진 것을 확인 할 수있다.

 

 

6. 설치가 정상적으로 마무리되면

vs 에서 다운로드 받아진 폴더를 연다 (blog폴더)

파일 - 폴더열기 - 다운받아진 폴더(blog)

 

7. App.js에서 코드 짜면된다.

App.js에 구현된 내용은

실질적인 메인페이지인 public 의 index.html 에 옮겨져  실행되어 되게 되어져있고

app.js의 내용을 index.html로 넣어주는 내용은 index.js서 한다

import React from 'react'; // jsx 를 사용하기위함

import App from './App';  //여기서 /App은 App.js를 의미함. .js 생략가

 

8. 미리보기를 보려면  터미널에 npm start 를 실행하면

 

크롬브라우저로 띄워줍니다.

( node_modules : 설치한 라이브러리 폴더

public : static 파일보관함

src : 소스보관함

package.json : 프로젝트 정보, 설치한 라이브러리 목록

(npm start 의 strat의 설정등이 저장되어있다.)

package-lock.json : 패키지의 라이브러리가 만들어질때 사용된 파일목

manifest : 파비콘 설정 관련된 목록)

 

*

개발자도구로 실행했을때

<script defer="" src="/static/js/bundle.js"></script>

와같이나오는데

리액트에서 개발한것들이 npm start할때마다 bundle.js에 들어가서

bundle.js를 기준으로 실행 이된다.

 

 

 

+

npm start 종료는

해당 터미널에서 Ctrl + C 누르게 되면  아래와같이 

일괄 작업을 시겠습니까? 라고 문구가표기된다! 

Y로 누르고 엔터 쳐주면 끝!

 

 

리액트 버전 수정해야 될때 

왠지 필요할꺼같아서 찾아놈..

https://curryyou.tistory.com/479

[React] create-react-app 리액트 버전 변경 및 에러 처리 방법