[React] React 프로젝트 만들기(yarn, npx)

fedora 리눅스에서 React 프로젝트를 만듭니다. 프로젝트를 만들기 위해서 npx 또는 yarn을 사용할 수 있습니다. TypeScript를 사용하도록 지정하는 방법도 알아봅니다.

 

yarn을 사용하여 생성

 

yarn을 사용해서 프로젝트를 생성합니다. typescript를 사용하도록 지정합니다.

 

$ yarn create react-app first-app --template typescript

 

프로젝트들을 한 곳에 모으기 위해 홈 디렉토리 아래에 workspace 폴더를 만들고 그 폴더에서 명령을 실행했습니다.

프로젝트의 이름은 first-app 입니다. workspace폴더 아래에 first-app 폴더가 만들어지고, TypeScript를 사용하는 템플릿이 생성됩니다.

 

프로젝트 생성 명령 실행시 다음 에러가 발생한다면 global 설치 위치가 "/usr/local"로 설정 되어 있을 겁니다( "yarn config get prefix" 명령으로 현재 설정 확인).

 

error Cannot create "/usr/local/bin/create-react-app" due to insufficient permissions.

 

"/usr/local/bin" 폴더에 파일을 생성할 권한이 없어서 발생하는 에러 입니다. 다음 명령으로 설치 위치를 홈 디렉토리 아래에 ".local" 폴더로 지정합니다.

 

$ yarn config set prefix ~/.local

 

명령을 실행하면 홈 폴더 아래에 ".yarnrc" 파일에 생성되고 설정 정보가 저장됩니다.

 

npx를 사용하여 생성

 

npx를 사용해서 프로젝트를 생성합니다. tppescript를 사용하도록 지정합니다.

 

$ npx create-react-app my-app --template typescript

 

npm, npx, yarn

 

react 를 배우다 보면 많이 사용하는 것들이 npm, npx, yarn입니다. 차이점을 알아보겠습니다.

1. npm ( node package manager ) : 즉, 패키지 관리자 입니다. 자바스크립트를 웹 환경이 아닌 일반 애플리케이션 처럼 사용하기 위해 node를 사용합니다. node에서 사용하는 패키지화된 모듈을 관리하는 프로그램입니다.

2. npx ( execute npm package binaries ) : node 모듈을 실행하는 도구입니다. npm에서 실행기능만 뽑아둔거라고 보면 됩니다.

3. yarn : 2016년 페이스북에서 개발한 패키지 관리자 입니다. reac로 개발함에 있어서 npm의 문제점을 개선하여 만들어 졌다고 합니다. npm 대비 빠르고, 보안성이 높다고 합니다.

 

프로젝트 실행

 

프로젝트가 생성되면 package.json 파일내에 "scripts" 항목에 자주 실행하는 명령을 간편하게 사용할 수 있도록 등록되어 있습니다.

 

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "coverage": "react-scripts test --coverage ."
},

 

실행은 npm run 또는 yarn 다음에 명령을 입력하면 됩니다.

 

# npm 사용시
$ npm run start

# yarn 사용시
$ yarn start

 

각각의 의미는 다음과 같습니다.

1. start : 개발용 서버를 시작합니다.

2. build : 개발된 프로그램을 프로덕션에 서버에 올리기 위해 정적 파일 묶음(bundle)을 만듭니다.

3. test : 테스트 러너를 시작합니다. 소스가 수정되면 자동으로 감지하여 테스트를 실행합니다.

4. eject : CRA(create-react-app)을 사용해서 만들어진 도구가 제거되고 빌드 종속성, 구성파일 및 스크립트를 프로젝트 폴더내에 config, scripts 폴더로 복사합니다. 이 명령을 되돌릴 수 없습니다.

이 명령은 CRA가 제공해주는 기능을 포기하고, 모든 설정을 직접 커스트마이징할 때 사용할 수 있다고 합니다.

5. coverage : 이 명령은 기본 제공되는 것이 아니라, 나중에 직접 추가한 것입니다. 테스트 커버리지를 볼 수 있습니다.