Create React App으로 React 프로젝트 설정하기

React은 프론트엔드 앱 개발을 위한 가장 인기 있는 JavaScript 라이브러리 중 하나입니다. 원래 Facebook에서 개발한 오픈 소스 라이브러리입니다. React는 다음을 사용하여 빠른 애플리케이션을 만드는 것으로 빠르게 인기를 얻었습니다: JSX – JavaScript와 HTML과 유사한 구문을 결합한 프로그래밍 패러다임입니다.

이전에는 React 프로젝트를 설정하는 것이 복잡한 과정이었습니다. 다음 구성 요소를 수동으로 구성해야 했습니다:

• 빌드 시스템
• 코드 트랜스파일러 (최신 구문을 브라우저가 읽을 수 있는 코드로 변환)
• 프로젝트의 기본 디렉터리 구조

다행히도, 다음 덕분에 그러한 시절은 오래전에 지나갔습니다: Create React App. 이 도구는 이러한 모든 단계를 자동화하는 훌륭한 도구입니다. Create React App은 코드 트랜스파일링, 린팅, 테스트 및 빌드 시스템을 처리합니다. 또한 핫 리로딩을 지원하는 서버가 함께 제공되므로 변경 사항이 있을 때 웹 페이지를 새로 고칩니다. 물론 이 모든 작업은 체계적인 디렉터리 구조 내에서 수행됩니다.

요약하자면, 다음과 같은 빌드 시스템을 구성하는 수동 작업을 거칠 필요가 없습니다: Webpack, 또는 다음과 같은 트랜스파일러: Babel. 걱정할 거리가 줄어들어 프론트엔드 개발에 완전히 집중할 수 있습니다. Create React App을 사용하면 최소한의 준비로 React를 시작할 수 있습니다.

이 가이드에서는 Create React App을 사용하고 기본적인 React 애플리케이션을 실행하는 방법을 보여드리겠습니다. 이는 향후 모든 애플리케이션 프로젝트의 기반이 될 수 있습니다.

전제 조건

이 튜토리얼에 설명된 단계를 수행하려면 먼저 다음과 같은 소프트웨어가 구성되어 있어야 합니다.

• • 적절히 구성된 Ubuntu 서버. 다음 단계를 따를 수 있습니다: CloudSigma에서 Ubuntu 서버 구성하기.
  • 최신 버전의 Node.js 설치. 다음은 단계별 가이드입니다: Ubuntu에 Node.js 설치하기.

1단계: 전용 npm 프로젝트 디렉터리 생성

Node.js 패키지의 경우, npm이 기본 패키지 관리자입니다. 다음을 사용합니다: npm을 사용하여 전용 프로젝트 디렉터리를 생성합니다. 이 디렉터리에는 다음과 같은 중요한 파일이 보관됩니다: package.json 프로젝트에 대한 모든 메타데이터와 추가 Node.js 종속성 모듈을 저장하는 파일입니다. JSON은 JavaScript 객체를 기반으로 하는 데이터 공유의 표준 형식입니다. 자세한 내용은 다음을 참조하세요: 이 가이드 (JSON에 대해 더 자세히 알고 싶다면).

먼저, 전용 디렉터리를 생성합니다:

다음으로, 다음에 지시합니다: npm 파일 내부에 개발 환경을 시작하도록 합니다. 그러면 프로젝트에 필요한 다음 파일이 생성됩니다: package.json 파일. 현재 디렉터리를 변경합니다:

다음 명령을 실행합니다: npm init 명령:

이 디렉터리를 git 저장소의 일부로 만들려면 먼저 설정하는 것이 좋습니다. 초기화 스크립트가 이를 자동으로 감지하고 그에 맞게 모든 것을 구성합니다. 완료되면 디렉터리에 다음 파일이 있어야 합니다: package.json 파일. 텍스트 에디터로 확인해 보세요:

2단계: Create React App으로 React 프로젝트 생성

이 단계에서는 Create React App을 호출하여 샘플 React 프로젝트를 구축합니다. 이 스크립트는 모든 종속성과 함께 필요한 모든 것을 새 디렉터리로 복사합니다. npm 패키지 관리자에는 다음 도구도 함께 제공됩니다: npx. 실행 가능한 패키지를 실행하는 데 사용됩니다. 프로젝트를 실제로 다운로드하지 않고 Create React App 스크립트를 실행하는 데 사용합니다.

실행하면 지정된 디렉터리에서 다음이 실행됩니다: create-react-app. 또한 종속성을 설치하기 위해 다음 명령을 실행합니다: npm install 명령. 편의상 다음 이름을 사용하겠습니다: cloudsigma-react-react-tutorial. 다음 명령을 실행합니다:

프로세스가 끝나면 다음과 같은 알림이 표시됩니다. 설치가 성공적으로 완료되었을 때 나타나는 성공 메시지입니다. 또한 프로젝트가 생성된 위치도 알려줍니다.

3단계: Apply React-Scripts

이제 설치 중에 설치된 다양한 react-scripts에 대해 간략히 살펴보겠습니다.

• • 테스트 코드를 실행하기 위해 test 스크립트를 실행할 것입니다.
  • The build 스크립트는 프로젝트의 축소된 버전(프로덕션 환경용)을 생성합니다.
  • 마지막으로, eject 스크립트는 커스터마이징에 대한 완전한 제어 권한을 제공합니다.

먼저, React 프로젝트 디렉터리의 내용을 확인합니다:

각 파일에 대한 설명은 다음과 같습니다:

• • node_modules/: 이 디렉터리에는 앱에서 사용할 모든 외부 JavaScript 라이브러리가 포함되어 있습니다. 여기를 직접 수정할 일은 거의 없습니다.
  • public/: 기본 HTML, JSON 및 이미지 파일이 들어 있습니다. 프로젝트의 루트 역할을 합니다.
  • src/: 이 디렉터리에는 프로젝트의 React JavaScript 코드가 포함되어 있습니다. 우리가 가장 많은 시간을 보낼 곳입니다. 가이드의 다음 부분에서 이 디렉터리를 더 자세히 살펴보겠습니다.
  • .gitignore: git이 무시할 디렉터리를 기술하는 파일입니다. 예를 들어 node_modules 디렉터리가 있습니다. 일반적으로 대용량 파일이 포함되어 있거나 버전 관리에 포함할 필요가 없는 로그 파일이 있는 디렉터리는 제외하는 것이 좋습니다. 이 경우 일부 React 관련 디렉터리도 포함됩니다.
  • README.md: Create React App에 대한 유용한 정보가 많이 포함된 마크다운 파일입니다. 예를 들어, 고급 구성을 위한 명령 링크 요약이 포함되어 있습니다. 지금은 이 파일이 필요하지 않습니다. 하지만 프로젝트가 진행됨에 따라 프로젝트에 대한 더 많은 문서를 추가하게 될 것입니다.

The files package.json 및 package-lock.json 파일은 npm에 의해 사용됩니다. 초기 npx 명령을 실행할 때 기본 프로젝트가 생성되었습니다. 추가 종속성이 설치되었을 때 package-lock.json이 생성되었습니다. . npm은 package-lock.json을 사용하여 패키지가 정확한 버전과 일치하도록 보장합니다. 이렇게 하면 다른 사람이 프로젝트를 설치할 때 동일한 종속성을 얻을 수 있습니다. 자동으로 생성되고 관리되므로 직접 수정할 일은 거의 없습니다.

마지막으로 살펴볼 파일은 package.json입니다. 이 파일에는 프로젝트에 대한 메타데이터가 포함되어 있습니다. 예를 들어 메타데이터에는 프로젝트 제목, 버전 번호 및 종속성이 포함될 수 있습니다. 또한 프로젝트를 실행하는 데 사용할 수 있는 스크립트도 포함되어 있습니다. package.json 파일의 내용을 확인해 보세요:

다양한 객체가 포함된 JSON 파일입니다. scripts 객체를 살펴보세요. 여기에는 네 가지 다른 스크립트가 포함되어 있습니다:

• • start
  • build
  • test
  • eject

이 스크립트들은 중요도에 따라 나열되어 있습니다. start 스크립트는 로컬 개발 서버를 시작합니다. 다음으로 나머지 스크립트를 사용하는 방법에 대해 자세히 설명하겠습니다.

• • 빌드 스크립트

For running an npm 스크립트를 실행하기 위한 명령 구조는 다음과 같습니다:

To run the build 스크립트를 실행하려면 다음 명령을 사용하세요:

코드를 사용 가능한 번들로 컴파일하는 프로세스가 시작됩니다. 완료되면 출력 디렉터리를 확인해 보세요:

새로운 build/ 디렉터리가 생성된 것을 확인할 수 있습니다. 여기에는 다른 파일들의 축소 및 최적화된 버전이 포함되어 있습니다. 이 디렉터리는 .gitignore 파일에 추가하는 것이 좋습니다. build 스크립트를 사용하여 언제든지 다시 생성할 수 있기 때문입니다.

• • 테스트 스크립트

The test 스크립트는 npm이 실행하기 위해 run 매개변수가 필요하지 않은 스크립트 중 하나입니다. 하지만 run을 사용해도 잘 작동합니다. 실행하면 이 스크립트는 Jest라는 테스트 러너를 시작합니다. 테스터는 파일 확장자가 .spec.js 또는 test.js인 프로젝트 파일을 찾아 실행합니다.

다음 npm 명령은 test 스크립트를 실행합니다:

출력 결과에서 몇 가지 주의할 점이 있습니다. 테스트 러너는 특정 확장자를 가진 파일만 찾는다는 점을 기억하시나요? 이 경우 단 하나의 테스트 스위트만 존재합니다(파일명에 .test.js 확장자). 단 하나의 테스트만 포함하고 있습니다. Jest는 코드 계층 구조에서 테스트를 자동으로 감지할 수 있으므로, 디렉터리 내에 테스트를 자유롭게 중첩할 수 있습니다.

또한, Jest는 테스트를 한 번만 실행하고 종료하지 않습니다. 터미널에서 테스트를 계속 실행 상태로 유지합니다. 소스 코드에 변경 사항이 생기면 테스트를 다시 실행합니다. Jest는 실행할 테스트를 제한할 수도 있습니다. 예를 들어, 0을 누르면 변경된 파일만 테스트하도록 Jest에 지시할 수 있습니다. 테스트 스위트가 늘어남에 따라 이 옵션은 많은 시간을 절약해 줍니다. Jest 테스트 러너를 종료하려면 다음을 누르세요. q.

• • Eject 스크립트

이 eject 스크립트는 모든 의존성과 설정 파일을 프로젝트로 복사하여 코드에 대한 완전한 제어권을 제공합니다. 하지만 이렇게 하면 Create React App 통합 도구 체인에서 프로젝트가 제거됩니다. 한 번 실행하면 되돌릴 수 없습니다.

Create React App의 장점은 수많은 설정의 부담을 덜어준다는 것입니다. 현대적인 JavaScript 애플리케이션을 빌드하려면 함께 작동하는 많은 도구가 필요합니다. Create React App이 모든 설정을 대신 처리해 주므로, 프로젝트를 eject한다는 것은 그 이후의 모든 설정을 수동으로 해야 함을 의미합니다.

Create React App의 눈에 띄는 단점 중 하나는 모든 설정을 자체적으로 관리하기 때문에 프로젝트의 완전한 커스터마이징을 제공하지 않는다는 점입니다. 대부분의 프로젝트에서는 문제가 되지 않습니다. 하지만 프로젝트를 완전히 제어하고 싶다면 코드를 eject해야 합니다. 한 번 eject하면 Create React App의 새 버전으로 업데이트할 수 없습니다. 모든 개선 사항을 수동으로 관리해야 합니다.

4단계: 서버 시작

이제 로컬 서버를 시작하고 웹 브라우저에서 프로젝트를 실행해 보겠습니다. 서버를 시작하기 위해 사용할 수 있는 또 다른 스크립트가 있습니다. 이를 실행하는 데는 npm run 명령어가 필요하지 않습니다. 실행 시 스크립트는 로컬 서버를 시작하고, 프로젝트 코드를 실행하며, 감시자(watcher)를 시작하고, 코드 변경 사항을 감시합니다. 변경 사항은 브라우저에 즉시 반영됩니다. 다음 명령어로 서버를 시작할 수 있습니다:

출력 결과에 브라우저에서 프로젝트에 접속할 수 있는 URL이 표시됩니다. 또한 실행 중인 프로젝트에 대한 다양한 정보도 표시됩니다. 브라우저에서 해당 URL을 여세요:

출력 결과에서 볼 수 있듯이, Create React App은 3000 포트를 사용하여 프로젝트를 제공합니다. 해당 포트가 이미 사용 중인 경우, Create React App은 사용 가능한 다음 포트를 사용합니다. 방화벽이 설정되어 있다면 3000 포트(또는 Create React App이 보고하는 포트)로의 트래픽을 허용해야 합니다. 다음에 대해 자세히 알아볼 수 있습니다: 여기에서 UFW 방화벽 관리하기.

서버를 종료하려면 Ctrl+C 를 터미널 창에서 누르세요. 실행 중인 프로세스(서버 인스턴스)가 종료됩니다.

5단계: 홈페이지 수정

다음으로, public/ 디렉터리에 저장된 코드를 수정하는 방법을 알아보겠습니다. 이 디렉터리에는 기본 HTML 페이지가 포함되어 있으며 프로젝트의 루트 역할을 합니다. 앞으로 더 이상 편집할 필요가 없을 수도 있지만, 프로젝트의 기반 역할을 합니다.

먼저, npm으로 서버를 실행한 다음, public/ 디렉터리로 이동합니다:

디렉터리에는 favicon.ico, logo192.png, logo512.png 등과 같은 파일들이 포함되어 있습니다. 이들은 웹페이지를 방문하는 사용자가 탭, 브라우저 또는 휴대폰에서 보게 될 아이콘입니다. 브라우저가 적절한 크기의 아이콘을 자동으로 선택합니다. 결국에는 프로젝트에 적합한 아이콘으로 교체하게 될 것입니다. 지금은 그대로 두겠습니다.

The file manifest.json 파일은 구조화된 메타데이터(metadata) 세트를 보관합니다. 프로젝트를 설명하고 사용 가능한 아이콘 등을 나열합니다.

The file robots.txt 파일은 웹 크롤러(web crawlers)를 위한 정보를 보관합니다. 웹 크롤러는 월드 와이드 웹을 “크롤링”하며 검색 엔진을 위해 페이지를 인덱싱합니다. 특별한 이유가 없다면 이 파일을 수정할 필요가 없습니다. 예를 들어, 특정 콘텐츠에 대한 특정 URL을 쉽게 접근할 수 없도록 만들고 싶을 수 있습니다. 해당 위치를 robots.txt에 추가하면 검색 엔진에 의해 인덱싱되지 않습니다.

The file index.html은(는) 우리 애플리케이션의 루트입니다. 앱에 액세스할 때마다 이 파일이 제공됩니다. 화면에 표시되는 파일이 바로 이 파일입니다. 이 파일을 빠르게 살펴보겠습니다. 텍스트 에디터로 열어보세요:

꽤 짧은 파일입니다. 다음의 <body> 안에는 이미지나 단어가 없다는 점에 유의하세요. React는 자체 엔진을 사용하여 해당 콘텐츠를 빌드하고 JavaScript를 사용하여 주입합니다. 하지만 React는 코드를 어디에 주입해야 하는지 알아야 합니다. index.html 파일이 그 역할을 합니다.

다음의 <title>을(를) My React App:

그런 다음 파일을 저장하고 에디터를 닫습니다. 이제 브라우저에서 웹페이지를 확인해 보세요:

보시다시피 탭의 제목이 My React App(으)로 변경되었습니다. 자동으로 변경되지 않았다면 다음을 눌러 페이지를 새로고침하세요: F5 또는 Ctrl+R.

다시 텍스트 에디터로 돌아가겠습니다. 모든 React 프로젝트는 루트 엘리먼트에서 시작해야 합니다. 단일 페이지에 두 개 이상이 있을 수도 있습니다. 하지만 최소한 하나는 필수입니다. 이는 생성된 모든 HTML 코드를 어디에 둘지 React에 알려줍니다. 우리의 index.html 파일에서 다음 엘리먼트의 위치를 찾으세요: <div id="root">. 이 <div>은(는) React가 향후 변경 사항에 사용할 엘리먼트입니다. id 값을 root에서 base:

 

 

(으)로 변경해 보세요. 그 후 브라우저에서 페이지를 새로고침합니다. 아무런 콘텐츠도 표시되지 않을 것입니다. Firefox의 Web Developer Tools가 보여주듯이, 오류가 발생합니다:

텍스트 에디터로 돌아가서 id 값을 다시 root(으)로 변경합니다.:

6단계: 헤딩 태그 및 스타일 변경

지금까지 로컬 서버를 시작하고 루트 HTML 파일을 약간 변경해 보았습니다. 이제 src/ 디렉터리에 있는 React 컴포넌트를 작업해 보겠습니다. CSS 및 JavaScript 코드를 변경할 것입니다. 변경 사항은 핫 리로딩(hot reloading)을 통해 자동으로 적용됩니다.

서버가 중지되었다면 npm을(를) 사용하여 시작하세요. 그런 다음 src/ 디렉터리의 내용을 살펴보겠습니다:

여기에는 여러 JavaScript 및 CSS 파일이 있습니다. 하나씩 살펴보겠습니다.

• ServiceWorker.js

프로그레시브 웹 애플리케이션(PWA)을 만들고 싶다면 중요한 파일입니다. 이 서비스 워커는 푸시 알림, 오프라인 캐싱 등 다양한 기능을 제공합니다. 지금은 그대로 두겠습니다.

• SetupTests.js 및 App.test.js

이 파일들의 이름에서 알 수 있듯이, 이들은 파일을 테스트하는 데 사용됩니다. test 스크립트를 npm을(를) 사용하여 실행할 때마다 이 파일들이 실행되었습니다. setupTests.js 파일에는 몇 가지 커스텀 expect 메서드가 포함되어 있습니다.

다음 파일을 살펴보겠습니다: App.test.js. 텍스트 에디터로 열어보세요:

여기에는 문서에 learn react 문구가 있는지 확인하는 기본적인 테스트가 포함되어 있습니다. 브라우저 탭이 열려 있다면 페이지에서 이 문구를 볼 수 있습니다. 다른 단위 테스트와 달리 React 테스트는 다릅니다. 컴포넌트에는 마크업과 같은 시각적 정보(및 데이터 조작을 위한 로직)가 포함될 수 있으므로 기존의 단위 테스트는 쉽게 작동하지 않습니다. 그런 점에서 React 테스트는 기능 테스트 또는 통합 테스트의 한 형태로 설명하는 것이 더 적절합니다.

• CSS 파일

사용 가능한 다양한 스타일 파일이 있습니다: App.css, index.css, 그리고 logo.svg. React에서 스타일을 지정하는 방법은 여러 가지가 있습니다. 가장 쉬운 방법은 추가 구성이 필요 없는 일반 CSS를 작성하는 것입니다.

컴포넌트에 CSS를 직접 임포트할 수 있습니다. 이를 통해 CSS 파일을 분할하여 개별 컴포넌트에만 적용할 수 있습니다. 실제로 JavaScript에서 CSS를 분리하는 것은 아닙니다. 오히려 관련된 모든 구성 요소(CSS, JavaScript, 이미지, 마크업)를 함께 그룹화하는 것입니다.

텍스트 에디터로 App.css 파일을 여세요:

특별한 CSS 전처리기가 없는 표준 CSS 파일입니다. 원하는 경우 나중에 추가할 수 있습니다. Create React App은 즉시 사용 가능한 견고한 경험을 제공하면서도 중립성을 유지하고자 노력합니다.

변경 사항을 적용하고 실제로 확인해 보겠습니다. 다음의 값을 변경해 보세요. background-color 을(를) 다음으로: blue:

브라우저에서 변경 사항을 확인합니다:

• • Index.js

이제 React JavaScript 코드를 변경할 차례입니다. 다음 파일을 여세요. index.js 텍스트 편집기를 사용하여:

맨 위에서 다음을 가져오고(import) 있습니다. React, ReactDOM, index.css, App, 그리고 serviceWorker. 다음을 가져옴으로써 React, JSX를 JavaScript로 변환하는 데 필요한 코드를 가져옵니다. ReactDOM 은(는) React 코드를 기본 엘리먼트에 연결하는 코드입니다 ( index.html, 예를 들어). 다음 줄을 살펴보세요:

이것은 React에게 다음을 찾으라고 지시합니다. id (root라는 레이블을 가진)을 찾아 그곳에 React 코드를 주입하도록 지시합니다. <App/> 은(는) 루트 엘리먼트이며 모든 것이 여기에서 뻗어나갑니다.

CSS 파일(예: index.css)도 가져왔지만 실제로는 아무것도 하지 않았다는 점에 주목하세요. 가져오기를 통해 실제로는 Webpack에게 React 스크립트를 통해 최종 컴파일된 번들에 CSS 코드를 포함하도록 지시하는 것입니다. 그렇지 않으면 CSS 스타일이 표시되지 않습니다.

• App.js

다음으로, 다음을 살펴보겠습니다. App.js. 텍스트 편집기에서 여세요:

 

내용을 변경하면 프로젝트에 어떤 영향을 미치는지 살펴보겠습니다. 다음의 내용을 변경해 보세요. <p>태그:

그런 다음 파일을 저장하고 브라우저에서 변경 사항을 확인합니다:

짜잔! 첫 번째 React 컴포넌트 수정을 완료했습니다!

한 가지 더 주목할 점이 있습니다. 다음 엘리먼트를 살펴보세요. <img>:

다음에 주목하세요. logo 이(가) 중괄호 안에 전달됩니다. 속성(문자열이나 숫자가 아닌 것)을 전달할 때는 항상 중괄호 안에 전달해야 합니다. 그러면 React는 이를 문자열이 아닌 JavaScript 객체로 취급합니다.

In this case, the app isn’t actually importing the image. Instead, it’s a reference to the image. When Webpack builds the project, it puts the image in the appropriate position. We can verify it in the browser. Open the Web Developer Tools in Firefox:

Webpack은 모든 이미지에 고유한 파일 경로를 할당하고자 합니다. 따라서 이미지가 동일한 이름으로 가져와졌더라도 서로 다른 경로를 갖게 됩니다.

Step 7: Project Building

이 단계에서는 프로젝트를 배포 가능한 패키지로 컴파일하는 방법을 배웁니다. 터미널을 실행하고 다음을 실행하세요. build 프로젝트 스크립트:

컴파일러는 전용 디렉터리를 생성합니다. build/이곳에 출력물이 저장됩니다. 컴파일 프로세스가 무엇을 하는지 보려면 다음 파일을 여세요. index.html 파일 (다음 디렉터리에 있는): build/디렉터리):

보시다시피 모든 코드가 컴파일되고 압축(minify)되어 사용할 수 있는 가장 작은 상태가 됩니다. 이 코드는 대중에게 직접 노출되는 코드가 아니므로 가독성은 중요하지 않습니다. 압축된 코드는 모든 기능을 유지하면서도 공간을 덜 차지합니다. 공백이 매우 중요한 언어(예: Python)와 달리, 웹 언어(HTML, CSS, JavaScript)는 브라우저가 해석하는 데 적절한 공백이 필요하지 않습니다.

마치며

이 가이드에서는 React 애플리케이션을 만드는 방법을 성공적으로 보여주었습니다. 또한 복잡한 기술적 세부 사항 없이 JavaScript 빌드 도구를 사용하는 몇 가지 기본 설정도 보여주었습니다. 이것이 바로 Create React App이 제공하는 핵심 가치입니다. React를 시작하기 위해 모든 것을 알 필요는 없습니다. 복잡한 빌드 단계를 배우지 않고도 React 코드에만 전적으로 집중할 수 있습니다.

여기서 우리는 React 프로젝트를 시작, 테스트, 빌드하는 방법도 보여주었습니다. 이 명령어들은 모든 규모의 프로젝트에 필수적입니다.

즐거운 컴퓨팅 되세요!