React basic

React Practices - Bascis

ex00. cra: create-react-app(cra) 으로 애플리케이션 빨리 만들어 보기
ex01: 전통적인 DOM API 기반의 애플리케이션
ex02: 애플리케이션1: 애플리케이션 분리

• 1. 복잡한 애플리케이션은 코드를 분리해서 개발하는 것이 원칙
• 2. 애플리케이션 코드를 여러 js 파일로 옮기는 단순한 방식
  • 전통적인 분리 방식
  • 브라우저가 js 파일에 로딩 순서를 보장하지 않는다.
  • 복잡하고 분리 파일이 많아 지면 의존성 관리 자체가 불가능
    ( index.js는 app에 의존하고있기때문에 의존성을 보장해주는 방법이 필요 :
    자바스크립트에선 require.js, amd로 해결 ex6에서 언어적으로 모듈시스템제공)

ex03: 애플리케이션2: ES6 모듈 시스템

• 1. 프론트엔드 애프리케이션이 수십, 수백 개의 모듈로 분리된 경우, 브라우저에서 개별적으로 이 모듈들을 import하는 것이 상당히 비효율적이다.
• 2. 프론트엔드 애플리케이션은 자바스크립트 외에 다양한 에셋(css, images, font)에 대한 로딩 동기화도 고려해야 한다.: 같은것들
     브라우저가 검색못하고

ex04: 번들링: webpack

• 1. webpack은 작게 분리된 많은 애플리케이션 모듈(js, css, image)들의 의존성을 분석해서 하나의 js파일로 묶은 도구
• 2. 하나의 js 파일을 번들(bundle)이라하고 묶는 작업을 번들링(bundling)이라고 한다.
• 3. 번들링은 단순히 모듈들을 하나의 파일로 묶는 작업만을 의미 하지 않는다. -> 빌드작업도 한다.
• 4. 빌드 작업
     1) linting(ESLint, 문법체크) 작업 기본작업
     2) document 작업(JDoc) 작업
     3) test(Mocha, Jest) 작업
     4) 난독화/압축(Uglyfy) 작업 기본작업
     5) 번들링 기본작업
• 5. 자바스크립트 뿐만 아니라 다양한 에셋(image, css, font)들도 모듈로 취급 한다.
• 6. $ npm i -D webpack webpack-cli
     $ npm .\node_modules.bin\webpack --version
     $ npx webpack --version
     npx webpack ./src/index.js

ex05: React API 기반 애플리케이션 리펙토링

• 설치:
  $ npm i -D webpack webpack-cli webpack-dev-server style-loader css-loader sass-loader node-sass
  $ npm i react react-dom

ex06: React JSX 기반 애플리케이션 리펙토링 : babel(transpiling)

• 설치:
  $ npm i -D webpack webpack-cli webpack-dev-server babel-loader style-loader css-loader sass-loader node-sass @babel/core @babel/cli @babel/cli @babel/preset-env @babel/preset-react
  $ npm i react react-dom

• 설정:
  babel: babel.config.json
  webpack: webpack.config.js

• package.json의 스크립트 추가하기{
  "start": "npx webpack serve --progress",
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "npx webpack"
  }

ex07: CRA로 만든 Application을 직접 설정해서 만들어 보기

• 설치:
  $ npm i -D webpack webpack-cli webpack-dev-server babel-loader style-loader css-loader sass-loader node-sass @babel/core @babel/cli @babel/preset-env @babel/preset-react
  $ npm i react react-dom

• 설정:
  babel: babel.config.json
  webpack: webpack.config.js

• package.json의 스크립트 추가 하기
  "scripts": {
  "start": "npx webpack serve --progress",
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "npx webpack"
  }

ex08: JSX Tutorial

• 1. 특징1: HTML과 차이점
• 2. 특징2: Single Root node
• 3. 함수 컴포넌트 만들기
• 4. Pure React(React API)로 컴포넌트 작성하기
• 5. 클래스 컴포넌트 만들기
• 6. 특징3: JSX 표현식 표기법 {expression}과 문제점
• 7. 특징4: 공백
• 8. Dynamic HTML Rendering
• 9. Comment

{}

• 설치:
  $ npm i -D webpack webpack-cli webpack-dev-server babel-loader style-loader css-loader sass-loader node-sass @babel/core @babel/cli @babel/cli @babel/preset-env @babel/preset-react
  $ npm i react react-dom

• 설정:
  babel: babel.config.json
  webpack: webpack.config.js

• package.json의 스크립트 추가하기{
  "scripts" :{
  "debug": "npx webpack serve --progress --mode development --env",
  "build": "npx webpack --mode production"
  }
  }

• 실행
  npm run debug src={01|02|03|04|...}

webpack-practices : 번들링 도구 (
babel-practices : 코드변환기 (JSX사용위해)

LockJson을 복사해서 패키지 정보들이 있기 때문에 npm i만 하면됨