리액트 개발을 시작하려면 몇 가지 중요한 단계를 거쳐 개발 환경을 설정해야 한다. 아래는 리액트 개발 환경을 설정하는 과정에 대한 상세한 안내이다.
Node 개발환경 설치
Node.js 란?
Javascript를 데스크톱에서도 실행할 수 있게 해주는 런타임
Node.js 설치
리액트 개발을 위해서는 먼저 Node.js가 설치되어 있어야 한다. Node.js는 자바스크립트 런타임으로, 서버와 클라이언트 사이드 개발에 사용된다.
Node.js 직접 설치
- Node.js 공식 웹사이트에서 직접 다운받아서 설치할 수 있다.하지만 이 방식은 특정 버전에 의존하게 되며, 다른 버전으로 전환하려면 수동으로 재설치해야 할 수도 있다.
- 설치가 완료된 후, 터미널에서
node -v명령어를 실행해 설치된 버전을 확인할 수 있다.
Nvm 사용
nvm(Node Version Manager)은 여러 버전의 Node.js를 관리할 수 있는 도구로, 다양한 프로젝트에서 요구되는 특정 버전의 Node.js를 쉽게 설치하고 전환할 수 있다.
nvm을 사용하면 다음과 같은 이점이 있다:
- 여러 버전 관리: 다양한 버전의 Node.js를 한 시스템 내에서 관리할 수 있다.
- 버전 전환 용이: 명령어 한 줄로 다른 버전으로 전환할 수 있다.
- 프로젝트별 버전 설정: 각 프로젝트마다 필요한 Node.js 버전을 지정할 수 있다.
nvm 설치 방법은 아래와 같다:
- macOS, Linux: 공식 nvm GitHub 페이지에서 설치 스크립트를 이용한다.
- Windows: nvm-windows를 사용한다.
설치 후, 터미널에서 nvm install [버전]과 nvm use [버전] 명령어로 원하는 버전의 Node.js를 설치하고 사용할 수 있다.
Package Manager
- Node.js 에는 수없이 많은 라이브러리 (패키지) 가 존재
리액트 프로젝트는 여러 외부 패키지와 라이브러리를 사용하기 때문에 패키지 매니저를 통해 설치 해야된다 . 패키지 매니저 중에 npm과 yarn이 대표적이다.
npm (Node Package Manager)
Node.js를 설치하면 npm도 함께 설치된다. 프로젝트 관리 및 외부 패키지 설치에 사용된다.
- Node.js 에서 활용 할 수 있는 수없이 많은 라이브러리들을 설치할 수 있게 해주는 툴
yarn
Yarn은 Facebook, Google, Exponent 및 Tilde와 같은 회사에서 협력하여 개발한 패키지 매니저로, 처음에는 npm의 느린 속도와 일관성 없는 패키지 설치 등의 문제를 해결하기 위해 출시되었다.
yarn은 npm의 대체품으로, 더 빠른 설치 속도와 보안을 제공한다. (지금은 npm도 충분히 빠름)
Create-react-app vs Vite
리액트 프로젝트를 시작하기 위한 방법은 크게 Create React App(CRA)과 Vite 두 가지가 있다.
CRA
- React 개발팀에서 만든 공식적인 툴
- React만을 지원
번들러: Webpack을 사용
트랜스파일러 : babel을 사용
린터: Eslint를 사용
장점:
- 빌드 툴 공부를 별도로 굳이 하지 않아도 됨.
- 각종 툴 버전을 신경 쓰지 않아도 됨.
- 툴들을 원하는대로 커스텀하고 싶다면 ‘eject’ 스크립트를 실행하여 커스텀 가능
Vite
- Vue.js 를 위한 번들러로 처음 출시된 툴
- Vue 뿐만이 아니라 React / Preact / Lit / Svelte /Vanila Js 도 지원
개발 서버 실행시에는 따로 bundling 하지 않고 소스를 바로 로드
- 디버깅이 수월하다
번들러: Rollup 사용
- webpack 보다 빠른 빌드 속도
- 빌드 결과물이 Webpack보다 용량이 작고 ES6 Module로 출력
장점:
- 원하는 툴들을 입맛에 맞게 설치해 쓸 수 있음
- 빠른 속도
CRA 및 Vite으로 개발환경 설정
CRA와 Vite 둘 다 프로젝트 초기화를 단 몇 줄의 명령어로 처리할 수 있다. 원하는 도구를 선택하고 해당 명령어를 실행하면 개발 환경이 준비된다.
CRA
Create React App은 리액트 팀에서 제공하는 CLI 도구로, 프로젝트 초기 구조를 간편하게 설정해준다.
기본 제공 스크립트
- ‘npm start’ : 로컬 개발 서버를 실행
- ‘npm test’ : 테스트 코드 실행
- ‘npm run build’ : 운영 배포를 위한 빌드 실행
CRA 프로젝트 만들어보기 - 자세한것은 공식문서에
npx create-react-app my-app
Vite
Vite는 최근에 등장한 빌드 도구로, 빠른 개발 서버 시작과 HMR(Hot Module Replacement)을 제공한다.
- ‘npm run dev’ : 로컬 개발 서버를 실행
- ‘npm test’ : 테스트 코드 실행
- ‘npm run build’ : 운영 배포를 위한 빌드 실행
Vite 프로젝트 만들어보기 - 자세한것은 공식문서에
npm vite@latest //npm 방식
yarn create vite //yarn 방식결론
리액트 개발 환경 설정은 단계별로 따라가면 어렵지 않게 할 수 있다. Node.js 설치, 패키지 매니저 선택, 그리고 프로젝트 생성 도구를 통한 초기 설정이 중요한 부분이며, 이를 통해 리액트로 개발을 시작할 수 있다.
