Create a New React App

$ npx create-react-app notes-app-client --typescript

Add App Favicons

https://serverless-stack.com/chapters/add-app-favicons.html

favicon generator 사이트

https://realfavicongenerator.net/
사진을 사이트의 위 사이트를 이용하여 favicon으로 만든다.

public/manifest.josn
{
  "short_name": "Scratch",
  "name": "Scratch Note Taking App",
  "icons": [
    {
      "src": "android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "android-chrome-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#ffffff"
}

To include a file from the public/ directory in your HTML, Create React App needs the %PUBLIC_URL% prefix.
public/ 디렉토리내의 파일을 HTML에서 사요하려면 %를 사용하여야한다.
아래 코드를 HTML에 추가하면 아이콘이 바뀌어있다!.

<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
<link rel="icon" type="image/png" href="%PUBLIC_URL%/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="%PUBLIC_URL%/favicon-16x16.png" sizes="16x16">
<link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">

https://github.com/jerrynim/jerrynim-serverless-stack-client/commit/c4d17126bef96dc95916f951cc31b051e25c0180

부트 스트랩 설정

$ npm install react-bootstrap@0.32.4 --save

index.html에 추가

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

index.css추가

select.form-control,
textarea.form-control,
input.form-control {
  font-size: 16px;
}
input[type=file] {
  width: 100%;
}