[React 2주차(2)] 프로젝트 생성

[출처 : Cracking Vue.js]

 

npm VS yarn

 

• 공통적 특징
  1. 둘다 자바스크립트 런타임 환경(아래에서 더 확인할게요 🙂)인 노드(Node.js)의 패키지 관리자
  2. 애플의 앱스토어, 구글의 플레이스토어처럼, 전 세계의 많은 개발자들이 본인들이 만든 유용하고 다양한 패키지들 또는 프로그램을 ‘온라인 데이터베이스’에 올려놓습니다. 그걸 쉽게 설치하고 삭제할 수 있도록 도와주는 관리자에요.
• 차별적 특징
  1. NPM
     • node.js를 설치할 때 자동으로 설치됨
     • Node Package Manager의 약자
     • JavaScript 프로그래밍 언어를 위한 패키지 관리자로, 수많은 JavaScript 라이브러리와 애플리케이션을 호스팅하는 레지스트리 역할을 합니다.
  2. YARN
     • 2016년에 Facebook, Exponent, Google, Tilde와 같은 회사에서 공동 작업으로 개발한 패키지 관리자
     • npm과의 호환성이 좋고, 속도나 안정성 측면에서 npm보다 좋습니다.
       • 병렬로 패키지를 다운로드하여 속도를 향상시키고, 더 정확한 버전 관리를 위해 yarn.lock 파일을 사용합니다.
       • 속도와 관련해서는, npm도 버전 5 이후로 많은 성능 개선이 이루어져서 현재는 성능 차이가 많이 줄어들었습니다.

---

런타임(Runtime)

프로그래밍 언어가 구동(running)되는 환경(environment)

자바스크립트의 대표적 런타임 환경

1. 브라우저(ex : Chrome, Microsoft Edge, Firefox, Internet Explorer)
2. node환경

---

<리액트 프로젝트 구성하기 위해 필요한 것들>

1. Webpack

• 정의: Webpack은 모듈 번들러(module bundler)로, 여러 개의 자바스크립트 파일과 그 외의 자산(이미지, CSS 등)을 하나의 파일 또는 여러 개의 파일로 묶어주는 도구임.

2. Babel

• 정의: Babel은 자바스크립트 컴파일러로, 최신 자바스크립트(ES6+) 코드를 구형 브라우저에서도 호환되는 ES5 코드로 변환해줌.

3. ESLint

• 정의: ESLint는 자바스크립트 및 JSX 코드의 문법과 스타일을 검사하고, 오류를 찾는 데 사용되는 정적 코드 분석 도구임.

==> 이런것 신경 쓰지 않아도 알아서 만들어줌. 보일러 플레이트(Boilerplate): 소프트웨어 개발에서 기본적인 코드 구조나 설정을 미리 작성해 놓은 템플릿을 의미

 

 

<리액트 프로젝트 생성하는 3가지 방법>

 

1. CRA(Create React App) : 기본적으로 Babel과 Webpack을 사용하여 ES6+ 코드와 JSX를 변환하는 것임

yarn create react-app [원하는 프로젝트 이름]

터미널에 작성. --> vs코드에 yarn start 하면 끝

 

 

• 장점:
  • 간편한 설정: 기본 설정이 이미 구성되어 있어 즉시 개발을 시작할 수 있는 것임.
  • 커뮤니티 지원: 널리 사용되어 많은 자료와 패키지가 존재함.
  • 테스팅: 기본적으로 Jest와 React Testing Library가 포함되어있음.
• 단점:
  • 빌드 속도: Webpack을 사용하기 때문에 초기 빌드 속도가 느릴 수 있음
  • 유연성: 기본 설정을 커스터마이즈하기가 다소 번거로울 수 있음.

 

 

2. Vite : Evan You(Vue.js의 창시자)가 만든 도구로, 빠른 개발 환경과 빌드를 제공함. React뿐만 아니라 Vue, Svelte 등 다양한 프레임워크를 지원함.

장점:

• 빠른 속도: 핫 모듈 리플레이스먼트(HMR)가 매우 빠르며, 개발 속도가 빠름.
• 모듈 기반: 코드가 모듈식으로 구성되어 있어 커스터마이즈가 용이함.
• 최신 기능: ES 모듈과 최신 JavaScript 기능을 지원함.

=> Go 언어 베이스의 자바스크립트 빌드 툴로 Esbuild를 사용함. Esbuild는 CRA가 채택하는 WebPack 에 비해 매우 빠름.

 

yarn create vite my-react-app --template react

다양한  템플릿을 지원하기 떄문에 생성 시 react라고 표시해주기!! 그 후 vsCode에서 yarn, yarn dev 입력하면 실행됨.

 

3. 아예 처음부터 끝까지 다 만들기