JS개발을 어떻게 빨리 시작하는지1부: CRA vs Next.js vs 개츠비

이 자료는 처음에 코디카 블로그에 글의 일부How to Start ReactJS Development Fast: 3 Solid Tools and Best Practices로 발표되었다.
이 글에서 우리는 가장 유명한 기존 해결 방안을 토론하고자 한다. 이 해결 방안들은 당신이 많은 노력을 기울이지 않고 React 응용 프로그램을 개발하는 데 도움을 줄 것이다.또한 Google은 일반적인 React Redux 프로젝트 구조에 대한 최선의 실천을 보여 드리겠습니다.그것은 당신이 프로젝트를 정확하게 기획하고 분해도를 쉽게 읽을 수 있도록 할 것이다.

React 개발 도구: CRA vs Next.js vs 개츠비
우선, 우리는 create-react-app (CRA), Next.js, Gatsby 등 소스 공급 도구를 토론하고 싶다.이들의 도움으로 ReactJS 프로젝트를 개발할 수 있습니다. 설치 과정에서 시간을 낭비하지 않고 기본적인 구조 템플릿과 최소한의 기능을 제공할 수 있습니다.이렇게 하면 너는 신속하고 순조롭게 발사할 수 있다.물론 필요하면 응용 프로그램 구조 설정도 변경할 수 있다.
이제 이 도구들을 개술하고 비교하며 그것들의 장단점, 구체적인 특성과 주요 차이점을 토론합시다.

CRA
Create-react-app(CRA)는 페이스북이 디자인한 도구다.ReactJS 애플리케이션을 개발할 때 이 솔루션은 빠른 시작을 제공합니다.유지 보수가 가능하고 사용하기 쉬운 React 응용 프로그램 프레임워크를 만들면 시간 소모되는 설정 과정을 피할 수 있습니다.이 도구는 모든 기본 의존 항목, 패키지를 설치하고 기본 디렉터리 구조를 생성합니다.
도구를 설치하고 React 응용 프로그램 개발을 시작하려면 다음 명령줄을 실행합니다.

npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start

관련 보기: 4 Useful Git Commands That Will Make Your Life Easier

다음.js
간단히 말해서 Next.js는 서버 렌더링과 정적 응답을 만들 수 있는 경량급 프레임워크입니다.js 응용 프로그램은 매우 간단합니다.이 프로젝트를 실행하려면 서버가 필요합니다. 이 서버는 실행할 때 HTML을 생성합니다.이것은 새로운 요청이 들어올 때마다 서버에서 새로운 HTML 페이지를 생성한다는 것을 의미한다.
더 잘 이해하기 위해 다음을 보세요.js 워크플로우 상세 정보:
다음은 이 프레임워크의 핵심 기능입니다.

서버측 렌더링;

정적 파일 생성;

자동 부호화;

프리페치;

핫 모듈 교체 및 오류 보고

도구를 설치하고 Next를 사용하여 React 애플리케이션 개발을 시작합니다.js, 다음 명령줄을 실행합니다.npm install --save next react react-dom그런 다음 패키지에 스크립트를 추가합니다.json:

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

마지막으로 다음 명령을 실행합니다.npm run dev
게이츠비
Create react 응용 프로그램은 클라이언트 렌더링을 제공합니다. 다음입니다.js는 서버 쪽 렌더링을 제공하지만 Gatsby는 소스 오픈 프레임워크로 빠른 정적 사이트 생성기를 가리킨다.
만약 당신이 정적 사이트 생성에 있어서 초보라면, 우리는 그것이 어떻게 작동하는지 토론해 봅시다.따라서 정적 사이드 생성기는 '구축' 단계에서 HTML 코드를 생성하는 생성기입니다.실제로 일부 API, 태그 파일 등에서 데이터를 가져와 실행할 수 있습니다.
다음과 같은 방법으로 개츠비를 사용하여 ReactJS 애플리케이션을 쉽게 개발할 수 있습니다.

npm install -g gatsby-cli
gatsby new gatsby-site
cd gatsby-site
gatsby develop

CRA 대 Nextjs와 게이츠비: 간단한 비교
토론의 개원 해결 방안의 모든 면을 회복하기 위해 간단한 대비표를 봅시다.
표준
react 응용 프로그램 만들기
다음.js
게이츠비
마지막 단계
브라우저
서버
건조
검색 엔진 최적화
낮았어
중등
중등
배치하다
중등
중등
쉬웠어
학습 곡선
낮았어
추가로 필요한 배지: 반응.js+다음.js API
높은 추가 요구 사항: React+GraphQL+다중 게이츠비 API
출력
JavaScript 파일 번들
HTML(초기 로드) + 코드 분할 블록
정적 빌드 파일(HTML+CSS+JS)
너는 아마도 재미있는 일을 발견할 수 있을 것이다: The Power of CSS Processors in Web Applications Development

마지막 말
시간이 걸리는 설치 과정을 건너뛰고 React 응용 프로그램 개발을 빠르게 시작하려면 CRA,Next 등 광범위한 소스 오픈 도구를 사용하십시오.js와 게이츠비.이 해결 방안들은 모든 기본 의존항과 패키지를 자동으로 설치하고 프로젝트를 정확하게 구축하는 데 도움을 주기 위한 것입니다.
다음 섹션에서는 전문가가 제공한 코드 샘플을 사용하여 React Redux 프로젝트 구조에 대한 최상의 실천을 제공할 것입니다.
계속해서 저희 전문을 보시고 읽어 주십시오: How to Start ReactJS Development Fast: 3 Solid Tools and Best Practices.