20210826~20210828 TIL

실전 리액트 프로그래밍

[리액트란 무엇인가]

• 자동으로 업데이트 되는 UI
• UI = render(state)
• render 함수는 순수 함수로 작성
• 랜덤 함수 사용(X)
• 외부 상태 변경(X)
• state는 불변 변수로 관리
• 가상 돔(virtual dom)

[리액트 개발 환경 직접 구축하기]

• react.development.js
  https://unpkg.com/react@16/umd/react.development.js
• react-dom.development.js
  https://unpkg.com/react-dom@16/umd/react-dom.development.js

<div>
    <p>hello</p>
    <p>world</p>
</div>

createElement

React.createElement(
    'div',
    null,
    React.createElement('p', null, 'hello'),
    React.createElement('p', null, 'world'),
);

[바벨 사용해 보기]

• 자바스크립트 코드를 변환해주는 컴파일러
• 최신 자바스크립트 문법을 지원하지 않는 환경에서도 최신 문법 사용 가능
• 그 외에도 다양한 용도로 사용
  • 코드에서 주석을 제거하거나 코드를 압축...
• 리액트에서는 JSX 문법을 사용하기 위해 바벨을 사용
• JSX 문법

<div className="box">
    <Title text="hello world" width={200} />
    <button onClick={() => {}}>좋아요</button>
    <a href="/home" style={{ marginTop: '10px', color: 'red' }}>
        홈으로 이동
    </a>
</div>

브라우저에서 실행하면 syntax 에러 발생

• npm으로 패키지를 관리할 때는 package.json 파일 필요

npm init -y

• 바벨 설치

npm  i @babel/core @babel/cli @babel/preset-react

@babel/core - 바벨의 핵심 기능을 가지고 있는 패키지
@babel/cli - cli에서 사용할 바이너리가 들어 있음
@babel/preset-react - 리액트를 위한 플러그인 여러 개를 모아 놓은 것

• 바벨 실행

npx babel --watch src --out-dir . --presets @babel/preset-react

watch 모드 - 파일이 변경될 때마다 컴파일을 자동으로 해줌

[웹팩 사용해 보기]

웹팩의 기본 개념 이해하기

• 다양한 기능 제공
  • 파일 내용을 기반으로 파일 이름에 해시값 추가 → 효율적으로 브라우저 캐싱 이용
  • 사용되지 않은 코드 제거
  • 자바스크립트 압축
  • JS에서 CSS, JSON, 텍스트 파일 등을 일반 모듈처럼 불러오기
  • 환경 변수 주입
• 웹팩을 사용하는 가장 큰 이유 ⇒ 모듈 시스템(ESM, commonJS)을 사용하고 싶어서
• 요즘 브라우저는 ESM 지원, 하지만
  - 오래된 브라우저
  - 많은 오픈 소스가 commonJS로 작성됨
  
  serve 패키지 사용 (로컬에 있는 파일들을 정적 파일로 서비스할 수 있음)

npx serve

webpack 설치

npm install webpack webpack-cli

webpack 실행

npx webpack

[create-react-app으로 시작하기]

• create-react-app → 리액트 개발 환경을 구축해주는 도구
• 리액트 개발 환경을 직접 구축하려면 많은 지식과 노력이 필요
  - webpack / babel(빌드 시스템 구축) , jest(테스트 환경 구축), eslint(코딩컨벤션 정하고 자동으로 체크), polyfill(오래된 브라우저 지원), HMR(Hot module Replacement, 개발을 할 때 코드를 수정하면 화면에 바로 적용), CSS 후처리(css 컴파일, 벤더 접두사(prefix)) ...
• 페이스북에서 관리하는 공식 툴
• cra - 서버사이드 렌더링 지원 X / Next.js - 서버사이드 렌더링 지원
• 코드를 수정하면 바로 화면에 적용(HMR) > npm start로 실행을 했을 때 로컬에 서버를 띄워서 브라우저와 통신을 하기 때문에 가능

[CRA의 4가지 명령어]

package.son

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

실행

npm start

• 기본적으로 http로 실행이 됨

HTTPS=true npm start

• https로 실행
  
  배포

npm run build

• 배포할 때 사용, 정적 파일 생성

npx serve -s build

• 로컬에서 정적 파일을 서비스 하기 위해 serve 패키지 사용
• 빌드할 때 큰 사이즈의 이미지는 media 폴더에 생성,
  작은 사이즈의 이미지는 JS에 내장(http 요청 횟수를 줄이기 위해, 좀 더 빠르게 이미지를 보여줄 수 있다)
  
  테스트

npm test

• App.spec.js도 테스트 파일로 인식, test 폴더 밑의 모든 파일은 테스트 파일로 인식
  
  추출

npm eject

• CRA를 기반으로 직접 개발환경을 구축하고 싶을 때 사용, react-scripts를 사용하지 않고 모든 설정 파일을 추출 (추출하면 수동으로 설정 파일을 수정해야 하는 단점)

[polyfill]

• 오래된 브라우저 지원하기 위해 사용
• core-js (CRA에 기본적으로 내장)
  https://github.com/zloirock/core-js
• index.js에 import
  ex) core-js(-pure)/es|stable|features/string(/virtual)/pad-start

 import 'core-js/features/string(/virtual)/pad-start'

[환경변수]

• 개발,테스트 또는 배포 환경별로 다른 값을 적용할 때 유용
• 전달된 환경변수는 코드에서 process.env.{변수 이름}
• CRA에서는 기본적으로 NODE_ENV라는 환경변수를 갖고 있음 ( process.env.NODE_ENV)
  npm start로 실행하면 development( process.env.NODE_ENV devlelopment )
  npm test로 실행하면 test( process.env.NODE_ENV test )
  npm run build로 실행하면 production ( process.env.NODE_ENV production )
• 환경 변수가 많아지면 .env 파일로 관리하는 것이 좋음 ( src 폴더 밑에 만들지 말고 src 폴더 옆에 만들어야 함)

ANIMAN 클론코딩

• 로그인 체크 기능 구현
• 장바구니 / 상품 상세 페이지 추가 작업

드림코딩 TS

• 유튜브 URL 만들기
• 정규표현식 REGEX
• 페이지 아이템 컨테이너 만들기
• 아이템 삭제 기능 구현하기
• DI 디펜전시 인젝션 리팩토링
• 클래스들 간에 서로 지나치게 밀접하게 연관되어져 있으면 유지보수성, 확장성이 떨어진다.
  --> 인터페이스로 정의해서 클래스 간에 인터페이스를 통해서 대화하는 것이 좋다.