React Router공부하는데 정리가 잘 안되어서 다른 부분부터 정리하려고 임시저장을 해두었다.. 이렇게 임시저장한게 몇갠지.. 언넝 마무리 지어야하는데
1을 알아보려고 했는데 이거에 대한거 모르는게 너무 많아서 타고 타고 타고 타고 타고 타고 타고 타고 타고 타고 타고 타고 들어가다보니 무한루프 빠진기분 그래도 어쩌겠는가. 하나씩 해치워야지! 일단 빠르게 할 수 있는 것부터 하려고 합니다.

툴체인(tool chain)

• 주로 다른 컴퓨터 또는 시스템의 소프트웨어 제품을 만드는데 사용되는 컴퓨터 프로그램 개발 도구들의 집합

리액트 툴체인은 리액트 작업을 위한 개발도구들을 모아놓은 것이라고 생각하면 될 것 같다..!

React

리액트를 만들기 위한 여러 방법(리액트 팀 추천)
1. React를 배우고 있거나 새로운 싱글 페이지 앱을 만들고 싶다면 Create React App(CRA)
2. 서버 렌더링 Node.js 웹사이트를 만들고 싶다면 Next.js
3. 고정적인 콘텐츠 지향적 웹사이트를 만들고 싶다면 Gatsby
4. 컴포넌트 라이브러리 혹은 이미 있는 코드 베이스 통합을 원한다면 더유연한 툴체인이 있다고 합니다..(얘는.. 당장 저에게 필요없을거같아서 과감히 패스~)

Create React App

• react를 배우기에 간단한 환경
• node 14.0.0이상, npm 5.6 이상 버전 필요
• npx create-react-app 폴더이름으로 만들 수 있음
  • npx는 npm 5.2이상 버전의 패키지 실행 도구
  • 설치시 다음과 같은 구조로 생성 됨

my-app(폴더이름)
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
    └── setupTests.js

• 백엔드 로직이나 데이터 베이스 제어 불가
• front-end 빌드 파이프라인만 생성하기 때문에 어떤 back-end와도 함께 사용가능
• babel이나 webpack과 같은 build도구를 사용하나 설정 없이도 동작(함께 구성되어있어 따로 설치도 필요없음)

  • Babel이란 ?

    • 대표적인 트랜스 파일러 : 특정언어로 작성된 코드를 비슷한 다른언어로 변환 시키는 것

  • Webpack이란?

    • 자바스크립트 기반의 모듈 번들러(Module Bundler) : 여러개의 파일((HTML, CSS, Javascript, image, font 등))을 하나의 파일(혹은 여러개의 파일)로 병합 및 압축해주는 것

• 3000번 포트에서 동작
• React, JSX, ES6, Typescript, Flow syntax 지원
• obejct spread 연산자와 같은 ES6이상 언어 기능
• CSS에 접두어를 자동으로 만들어두어 -webkit이나 다른 접두어를 사용하지 않아도 됨
• 개발서버 이용시 일반적인 실수에 대한 경고
• 단점은 도구들이 특정방식으로 미리 구성되어있기 때문에 사용자 정의가 필요한 경우 eject하고 customizing할 수 있지만 이전 구성을 유지해야한다.
  이러면 또 eject가 뭔지 궁금하고.. 끝이안납니다 하지만 오늘은 여기까지만 알아볼 예정

Next.js

인기있는 경량 프레임 워크로 React로 만들어진 static sever side rendering(SSR) 어플리케이션
풀스택 프레임 워크답게 API기능 및 서버 컴포넌트를 통한 서버측 기능과 React 컴포넌트를 통한 클라이언트 기능으로 나뉘어 통합 제공하는 프레임워크. node.js 기반의 안정적 프레임워크이며 Static site generation(SSG) 방식 또한 제공, react는 CRA였으면 next.js는 CNA(Create next app)으로 만든다!

Gatsby

정적 웹사이트를 React로 만드는 최고의 방법! React 컴포넌트를 사용하지만 미리 렌더링 된 HTML과 CSS를 사용하여 가장 빠르게 로드됨

CRA, SSR,SSG 너 공부했다... 까먹지말아라...

참고 : CRA 깃헙, React document