Beyond Create React App 1-개발환경 및 설정

CheolHyeon Park·2019년 10월 29일

JavaScript React react redux redux redux saga todo

React

목록 보기

1/2

이 예제는
Beyond Create React App: React Router, Redux Saga, and More

를 참고하여 만들었습니다.

- React Router, Redux-saga, Auth0 ... 등을 이용한 예제입니다.

1. React SPA 구축

npx create-react-app react-todo

2. Prettier 설치 및 설정

Prettier란?

An opinionated code formatter

Supports many languages

Integrates with most editors

Has few options
Prettier

즉, code formatter이다.
그 외에 Husky, Lint-staged를 적용한다.

npm install --save husky lint-staged

Husky, Lint-staged란?

Husky : git Hook을 편하게 작성할 수 있게 도와주는 도구

Lint-staged : staged된 파일을 Lint해주는 도구
Javascript 코드 컨벤션 자동화

3. react-bootstrap 설치 및 설정

npm install react-bootstrap bootstrap

그리고 ./public/index.html 파일에 다음과 같이 적용.

<!-- ./public/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... title and other elements ... -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
      integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
      crossorigin="anonymous"
    />
  </head>
  <!-- ... body ... -->
</html>

4. PropTypes 설치 및 적용

설치

npm install --save prop-types

적용

import React from 'react';
import PropTypes from 'prop-types';

const Header = ({ description }) => <h1>{description}</h1>;

Header.propTypes = {
  description: PropTypes.string.isRequired
};

CheolHyeon Park