3. CRA

2017.07 React with TypeScript 스터디 정리.

CRA - Create React App by Dan Abramov ( https://twitter.com/dan_abramov )

React 작업환경을 명령어 하나로 설정할수 있는 '공식도구'

여러 작업환경을 설정하느라 시간을 투자하지 않아도 되는 매우 좋은 도구입니다!!

즉 react를 사용함에 있어서, Component개발을 제외한 다른것은 최대한 신경쓰지 않아도 되게 해주는 Cli입니다.

( CRA 에서는 PWA - ProgresiveWebApp 적용이 일부 되어있습니다!! )

이번 포스트 부터는 실제로 간단한 실습을 첨부하겠습니다.

본인의 PC에 NodeJS가 없다면, 설치해 주시기 바랍니다. https://nodejs.org/

1. CRA 설치하기

create-react-app 을 글로벌 패키지로 설치해주세요.

npm install -g create-react-app

2. CRA 생성

CRA를 이용하여 typescript로 만들어진 프로젝트를 생성합니다. 여기서는 프로젝트 이름을 create-react-app-ts로 하겠습니다.

create-react-app create-react-app-ts --script-version=react-script-ts

명령어 설명

create-react-app  :   CRA 실행 명령어입니다.

create-react-app-ts   :   프로젝트 이름입니다. 사용자가 원하는 이름을 넣으시면 됩니다.

--script-version=react-script-ts   :   create-react-app 을 실행하는 스크립트를 typescript로 사용하겠다는 명령어입니다. 이 명령어를 쓰지 않으면 Javascript로 만들어진 CRA가 생성됩니다.

3. CRA 둘러보기

생성된 프로젝트의 폴더 구조 입니다.

우선 여기서 package.json 을 살펴보겠습니다.

{

"name": "create-react-app-ts",

"version": "0.1.0",

"private": true,

"dependencies": {

"@types/jest": "^20.0.2",

"@types/node": "^8.0.8",

"@types/react": "^15.0.35",

"@types/react-dom": "^15.5.1",

"react": "^15.6.1",

"react-dom": "^15.6.1",

"react-scripts-ts": "2.3.2"

},

"devDependencies": {},

"scripts": {

"start": "react-scripts-ts start",

"build": "react-scripts-ts build",

"test": "react-scripts-ts test --env=jsdom",

"eject": "react-scripts-ts eject"

}

}

매우 깔끔합니다.

특히 dependencies의 수가 매우 적습니다.

또한 설정파일들 또한 겉으로는 찾아볼수가 없습니다. 빌드 설정은 preconfigured 되어있고 변경 할 수 없습니다.

물론 node_modules / react-scripts-ts / config 에 가보시면, 설정파일들이 있습니다. 허나 변경하시면 안됩니다..

즉 이 상태에서는 이 환경의 커스텀마이징이 불가능합니다.

만일 커스텀마이징이 필요한 경우에는???? 방법이 있습니다.

잠시 scripts 명령어를 살펴보겠습니다. 총 4개입니다.

개발용 서버 실행에는 npm run start

프로덕션 빌드에는 npm run build

테스트에는 npm run test 입니다.

마지막 eject 명령어.. 이 명령어가 현재 프로젝트의 모든 설정 및 스크립트를 밖으로 내보내줍니다.

즉 eject를 하고 난 뒤에는 커스텀마이징이 가능해집니다.

한번 해보겠습니다.

npm run eject

경고창이 뜨게 됩니다. 간단히 말하면, 이 명령어를 한번 실행하면, 되돌릴수 없다는 말입니다.

테스트 중이므로 과감하게 Y를 선택하겠습니다.

eject이후 폴더 구조 입니다.

config 폴더와 script 폴더가 추가되었습니다.

그렇다면 package.json 도 살펴보겠습니다.

{

"name": "create-react-app-ts",

"version": "0.1.0",

"private": true,

"dependencies": {

"@types/jest": "^20.0.2",

"@types/node": "^8.0.8",

"@types/react": "^15.0.35",

"@types/react-dom": "^15.5.1",

"react": "^15.6.1",

"react-dom": "^15.6.1"

},

"devDependencies": {

"autoprefixer": "7.1.0",

"app-root-path": "^2.0.1",

"case-sensitive-paths-webpack-plugin": "2.0.0",

"chalk": "1.1.3",

"cli-highlight": "1.1.4",

"css-loader": "0.28.1",

"dotenv": "4.0.0",

"extract-text-webpack-plugin": "2.1.0",

"file-loader": "0.11.1",

"fs-extra": "3.0.1",

"html-webpack-plugin": "2.28.0",

"jest": "20.0.3",

"object-assign": "4.1.1",

"postcss-flexbugs-fixes": "3.0.0",

"postcss-loader": "2.0.5",

"promise": "7.1.1",

"react-dev-utils": "^2.0.1",

"react-error-overlay": "^1.0.6",

"style-loader": "0.17.0",

"ts-loader": "^2.0.3",

"tslint": "^5.2.0",

"tslint-loader": "^3.5.3",

"tslint-react": "^3.0.0",

"typescript": "~2.3.3",

"source-map-loader": "^0.2.1",

"sw-precache-webpack-plugin": "0.9.1",

"url-loader": "0.5.8",

"webpack": "2.6.0",

"webpack-dev-server": "2.4.5",

"webpack-manifest-plugin": "1.1.0",

"whatwg-fetch": "2.0.3"

},

"scripts": {

"start": "node scripts/start.js",

"build": "node scripts/build.js",

"test": "node scripts/test.js --env=jsdom"

},

"jest": {

"mapCoverage": true,

"collectCoverageFrom": [

"src/**/*.{js,jsx,ts,tsx}"

],

"setupFiles": [

"<rootDir>/config/polyfills.js"

],

"moduleFileExtensions": [

"ts",

"tsx",

"js",

"jsx",

"json"

],

"testMatch": [

"<rootDir>/src/**/__tests__/**/*.ts?(x)",

"<rootDir>/src/**/?(*.)(spec|test).ts?(x)"

],

"testEnvironment": "node",

"testURL": "http://localhost",

"transform": {

"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",

"^.+\\.tsx?$": "<rootDir>/config/jest/typescriptTransform.js",

"^(?!.*\\.(css|json)$)": "<rootDir>/config/jest/fileTransform.js"

},

"transformIgnorePatterns": [

"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$"

],

"moduleNameMapper": {

"^react-native$": "react-native-web"

}

},

"babel": {

"presets": [

"react-app"

]

},

"eslintConfig": {

"extends": "react-app"

}

}

엄청나게 바뀌었습니다.

물론 script는 eject가 사라진것 이외에는 기능을 포함하여 변한것이 없지만 여러 각종 설정들이 추가된것을 볼수 있습니다.

따라서 eject 사용으로 프로젝트의 환경을 커스텀마이징 할수 있게 변함을 알수 있습니다.

하지만 이 블로그에서는 eject를 사용하지 않습니다. 그냥 이러한 기능이 있다고 알아두시기 바랍니다.

4. 개발 서버 실행

다시 처음 생성된 프로젝트로 돌아와서 개발서버를 실행해 보겠습니다. ( 이미 eject 하셨어도 상관은 없습니다. )

npm run start

스크립트가 실행이 되면서, localhost:3000 의 주소로 새로운 브라우져창이 열리게 됩니다.

5. 프로덕트 빌드

이번에는 프로덕트 빌드 명령어를 실행해 보겠습니다.

npm run build

스크립트가 실행이 되면서 build 폴더 생성이 됩니다.

내용은 아래와 같습니다.

5. 테스트 실행

테스트 실행입니다.

npm run test

간단하게 CRA의 설치와 명령어들에 대해 포스팅 하였습니다.

다음 포스트는 tsconfig.json 과 tslint.json에 대해 포스팅 하겠습니다.

---

참고 슬라이드 - http://slides.com/woongjae/react-with-typescript-1#/
참고 동영상 - https://www.youtube.com/playlist?list=PLV6pYUAZ-ZoHx0OjUduzaFSZ4_cUqXLm0