늘 겸손하게

Cascading은 '위에서 아래로 흐르는', '상속받는' 등의 의미를 가집니다. CSS에서 Cascading은 상속 우선순위로 이해할 수 있습니다. 적용가능한 스타일이 여러가지일때 스타일간의 우선순위가 정해져야 하나의 HTML 요소에 어떤 스타일을 적용할지 결정할 수 있습니다. 이렇게 우선순위를 결정하는것을 Cascading이라고 합니다. 배고프다 예시로 위와 같은 html에서 의 글자색는 빨간색, 의 글자색은 파랑색, 의 글자색은 초록색으로 설정하면 "배고프다"는 어떤 색으로 출력될까요? 위처럼 동시에 여러 스타일의 영향을 받는 HTML 요소에 어떤 스타일을 적용할지 결정하기 위해서는 스타일간에 우선순위가 정해져야합니다. 이러한 우선순위를 결정하는것이 Cascading 입니다. Cascading 우선..

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

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

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