React 프로젝트 진행중에 날짜를 표기하는 모듈을 사용중에
ReactJS-TimeAgo가 익스 플로러에서
처음에는 '익스 플로러에서는 다르게 적용하는 방법이 있나..?' 하는 생각에
TimeAgo의 사용방법을 많은 시간을 투자하여 검색해 보았습니다.
하지만 원하는 검색 결과는 찾지 못하고 있었습니다.
혹시 진행중인 프로젝트의 코드 충돌로 인한 오류인가 해서 새로운 프로젝트를 만들어 실행시켜 보았습니다.
create-react-app 으로 새롭게 프로젝트를 만든후에 똑같은 방법으로 TimeAgo를 설치하고 실행시켜 보았습니다.
역시 익스 이외엔 전부 잘 작동하지만 익스플로러(IE)에서만 오류를 출력하고 있었습니다.
하지만 이번에는 출력문이 다르게 나왔습니다.
Promise가 정의되어 있지 않다는 문구가 있었습니다.
바로 Promise 관련해서 검색을 해보았습니다.
Promise란 javascript의 callback의 단점을 해결 하기 위해 만들어진것
그리고 최종적으로 찾은 검색 결과는Promise는 신형 브라우저에만 내장되어있어서 구형인 익스플로러에서는 작동을 못한것이였습니다.
Promise 기능을 갖고있지 않은 브라우저 자바스크립트 엔진들을 호환시켜주기 위해서는
@babel/polyfill를 설치해 주시고 설정위치는
2019년 1월 기준 create-react-app 기준 config/webpack.config.js 에서 entry 배열 내부에 "@babel/polyfill", "./app/js" 를 추가하시면 됩니다.
./app/js 란 ReactDOM render하는 js 파일입니다.
예를 들어 저같은 경우 App 을 렌더링 하는곳이 ./src/index.js 라서 이곳으로 설정하였습니다.
다시 프로젝트를 실행시켜 보았더니 TimeAgo가 정상적으로 적용되었습니다.
이 오류 하나 찾는데 개인적으로.. 엄청 고생했습니다.. 처음엔 어디서 오류가 나는건지도 몰라서 하나하나 주석걸며 어디서 오류가 난건지
찾는거 조차 고생했습니다.. 그래도 역시 한다면 한다! 오류해결해서 속 시원합니다.~
혹시나 저랑 똑같은 오류가 있으신 분들 조그마한 참고가 됐면 좋겠습니다~