리액트를 프로젝트를 구성할 때 항상 cra(creat react app)패키지를 사용하였다.

하지만 문득 무지성으로 사용하고 있는건 아닌가 라는 생각이 들어 오늘은 cra에 대해 알아보고자 한다.

살펴볼 내용이 많으니 단계별로 알아보고자 한다.

오늘은 일단 CRA에서 지원하는 브라우저 및 문법 지원에 관해서 알아보겠다.

CRA(create-react-app)

react project를 구성할 때에 웹팩 및 바벨 설정 등 기본적인 설정들을 갖춘채로 프로젝트를 진행할 수 있도록 하는 패키지이다.

설치방법
npx create-react-app [project name]
npm create react-app [project name]
yarn create react-app [project name]

CRA 프로젝트는 지원 브라우저에 대한 설정 및 문법적 지원 특징이 어떤지 살펴보자.

지원 브라우저 및 특징

지원 브라우저
대부분의 브라우저에서 지원(호환)이 되지만 Internet Explorer 9,10,11에서는 지원이 안되므로 react-app-polyfill을 사용할 것을 권장하고 있다.

(추후에 기존 프로젝트에 polyfill을 적용하는데 작업을 해봐야겠다.)

문법 지원
cra 프로젝트에서는 여러가지 자바스크립트 최신 문법 등을 지원하고 있다.

• 지수 연산자(ES2016)
• Async/Await(ES2017)
• Rest/Spread 연산자(ES2018)
• Dynamic import
• 클래스 필드 및 정적 프로퍼티
• JSX,Flow,TypeScript

CRA 프로젝트에서는 기본적으로 polyfill(하위문법으로 변환)을 지원하지 않기 때문에 필요하다면(브라우저가 해당 문법을 지원하는지 여부) 적절히 polyfill을 해줘야한다.

지원 브라우저에 대한 구성

지원하는 브라우저에 대한 설정은 package.json의 browserslist에 명시되어있다.

browserslist란 지원되는 브라우저를 명시함으로써 지원 브라우저를 설정할 수 있게 하는 기능이다.
이를 설정해주는 이유는 자바스크립트 최신 문법이 지원되지 않은 브라우저를 그룹화해 타겟팅하여 관련 브라우저에 대해서 번들링을 할 수 있도록 해줄 수 있기 때문이다.
(브라우저에 따른 번들링은 웹의 성능 및 최적화에 도움이 된다.)

CRA package.json

"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
}

해당 설정에 따라 지원되는 브라우저가 설정이 되어있다.

production을 build하였을 때 지원되는 브라우저에 대한 설정이고
development는 개발할 때에 지원되는 브라우저에 대한 설정이다.

해당 설정을 바꾸고 싶다면 node_modules/.cache를 제거한뒤에 바꿔야한다.
(babel-loader에서 변화를 인식하지 못하도록 설정이 되있기 때문)

위 설정에 대한 설명은 다음과 같다.

• ">0.2%" | 전세계 점유율 0.2% 브라우저에 대하여 지원을 하겠다.

• "not dead" | 지원이 중단된 브라우저를 지원하지 않겠다.

• "not op_mini all" | opera-mini는 지원하지 않겠다.

• "last 1 chrome version" | 최신 크론 브라우저 1개 버전을 지원하겠다.

• "last 1 firefox version" | 최산 파이어폭스 브라우저 1개 버전을 지원하겠다.

• "last 1 safari version" | 최신 사파리 브라우저 1개 버전을 지원하겠다.

Conclusion

CRA는 브라우저에 대한 설정이 대부분 가능하게 되어있지만 IE의 경우 지원이 안되므로 해당 경우에 대비한 poly fill을 기존 프로젝트에 적용하는 연습을 해봐야겠다.

또한 최신 문법에 대한 폴리필이 안되므로 브라우저의 자바스크립트 최신 문법 지원의 유무에 따라 폴리필을 적용하는 방법도 알아두도록 해야겠다.

다음에 이어서 CRA에 대하여 더 알아보도록 하겠다

-이상-

Reference

• https://create-react-app.dev/

• https://stackoverflow.com/questions/55510405/what-is-the-significance-of-browserslist-in-package-json-created-by-create-react

• https://blog.shiren.dev/2020-12-01/