애증의 밴딩머신 타입스크립트로 마이그레이션 진행기 바닐라 자바스크립트에 타입스크립트? 처음엔 단순히 타입스크립트를 설치하고 파일 확장자를 .ts로 바꿔주면 되겠지? 라고 생각했다. 당연하게도 그렇게 쉽게 언어가 컴파일되지 않는다 ^^...ㅎ 리액트에서는 cra를 사용했기때문에 자동적으로 웹팩환경이 구성된 상황에서 개발을 했었다. 그래서 내가 작성한 코드가 어떻게 빌드되고, 어떻게 컴파일되는지 자세히 알지 못했다. 하지만 바닐라 자바스크립트에서는 cra같은 손쉬운 셋팅이 없다. 모두 직접 구성을 해야만 했다. 그렇게 웹팩공부를 하게 되는데...🫠 바닐라 자바스크립트에서 타입스크립트를 사용하기 위한 웹팩 환경 구성하기 🦾 우선 타입스크립트를 자바스크립트 언어로 컴파일하기 위한 환경을 셋팅해야했다. 웹팩 시리..
[Webpack] - #7 웹팩 세팅하기 (feat: ES module)
[ Webpack 시리즈 ] [Webpack] - #1 Webpack이란? [Webpack] - #2 Entry [Webpack] - #3 Output [Webpack] - #4 Loader [Webpack] - #5 Plugin [Webpack] - #6 Dev Server [Webpack] - #7 웹팩 세팅하기 (feat: ES module) 프로젝트 환경설정 이전 포스팅의 마무리 느낌으로 바닐라 자바스크립트 기반의 개발환경을 세팅해보자! 👊 1. 프로젝트 버전관리 npm init -y 2. .gitignore 파일 생성 및 설정 # dependencies /node_modules # production /dist # etc .DS_Store .vscode .gitignore 파일에는 git으로 추..
[Webpack] - #1 Webpack이란?
[ Webpack 시리즈 ] [Webpack] - #1 Webpack이란? [Webpack] - #2 Entry [Webpack] - #3 Output [Webpack] - #4 Loader [Webpack] - #5 Plugin [Webpack] - #6 Dev Server [Webpack] - #7 웹팩 세팅하기 (feat: ES module) 웹팩이란? 자바스크립트 모듈 번들러중 가장 인기있는 모듈 번들러로 사용된다. 여러개로 나누어져있는 파일들을 각각의 모듈로 보고 이를 조합하고 압축해 최적화해주는 도구. 최종 배포용 파일을 만들어 준다. 웹팩에서 모듈이란? 자바스크립트 모듈에만 국한되지 않고 웹 애플리케이션을 구성하는 모든 자원(HTML, CSS, JavaScript, Images, Font 등..
