24일차 react 이론/프로젝트 설치/npm start

react

 

https://blog.naver.com/getinthere

getinthere님의블로그 : 네이버 블로그

 

1. node 설치

https://nodejs.org/ko/

Node.js

 

 

2. vscode 설치

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

 

 

3. 확장 설치 프로그램

(1) ESLint (문법 검사)

ES는 자바 스크립트!!(.js 확장자 보고! 기능함)

Lint는 문법검사!!!!!! 

문법에 어긋나는 코드 적으면 빨간줄!

 

(2) Prettier (문자 포멧)

리액트 포맷해주는 거-> 저장후에 자동 정렬해주고....끝에 세미콜론 빠져있으면 넣어주고..

 

(3) Reactjs Code Snippets (단축키 생성)

자동완성 키 만들어줌

snippet 코드조각!! 

 

4. react 프로젝트 설치

(npm 5.2 이상부터 npx 사용가능)

npm 이란?

패키지 관리 도구이자 의존성을 관리해준다.

​

npx를 사용하면 npm보다 좋다. 그 이유는 npx는 최신버전에 해당하는 패키지를 설치하여 실행하고, 실행된 이후에 해당 패키지를 제거한다. npm은 로컬 스토리지에 있는 패키지가 새로운 버전이 나왔을 경우, 이미 존재하는 패키지를 제거하고 다시 설치해야한다는게 가장 큰 문제이다.

​

npx는 스크립트를 적으면 패키지 설치를 하지 않고 실행을 할 수 있다.

 

npx create-react-app my-app

 

cd my-app

npm start

 

https://reactjs-kr.firebaseapp.com/docs/installation.html#trying-out-react

Getting Started – React

 

▶ react는??? 그림그려주는 애다 

비교해서 숨은그림찾듯이! 비교해서 변경된 부분을 기존 그림에서 추가로 수정해서 그려줌 

그림 그리는 엔진이 react이다 

리엑트엔진은 실행파일 실행 프로그램이다!! 

계속 돌고있는 애를 demon 이라한다. 서버에 올려놓아야 계속 돌려진다!!!!!!! 

그래서 리액트 엔진을 자바스크립트 라이브러리 중에 Express 서버로 감싼다 

Express라이브러리를 통해서 자바스크립트 서버를 만들수 있다

서버가 계속 돌고 있고 데이터를 들고 있으니까 갑이다! 이 서버에 웹 브라우저로 클라이언트가 데이터 요청한다면

스프링 서버는 자바로 만들어졌고 

Express서버는 자바스크립트로 만들어졌다 언어가 다른거!!!!!!!!!

Express서버의 기본 포트가 3000이다. 

localhost:3000으로 요청하면??? 응답을 Index.html로 해주는걸로 약속되어있다!이게 최초의 그림이다. 

버퍼로 html 태그들이 날라가서 그림 그려지는 것

두번째부터 변경될걸(ajax로) react가 감지할거다 

로그인페이지로 보내면? 변경을 감지한다.

자바스크립트 해석하는게 아니라, 이전그림을 들고 있는 리액트가 다른 부분 감지해서 자바스크립트를 리액트 자기가 해석해서 html로 만들어서 이걸 브라우저에 리턴해준다 즉!!! 그림 그려주는 엔진이 리액트다!!!!!!! 

요청이 들어올때마다 부분적으로 그림만 바뀌지 페이지가 새로고침 되는게 아니다!! 

 

<스프링에서>

fetch함수로 요청처리하고 클라이언트가 json데이터를 응답받고 이런 데이터를 가지고 있는 자바스크립트를 브라우저에서 해석해서 보여줬음 

 

리액트 엔진을 express서버가 감싸고 최초응답을 index.html응답해주는 이 설정 세팅을 다 해놓았다!!!!!!!!!!

리액트도 npx라는 저장소에 있다 npx는 웹저장소(maven같은거!)!! 여기에다가 위에 세팅되어있는 프로젝트를 받는다

 

결과??? 

 

 

express서버 3000포트로 서버 돌고있다!

결과는???