애증의 밴딩머신 타입스크립트로 마이그레이션 진행기 바닐라 자바스크립트에 타입스크립트? 처음엔 단순히 타입스크립트를 설치하고 파일 확장자를 .ts로 바꿔주면 되겠지? 라고 생각했다. 당연하게도 그렇게 쉽게 언어가 컴파일되지 않는다 ^^...ㅎ 리액트에서는 cra를 사용했기때문에 자동적으로 웹팩환경이 구성된 상황에서 개발을 했었다. 그래서 내가 작성한 코드가 어떻게 빌드되고, 어떻게 컴파일되는지 자세히 알지 못했다. 하지만 바닐라 자바스크립트에서는 cra같은 손쉬운 셋팅이 없다. 모두 직접 구성을 해야만 했다. 그렇게 웹팩공부를 하게 되는데...🫠 바닐라 자바스크립트에서 타입스크립트를 사용하기 위한 웹팩 환경 구성하기 🦾 우선 타입스크립트를 자바스크립트 언어로 컴파일하기 위한 환경을 셋팅해야했다. 웹팩 시리..
[ 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 시리즈 ] [Webpack] - #1 Webpack이란? [Webpack] - #2 Entry [Webpack] - #3 Output [Webpack] - #4 Loader [Webpack] - #5 Plugin [Webpack] - #6 Dev Server [Webpack] - #7 웹팩 세팅하기 (feat: ES module) Dev Server 매번 웹팩 명령어를 실행하지 않아도 코드를 수정하고 저장하면 웹팩으로 빌드한 후 브라우저를 새로고침 해준다 실시간으로 리로드 되는 웹팩의 개발 환경 동작과정 dev-server는 dist 폴더와는 관계없이 동작 빌드한 결과물이 파일 탐색기나 프로젝트 폴더에 보이지 않는다. 메모리에 저장되고 파일로는 생성 X 수정된 결과물 또한 메모리 상에 ..
[ 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) Plugin 플러그인은 웹팩의 기본동작에 추가기능을 제공하는 속성 로더는 파일을 해석하고 변환하는 과정 플러그인은 해당 결과물의 형태를 바꾸는 과정 // webpack.config.js module.exports = { plugins: [] } 플러그인 배열에는 생성자 함수로 생성한 객체 인스턴스만 추가될 수 있다. const webpack = require(..
[ 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) Loader 웹팩이 웹 어플리케이션을 해석할 때 웹 자원을 변환시켜주는 속성 자원을 해석할 때 js, json파일을 기본으로 본다. 만약 다른 파일을 모듈로 불러와 사용하게 될 경우, loader 라는 요소를 설정해줘야 한다. // webpack.config.js module.exports = { module: { rules: [ { test: , use:[]..
[ 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) Output 웹팩이 빌드되고 난 후 결과물의 파일 경로. // webpack.config.js module.exports = { output: { filename: 'bundle.js' } } 객체형태로 옵션을 추가할 수 있다. 최소한의 옵션으로 filename을 지정해줘야 한다. Output 옵션 속성 // webpack.config.js module.exp..
[ 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) Entry 웹팩에서 웹 자원(HTML, CSS, JavaScript, Image, Font...)을 변환하기 위해 필요한 최초 진입점 자바스크립트 파일 경로 웹팩이 빌드를 수행하는 곳 // webpack.config.js module.exports = { entry: './src/index.js' } 어떤 내용이 담겨야 하는가? 웹 어플리케이션의 전반적인 구조..
[ 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 등..