개발소발닭발

babel + ts + react 트랜스파일링과 번들에 관한 설명은 아래 링크에 가장 훌륭하게 요약되어 있다. github.com/Microsoft/TypeScript-Babel-Starter microsoft/TypeScript-Babel-Starter A sample setup using Babel CLI to build TypeScript code, and using TypeScript for type-checking. - microsoft/TypeScript-Babel-Starter github.com

Webpack 설정으로 인해 어려움을 겪고 있는 사람들을 위해 이 글을 씁니다. 프런트엔드 개발에 있어 웹팩은 필수조건이 되었습니다. 많은 프런트엔드 개발자들이 웹팩을 이용하는 이유는 "빌드를 이용한 프로젝트 최적화"라고 정리할 수 있을 겁니다. 빌드라는 과정을 통해 웹팩은 정말 많은 일(정말 정말 정말!)을 할 수 있고, 당연히 그에 따른 설정도 굉장히 많습니다. 공식문서에 웹팩의 어메이징 한 기능들에 대한 설명이 아주 잘 나와 있지만 스타터에게는 이도 쉽지가 않습니다. 하지만 겁먹지 마세요. 차근차근 따라 하다 보면 그리 복잡하지 않습니다. 그리고 웹팩과 바벨의 버전이 올라가면서 설정이 더욱더 간단해졌으니깐요. 웹팩이란 무엇인가 webpack is a static module bundler for m..

ES6는 자바스크립트의 새로운 버전이다. 오래된 새로움이지만... 우리가 ES6를 써야하는 이유는 '편하다'이다. 공부를 하고 나면 새로운 JS가 편하고 강력하게 느껴지길 바란다. ES6를 제대로 써보려면 두가지 작업 환경을 세팅해야 한다. - Babel : ES6 코드를 ES5 코드로 바꿔준다. - Webpack : 의존 관계에 있는 여러 스크립트 파일들을 하나의 파일로 묶어준다. (이미지와 css까지도!!) 10분이면 끝나니 같이 해보자. 먼저 Babel부터. 먼저 폴더를 하나 만들고 1. package.json 파일을 만들자. npm init -y - 바벨 설치 npm install --save-dev @babel/core @babel/cli 2. 바벨 프리셋 설치 - 기본 바벨 환경 설치. npm..