create react app > ie 11 에서 동작하도록

1. 프로젝트 생성 

npx create-react-app cra_for_ie11

 

 

2. 생성된 폴더로 이동

cd cra_for_ie11

3. 실행 

npm start

4. 크롬 / IE 11 브라우저에서 확인

좌) 크롬, 우) IE 11

 

5. IE 11에서 동작하도록 설정

5-1. package.json 파일 수정 : "IE 11" 추가 

  ( browserslist 편집 시, 변경 사항이 바로 적용되지 않을 수 있습니다. babel-loader가 package.json의 변경 사항을 감지하지 못하는 문제 때문으로, node_modules/.cache 폴더를 삭제 후 재 실행 ) 

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

5-2. /src/index.js 파일 수정 : 해당 파일 최상단에 아래 내용 추가 

// This must be the first line in src/index.js
import 'react-app-polyfill/ie11'; 
import 'react-app-polyfill/stable';

 

6. 재실행 

npm start

 

 

참고 : 

프로젝트 생성

- https://create-react-app.dev/docs/getting-started 

브라우저 지원 관련 

- https://create-react-app.dev/docs/supported-browsers-features 

- https://github.com/facebook/create-react-app/blob/main/packages/react-app-polyfill/README.md 

- https://github.com/browserslist/browserslist