들어가며 이 포스팅 에서 설정에 대한 자세한 설명이 없었는데, 이번 포스팅에서 babel과 tsc의 역할, 설정 파일에 대해 좀 더 자세히 살펴보자. tsc와 babel의 역할 TypeScript Compiler(tsc) 와 babel 둘 다 컴파일러의 역할을 하는데 어떤 것을 사용해야 할지 헷갈릴 수 있다. 이 둘의 역할을 간단하게 정리하면 다음과 …

webpack 에 대한 설명 여기 에서 확인할 수 있다. Babel 과 polyfill 에 대한 설명은 여기 에서 확인할 수 있다. webpack에서 polyfill 설정에 대한 게시글은 여기 에서 확인할 수 있다. 들어가며 이 포스팅 에서 babel의 각 설정에 대해 자세히 다루지 않았다. 이번 포스팅에서 설정 파일에 대해 좀 더 자세히 살펴보…

TypeScript 설치 및 설정 필요한 패키지를 설치하자. tsconfig-paths-webpack-plugin tsconfig.json 파일에 설정된 경로 별칭(path aliases)을 webpack에게 알려주고, 이러한 별칭을 해석하여 모듈을 로드할 때 실제 경로를 찾도록 도와주는 플러그인이다. 이 플러그인을 설치하지 않는다면 경로 별칭을 tsc…

들어가며 이 포스팅에서는 간단하게 설정 방법만 작성했다. 자세한 설명은 이 포스팅 에서 다룬다. 패키지 설치 babel 7버전부터 ts-loader 를 사용하지 않고 @babel/preset-typescript 를 사용하여 ts 파일을 컴파일 할 수 있다. 자세한 내용은 TypeScript With Babel: A Beautiful Marria…

들어가며 이 포스팅 에 이어서 이번 포스팅에서는 webpack에서 polyfill을 설정하는 방법에 대해 알아보도록 하자. webpack 에 대한 설명 여기 에서 확인할 수 있고, Babel 과 polyfill 에 대한 설명은 여기 에서 확인할 수 있다. Polyfill 설정 Babel v7.4.0부터 @babel/polyfill 패키지는 사용…

우리가 웹 개발을 하다보면 한번쯤은 Babel 과 Polyfill 이라는 용어를 들어본 적이 있을 것이다. 필자도 들어본 것 같긴한데 정확히 무엇인지는 모르겠어서 정리해보려고 한다.😁 이번 포스팅에서는 Babel 과 Polyfill 의 정의와 각각의 역할에 대해 알아볼 것이다. Babel이란? 먼저 조금 더 익숙한 Babel 에 대해 알아보자. …

웹팩(Webpack) 이란? 웹팩(Webpack) 은 모듈 번들러(Module Bundler)로 웹 애플리케이션을 구성하는 자원(HTML, CSS, JavaScript, Images, 폰트 등)을 모두 모듈로 보고 이를 조합해 병합된 하나의 결과물을 만드는 도구다. Webpack은 자바스크립트 애플리케이션을 위한 모듈 번들러이지만, CSS, HTML,…