create-react-app 은 레거시화 되었다. - 빠르게 변화하는 웹 진영 템플릿에 대한 생각

제목 : create-react-app 은 레거시화 되었다. - 빠르게 변화하는 웹 진영 템플릿에 대한 생각

---

이 글을 작성하는 이유 :

create-react-app 이라는 명령어는 주로

$ npx create-react-app <생성할 프로젝트 디렉토리 이름>

혹은

$ npm init create-react-app <생상할 프로젝트 디렉토리 이름>

이러한 명령어로 기본 템플릿이 생성되었다.

처음부터 제작할 필요가 없이, 개발 환경을 곧바로 세팅해 주는 마법의 명령어는

얼마나 파급력이 있었는지 "CRA" 라는 명칭으로 불릴 정도였다.

그러나, 현재 이 명령어는 Deprecated 되었다. 공식적으로 더 이상의 지원은 없다.

이 말은, 앞으로 나올 지속적인 신 기능이 CRA 명령어를 통해서는 곧바로 적용이 되지 않는다는 것이다.

이에 대한 자세한 내용은

create-react-app 레포지토리

이 링크를 통해 확인하면 알 수 있다.

심지어는 리액트의 공식 문서 사이트도 react.dev 라는 도메인으로 옮겨갔다.

기존 공식 문서는 "인간의 빠른 학습" 에 초점이 맞춰져 있었다면,

이번 문서는 가상 에디터에서 따라쳐서 학습하거나, AI 에게 선택지를 제공하는 것 처럼 느껴졌다.

그렇지 않고서야, 중간에 존재하는 그 수없이 많은 방법론들,

Babel, JSX, Webpack, npm, package.json .... 등등등

이러한 언급 없이 아주 빠른 기초 프로젝트 생성에만 대부분 초점을 맞출 리가 없다고 생각했다.

또한, 이제는 리액트가 자체적으로 자신들만의 라이브러리로 시작하는 것을 추천하기보다는,

React 의 라이브러리를 통해 프레임워크를 구축한 다양한 프로그램을 추천하고 있다.

즉, 풀스택 프로젝트로 시작하기를 권장하고 있는 것이다.

웹 페이지 제작을 HTML + JavaScript 로 시작하는 사람과, React 로 시작하는 사람이 나뉠 정도로

정말 많다.

그런데, 웹 페이지만 만드는 것이 아닌, 갑작스런 풀스택 프레임워크 우선 추천은 내 입장에서는 황당했다.

이젠 그 정도로, AI 가 웹페이지를 더 잘 만드는 세상이 왔다고도 생각이 든다.

너무나도 프로젝트 생성 방식이 많아진 현 상황에서,

이러한 생성 방식들을 하나씩 살펴 보며 리액트의 의도와 웹 페이지의 미래 향방을 예측해 보기로 했다.

CRA - create-react-app 명령어는 왜 레거시가 되었을까?

이제는 create-react-app 과 동일한 프로젝트를 생성하기 위해서는,

Vite 라는 프로그램이 주관하는 리액트 프로젝트로 시작하는 것이 비슷할 것이다.

도대체 왜, CRA 는 레거시가 되었을까?

현재 facebook 의 create-react-app 레포는 공식적으로 2021년 Deprecated 가 되었다.

https://ko.react.dev/learn/creating-a-react-app

이 React 공식 사이트의 "새로운 React 앱 만들기" 를 들어가 보면,

"React 로 새로운 앱 혹은 웹사이트를 구축하려면 프레임워크부터 시작" 하라고 말한다.

그리고, 공부를 원하거나, 자체 프레임워크를 사용하고 싶다면 다른 명령어로 구축하라고 말한다.

따라서 처음부터 React 앱을 만들 수 있는 명령어들을 살펴보면,

• Vite
• Parcel
• Rsbuild

이 3 가지를 추천한다.

단순한 웹 페이지 제작에 사용되는 이 3 개의 프로그램은,

기존 CRA 에 탑재된 기능들보다 우월하다.

즉, 빌드 속도, 테스팅, 리프레시 등등

CRA 에 엮인 수많은 기능들의 조합으로 인한 속도를 향상시켜준다.

리액트는 이미 전 세계적으로 유명한 웹 사이트 제작 라이브러리이다.

이제는 굳이 스스로 React 를 사용하기 위해 빌드 도구나 배포 도구를 만들 필요 없으며,

React 와 관련된 수많은 영역에서 다른 회사나 조직이 부족한 부분을 심화적으로 해결하여

열정적으로 보조하고 있는 것을 볼 수 있다.

이제 리액트는 지금까지 부족했던 최적화나 호환성 에러가 아니라,

신 기능에 집중해도 된다는 것이다.

기존 CRA 에 존재하던 난잡한 시스템

JavaScript 로 생성된 프로젝트들은 정말 수많은 의존성을 가진다.

이 의존성은 거대한 NPM 레포의 다른 패키지들을 가져와서 스스로의 패키지를 완성한다.

문제는, 이러한 패키지 의존성 문제는 자체적으로 중복 다운로드를 거부하여 차단할 수 있는데,

리액트라는 기초 템플릿을 완성하는 과정에서, 구성된 "프로그램" 의 문제가 생긴다. (패키지 아님)

이러한 프로그램들은 리액트에서 코드 작성, 빌드, 테스트, 명령어 등등 다양한 구역을 담당한다.

또 이런 프로그램들을 모아서 순서가 맞게 실행하는 것이 Webpack 이었는데,

이제는 Webpack 의 기능까지 아우르며, 더 확장된 기능 편의성까지 담당할 수 있는 프로그램,

대표적으로 Vite(예시 - 단순 웹), NextJS(예시 - 풀스택) 과 같은 프로그램들이 나오기 시작하면서,

CRA 의 위상은 꺾여 갔다.

그렇다면, CRA 대체제는?

옛날에 생성했던 웹 페이지와 스타일링, request agent 를 생성하여 커스텀하며 배워간다면 CRA 가 옳고,

CRA 와 방식은 동등하나, 3년 이내의 최신식 기능을 사용하기 위해서는 vite 를 통해 만들어야 한다.

물론, vite 외 다른 프로그램들도 존재하며, 대표적으로는 vite 이다.

vite 는 npm, yarn, pnpm 중 하나를 선택하여 의존성을 관리할 수 있게도 만들어 준다.

이는 vite 로 프로젝트 시작 시, 콘솔에 나타나는 선택 창으로 직접 선택할 수 있다는 편리성이 존재한다.

뿐만 아니라, Go, Rust 와 같이 최적화 된 빌드 시스템으로 테스트 할 수 있다.

도대체 왜 React 는 풀스택 프로그램을 강력하게 추천할까?

나는 만들어진 소프트웨어 제품의 "사용법" 만 알고, "원리" 를 모르면 한계가 명확하다고 생각하는 사람이다.

따라서, 이전에 나는 Webpack 을 주제로 긴 글을 작성한 적도 있다.

뿐만 아니라, JSX 없이 리액트 프로그램을 작성하는 법이나,

0 에서 리액트 프로젝트까지 제작하는 법을 다뤘었다.

내부에 적용된 사람의 방법만 해도 수십가지가 족히 넘을 것이라고 단연코 예상한다.

적용된 방법 하나만 집중적으로 공부해도 생각보다 긴 시간을 집중해야 한다.

적용된 프로그램의 원리를 이해하기도 바쁜데, 이제는 리액트 프로젝트가 프로덕션이 되는 것을

논리적으로 이해할 수 있는 것이 아니라, 만들어 둔 사람의 방식을 이해하고 받아들여야 하는 수준이다.

처음에는 너무나도 많은 방향이 존재하여 불만이 조금 존재했지만, 공식문서를 읽으며 이내 그 이유를 알 것 같았다.

그 이유는, "굳이 작동 원리를 이해할 필요가 없는 세상이 왔다" 라는 판단이 들었다.

물론, 복잡하게 엮인 각 프로그램의 역할을 하나로 묶어 관리하는 프로그램은 관리 측면에서 너무나도 편리하다.

웹 페이지의 작동과 목표, 보안, 스타일링 등등에만 집중할 수 있기 때문이다.

현재 누가 index.html 내부를 신경쓰고 있을까? 대부분은 지원되는 메서드나 기능으로 메타데이터를 주입하고 관리 할 것이다.

그리고 목적에 맞는 다양한 프로그램이 존재할 수록, 사용하기 좋아지는 것은 AI 이다.

나도 참 아이러니 했는데, C 로 커스텀 제작한 HashMap 의 경우 수정 요청을 하면 에러를 일으키는데,

인공지능이 제작한 자바스크립트 코드는 틀린 것을 본 적이 없었다.

그만큼 JavaScript 가 자연어와 비슷하다는 소리이기도 하고, AI 가 이해하고 작성하기에도 편하다는 것이다.

나는 현재 대부분의 프로그래밍 언어들이 AI 를 지향한다고 강력하게 예상한다.

그 이유는, AI 가 코드를 작성 해 주는 것이 있겠지만,

그보다도 특정 프로그램을 제작하기 위해 AI 는 "너무 깊이 생각 할 필요가 없는" 프로그램을 선택 할 것이다.

또한, AI 에게 코드를 묻는 사람들에게도 엄청난 파장이 존재할 것이다.

예를 들어서, 누가 콘솔 프로그램을 만들어 달라고 AI 에게 부탁한다면,

AI 는 가장 편한 JS 혹은 Python 을 이용하여 콘솔 프로그램을 만들어 낼 것이다.

새로운 개발의 세상은 풀스택을 요구한다.

거대한 회사의 경우 개발에 분업화가 이루어져 특정 목적만을 담당하는 코드를 작성 할 것이다.

예로부터 전해 내려오는 분업을 예를 들자면, 프론트엔드, 백엔드, 데이터베이스 로 나눌 수 있을 것이다.

그러나, 현재 AI 로 인해 개발이 매우 편해 진 세상에서, 간단한 웹 페이지를 제작하기 위해

사람을 고용하지는 않을 것이다.

AI 와 더불어서 풀스택을 만들 수 있는 사람을 고용할 것이라는 것이다.

React 는 이러한 향방을 알고, 풀스택을 최우선 순위로 삼는다고 생각한다.

그렇다면, 우리는 어떠한 개발을 해야 하는가?

React 사이트를 보며, 이미 하나의 길은 알려줬다고 생각한다.

프론트엔드라는 영역 안에 갇혀 있는 것이 아니라, 여러 영역을 동시에 관리하는 웹 제작자가 되라는 것.

그렇기에 React 와 관련된 완성도 높은 프레임워크나 라이브러리를 추천하는 것이다.

웹 사이트도 제작하고, 정보를 관리하는 백엔드 쪽도 NextJS 로 관리할 수 있고,

NextJS 로 데이터베이스에 접근 할 수도 있다.

다른 방법은 무엇이 있을까?

다른 방향은 명확하다고 생각한다.

AI 가 사용하기 좋은 프로그램을 제작하는 것이다.

내가 생각하는 개발의 미래는 2 가지라고 생각한다.

첫 번째로는 AI 와 협업하여 다양한 영역을 두루 관리하는 사람,

두 번째로는, AI 가 사용하기 좋은 프로그램을 제작하는 사람이다.

AI 가 사용하기 좋은 프로그램이란 정확히 정의되기 어렵다고 생각한다.

AI 가 사용하기 좋은 자연스러운 프로그래밍 언어를 의미하거나,

어떠한 상황에서도 서버를 띄울 수 있는 python3 개발 서버와 비슷한 프로그램을 만들거나.

혹은, 관리하기 힘든 클라우드 인프라에서 사용할 수 있는 공인된 암호 관리 프로그램을 만들거나.

즉, 어떤 방향을 선택해도 쉬운 길은 절대로 없다는 게 포인트이다.

마무리

리액트에 대한 깊은 이해는 중급 이상의 개발자로 가기 위해 반드시 필요한 과정이었다.

그런데, AI 의 성장 속도를 보니, 사이트의 완벽을 추구하지 않는 이상, AI 로 제작하는 것이 옳을 수도 있겠단 생각이 든다.

간단한 사이트를 만들기 위해 우리가 React 를 건들 필요가 있는가?

멋진 사이트를 만들기 위해 색상을 일일히 바꿔가며 체크 할 필요가 있는가?

AI 에게 물어보면 그만일 것이다.

그러나,

AI 는 인간과의 상생이 여전히 필요하다.

AI 는 아직 자체적으로 복잡한 프레임워크를 만들어서 대답하지 않는다.

사람이 만든 최적화 된 방식으로 이해했기 때문에,

우리가 대형 프로젝트를 AI 와 함께 한다면, 필연적으로 AI 는 편리한 기술을 찾아 제작할 것이다.

이 과정에서, 누적되는 기술 부채에 관한 내용은 인간인 우리가 직접 해결해야 할 문제라고 생각한다.

뿐만 아니라, 가장 영향력이 큰 프로그램은 리액트와 같은 변동성이 잦은 라이브러리가 아니라,

여전히 버전 별 호환성을 지니며, 큰 변동이 없는 프로그램이라는 것이다.

AI 입장에서는 C 언어와 같은 로우 레벨 언어가 매우 귀찮을 것이라고 생각한다.

매우 정확해야 하므로 검증은 필수이고, 다른 언어에서 한 줄이면 되는 것을,

C 에서는 수 줄에서 수십 줄로 늘어나기도 하니, 허용 토큰을 많이 사용하는 언어로 각인될 수 밖에 없다.

그러나, 현재까지 언어 중에서 C 를 모티베이션 하지 않은 언어가 존재하는가?

내가 알고 있는 한 대부분 ~ 전부 다양한 프로그래밍 언어들은 1972 년에 탄생한 이 C 라는 언어의 구조를

아주 크게 벗어나지 않았다.

또한, 어느 언어를 살펴보더라도, C or C++ 과 같은 언어를 사용하지 않았던 언어가 거의 없었다.

(Go, Rust, Zig, Assembly 와 같은 저레벨 제외)

JavaScript 가 상대적으로 느리지만 현재 프로덕션 백엔드에서도 사용될 수 있는 이유는,

기본 탑재 라이브러리 EX - bcrypt 와 같은 라이브러리들이 C or C++ 로 작성되었기 때문이다.

이들은 Web Assembly Module 로서 자바스크립트 실행을 빠르도록 도와 준다.

(요즘은 Rust 로 wasm 이 많이 제작되는 추세긴 함.)

다시 돌아와서,

갑자기 C 예찬론자가 되었는데, 그 만큼 저 레벨의 언어가 아직 중요함을 알리고 싶었다.

현재 React, Vue 등등 많은 웹 라이브러리나 프레임워크가 인기가 얻고 있다고 해서,

정말로 대부분의 중요 회사들이 이들을 적극 사용하는 것은 아니다.

신뢰성이 매우 중요하기 때문에, 아직도 JQuery 를 사용하여 내부망 사이트를 제작하는 회사가 정말로 많다.

간단해도 되며, 단순히 데이터 로직에만 신경써도 되기 때문에 WAS 에 홈페이지를 넣어놓기도 한다.

우리는 AI 세상에서 살고 있다.

하지만, 결국 AI 또한 우리가 만든 언어를 사용하고 있다는 것을 간과해선 안된다고 생각한다.

웹 페이지를 그렇게나 잘 만들어도, 결국 홈페이지는 .html 파일에서 시작한다는 것을 잊어서는 안된다.

사람들이 정말 많이 사용하는 프로그램에서 한 줄의 로직만 바꿔도 속도가 수십 퍼센트 빨라질 수도 있는 것이

소프트웨어라는 것을 잊어서는 안된다.

---

참조 사이트 목록

https://ko.react.dev/learn/build-a-react-app-from-scratch

https://vite.dev/guide/philosophy.html

https://www.npmjs.com/package/create-react-app

https://github.com/facebook/create-react-app

https://react.dev/learn/creating-a-react-app