Hwans's Dev Blog

리액트로 Web Application 만들기 Ep1

2019-08-22T00:00:00+00:00

리액트로 Web Application 만들기

React.js 혹은 Vue.js 혹은 Angular.js를 활용하여 SPA를 개발해본 자
React.js + Redux를 가지고 웹 어플리케이션을 개발해본 자
React.js + Next.js에 대한 개발경험이 있는 자..

Web FrontEnd 채용 공고를 보면 흔히들 볼수 있는 요건들입니다.
특히 특정 프레임워크를 활용하여 개발하는 것을 선호함을 볼수 있는데요.

그 중에서도 뜨거운 인기를 자랑하는 React.js
이 React.js를 가지고 Web Application을 같이 개발해보는 경험을 해보고자 합니다.
저희가 만들 Web Applicatoin은 OP.GG와 같은 게임 전적을 확인하는 사이트입니다.

React.js를 모르는 분들을 위한 소개

React.js는 Facebook에서 만든 모던 프론트엔드 개발을 위한 라이브러리로,
UI의 개발 및 복잡도를 컨트롤하기 위해 개발되어졌으며,
현재 많은 프론트엔드 개발자들의 사랑을 받으며 꾸준히 성장중입니다.
(2019-08-22 현재 Latest Version: 16.9.0)

React를 알면 React-Native를 사용하여, 앱 개발도 할 수 있고,
Proton-Native를 이용하여, 데스크탑 앱을 개발할 수 있습니다.
(추상화가 잘되어있어, 타 플랫폼에서도 사용가능 하기 때문에 이러한 장점을 누릴 수 있습니다.)

개발을 하기 위한 환경구성

개발을 하기 위한 환경 구성을 해볼건데요!
먼저 필요한 것들이 있습니다!

Text-Editor (VScode, Atom...) 설치
Node.js 설치
Homebrew && Yarn 설치 (MacOS 사용자의 경우)

일단 요 3가지가 설치되어야 저와 같이 개발환경 구성을 할 수 있는데요!
간단히 설명드리면, Text-Editor란 코드를 좀 더 편안하고 생산성있게 작성할 수 있도록 도와주는 프로그램입니다.
Atom과 Vscode, Bracket등.. 다양한 에디터들이 있으며, 개인적으로는 VScode를 추천드립니다.

1번이 설치가 끝났으면, Node.js를 설치해야하는데요!
리액트를 설치하고 리액트 관련 외부 패키지를 사용하기 위해서 NPM(Node Package Manager)이 필요한데
NPM은 Node.js를 설치해야 사용가능하기에 Node.js를 설치합니다.
여기를 누르시면 다운로드 사이트로 이동합니다.
설치후 잘되었는지 확인하기 위해서는 터미널을 여시고 아래 명령어를 입력하여 확인이 가능합니다.

# node.js 버젼확인 : ex) v12.6.0
node -version

# npm 버젼확인 : ex) 6.10.3
npm -version

2번까지 끝이난다면 React.js로 개발하기 위한 준비는 끝이납니다.
하지만 MacOS를 사용하시는 분들은 Homebrew와 Yarn을 설치를 하도록 하겠습니다.
Homebrew는 Apple(또는 Linux 시스템)에서 제공하지 않는 유용한 패키지 관리자입니다.
Homebrew를 설치하는 이유는 Yarn을 설치하기 위함입니다.
NPM을 이용하여 리액트 관련 외부 패키지를 설치할 때 이슈가 생기는 경우가 간혹있는데
이런 경우 Yarn을 사용하는 것을 권장드립니다.
Yarn은 React.js를 개발한 Facebook에서 만든 자바스크립트 패키지 매니저로,
NPM보다 속도 측면에서 빠르다는 장점이 있습니다.
하단의 코드를 복사하여 터미널에 붙여넣기 후 엔터를 누르시면 설치가 됩니다.

# Homebrew 설치
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

# 설치 후 버젼확인
brew --version

# Yarn 설치
brew install yarn

# 설치 후 버젼확인
yarn --version

React.js 개발환경세팅

개발을 위한 환경을 갖추었으니 드디어 React.js 개발을 위한 개발환경을 갖춰보도록 하겠습니다.
React.js를 개발환경을 갖추는 방법으로는 2가지가 있는데요!

(1) CRA(create-react-app)을 이용한 개발환경세팅
(2) 직접 개발환경세팅

1번의 경우 위에서 했던 것처럼 해당 명령어(yarn global add create-react-app)를 터미널에 입력하여 설치한 후,
creact-react-app ${projectName}를 터미널에 입력하면 projectName으로 react 프로젝트를 간편히 만들어줍니다.
굉장히 편리하지만, 쓰지않는 것들과 어떻게 작동하는지 모르는 요소들이 많이 있어서 가급적 사용하지 않는데,
리액트에 경험이 없는 경우 혹은 빠르게 프로토타이핑을 개발하는 경우에는 사용해도 좋을 것 같습니다.

2번의 경우 1번과 달리 일일히 설치하고 만들어줘야하는 조금의 불편함이 있긴하지만,
직접 쓸 것들만 설치하고, 개발환경을 100% 본인이 제어하기에 나중에 문제가 생겼을 때도
금방 해결할 수 있고, 여러부분의 장점이 있습니다.
저희 프로젝트는 조금 까다롭지만 추후의 더 큰 편리함을 위해 직접 개발환경을 세팅할 것입니다.

1. mkdir ${projectName}

터미널을 켜고 해당 명령어를 입력하여 프로젝트를 관리할 폴더를 만듭니다.
제 경우에는 mkdir React_OP_GG로 하였습니다.

2. package.json 생성 (npm init)

터미널을 통해 해당 폴더(cd ${projectName})에 들어가서 npm init -y이라는 명령어를 입력합니다.
npm init이라는 명령어는 package.json이라는 프로젝트 정보를 담은 json파일을 만들어줍니다.
npm init을 하면 각각의 항목에 무엇이 들어갈지 물어보는데 npm init -y를 하면
모든 요소에 대해 default값을 넣어 만들어줍니다.

3. package.json 정보 수정

텍스트 에디터를 켜서 해당 프로젝트 폴더에 들어가면 package.json이라는 파일이 존재하는 것이 보이실텐데요!
package.json은 지금 default값을 넣어 만들어진 상태이기 때문에 저희의 프로젝트 정보에 맞게 수정해줍니다.
아래는 제가 미리 수정한 package.json입니다.

{
  "name": "${yourProjectName}",
  "version": "1.0.0",
  "description": "Opgg site to make with react.js",
  "main": "index.js",
  // 명령어를 일일히 입력하지 않아도 이렇게 정리해놓으면
  // yarn run dev하면 parcel src/index.html가 실행됩니다.
  // 개발시 생산성 향상에 도움이 됩니다.
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html"
  },
  "author": "",
  "license": "ISC",
  // 이 해당 옵션은 browserslist 라이브러리에 대한 옵션으로서,
  // 서로 다른 front-end 툴 간에 브라우저의 타겟을 공유하기 위해 사용합니다.
  // 다음과 같은 곳에서 사용되며, 지정하는 값을 하단의 모듈들이 참고합니다.

  // Autoprefixer
  // babel-preset-env
  // postcss-preset-env
  // eslint-plugin-compat
  // stylelint-no-unsupported-browser-features
  // postcss-normalize

  // IE 10과 99.5% 정도의 커버리지를 갖는 인기있는 브라우저를 지원하겠다라는 의미
  "browserslist": ["cover 99.5%", "IE 10"],
  // 개발단에서 사용할 모듈
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-env": "^7.5.5",
    "babel-loader": "^8.0.6",
    "parcel-bundler": "^1.12.3"
  },
  // 실제 배포할 서비스에서 사용할 모듈
  "dependencies": {
    "aix": "0.0.15",
    "autoprefixer": "^9.6.1",
    "axios": "^0.19.0",
    "babel-polyfill": "^6.26.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "regenerator-runtime": "^0.13.3",
    "styled-components": "^4.3.2"
  }
}

yarn add @babel/core @babel/preset-react babel-loader @babel/preset-env parcel-bundler --dev yarn add aix autoprefixer axios babel-polyfill react react-dom react-redux regenerator-runtime styled-components

이 두줄의 명렁어를 터미널에 입력하여 설치하면 –dev를 입력한 것은 devDependencies에
두번째처럼 –dev가 없는 것은 dependencies에 자동으로 설치가 됩니다.
버젼을 정해주지 않으면 최신버젼으로 설치가 되는데 간혹 버젼이 현재의 리액트 버젼과 충돌이 나는 경우도 있으니
그럴땐 사용하실 모듈의 버젼을 리액트와 호환되는 것으로 교체하시면 됩니다.

위의 명령어가 귀찮다 싶으시면 위의 json파일중 devDependencies와 dependencies를 복사하셔서
프로젝트 내의 package.json에 붙여넣기하시고 터미널을 열고 프로젝트 내부로 경로를 이동 후
yarn install이라고 명령어를 입력해주시면 설치가 됩니다.

package.json에서 중요한 것은 devDependencies와 dependencies인데요.
devDependencies는 개발환경에서 사용할 모듈을 의미하며,
dependencies는 나중에 유저에게 제공할 프로덕트에 필요한 모듈을 의미합니다.

devDependencies에서는 눈여겨볼 것이 babel과 parcel이 있네요!
babel은 자바스크립트 컴파일러로, 입력과 출력 모두 자바스크립트입니다.
최신 문법의 자바스크립트를 구버젼의 자바스크립트로 문법을 변환시켜주어
브라우저들이 문제없이 코드를 인식하도록 도와줍니다.
저희 또한 ES2015(ES6) 문법을 사용할 것이기에, babel 설치가 필요합니다.

parcel은 필요한 의존성(dependencies)에 대해 정확하게 추적하여 해당하는 의존성들을 그룹핑해주는 도구입니다.
webpack, rollup과 같은 다른 번들러도 있지만, 앞선 번들러와 달리 별도의 설정이 필요없고,
워커 프로세스를 이용하여 멀티코어 컴파일을 하며, 파일 시스템 캐시를 갖고 있어 재시작후에도 빠른 리빌드를 제공해줍니다.
parcel의 장점만 너무 설명드렸는데, 코드 스플리팅과 같은 작업에서는 또 다른 번들러보다 느려서
정확한 비교를 해놓은 글을 공유드릴테니 읽어보시고 맞는 번들러를 사용하시는 걸 추천드립니다.
해당 프로젝트 튜토리얼에서는 파셀을 쓸 예정입니다. 다른 번들러를 설정하여 사용하셔도 괜찮습니다.

4. babel 설정

위에서 말씀드린 바벨을 설정해주기 위해서는 프로젝트 폴더 내부에 .babelrc라는 파일을 만듭니다.
그리고 아래의 내용을 입력해줍니다.
자세하게 설명을 드리기에는 내용이 많아 추후에 따로 소개해드리겠습니다.

{
    "presets": ["@babel/preset-react", "@babel/preset-env"]
}

5. 파일 추가

해당 프로젝트 폴더 내에 src라는 폴더를 만들고 폴더 내부에 index.html, index.js 라는 파일을 추가해줍니다.
그리고 react라는 폴더를 생성하고 react폴더 내부에 App.js라는 파일을 추가해줍니다.
그리고 아래의 코드를 타이핑 혹은 복사 및 붙여넣기하시면 됩니다. (가급적이면 손에 익는게 좋으니 타이핑을 권장드립니다.)

// index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>OPGG</title>
</head>

<body>
    <!-- 렌더할 대상의 div를 하나 만듭니다. -->
    <!-- id는 다른것으로 변경해도 reactDom 렌더 대상만 똑같이 바꿔주면 상관없습니다. -->
    <!-- 꼭 react를 쓴다고 react 하나만을 써야하는 것은 아니며 -->
    <!-- vue.js도 같이 쓸수 있습니다. 하지만 그러지 않는게 좋습니다. -->
    <div id="app"></div>

    <!-- index.js 로드 -->
    <script src="index.js"></script>
</body>

</html>

// index.js

//----------------------------
// import React && React-dom
//----------------------------

import React from "react";
import ReactDom from "react-dom";

//----------------------------
// import App.js
//----------------------------
import App from "./react/App.js";

// 추후 Redux or Context를 쓰기 위해 별도 Entry 컴포넌트 구성했습니다.
const Entry = () => {
  return <App />;
};

// index.html의 id가 app인 div에 Entry(<App/>)를 Render를 하겠다는 의미입니다.
ReactDom.render(<Entry />, document.querySelector("#app"));

// App.js

import React from "react";

const App = () => {
  return (
    <span style=>Welcome To React.js</span>
  );
};

export default App;

이렇게 폴더를 작성하고 터미널을 켜서 프로젝트 폴더로 이동후 yarn run dev라고 치면
parcel의 빌드를 거쳐 http://localhost:1234에 React 앱을 구동시켜줍니다.
그러면 다음과 같은 화면이 렌더링 된 것을 보실 수 있습니다.

아직까지 대단해보이진 않아도, 우리는 직접 개발환경을 세팅하고
React.js를 웹 브라우저에 렌더링 시키는 것까지 성공적으로 해냈습니다.

리액트16 알아보기

2019-08-20T00:00:00+00:00

지나간 리액트도 다시볼겸 알아보는 React 16

2018-10-16 Study Prepare

CRA 2.0 Review

create-react-app 2.0 Feature

No more Webpack, Easy to use sass - 더 이상 Webpack loader 없이 sass 를 사용할 수 있게 되었습니다.

$ yarn add node-sass

node-sass 를 설치하면 sass 를 간편하게 사용할 수 있습니다.
기존까지 sass 를 이용하려면 webpack loader 를 설정하는 등
복잡한 과정이 있었습니다. (eject 잘못해서 파일 다시 만드는 경우도 있더랬죠..)

// FcStudy.js

import React from "react";
import "./FcStudyStyle.scss";

const FcStudy = () => {
  return (
    <div className="FcStudy">
      In order to become a legend,
      <div className="FcStudyExample">Do Our Best</div>
    </div>
  );
};

export default FcStudy;

// App.js
import React, { Component } from "react";
import FcStudy from "./FcStudy";

class App extends Component {
  render() {
    return (
      <div className="App">
        <FcStudy />
      </div>
    );
  }
}

export default App;

// FcStudyStyle.scss

.FcStudy {
  display: inline-block;
  background: rgba(166, 55, 33, 0.5);
  color: #fff;
  padding: 1rem;
  text-align: center;

  &Example {
    font-size: 2rem;
    font-weight: 500;
    color: yellow;
    text-align: center;
  }
}

이렇게 잘 sass 가 적용되는 것을 보실 수 있습니다.

기존에 웹백 loader 를 설정하는등.. sass 를 쓰기위해
귀찮은 작업을 하곤 했었는데 CRA 2.0 이 릴리즈 되면서
편하게 사용할 수 있습니다.

CSS Module Support

이 기능에 대해서는 스터디에 참여하신 분들중
잘 모르셨던 분들도 있으실 수 있을 것 같다고 생각합니다.
바로 아래 코드와 같은 것들인데요!

/* ExampleCssModule.module */

.exampleBox {
  background: salmon;
  color: white;
  padding: 1rem;
  font-size: 1.3rem;
}

.exampleText {
  color: powderblue;
  font-weight: bold;
}

// ModuleCSS.js

import React from "react";
import styles from "./ExampleCssModule.module.css";

const ModuleCSS = () => {
  return (
    <div className={styles.exampleBox}>
      <div className={styles.exampleText}>Hello CSS Module</div>
    </div>
  );
};

export default ModuleCSS;

쉽게 말해서 CSS 의 재사용을 위해 모듈화 시킨 것입니다.
CSS Module 을 이용하기 위해서는 .module.css 라는 이름으로
CSS 파일을 작성한 뒤, 기존 css 를 불러오듯 import 를 하되
alias(별칭)을 설정하여 불러오고, 위의 js 코드처럼 사용하면 됩니다.
어때요? 참쉽죠?

Upgrade To Babel 7

Babel 7 으로 업그레이드가 되면서 빌드속도가 개선되었습니다.
추가적으로는 preset-typescript 를 통한 타입스크립트 지원 및
자동적인 Polyfill 등의 기능이 도입되었습니다.

특히 리액트를 사용해서 개발을 하는 분들의 경우에는 다음과 같은 점이 흥미로운데요!
기존에 React16 에서 알려진 <></> (= 와 같은 의미)를
사용하기 위해서 별도의 커스터마이징이 필요했는데 Babel 7 으로 오면서
별도의 설정 없이도 사용가능합니다.

// 기존에 코드에 div를 추가했습니다.
// 두개의 태그가 return 태그안에 있어서 에러가 나는데
// 여기에 div, span, React.Fragment가 아닌 <></> 넣어보았습니다.
// 결과는 어떨까요?

import React from "react";
import "./FcStudyStyle.scss";

const FcStudy = () => {
  return (
    <>
      <div className="FcStudy">
        In order to become a legend,
        <div className="FcStudyExample">Do Our Best</div>
      </div>
      <div className="FcStudy">We will do anything!</div>
    </>
  );
};

export default FcStudy;

에러없이 정상적으로 화면이 출력되는 것을 보실 수 있습니다.
앞써 말씀드린 preset-typescript 와 자동 폴리필이 궁금하신 분들은 링크를 참조해주세요!!:)

preset-typescript 을 궁금해하실 분이 있으실 것 같아서 설명드리자면
아래와 같습니다.

1. 다음과 같이 설치를 해준다음 (리액트에는 자동으로 babel이 설치되니 설치할 필요가 없습니다.)
npm 대신 yarn을 사용하시는 경우 npm install 대신 yarn add로 입력해주세요!

npm install --save-dev @babel/preset-typescript @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread

2. 다음과 같이 .babelrc를 설정해줍니다.

{
    "presets": [
        "@babel/env",
        "@babel/preset-typescript"
    ],
    "plugins": [
        "@babel/proposal-class-properties",
        "@babel/proposal-object-rest-spread"
    ]
}

3. babel / cli로 간단한 빌드를 실행합니다.

babel ./src --out-dir lib --extensions ".ts,.tsx"

4. 이제 lib 디렉토리에서 파일을 빌드하고 생성합니다.
TypeScript로 유형 검사를 추가하려면 tsconfig.json 파일을 작성하시면 됩니다.

{
  "compilerOptions": {
    /* Target latest version of ECMAScript. */
    "target": "esnext",
    /* Search under node_modules for non-relative imports. */
    "moduleResolution": "node",
    /* Process & infer types from .js files. */
    "allowJs": true,
    /* Don't emit; allow Babel to transform files. */
    "noEmit": true,
    /* Enable strictest settings like strictNullChecks & noImplicitAny. */
    "strict": true,
    /* Disallow features that require cross-file information for emit. */
    "isolatedModules": true,
    /* Import non-ES modules as default imports. */
    "esModuleInterop": true
  },
  "include": [
    "src"
  ]
}

5. 작동시킵니다

tsc

// 기존에는 타입스크립트를 사용할 경우 parameter에도 타입을 명시했었는데

interface Person {
  firstName: string;
  lastName: string;
}

function greeter(person: Person) {
  return "Hello, " + person.firstName + " " + person.lastName;
}

// 이제는 명시하지 않아도 됩니다.

function greeter(person) {
  return "Hello, " + person.firstName + " " + person.lastName;
}

자세한 내용은 아래 링크를 참조해주세요!
https://blogs.msdn.microsoft.com/typescript/2018/08/27/typescript-and-babel-7/

Upgrade To Webpack v4

웹팩이 v4 로 업그레이드되면서 번들링 속도가 개선되었고,
JS 번들을 분리할 때 좀 더 스마트하게 분리한다고 합니다.
yarn build 를 입력해보면 아래처럼 나타납니다.

1.000.chunk.js 에는 react, react-dom 이
main.000.chunk.js 에는 우리가 작성한 component 들의 코드가 있습니다.

create-react-app v2.0 이전에는 CommonsChunkPlugin를 사용해서
했던 작업이 optimization.splitchunk라는 API 를 통해 자동으로 이뤄진다고 합니다.
chunk 를 나누고 최적화한다는 내용의 이름의 뜻처럼 닉값(?)하네요!

Import SVG as React Component

SVG 를 불러올 때 이전처럼 그냥 불러올 수도 있지만

// 기존

import picture from "./picture.svg";

이제 컴포넌트화하여 불러올 수 있습니다.

// CRA 2.0

import { ReactComponent as Picture } from "./picture.svg";

이렇게 컴포넌트화하여 불러온 svg 를 다음처럼 사용할 수 있습니다.

import React from "react";
import "./FcStudyStyle.scss";
import { ReactComponent as Picture } from "./picture.svg";

const FcStudy = () => {
  return (
    <>
      <div className="FcStudy">
        In order to become a legend,
        <div className="FcStudyExample">Do Our Best</div>
      </div>
      <div className="FcStudy">We will do anything!</div>
      <Picture />
    </>
  );
};

export default FcStudy;

Picture.svg 는 가상의 파일이여서 출력 결과를 보여드리지 못하지만
충분히 정상적으로 svg 가 화면에 출력되는 코드이니 svg 파일을 가지고
따라해보시길 권장드립니다!
img 혹은 object 로 불러오거나 별도의 컴포넌트를 만들어서 가져올 필요 없이
사용할 수 있으니 어때요? 참 편하죠?

Customize proxy settings

종종 웹팩 개발 서버에서 백엔드 API 를 호출시 발생하는 CORS 에러를 방지하기 위해
웹팩 개발 서버에서 proxy 를 설정 할 수 있습니다.
기존에도 package.json 에서 proxy 빌드를 설정할 수 있었습니다.

{
  "name": "what-is-new",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "node-sass": "^4.9.3",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-scripts": "2.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"],
  "proxy": "https://jsonplaceholder.typicode.com"
}

이렇게 지금도 똑같이 하시면 됩니다.
그럼 뭐가 달라졌냐고 생각하실텐데
바로 커스터마이징이 가능해진 것 입니다.

여기서 직접 커스터 마이징도 가능합니다만
중간 단계에서부터 작업을 해야할 경우는 이 proxy 는 삭제하고,
http-proxy-middleware 라는 모듈을 설치하고,
src 에서 setupProxy.js 라는 파일을 설치합니다. (파일명은 컨벤션입니다.)

위에서처럼 yarn 사용자는 npm install 대신 yarn add를 입력해주세요!

npm install http-proxy-middleware axios

// src/setupProxy.js

const proxy = require("http-proxy-middleware");

module.exports = function(app) {
  app.use(
    proxy("/posts", {
      target: "http://jsonplaceholder.typicode.com/",
      changeOrigin: true

      // virtual host의 경우 아래처럼 해줍니다.
        target: {
            host: 'hwan.branchYamme.com',
            protocol: 'http:',
            path: '/myBranch/mylunch/js-eat.js',
        },
        // 기타 설정들 (다음은 예시입니다.)
        secure: false,
        ignorePath: true,
        changeOrigin: true,
    })
  );
};

여기서 사용하는 app 은 Express 서버 인스턴스입니다.
proxy 쪽에 changeOrigin 의 경우엔 jsonplaceholder 에서
Origin 을 전달하지 않으면 제대로 처리가 안되기에 넣어준 것입니다.

만약 우리가 쓰는 API 서버에서 Virtual Host
(요청 받는 Domain 의 이름에 따라 다른 요청 처리하기)를 사용하고 있다면,
이 설정을 해줘야 합니다.

지금까지 잘 따라오셨다면 이제 axios 를 통해서 요청을 합니다.

import React, { Component } from "react";
import axios from "axios";

class App extends Component {
  state = {
    data: null
  };
  getPost = async () => {
    try {
      const response = await axios.get("/posts/1");
      this.setState({
        data: response.data
      });
    } catch (e) {
      console.log(e);
    }
  };
  componentDidMount() {
    this.getPost();
  }
  render() {
    if (!this.state.data) {
      return <div>로딩중...</div>;
    }
    const { title, body } = this.state.data;

    return (
      <div>
        <h1>{title}</h1>
        <p>{body}</p>
      </div>
    );
  }
}

export default App;

Don”t Support IE

CRA 2.0 부터 Internet Explorer (A.K.A.. 야근유발자)를
기본적으로 아예 지원하지 않는다고 합니다.
지원이 필요하다면 react-app-polyfill 을 사용해야 합니다.

이제는 yarn add 말 안해도 아시죠??:)

npm install react-app-polyfill

설치가 완료되었으면 src/index.js 에 아래의 코드를 추가해줍니다.

import "react-app-polyfill/ie9"; // For IE9
import "react-app-polyfill/ie11"; // For IE11

자세한 내용은 여기를 참조해주세요!

ETC..

serviceWorker.unregister();의 등장 - 이제는 서비스워커를 사용하려면 이 함수를
serviceWorker.registser();로 바꿔야 합니다.
안쓴다고 지우던 게 엇그제 같았는데 이제는 굳이 지우는 번거로운 일을 안해도 되네요!

여기서 잠깐 서비스워커를 모르시는 분들을 위해 간략한 설명!

서비스 워커는 브라우젛가 백그라운드에서 실행하는 스크립트로 웹 페이지와는 별개로 작동하며,
웹페이지 또는 사용자 상호 작용이 필요하지 않은 기능에 대해 문호를 개방합니다.
현재 푸시 알림 및 백그라운드 동기화와 같은 기능은 이미 제공되고 있습니다.
향후 서비스 워커는 주기적 동기화 또는 지오펜싱과 같은 다른 기능을 지원할 예정이라고 합니다.

이것이 이처럼 흥미로운 API 인 이유는
오프라인 환경을 완벽히 통제할 수 있는 권한을 개발자에게 부여하여 오프라인 환경을 지원할 수 있도록 해주기 때문입니다.

이상으로 create-react-app v 2.0 의 리뷰를 마치겠습니다.!

참고자료

https://babeljs.io/blog/2018/08/27/7.0.0#typescript-support-babel-preset-typescript

https://babeljs.io/blog/2018/08/27/7.0.0#automatic-polyfilling-experimental

https://babeljs.io/blog/2018/08/27/7.0.0#jsx-fragment-support

https://velog.io/@velopert/create-react-app-v2