React - CRA(Create-React-App) 사용하기

안녕하세요.

Hynn 입니다.

 

이번 포스팅에서는 React 환경을 보다 편리하게 구성하게 도와주는 CRA 에 대해서 알아보도록 하겠습니다.

간단한 예제형태로 구성되어 있고, 실제 어떠한 기능들을 담당하는지에 대한 간략한 설명만을 포함하므로, 개념에 대해서 알아보시는분들에게 도움이 될 거 같습니다.

 

 

==========

1. CRA란?

2. CRA 사용해보기

==========

 

1. CRA 란?

 

CRA 는 Create React App 의 약자로 기존의 React 애플리케이션을 보다 쉽게 생성하기 위한 CLI (Command Line Interface) 도구입니다. 

이전 포스팅들을 살펴보신다면 이해하시겠지만, React 를 구성하기 위해서, 사용자는 React 를 CDN 으로 추가하거나, NPM 을 이용해 React 를 설치하고, React 뿐 아니라, Webpack, Babel 과 같은 필요한 라이브러리/도구들을 여러개 설치해야 합니다.

 

즉, 초기 설정을 하기 위해 여러개를 설정하고, 그를 개별적으로 다 구성해야 하는 단점이 존재합니다.

이는 필연적으로 많은 반복을 하신 분들도, 처리시간이나, 반복노동에 노출되는 것이고, 이는 결과적으로 시간적 소모가 발생할 수 밖에 없는 구조가 생기게 됩니다.

 

이를 한번의 처리만으로 기본적인 설정/구성을 한번에 완료할 수 있도록 돕는 도구가 CRA 입니다.

CRA 에는 아래의 기능이 포함되어, 개발자 입장에서는 시간절약을 할 수 있습니다. 

 

• Bable
• Webpack
• Local-Server
• Jest(Test-Framework)
• Production Build 

즉, 기존의 React 에서는 개발자가 최초 초기 세팅을 하기 위해서는 위의 라이브러리를 개별적으로 설치해야하고, 이를 하나씩 설치하고

그를 설정하고 구성하는데 시간이 소요가 될 수 밖에 없지만, 이 CRA 에는 이러한 정보들을 원스톱으로 처리를 함으로서, 시간적인 효율을 끌어올렸다고 볼 수 있습니다.

 

하지만 단점도 분명히 존재할 수 있습니다.

가령 예를 들어, CRA 에서 제공하는 Webpack 의 구성설정과 다르게 사용자가 커스텀해야 하는 상황일 경우, 번거롭더라도 직접 설정해야 하는 필요성이 존재합니다.

CRA 는 이러한 처리를 한번에 쉽게 한다는 장점도 있지만, 이러한 모듈들의 번들러 처리 구성이나, 세부적인 환경설정은 직접할 수 없기 때문에, 이러한 단점을 고려하고 사용을 해야합니다.

 

이제 기본적인 사용법을 알아보도록 하겠습니다.

 

물론 아래와 같이 유사한 기능을 가지고 있는 도구들도 존재합니다.

본 포스팅에서는 CRA 만 다룰 예정이며, 이외의 도구들은 추후 학습 후 업로드 하도록 하겠습니다.

 

• Next.js
• Gastby
• Parcel
• CodeSandbox

2. CRA 사용해보기

 

CRA 생성은 매우 간단합니다.

먼저 CRA를 생성할 Directory 로 터미널로 이동을 합니다. 그리고 난 뒤 아래의 명령어를 입력합니다.

 

create-react-app [ProjectName]

여기서 프로젝트 네임은, 작성자가 사용할 프로젝트 명을 입력하는 것으로, 특별한 제한은 없습니다.

이를 입력하고 return 을 누르게 되면 작업이 시작되고 완료가 되면 아래의 사진처럼 CRA 구성이 완료됨이 표시됩니다.

 

이렇게 하면 설정이 모두 끝납니다.

이 Terminal Log 를 보면 몇가지 눈에 띄이는 문구들이 있습니다.

이에 대해서만 간단하게 설명을 드리고 마무리하도록 하겠습니다.

 

• 6 high severity vulnerabilities 

이 오류는 사실 오류가 아닙니다.

사실 심도있게 설명을 드리라면 저도 자신은 없지만,  이 오류에서 언급하는 "npm audit" 은 react 가 아니라 Node 를 위해 존재하는 기능입니다. 

따라서 React 와 이 오류는 별도의 해당사항이 되지 않습니다. 즉 실제 React 를 사용하여 Front-end 개발하는 과정에서의 문제가 되는 부분은 없습니다.

이는 React 를 개발한 Facebook 공식 Github 에도 있는 내용인지라, 원문 역시도 참조하실 수 있도록 링크를 걸어 두었습니다.

Help, npm audit says I have a vulnerability in react-scripts! #11174 <-- 원문 보기

 

이제 아래측에 각각의 명령어가 존재합니다.

이를 사용하기 위해서는 로그에도 잘 나와 있듯이 아래의 명령어로 먼저 CRA Project 가 설치된 Directory 로 이동해야 합니다.

위의 사진의 예시에서는 아래와 같이 나와있으므로, 그대로 입력합니다. 여기서 바뀌는 부분은 실제 나의 프로젝트 명이 다르겠죠?

cd Hynn10
npm start

이 npm start 를 비롯해, 몇가지 명령어가 표기되어 있는것을 볼 수 있습니다.

각각의 명령어는 아래의 역활을 담당합니다.

이러한 Script 는 항상 "package.json" 내에 존재하므로, 별도의 명령어를 추가하거나, 확인하고 싶으신분들은 package.json 파일을 확인하시면 도움이 됩니다.

 

• npm start - React 개발 서버를 실행합니다. 이 기능에는 핫리로딩이 제공되므로, 코드가 변경되면 실시간으로 반영할 수 있습니다.
• npm run build - 코드를 최적화하고, 웹 서버에 배포할 수 있는 파일을 생성합니다. 
• npm test - CRA에 내장된 테스트러너를 실행합니다. 
• npm eject - CRA 에서 webpack 의 구성을 포함한 내부 구성파일을 노출할 때 사용합니다. 일반적으로 권장하지 않습니다.

이제 사용준비가 끝났습니다.

src directory에 실제 Javascript, JSX, CSS, HTML 파일이 위치하게 되며, 이 위치에서 필요한 파일을 생성하거나, 수정 삭제가 가능합니다.

 

다음 포스팅부터는 CRA 내에서 실제 기본적인 작성이나, 코드를 사용하는 실제 예제를 작성할 예정입니다.

 

감사합니다