class 기반의 객체지향 스타일로 진행될 것.
작성하는 것이 아닌 사용하는 것.
객체 지향 프로그래밍->객체 지향 상속 까지 듣고 들으면 더 좋아요.
component의 장점 3개
페이스북에서 ui를 더 잘만들기 위해서 페이스북에서 만든 자바스크립트 ui 라이브러리
페이스북 들어가서 검사-> 맨 위 선택->expand reclursively
하면 태그를 다 볼 수 있다.
1.가독성
<html>
<body>
<Top></Top>-> Top.html에 태그들 있음
<Sidebar></sideBar>->마찬가지
</body>
</html>top sidebar같은 것을 원래는 "사용자 정의 태그"라고 하는데 react 에서는 component라고 한다.
장점: 가독성을 획기적으로 높일 수 있다.
2.재사용성
한번 정의 해 놓으면 여러곳에서 재사용할 수 있다.
Top.html에서의 코드를 다른 곳에서 으로 쓸 때 변경 사항도 동시다발적으로 이루어진다.
즉
3.유지보수가 쉽다
어떻게 하면 빨리 독립할 수 있을까..
시작에 앞서 개발환경
toolchain
->우리가 리액트로 app을 만든다고 할 때 필요한 개발도구? 환경을 구축하는데 필요한 것들 모두를 제공해주는 것.
react설치...
터미널 이용해 설치에 관해서는 짧게 글을 하나 더 썼음.
(npm이 아닌 npx를 이용한 설치는 임시로 설치해서 딱 한번만 사용할 때 쓰는 것.-=>컴퓨터의 용량을 낭비하지 않는다. ->매전 깔아서 하니까 항상 최신의 것을 사용한다.)!
여기에 있는 두 주소중에 하나로 들어가서 내가 만든 것의 결과를 볼 수 있다.
컨트롤+알파벳 c를 누르면 웹 앱 꺼진다.
npm run start로 다시 웹 앱 시작.
어떤 디렉토리가 있을까.
크게
1. public
2. src
파일로 나눠져 있다.
1.public
->index.html이 있는 폴더.
이 html파일에서 중요한건
div id="root"
가 있다는 것.
이 id가 root인 것에 들어갈 component들은 src 디렉토리 안에있는 파일들이다.
src
이 디렉토리 안에 있는 파일들 중에서 entry파일, 즉 진입파일이 될 것은 index.js 파일이다.
index.js 안에 보면 getElementById('root')가 있다.
그리고
여기에 있는 이 APP이 리액트를 통해 만든 사용자 정의 component 이다.
그래서 저 component의 실제 구현은 
이 import를 통해서
이 파일...
이 파일은 .js가 생략된건데
이 파일은 src디렉토리에 있는 App.js파일이다.
이 파일은
이 두 타입으로 되어있을 수 있는데, 우리는 class형식을 해볼 거니까 function형태로 되어있으면 class형태로 바꾸자.!
이거는 내가 깔고 실행했을 때 index.js의 첫 파일
이거는 웹애플리케이션의 개발자도구
이렇게 div태그 내의 다른 태그들이 그대로 홈페이지에 나오고 있다.
class형태여도 div태그 안에 만들어주면 된다.
여기 div안에!
css는 어디에서 수정하면 되는가
여기에서 import './index.css'
이게 src디렉토리에 있는 index.css 파일을 연결시킨 것이다.
이제 css안에 있는 샘플 css는 다 지우고 실습 환경을 구축
우리 지금까지 한 것.
- 실습환경 구축
- 코드 작성해서 실행
deploy 하기
여기에서 '캐시 비우기 및 강력 새로고침' 누르고 Network를 보면
1.7mb다운을 받았다고 나온다.
우리가 쓴 건 
이거밖에 없는데!
왜 많냐면, 리액트가 개발의 편의성을 위해서 여러가지 기능을 추가해놓은 상태이기 때문이다.
그래서 create-react-app의 파일은 무겁다.
하지만 우리가 사용자에게 이 사이즈를 쓰게 할 수는 없으니까...
npm run build
를 해야하는데 나에게는 오류.... 찾다가
sudo를 붙이면 된다고 해서 sudo run build로 성공했다!
그러면 이렇게 build 폴더가 생기고 이 폴더 안에 있는 index.html에 들어가보면 공백이 하나도 없고 읽을 수가 없다. 실제 프로덕션 환경에서 사용되는 앱을 만들기 위해서 공백과 같이 불필요한 것들을 쫙 살균시켜 모아놓은 것이다. src에 있는 파일들도 create-react-app이 알아서 쿵짝쿵짝 (ㅋㅋㅋ 귀엽다,,) 해서 용량을 줄인다던지 보안적으로 또는 심리적으로 좋지 않은 것(에러같은 것) 들을 없애서 만든뒤 html파일을 로드할 수 있도록 알아서 우리 대신 일을 해주는 것이다.
결론적으로 우리가 서비스를 할 때는 build안에 있는 파일들을 쓰면 된다.
그리고 웹서버의 document root/ 웹서버가 문서를 찾는 최상위 디렉토리에다가 build 안에 있는 static안에 있는 파일들을 위치시키면 된다.-> 실서버 환경 완성
npm을 통해 설치하는 간단한 웹 서버
npm install -g serve
라고 치면 앞으로 나는 내 컴퓨터 안에 어디에서나 serve라는 명령어를 통해서 웹 서버를 설치할 수 있다.
또는 npx serve 라고 쓰면 한 번 쓰는 용으로 다운받을 수 있다.
npx serve -s build 라고 쓰면 build라는 우리가 생성한 디렉토리를 다큐먼트 루트로 하겠다! 라는 의미다.
npx serve -s build를 쓰면 나오는 주소에 들어가면 그대로 실행되고 있고 network를 보면 용량이 125kb밖에 다운되지 않았다고 한다.
이렇게 이론적인 시간 끝!
