프로젝트 구조

package.json

npm 버전관리에 대한 정보 (라이브러리포함)
postcss 같은 유용한 패키지들이 자동으로 생성되어 있어 바로 사용가능.

**readme에 프로젝트에 대한 설명을 적기를 권장

node_modules

외부라이브러리 추가했을떄 폴더나 파일들이 구조로 생성및 관리되있음
(라이브러리의 이상함을 감지해 내부 구조를 확인할 수 있음)

manifest.json

pwa 사용과 관련된 파일

**프로젝트 생성시 깃이 자동으로 생성되게 되있음 (.git)

BAbel이란?

Js,TS ->old JS ver (compiling)

Webpack이란?

bundling

Eslint

Check code

Jest

unittesting framework

postCss

expandable libraries

그외 크롬 툴

react developer tool
리액트로 만든 품목들의 콤퍼넌트를 확인할 수 있다.

그외 vs코드 툴

reactjs code snippets
rcc ris 같은 단축키만으로, 간단한 스켈레톤 프레임을 생성하는 툴
auto import
모듈경로 자동 완성기능

리액트의 virtual dom tree 와 dom tree의 차이
리엑트의 경우 데이터 일부가 변경된 경우 이전 데이터와 비교하여 수정된 내용만 업데이트 한다.

컴퍼넌트
class형 라이프사이클 메써드(state)
함수형(React Hook)

class 형 컴퍼넌트를 기피할때의 이유

binding issue
디자이너들이 보기 어려운 구조
but
binding의 경우 여러가지 기능을 넣었을떄 복잡하게 되지만
api같은 하나의 기능으로서 일부부분을 제한적으로 분산시켜
binding하는 경우 가독성도 좋은 점이 있어 class형과 함수형을 적재적소에 사용하는 것이 제일 이상적이다.

app.jsx, app.js 로 구분해서 사용하는 이유는 리액트 문법으로 사용되는 것인지 자바스크립트로 작성된 것인지 확인하기 위함

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import '@fortawesome/fontawesome-free/js/all.js';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reactDom을 호출하고 index.html에 있는 root에 연결되면서 App컴퍼넌트를 그려줌