시리즈 아닌 시리즈를 한번 적어볼까 한다

내가 개발 블로그들을 볼때마다 매번 느끼는게 글들이 너무 딱딱해…!!!!!!!

안그래도 낯선 개념에 낯선 용어들로 이해하기 힘든데 글까지 너무 딱딱하다… :-(

그래서 교육문서를 읽고나서 내 문장으로 필터링을 거쳐서 재작성하려고 한다.

이걸 하는 이유는 미래의 나를 위해서…(&왕초보인 누군가를 위해서)

한번 배운 개념을 계속해서 사용하거나 복기하지 않으면 천재라도 잊어버리기 마련이니까

최대한 친절하게 작성해보는걸루^3^…

우선 오늘의 주제는 폴리필이다.

폴리필이라는걸 실제로도 이용해봤고, 이용하는 중인데다가 IE를 다뤄야하는 사람이라면 필수적으로

접할 수밖에 없는 용어인데 문제는 누가 물어보면 설명을…잘 못하겠는거다-.-…

‘자바스크립트가 발전하면서

그 기능을 구현해주는 브라우저가 있고 못하는 브라우저가 있는데

못하는 브라우저에다가 폴리필을 사용하면 구현해주도록 도와준다’

정도만 설명가능한 수준이었다….

그치만 바벨과 폴리필에 대해 조금 더 친절하게 설명하고싶어서 첫번째 주제는 폴리필로 정했다!

우선 폴리필에 대해 설명하기 전에 엔진에 대해서 알아야한다.

엔진이라는 것은 웹 브라우저가 구동하기 위해 사용하는 것인데(자동차 엔진이랑 똑같은 개념.. 엔진 없음 차 안굴러감)

문제는 이 엔진(=브라우저)이 새로운 문법이 나올때마다 바로바로 반영해주는게 아니라는것이다.

그래서 자바스크립트는 계속에서 발전하는 언어임에도 엔진에서 새로운 문법을 반영을 안해주면

사용자체를 못하게 되어버리는 불상사가 일어남…( IE라 쓰고.. IE라 읽고.. IE라 말합니다… )

크롬 브라우저가 업데이트가 빠르기 때문에 크롬에서 작동하면 어지간한 최신 문법들은 다 작동이 되는데

크롬에서는 잘 돌아갔던 것이 IE에서 보니까 기능구현은 물론이고 에러를 뿜뿜한다면…

IE(의 꾸진) 엔진에 맞도록 중간에 어떤 역할을 할 수 있는 무언가를 넣어주어야한다..!

그때 사용할 수 있는게 바벨인데, 폴리필이 바벨안에서 역할 해준다고 생각하면 된다.

바벨은 트랜스파일러인데, 최근에 추가된 문법(=모던 자바스크립트 코드)를 예전에 이미 존재해서 엔진에서 지원해주는 코드로 바꿔준다(혁명적이군)

여기서 또 주목해야할 것(내가 모르고 있었던것)

트랜스파일러 VS 컴파일러

트랜스파일은 한 언어로 작성된 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환 하는 것을 말한다.

컴파일은 한 언어로 작성된 코드를 다른 언어로 변환 하는 것을 말한다

참고 : https://ideveloper2.tistory.com/166

여태까지 맨날 컴파일된다고만 생각했었는데 바벨은 트랜드파일러였구나..

여튼 그래서 바벨은 트랜스파일러역할, 폴리필역할을 하는데,

1. 트랜스파일러 : 최근에 추가된 문법(=모던 자바스크립트 코드)를 예전에 이미 존재해서 엔진에서 지원해주는 코드로 바꿔준다.

   프레임워크를 사용하다보면 웹팩이라는 빌드 시스템을 이용하게 되는데, 이 웹팩은 코드가 수정될때마다 자동으로 트랜스파일러를 동작시켜준다. 웹팩이라는 빌드시스템이 없으면 개발을 다 마치고나서 그 코드들을 통합하는데 어려움이 있을거라고 한다(RGRG vue파일 그거 통합안시키면 코드 어떻게 합칠건데….)

2. 폴리필 : 새로운 문법이 추가되면 트랜스파일러는 새로운 문법을 구 버전에 맞는 코드로 변경해주는데, 이때 기존 함수를 수정하거나 완전 새로 생긴 스크립트를 폴리필이락 한다.

   폴리필(polyfill)은 정말로 새로운 기능을 추가해주는 fill in의 역할을 한다

   대표적인 폴리필에는 core-js 와 polyfill.io 이 있다.

   난 vue.js에서 core-js를 npm으로 받아 사용했다!

js를 위한 너무 좋은 페이지 https://ko.javascript.info/polyfills 를 참조했음 (*ˊᵕˋo💐o