[TIL] React, IE 크로스 브라우징

최현석·2021년 8월 4일
0

8월의 배움

목록 보기
2/3

7월에 프로젝트를 시작했는데, 너무 손이 많이가서

velog 업로드를 한동안 하지 못했다.

오늘 부로 프로젝트를 마감해서, 프로젝트 하면서 알아냈던 것들을 쭉 업로딩할 계획이다.

일단, 이번 프로젝트는 IE 크로스브라우징이 필요했기 때문에

프로젝트를 eject하고,

ES6 이상의 문법들을 번역해 IE에서도 호환이 되도록 babel, polyfill을 적용하였고 해당 방법과 개념을 업로딩하고자 한다.


Eject

eject란, 해당 프로젝트에 숨겨져 있는 모든 설정을 밖으로 추출해주는 명령어다.

이를 통해 세부 설정과 webpack, babel의 자유로운 세팅이 가능하다.

npm run eject

혹은

yarn eject

를 통해 실행.

실행하게 되면

Are you sure you want to eject? This action is permanent

영구적인 명령이라는 메시지가 출력되고, y / n 을 통해 실행을 확인한다.

eject 실행을 위해서는 remote repository의 데이터를 pull 혹은 commit-push를 해 동기를 맞춰줘야 한다.

eject를 실행하게 되면 되돌릴 수 없기에

eject 실행전 git branch를 새로 파서 테스팅 후 적용하는 것을 추천한다.

eject 후

  1. 해당 패키지에서 의존성을 가진 모든 패키지가 package.json의 dependencies에 추가된다.
  • babel 세팅에 대한 부분도 추가된다. 추가적인 babel preset이나 plug-in 추가 시 유용하다.
  1. config, script 의 디렉토리 추가
  2. build.js, start.js, test.js 의 스크립트 파일 추가
  • 이 파일들은 react-scripts 패키지에 있던 파일들이다. eject후 내용을 직접 수정할 수 있게된다.

구형 IE 브라우저에서 흰 화면을 마주했을 때,


babel

Babel은 ES6 이상의 최신 문법을 ES5 이하의 문법으로 작성한 것 처럼 소스코드 내의 문법 형태를 변경해주는 JS transpiler. JS compiler라고 부르기도 한다.

Babel을 사용해 문법 형태가 변경된 소스 코드는 최신 문법을 지원하는 실행 환경 뿐만 아니라 아직 최신 문법들이 적용되지 않은 실행 환경에서도 작동한다.

자바스크립트 Build 및 Code 변환

W
ebpack을 이용하여 빌드를 하여 자바스크립트를 배포할수 있게 만드는데,

이때, Babel은 최신 자바스크립트 코드를 컴파일 타임에 호환되는 자바스크립트 코드로 변환한다.

Poilfill은 런타임에 Browser에서 지원되지 않는 함수를 체크한다.

@babel/core, @babel/cli

# npm
$ npm install --save-dev @babel/core @babel/cli

# yarn
$ yarn add -D @babel/core @babel/cli

@babel/core,@babel/cli를 devDependencies에 추가한다. 그 이유는 Babel은 빌드 시에 필요하기 때문이다.

Babel은 plugin과 preset을 통해 코드를 어떻게 변환할지 판단하고 동작한다. plugin은 규칙 하나하나 미세하게 적용할 때 사용한다. preset은 plugin의 배열으로 여러 개의 규칙을 한번에 적용한다.

이는 Babel의 설정 파일인 babel.config.js 혹은 .babelrc에 입력해준다.

Babel command를 실행할 때마다 매번 옵션을 붙이기 번거로워 Babel 설정 파일을 이용한다. 설정 파일은 root에 추가하여 사용한다.

ex) babel.config.js

module.exports = fuction(api) {
  api.cache(true)
  
  const presets = ['next/babel']

  const plugins = [
    [
      '@babel/plugin-proposal-decorators',
      {
        legacy: true,
      },
    ],
    [
      '@babel/plugin-proposal-class-properties',
      {
        loose: true,
      },
    ],
  ]
  
  return { presets, plugins }
}

위의 예시에서는 nextjs를 사용하고 있기 때문에 nextjs의 preset을 적용하였다. 가장 범용적으로 사용하는 preset은 @babel/preset-env이다.

plugin의 경우에는 Babel 공식 사이트 - plugins 혹은 검색을 이용하여 적절하게 사용하는 것이 좋다.

출처

polyfile

babel을 사용한다고 자바스크립트 최신 함수를 사용할수 있는건 아니다

babel은 문법을 변환해주는 역할만 할 뿐이다.

polyfill은 프로그램이 처음에 시작될 때

현재 브라우저에서 지원하지 않는 함수를 검사해서

각 object의 prototype에 붙여주는 역할이다.

즉, babel은 컴파일-타임에 실행되고 babel-polyfill은 런-타임에 실행된다.

babel-polyfill을 사용하고 싶다면 별도로 설정해줘야 한다.

또한 바벨은 ESNext 에서 지원하는 문법을 ES5 문법으로 번역해주지만,

ES5에 존재하지 않는 ES6의 Map, Promise, Set, Object.assigin() 등의 함수를 번역하지 못하기 때문에,

이것을 매꾸기 위해 polyfill 을 사용한다. (Map, Promise, Set 등을 사용가능한 객체로 만들어준다)

즉 babel 라이브러리가 최신 문법을 구형 문법에서도 사용할수 있게 만들어 주는것이라면

polyfill은 새롭게 정의된 객체들을 추가하여 채워주는 개념을 말한다.

babel 은 babel-polyfill 모듈을 사용하면 되지만,

현재 deprecated 되었기 때문에 core-js와 regenerator-runtime을 직접 사용하는 방식을 제안하고 있다.

.babelrc

대표적으로 ES6 문법을 모아놓은 es2015 preset과 react 문법을 모아놓은 react preset이 있다. 사용할 preset을 presets에 추가하고 presets에 속해있는 plugin 외에 추가로 사용하고 싶은 plugin은 plugins에 넣자.

출처

@babel/polyfill

babel-polyfill 공식

async, await, function 을 프로젝트에서 활용하는 경우 설치해야 한다.

npm install core-js regenerator-runtime

로 설치하고 index.js 에서 아래 import 문을 선언한다.

//index.js import 설정
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';

출처

optional chaining

npm i -D @babel/plugin-proposal-optional-chaining
  • @babel/plugin-proposal-optional-chaining: optional chaining 문법을 변환해주는 바벨 플러그인

  • customize-cra, react-app-rewired: CRA를 커스터마이즈 할 수 있게 해주는 라이브러리

패키지 설치 후 루트 디렉토리에 .babelrc babel confing 파일을 만들어 준 후 optional chaining에 대한 플러그인을 연결 시켜준다.

{  
    "plugins": [  
        [  
            "@babel/plugin-proposal-optional-chaining"  
        ],  
    ]  
}

eject 없이 optional chaining 사용하기 출처


react-app-polyfill

리엑트 개발에서 사용하는 다양한 문법을 변환해주는 라이브러리.

Promise, window.fetch, Symbol, Object.assign, Array.from + [ IE9 Map, Set ]와 같은 필요한 것만 포함하고 있어 사이즈가 작아 가벼운 게 특징이다.

npm i react-app-polyfill
yarn add react-app-polyfill

을 통해 설치해주고,

// IE9의 경우
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';

// IE11의 경우
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

프로젝트의 index.js 상단 부에 위처럼 import 해오면 된다.

stable은 package.json의 browserslist에 해당하는 브라우저에 대해 안정적인 코드를 사용할 수 있게 한다.

  • 적용되지 않는 경우 node_modules/.cache 폴더 삭제하고 다시 실행.

자투리, 개발용어 알아가기

SSR

Server Side Rendering
서버에서 웹페이지를 렌더링

CSR

Client Side Rendering
클라이언트에서 웹페이지를 렌더링

정적 웹사이트 / 동적 웹사이트

소프트웨어 빌드

소스코드를 실행 가능한 결과물로 변환하는 작업

deploy

프로그램을 서버와 같은 곳에 설치하여 작동할 수 있도록 하다.

release

같은 것을 새롭게 만들다.

distribute

사용자가 이용할 수 있도록 하다.

deprecated

형용사 신조어
중요도가 떨어져 더 이상 사용되지 않고 앞으로는 사라지게 될 (컴퓨터 시스템 기능 등)

나중에 확인할 링크

profile
노력과 성장을 기록합니다.

0개의 댓글