ReactNextCentral
Published on

React! create-react-app 작별: Next.js와 현대 React 도구로의 미래를 포옹하다

React 개발 생태계에서 `create-react-app`의 추천 제거와 Next.js 같은 현대적인 도구의 강조에 관한 변화를 다룹니다. Next.js의 특징과 이점, 그리고 React 개발자 커뮤니티의 반응에 대해 소개합니다.
React! create-react-app 작별: Next.js와 현대 React 도구로의 미래를 포옹하다
Authors
Table of Contents

서론

React는 웹 개발 분야에 지울 수 없는 흔적을 남겼습니다. 여러 해 동안 그 경로는 다양한 관행, 기능, 도구의 변화를 목격했습니다. 가장 주목할 만한 최근의 변화 중 하나는 한때 사랑받았던 'create-react-app' (CRA)에서 벗어나는 것입니다. 이 글은 React 개발자들에게 이러한 변화와 React 생태계의 미래에 무엇이 기다리고 있는지에 대해 알려주려 합니다.

Create-React-App의 작별

React의 공식 문서는 더 이상 CRA를 새로운 프로젝트를 시작하기 위한 권장 사항으로 언급하지 않습니다.

아래 Pull Request를 보시면 알 수 있습니다.

Screenshot1

위 코멘트를 한글로 해석 하면 다음과 같습니다.

Create React App은 특히 초보 개발자들에게 추천하기 좋은 방법이 아닙니다. 교육자로서, CRA를 계속해서 추천하는 것 때문에 새로운 React 개발자들이 불필요한 문제에 부딪히는 것을 무수히 많이 보게 됩니다. 이에 대한 트윗을 올렸는데, 동의하는 개발자들의 양에 놀랐습니다. 여기서 제가 한 구체적인 변화에 얽매이려는 것은 전혀 아니며, 주로 새로운 베타 문서에서 추천하는 기술에 대한 토론을 기대하며 이를 열었습니다.

가장 공감을 얻은 댓글은 아래와 같습니다. Screenshot2

위 코멘트를 한글로 해석 하면 다음과 같습니다.

완전히 동의합니다. 지금은 CRA에 대한 좋은 대안이 있으며 React는 그것들을 더 두드러지게 표시해야 합니다. 그러나 Vite의 대안인 Parcel의 유지 관리자로서 React가 특정 도구나 프레임워크(Next.js와 다른 프레임워크와 마찬가지로)를 특별히 선호하지 않기를 바랍니다. CRA가 React 팀에 의해 유지되었기 때문에 어느 정도 말이 되지만, 그렇지 않을 때는 더 어렵습니다. 각 옵션에 대한 간략한 설명과 그것이 가장 적합한 내용, 그리고 다른 옵션과의 차이점에 대한 세부 정보가 있으면 좋을 것 같습니다.

예를 들면, "SPA를 만들고 있다면 Vite와 Parcel은 좋은 선택입니다. Vite는 React와 다른 프레임워크와 함께 작동하는 번들이 없는 개발 서버이며... Parcel은 React와 잘 작동하는 사용하기 쉬운 번들러입니다... 서버 렌더링 앱을 만들고 있다면, Next.js와 Remix는 좋은 선택입니다. Next.js는 파일 시스템 라우팅, 서버 컴포넌트가 있는 React 프레임워크입니다... Remix는 웹 표준에 중점을 둔 React 프레임워크입니다... 정적 웹사이트를 만들고 있다면, Gatsby는 좋은 선택입니다. Gatsby는..." 이런 것들은 정말 대략적인 설명입니다. 이러한 도구의 작성자에게 짧은 요약을 요청하는 것이 좋을 수 있습니다.

이 결정에 기여한 여러 가지 이유가 있습니다:

  1. 성능 문제 CRA는 속도면에서 최신 도구에 비해 뒤처졌습니다.

예: CRA를 사용하여 앱을 구축할 때 다른 최신 도구들에 비해 더 긴 로딩 시간이 걸릴 수 있습니다. 특히 큰 프로젝트에서는 복잡한 모듈 번들링으로 인해 개발 서버의 시작 시간이 늘어날 수 있습니다.

  1. 무거운 설정: 초기 설정 과정이 다양한 종속성을 관리해야하는 번거로움이 될 수 있습니다.

예: CRA를 처음 설치할 때 많은 개발자들은 다양한 설정과 플러그인을 직접 추가하여 원하는 환경을 만들어야 할 수 있습니다. 예를 들면, TypeScript나 특정 CSS 프레임워크와 같은 추가 도구나 라이브러리를 설정하는 것이 복잡해질 수 있습니다.

  1. 오래된 종속성: CRA는 종종 설치 과정에서 경고를 일으킬 수 있는 오래된 종속성을 사용합니다.

예: CRA를 설치하거나 업데이트할 때, 사용 중인 특정 라이브러리나 플러그인이 최신 버전이 아닌 경우 경고 메시지가 출력될 수 있습니다. 이러한 경고는 보안 문제나 호환성 문제를 야기할 수 있어 개발자들이 추가적인 조치를 취해야 할 수 있습니다.

이러한 도전 과제들, 특히 초보자들에게 React 팀이 더 현대적이고 효율적인 대안을 고려하게 만들었습니다.

Next.js 및 기타 프레임워크의 부상

CRA의 감소로 인해 Next.js 및 Remix와 같은 프레임워크가 새로운 선두주자로 부상했습니다. Next.js에 대해 좀 더 자세히 살펴보겠습니다:

Next.js란 무엇인가?

  • 빠른 웹 애플리케이션 개발을 위한 필수 구성 요소를 제공하는 견고한 React 프레임워크입니다.
  • 프레임워크로서, React를 위한 도구 및 구성을 처리하며 애플리케이션에 필요한 추가 구조, 기능, 최적화를 제공합니다.

왜 Next.js를 고려해야 하는가?

Screenshot1

  1. 더 빠른 성능: Next.js는 서버 측 렌더링(SSR)을 활용하여 페이지의 HTML을 사전 렌더링합니다. 이는 사용자가 첫 방문 시 JavaScript를 로드하기 위해 기다릴 필요 없이 완전한 HTML 콘텐츠를 접하게 한다는 것을 의미합니다.
  2. SEO 이점: SSR 기능은 검색 엔진이 페이지의 렌더링된 HTML을 쉽게 색인 할 수 있도록 도와 SEO를 강화합니다.
  3. 풍부한 기능 세트: Next.js는 자동 코드 분할 및 동적 라우팅과 같은 다양한 내장 기능을 제공합니다.
  4. 활발한 커뮤니티: 활발한 커뮤니티는 계속해서 새로운 도구와 자원을 만들고 있어 도움이 필요할 때 언제든지 지원을 받을 수 있습니다.
  5. 우수한 문서: 체계적인 문서는 도구의 사용을 쉽게하고 명확성을 제공하는 데 도움을 줍니다.

더불어, Next.js의 학습 플랫폼은 실시간 웹 개발 시나리오에서 기술을 연마하는 데 도움이 되는 경험적인 여정을 제공합니다.

React Dev의 신규 설치 가이드

아래 화면처럼 이제 기본으로 Next.js 기반 Framework 사용을 권고합니다.

Screenshot1

이제 아래와 같이 npx create-next-app@latest my-react-app 명령어로 새로운 React 웹 앱을 개발 하세요!!

# Create a new project using Next.js
npx create-next-app@latest my-react-app
cd my-react-app

# Start the development server
npm run dev

결론

React 우주는 항상 흐름 속에 있으며, 최고의 도구, 프레임워크 및 관행을 포용하기 위해 계속 발전하고 있습니다. CRA에서의 이동은 일부에게 놀라운 일일 수 있지만, Next.js, Remix 및 Vite와 같은 수많은 대안이 개발자들에게 놀라운 웹 애플리케이션을 만들기 위한 최고의 준비를 보장합니다. 개발자로서 프로젝트와 전문 기술 수준에 가장 잘 어울리는 도구를 선택하는 것이 중요합니다.