늘 겸손하게

1. User Interface 2. Browser Engine 3. Rendering Engine 4. Data Persistance/Storage 5. Networking 6. JavaScript Interpreter 7. UI Backend [ 1. User Interface ] 사용자 인터페이스 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창 의외의 모든 부분 [ 2. Browser Engine ] 브라우저 엔진 사용자 인터페이스와 렌더링 엔진 중간에서 두 컴포넌트 사이의 동작을 제어 [ 3. Rendering Engine ] 요청한 데이터를 출력. 얻은 문서를 HTML 파서를 통해 DOM 트리를 만들고 CSS 파서로 알아낸 스타일 규칙을 붙여(attachment) ..

Polyfill 직역하면 충전솜. 자바스크립트 표준에는 새로운 함수가 추가되거나 기존 표준이 수정될 수 있습니다. 이렇게 변경된 표준에 알맞게 기존 함수을 수정하거나 이전 명세를 따르는 언어로 새롭게 작성한 함수를 Polyfill 이라고 합니다.

Babel Babel은 트랜스파일러(transpiler)로, 최신 버전의 자바스크립트 코드를 구형 버전의 코드로 바꿔줍니다. 이 방식으로 최신 자바스크립트기능 혹은 코드를 구형 브라우저 혹은 구형 환경에서도 실행 가능하게 합니다. Babel의 기능 Syntax 변환 목표 환경에 없는 특징을 polyfill ( core-js와 같은 third-party polyfill ) 소스 코드 변환 ( codemods ) Polyfill : 직역하면 충전솜. 이전 브라우저에는 없는 최신 기능, 지원하지 않는 코드를 수행 가능하게 하는 코드 혹은 플러그인. Babel의 주요 역할 1. 트랜스파일러 ( Transpiler ) 바벨은 코드를 재작성해주는 트랜스파일러 프로그램입니다. 바벨을 실행시키면 작성된 코드가 이전 버..

WebPack이란? 웹 사이트를 개발하다보면 수많은 파일이 생깁니다. 완성된 웹 사이트를 브라우저에 로드해보면 정말 많은 파일들이 다운로드되는것을 볼 수 있습니다. 하지만 이는 좋지 않습니다. 왜냐하면 네트워크를 통한 파일 다운로드는 용량과 시간, 즉 PC자원을 많이 잡아먹는 작업이기 때문이고, 이러한 작업이 많으면 사용자에게 보여줄 웹 페이지 로딩이 느려집니다. 또 많은 자바스크립트 패키지들을 사용하다보면 서로 다른 패키지에서 같은 변수이름 혹은 함수 이름을 사용하는 경우가 있습니다. 이런 경우 예측불가능한 오류 또는 충돌이 일어날 가능성이 있습니다. 위와 같은 문제를 해결하기 위한 도구가 'bundler'입니다. bundle은 '묶다'라는 의미이고 bundler는 여러 파일을 묶어주는 도구입니다. 대..