코딩을 쉽게 해보자

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) - 인프런 | 강의 이미 만들어 놓은 개발 환경을 이해할 수 있어요. 처음부터 직접 개발 환경을 만들 수 있어요., - 강의 소개 | 인프런... www.inflearn.com 배경 크로스 브라우징 몇 년전까지만 하더라도 사파리에서는 Promise.prototype.finally 메소드를 사용할 수 없었다 이러한 크로스 브라우징 이슈를 해결하기 위해 바벨이 등장했다. ECMAScript2015+로 작성한 코드를 모든 브라우져에서 동작하도록 호환성을 지켜준다. 타입스크립트, JSX처럼 다른 언어로 분류되는 것도 포함한다. 바벨 최신 버전과 터미놀 도구를 사용하기 위한 커맨드라인 도구 함께 설치를 위한 명령어 npm insta..

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) - 인프런 | 강의 이미 만들어 놓은 개발 환경을 이해할 수 있어요. 처음부터 직접 개발 환경을 만들 수 있어요., - 강의 소개 | 인프런... www.inflearn.com 웹팩은 모든 파일을 모듈로 바라본다. 자바스크립트로 만든 모듈 뿐만아니라 스타일시트, 이미지, 폰트 등 전부 모듈로 보기에 import 구문을 사용하면 자바스크립트 코드로 가져올 수 있다. 이것이 가능한 이유는 웹팩의 로더 덕분이다. 로더는 타입스크립트와 같은 다른 언어를 JS문법으로 변환하거나 이미지를 data URL 형식의 문자열로 변환한다. 커스텀 로더 로더를 직접 만들고 myloader.js module.exports = function my..

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) - 인프런 | 강의 이미 만들어 놓은 개발 환경을 이해할 수 있어요. 처음부터 직접 개발 환경을 만들 수 있어요., - 강의 소개 | 인프런... www.inflearn.com 모듈 모듈부터 이야기해봐야 한다. 문법 수준에서 모듈을 지원하기 시작한 것은 ES2015부터이다. 이전에는 index.html에서 각각의 파일을 올려서 사용했었다. 하지만 이러하면 전역 스코프가 오염된다는 문제점이 있다. => 예측할 수 없어지게됨. 런타임 에러가 발생 이러한 점을 극복하기 위해 IIFE(Immediately Invoked Function Expression)의 방식을 사용하게 되었다. 전역 스코프 오염을 예방할 수 있다. (func..