1118

리엑트
웹 프레임워크로 자바스크립트 라이브러리 중 하나
인터페이스를 만들기 위해서 사용

페이스북에서 제공해주는 프론트엔드 라이브러리 라고 생각
싱글페이지 어플이나 모바일어플 개발시 토대로 사용될 수 있음

리엑트의 필요성
리엑트를 사용하지 않아도 html, css, js로 만들 수 있지만 리엑트를 이용해서 사용자와 상호작용할 수 있는 동적인 UI를
쉽게 만들 수 있기 때문에 많이 이용됨

특징
1. Data Flow
- 데이터의 흐름이 한방향으로만 흐르는 단방향 데이터 흐름을 가진다
- Augular.js 와 같은 양방향 바인등은 규모가 커질 수록 데이터의 흐름을 추적하기가 어렵고 복잡해지는 경향이 있음
- 이러한 복잡한 앱에서도 데이터 흐름에서 일어나는 변화를 보다 예측가능할 수 있도록 단방향 흐름을 가지도록했다

2. Component 기반 구조

   • 독립적인 단위의 소프트웨어 모듈을 말한다
   • 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이라고 볼 수 있다

3. Virtual DOM(가상 DOM)

   • DOM(Document Object Model) DOM은 html, css, xml 등을 트리구조로 인식하고, 데이터를 객체로 간주하고 관리
   • 리엑트는 이 DOM 트리구조와 같은 구조체를 Virtual DOM으로 가지고 있다
   • 이벤트가 발생할 때마다 Virtual DOM를 만들고 다시 그릴때마다 실제 Virtual DOM과 비교하고 전후 상태를 비교
   • 변경이 필요한 변경사항만 실제 DOM에 반영해 앱의 효율성과 속도를 개선할 수 있다

4. Props and State

   • Props : 부모 컴포넌트에서 자식컴포넌트로 전달해주는 데이터를 말한다
   • 쉽게 말해 읽기전용 데이터
   • 자식컴포넌트에서 전달받은 props는 변경이 불가능하고 전달해주는 최상위 부모컨포넌트만 props을 변경할 수 있다
   • State : 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있음
   • State는 동적인 데이터를 다룰때 사용하며, 사용자와의 상호작용을 통해서 데이터를 동적으로 변경할 때 사용한다
   • 클래스형 컴포넌트에서만 사용할 수 있고 각각의 State는 독립적이다

5. JSX

   • js.를 확장한 문법
   • React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들입니다.
   • React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다.
   • React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.

=================================================================

++ 랜더링(Rendering) : 내가 열심히 만든 페이지(html,css,js를 사용해서 만든)를 사용되는
각각의 브라우저(크롬, 파이어폭스 등)에 보여지게 하는것
랜더링의 과정
1. 서버로 부터 html, css, js 파일을 *파싱하고
2. 랜더트리를 생성하고
3. 각 요소들의 레이아웃을 정하고
4. 계산된 레이아웃에 따라 요소들을 paint 한다

동작과정
1. DOM(Document Object Model), CSSOM(CSS Object Model) 생성
: 서버로 부터 받은 HTML, CSS를 Object Model로 만들고 각각 DOM 과 CSSOM으로 만들어준다
2. Render Tree 생성
: DOM트리와 CSSOM트리를 가지고 Render Tree 를 생성
Render Tree 에는 페이지를 랜더링하는데 필요한 노드만 포함된다
실제로 표현되는 노드들로만 구성된다는 소리
3. Layout
: 브라우저의 각 노드들의 정확한 위치와 크기를 가지고 어디에 어느 크기로 출력할 지 계산한다
4. paint : layout 단계에서 각 노드들의 계산이 끝나면 실제로 페인트 된다

==================================================================

++ 노드 : node 컴퓨터네트워크 분야에서 사용되는 기초단위를 뜻한다. 단위이기 때문에 어떠한 특정한것을 뜻하지는 않는다
보통 네트워크에 연결되어 있는 1개의 기기를 의미한다
흔히 사용되는 컴퓨터 1대가 노드가 될 수 있고 네트워크를 정리하는 루터나 러브, 네트워크에 연결되어 있는 프린터도 노드라고 할 수 있다
네트워크에 연결되어 있는 모든것은 노드가 될 수 있음

++ node.js
Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임(실행환경)

노드의 장점 :
1. 하나의 언어로 프론트와 백엔드를 개발할 수 있다
앞에서 웹 개발은 클라이언트 쪽을 개발하는 프런트엔드와 서버 쪽을 개발하는 백엔드로 나뉜다는 것을 살펴보았습니다.
프런트엔드 개발에서는 HTML, CSS, 자바스크립트, 리액트(React) 같은 언어를 사용하고 백엔드 개발에서는 자바를 비롯해 PHP, 루비(Ruby), 파이썬(Python) 등 다양한 언어를 사용합니다.
그래서 처음에 웹을 개발할 때에는 프런트엔드 개발자와 백엔드 개발자의 역할이 각각 구분되어 있었지만 노드가 등장하면서 백엔드 개발에서도 자바스크립트를 사용할 수 있게 되었습니다.
즉, 자바스크립트 언어 하나로 프런트엔드와 백엔드를 함께 개발할 수 있어서 이제는 프런트엔드 개발자도 백엔드 개발에 도전할 수 있게 되었습니다.
2. 개발자 커뮤니티의 규모가 크고 다양하다
노드는 2009년에 출시했는데 지금까지 사용되고 있습니다.
그동안 많은 개발자들이 노드를 사용해 온 그만큼 커뮤니티도 다양하게 만들어져서 활동하고 있습니다.
커뮤니티가 많다는 것은 여러 환경에서 사용자끼리 피드백이 활발하고 지역별 또는 주제별로 다양한 논의가 이루어졌다
그래서 프로그래밍 언어나 프레임워크를 선택할 때 커뮤니티의 규모는 좋은 선택 기준이 됩니다.
3. 서드파티 모듈이 많다
노드는 사용자가 많고 오랫동안 업데이트해 온 만큼 사용할 수 있는 서드파티 모듈이 많습니다.
서드파티(third-party)란 ‘제3자’라는 뜻이고 모듈(module)은 기능 묶음을 가리킵니다.
그래서 서드파티 모듈이란 노드 제작 업체와 개발자 외에 다른 사람이 만들어 놓은 기능 묶음이라고 생각하면 됩니다.
개발을 하다 보면 이것저것 기능이 필요한데 이미 다른 사람들이 만들어 놓은 모듈이 많으므로 가져다 사용하면 됩니다.
모듈을 직접 만들지 않아도 되니 개발이 훨씬 편리하겠죠?

======================================================
노드 사용하기
1. https://nodejs.org/en 접속 다운로드 받기
2. vs코드 다운로드하기
3. vs코드에서 터미널열기
4. npm init 입력하기
(node package manager)
5. 보안 오류 나오면
windows powershell로 가서
- Get-ExecutionPolicy 입력
- Restricted이 나오면 스크립트실행이 차단된 상태
- Set-ExecutionPolicy RemoteSigned -Scope CurrentUser 입력
- A 입력
- Get-ExecutionPolicy -List 입력해서 실행정책이 변경되었는지 확인
- 다시 터미널로 가서 npm init 입력
- 설정끝날때까지 엔터 모두 초기값으로 설정

6. 이제 package.json이 생성된다
   스프링으로 따지면 pom.xml와 같은 라이브러리나 의존성을 추가하는 파일임

7. index.js 파일 생성하고 console.log("react Hello World"); f5 로 실행

8. index.js파일안에 서버 생성하자
   const http = require('http'); http 모듈을 가져오겠다는 선언

• 웹서버 만들기
  http.createServer( //http 모듈에서 서버 생성

  (req,res)=>{
      res.statusCode=200;     // 연결성공코드는 200번으로 
      res.setHeader('Content-Type','text/html;charset=utf8');      인코딩 한글 깨짐 방지
      res.end('안녕');
  }

  ).listen(3000); // 포트번호를 3000번으로 하겠다

이 상태로 브라우저에서 localhost:3000 하고 엔터 치면 화면에
res.end('안녕'); 이 값인 안녕 이 뜨게됨

람다식
(req,res)=>{
res.statusCode=200; // 연결성공코드는 200번으로
res.setHeader('Content-Type','text/html;charset=utf8'); 인코딩 한글 깨짐 방지
res.end('안녕');
}

람다함수 :
(req,res)=>{
res.statusCode=200; // 연결성공코드는 200번으로
res.setHeader('Content-Type','text/html;charset=utf8'); 인코딩 한글 깨짐 방지
res.end('안녕');
}
js =>
java ->

Express : node.js웹 애플리케이션 프레임워크,이다

Express 설치
1. 터미널에 npm install express --save 입력후 엔터
2. 폴더만들기 : md public 입력(디렉토리 생성)> dir입력 > cd.. 현재 폴더에서 나가서
cd nodeDev(여기 폴더로 들어와서) > cd public(그 안에있는 public 으로 들어가기)

+++

mysql 연결하기
1. 터미널에 npm install mysql 엔터 > 데이터베이스 관련한 패키지 설치됨
2. dbconn.js 파일 생성하고