Skip to content

Create React App

Set up a modern web app by running one command.

Features

  • WebPack 5 + JEst 27 + ESLint 8 + PostCSS 8
  • Tailwind 지원
  • Fast Refresh 개선
  • yarn/npm 패키지 매니저 감지를 환경 변수로 하도록 변경
  • Node 10/12 지원 안함

Categories

Libraries

  • sourceMap 원 소스와 transpiling 된 코드를 둘다 로딩
  • css-loader: css 파일 읽기
  • style-loader: head 엘리먼트에 css 주입, css-loader 와 같이 사용
  • postcss-loader: 자바스크립트 플러그인을 통해 css를 변환하는 툴, 플러그인 베이스의 자동화 툴로, 앞으로 표준이 될 css 눔법을 확장/지원하는 css 게의 Babel 이다.
  • autoprefixer css vender-prefix 자동처리 플러그인
  • post-css-color-function color modifier 지원
  • postcss-simple-vars sass 형식 변수 지원
  • postcss-nesting Nesting 문법 지원
  • postcss-for for문 지원
  • postcss-assets url내에 들어가는 파일의 경로 계산이나 이미지의 width 측정
  • precss sass 처럼 사용하기 위한 플러그인 모음
  • cssnext 아직 지원하지 않는 새로운 구문 지원

Templates

Creating an App

You’ll need to have Node >= 14 on your local development machine (but it’s not required on the server). You can use nvm (macOS/Linux) or nvm-windows to switch Node versions between different projects.

npx 

npx create-react-app my-app

npx comes with npm 5.2+ and higher, see instructions for older npm versions

npm 

npm init react-app my-app

npm init<initializer> is available in npm 6+

Yarn 

yarn create react-app my-app

yarn create is available in Yarn 0.25+

TypeScript 적용 방법 

yarn create react-app my-app --template typescript

Sass/Scss 적용 방법

WARNING

Node Sass를 포함하여 LibSass 및 그 위에 빌드된 패키지는 더 이상 사용되지 않습니다. Node Sass 사용자인 경우 package.json 파일의 node-sass를 sass로 바꾸거나 다음 명령을 실행하여 Dart Sass로 마이그레이션할 수 있습니다. 

$ npm uninstall node-sass
$ npm install sass

또는 

$ yarn remove node-sass
$ yarn add sass

이렇게 하면 다음과 같은 가져오기를 수행할 수 있습니다. 

@use 'styles/_colors.scss'; // assuming a styles directory under src/
@use '~nprogress/nprogress'; // loading a css file from the nprogress node module

환경변수

환경변수는 가급적 cross-env 패키지로 적용하자.

명령행에서 대화형 모드가 아닌 방법으로 테스트 하는 방법

CI=true 환경변수를 사용하면 된다.

명령행에서 브라우저 자동실행 막는 방법

BROWSER=none 환경변수를 사용하면 된다.

포트번호 변경 방법

PORT=8080 환경변수를 사용하면 된다.

devDependencies 가 없는 이유

Create React App 을 이용해서 프로젝트를 시작하게 되면 package.json 파일에 모든 패키지들이 dependencies에 추가되어 있습니다. 

  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "typescript": "~3.7.2"
  },

왜 devDependencies에 @testing-library/react 같은걸 넣지 않았을까요?

아래와 같이 CRA Github에 누군가 질문을 했는데, Dan Abramov이 이렇게 답변했습니다. 

Node 앱이면 dependencies 와 devDependencies 를 나누는게 의미가 있는데, CRA의 경우 결과물 자체가 static bundle이고, build시에만 모든 package를 이용하기때문에 궅이 따지자면 모든 dependencies가 development dependencies 입니다.

둘 중 어느곳에 넣어도 상관은 없지만, 일부 배포 스크립트가 동작하지 않을 수도 있기에 의도적으로 모든 패키지를 dependencies 에 넣었다고 합니다. :)

CSS Modules

다음과 같이 사용하면 css-modules을 적용할 수 있다:

  • [name].module.css
  • [name].module.scss
  • [name].module.sass

Adding SVGs

다음과 같이 사용하면 svg 를 파일에서 바로 인라인 한다. 즉 SVGSVGElement에 접근할 수 있다. 

import { ReactComponent as Logo } from './logo.svg';

function App() {
  return (
    <div>
      {/* Logo is an actual React component */}
      <Logo />
    </div>
  );
}

lib/react-app.d.ts 

/// <reference types="node" />
/// <reference types="react" />
/// <reference types="react-dom" />

declare namespace NodeJS {
  interface ProcessEnv {
    readonly NODE_ENV: 'development' | 'production' | 'test';
    readonly PUBLIC_URL: string;
  }
}

declare module '*.avif' {
  const src: string;
  export default src;
}

declare module '*.bmp' {
  const src: string;
  export default src;
}

declare module '*.gif' {
  const src: string;
  export default src;
}

declare module '*.jpg' {
  const src: string;
  export default src;
}

declare module '*.jpeg' {
  const src: string;
  export default src;
}

declare module '*.png' {
  const src: string;
  export default src;
}

declare module '*.webp' {
    const src: string;
    export default src;
}

declare module '*.svg' {
  import * as React from 'react';

  export const ReactComponent: React.FunctionComponent<React.SVGProps<
    SVGSVGElement
  > & { title?: string }>;

  const src: string;
  export default src;
}

declare module '*.module.css' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.scss' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.sass' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

See also

Favorite site