[React 입문] 2주차_React 개발환경

오늘의 학습내용 :  React 개발환경 세팅하기

 

◆ Yarn

앞으로 개인 과제를 진행하면서 사용하게 될 패키지 툴이다. 간단한 커맨드로 게시된 패키지들을 설치받아 사용할 수 있고, 이를 통해 보다 효율적인 개발이 가능하다. 대표적인 패키지 관리 툴에는 npm, 그리고 yarn이 있는데, 각각 어떤 특징을 가지고 있는지 간단하게 알아보았다.

 

NPM(Node Package Manager)은 자바스크립트 언어를 위한 패키지 관리자이다. Node 패키지를 만들고, 업로드하여 공유하여 누구나 사용할 수 있다. NPM이 없었을 때에는 필요한 기능을 추가하려면 직접 작성하거나 깃허브를 통해 다운로드할 수밖에 없었다. 이런 불편을 해소하기 위해 Node.js를 설치하면 기본적으로 내장된 npm을 사용할 수 있게 되었다.

 

Yarn은 Node.js 환경을 위해 2016년 페이스북에서 개발한 패키지 관리자이다. npm과 같은 기능을 수행하지만, 최근 등장한 리액트와 같은 프로젝트를 진행하는 데 도움이 되는 방향으로 만들어졌고, 속도나 안정성 측면에서 보다 나은 기능을 제공한다.

 

속도	npm과 yarn은 패키지 설치 프로세스를 처리하는 방법에 차이가 있다. 한 번에 하나씩, 순차적으로 설치하는 npm과 달리 yarn은 여러 개의 패키지를 동시에 가져오고 설치할 수 있어 속도 측면에서 npm보다 빠르다.
보안	npm은 자동으로 패키지에 포함된 다른 패키지 코드를 실행하는데, 이 때문에 보안 시스템에 취약성이 발생할 수 있다. yarn은 yarn.lock 또는 package.json에 있는 파일만을 설치하여 보안상 발생할 수 있는 문제점을 예방한다.

 

◆ Vite

Vue.js, React, Svelte, SolidJs 등을 지원하는 빌드 도구이다. 처음에는 Vue.js 지원을 위해 시작됐지만 점차 규모가 커지면서 다른 프레임워크들과 연동할 수 있게 되었다. 강의를 들으면서 CRA와 Vite로 각각 새 React 프로젝트를 생성해 보았는데, 내부적으로 Rollup 번들링과 ESBuild를 조합한 Vite가 확실히 빠른 속도를 보여주었다.

 

: HMR(Hot Module RePlacement)?

Vite도 HMR 기능을 지원한다. 이는 개발 환경에서 코드를 변경하면 브라우저 전체를 새로고침할 필요 없이 변경된 모듈만 즉시 업데이트 해주는 것을 의미한다. React와 프론트엔드 개발에서 유용하게 쓰인다. 실제로 프론트 개발작업을 하면 적어도 소스코드 에디터와 Dev 서버, 브라우저까지 3개 환경을 열어두는데 이때 코드를 수정하면 dev 서버에서 hmr이 일어나고 브라우저에서 변경된 내용을 확인한다. hmr 속도는 불필요한 시간 소비를 방지할 수 있어 중요하다.

 

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

 

터미널에서 명령어를 통해 프로젝트를 생성할 수 있다.