React 학습을 하고 나서 간단한 토이 프로젝트를 위해 넷플릭스 클론 코딩을 해보던 중 이론을 알고 있음에도 문제 해결이 쉽지 않아 다시 이론을 찾아보게 되고 그렇게 오랜 시간 동안 튜토리얼 지옥에 빠져버렸다..
이런 시간 낭비를 끊어내고 개념을 단단하게 확립하고 넘어가기 위해 다시 블로그로 돌아와 글을 작성해본다.
▪️ CLI 란?
우선 CLI란 Command Line Interface로서 컴퓨터 운영 체제와 상호 작용하는 명령을 터미널을 통해 입력할 수 있는 텍스트 기반 인터페이스이다.
쉽게 말해 컴퓨터와 인간이 소통할 수 있는 매개체이다. 예시로는 cmd, Bash, Shell 등이 있다.
React에서 CLI는 개발자가 프로젝트를 빠르게 설정하고 관리할 수 있도록 도와주는 도구로서
일반적으로 명령줄에서 React 애플리케이션을 생성, 구축, 테스트 및 배포하는 데 사용한다.
▪️ CRA(Create React App)
CRA는 리액트 CLI 도구 중 하나로서 CRA를 사용하면 Webpack과 Babel과 같은 도구의 설정을 수동으로 수행할 필요없이 간편하게 React 시작 초기 설정을 자동으로 해주어 초보자에게 편리하다. 또한 프로젝트 설정, 개발 서버 실행, 빌드, 테스트, 디버깅 등을 간편하게 수행한다.
1. 프로젝트 생성 : 터미널에서 npx create-react-app (프로젝트명) 명령어를 통해 새로운 리액트 프로젝트를 생성할 수 있다. 초기 프로젝트 구조와 필수적인 의존성들이 자동으로 설치된다.
2. 개발 서버 실행 : npm start 명령어를 입력하면 개발용 서버가 실행되며, 수정 사항을 실시간으로 반영한 화면을 브라우저를 통해 확인할 수 있다.
3. 빌드 : npm run build 명령어를 실행하면 프로덕션용 빌드를 생성한다. 최적화된 정적 파일들이 build라는 파일에 생성되어 배포에 사용할 수 있다.
4. 테스트 실행 : npm test 명령어를 통해 테스트 스크립트를 실행하여 유닛 테스트 및 통합 테스트를 실행할 수 있다.
(사용 이유 - 더 안정적인 어플리케이션 구현과 디버깅 시간,재설계 시간 단축 등)
추후에 추가적으로 정리
▪️ VITE
Vite는 프랑스어로 "빠른"이라는 뜻으로 Vue.js 팀에서 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다.
기본적으로 Vue.js 애플리케이션을 위해 설계되었지만, 최근에는 다른 프레임워크나 라이브러리를 위한 일반적인 웹 개발에도 사용된다.
핫 모듈 교체(HMR)를 제공 -> 빠른 개발 속도를 지원
Rollup 모듈 번들러를 사용 -> 빌드 시간을 최소화, 애플리케이션의 성능을 향상
▪️ CRA VS VITE
| 특징 | Create React App (CRA) | Vite |
|---|---|---|
| 번들링 방식 | Webpack ,Babel | Rollup |
| 개발 서버 속도 | 상대적으로 느림 | 매우 빠름 |
| 플러그인 시스템 | 사용이 어려움 | 사용자 정의 플러그인 추가 용이 |
| 추가 기능 | 리액트 애플리케이션 개발(TypeScript 지원 가능) | 다양한 프레임워크 및 라이브러리 지원(TypeScript 기본 지원) |
* 참고 :
https://aws.amazon.com/ko/what-is/cli/
https://asritha.hashnode.dev/react-cli-tools-the-developers-secret-weapon
https://strap.tistory.com/entry/CRA-%EC%99%80-VITE
