[React] Create React App을 이용해서 리액트 앱 설치하기

과거의 리액트 앱 설치 방법

요즘에는 'npx create-react-app <폴더 이름>'  명령어로 리액트를 간단하고 쉽게 시작할 수 있지만, 그전에는 어떻게 리액트를 설치했는지 먼저 알아보고 가자

Create React App이 등장하기 전에는 리액트 앱을 설정하는 과정이 훨씬 복잡했다

개발자가 리액트 프로젝트를 직접 설정해야 했으며, 여기에는 여러 가지 복잡한 도구와 설정이 필요했다.

일반적으로 다음과 같은 단계를 거쳐야 한다

1. 프로젝트 초기화: 먼저, npm init 명령어로 새 프로젝트를 초기화
2. 리액트 및 관련 라이브러리 설치: npm install react react-dom 명령어를 사용하여 리액트와 리액트 DOM 라이브러리를 설치.
3. Webpack 및 Babel 설정: Webpack과 Babel을 사용하여 모듈 번들링 및 코드 변환을 설정. 이는 복잡한 과정으로, 각각의 도구에 대한 설정 파일(예: webpack.config.js, .babelrc)을 수동으로 작성해야 했다.
4. 개발 환경 설정: 개발 및 프로덕션 환경을 구분하고, 필요한 플러그인과 로더들을 설정
5. 테스트 도구 설정: Jest나 Mocha와 같은 테스트 도구를 설정하여 코드 테스트를 진행

이 모든 과정은 시간이 많이 걸리고, 특히 초보 개발자에게는 상당한 진입 장벽이었다. 따라서, 리액트를 사용하기 위해서는 상당한 설정 작업이 필요했다.

 

Create React App의 등장

이러한 복잡한 설정 과정을 단순화하기 위해 Facebook에서 Create React App을 출시했다.

이 도구는 리액트 앱을 간단히 설치하고, 개발에 필요한 모든 설정을 자동으로 처리해 준다. Create React App을 사용하면 복잡한 설정 파일을 작성할 필요 없이, 한 줄의 명령어로 바로 리액트 프로젝트를 시작할 수 있다.

 

리액트 앱 설치 방법

리액트 앱을 설치하는 것은 터미널에서 다음 명령어를 실행하는 것만으로 간단하게 가능

npx create-react-app <폴더 이름>

또는 현재 디렉토리에 바로 리액트 프로젝트를 생성하려면 다음과 같이 명령어를 사용할 수도 있다:

npx create-react-app ./

 

내부적으로 어떤 일이 일어나는 가?

Create React App을 사용하면, Webpack과 Babel과 같은 필수 도구들이 자동으로 설정된다. 이 도구들은 현대적인 자바스크립트 개발에 필수적이다:

• Webpack: 여러 자바스크립트 모듈을 하나의 파일로 번들링하는 모듈 번들러. 이를 통해 코드가 최적화되어 로드 시간이 줄어들고 성능이 향상된다.
• Babel: 최신 자바스크립트 코드를 구형 브라우저에서도 실행할 수 있도록 변환해주는 자바스크립트 컴파일러. 예를 들어, 화살표 함수(arrow function)를 일반 함수 표현식으로 변환해주어 ES6를 지원하지 않는 환경에서도 코드가 작동하게 다.

 

이제는?

Node.js와 npm이 설치되어 있다는 가정하에

 

1. 리액트 앱을 만들 폴더 생성

2. 터미널 실행

3. 폴더를 새로 생성하려면 npx create-react-app <폴더 이름> 명령어를,

    현재 디렉토리에 설치하려면 npx create-react-app ./ 명령어를 실행