웹 공부하기/Frontend
[인프런] 프론트엔드 개발환경의 이해와 실습 (자주 사용하는 플러그인)
웹팩 설정 시, 자주 사용하는 플러그인에 대해 알아보고 직접 적용해보자. 자주 사용하는 플러그인 BannerPlugin BannerPlugin은 웹팩에 내장되어 있는 플러그인으로, 번들링한 결과물에 빌드 정보, 커밋 버전 등 사용자가 원하는 내용을 추가할 수 있다. webpack.config.js const webpack = require("webpack") const childProcess = require("child_process") ... plugins: [ new webpack.BannerPlugin({ banner: ` Build Date: ${new Date().toLocaleString()} Commit Version: ${childProcess.execSync('git rev-parse ..
[인프런] 프론트엔드 개발환경의 이해와 실습 (플러그인)
플러그인이 무엇이고, 웹팩에서 플러그인이 어떻게 사용되는지 알아보자. 플러그인 플러그인은 번들된 결과물 하나를 처리한다. 번들된 자바스크립트를 난독화하거나 특정 텍스트를 추출하는 용도로 사용한다. 로더가 하나의 파일에 한 번씩 작동했다면, 플러그인은 번들된 결과물이 하나이기 때문에 한 번만 작동한다. 플러그인 동작 원리 동작 원리를 이해하기 위해 로더를 직접 작성해보자. my-webpack-plugin.js class MyWebpackPlugin { apply(compiler) { compiler.hooks.done.tap("My Plugin", stats => { console.log("MyPlugin: done") }) } } module.exports = MyWebpackPlugin; 로더와 달리,..
[인프런] 프론트엔드 개발환경의 이해와 실습 (자주 사용하는 로더)
로더 중에서 자주 사용하는 로더에 대해 알아보고 직접 사용해보자. 자주 사용하는 로더 css-loader css-loader를 사용하면 자바스크립트에서 CSS 파일을 import 구문을 통해 모듈로 불러올 수 있다. 그러기 위해 css-loader를 설치해보자. $ npm install -D css-loader 그리고 웹팩 설정에 로더를 추가한다. webpack.config.js module.exports = { module: { rules: [ { test: /\.css$/, // .css 확장자로 끝나는 모든 파일 use: ["css-loader"], // css-loader를 적용한다 } ] } } 웹팩이 엔트리 포인트부터 시작해서 모듈을 검색하다가 CSS 파일을 찾으면 css-loader로 처리하..
[인프런] 프론트엔드 개발환경의 이해와 실습 (로더)
로더가 무엇이고 어떤 역할을 하는지, 동작 원리는 무엇인지 알아보자. 로더의 역할 웹팩은 모든 파일을 모듈로 바라보기 때문에, 자바스크립트로 만든 모듈 뿐만 아니라 스타일시트, 이미지, 폰트까지 전부 모듈로 본다. 따라서 import 구문을 사용하면 자바스크립트 코드 안으로 가져올 수 있다. 이것이 가능한 이유는 웹팩의 로더 덕분이다. 로더는 모든 파일을 자바스크립트에서 사용할 수 있도록 변환해준다. 다른 언어 파일을 자바스크립트 문법으로 변환해주거나, 이미지를 data URL 형식의 문자열로 변환해주거나, css 파일을 자바스크립트에서 직접 로딩할 수 있도록 해준다. 로더 동작 원리 동작 원리를 이해하기 위해 로더를 직접 작성해보자. my-webpack-loader.js module.exports = ..
[인프런] 프론트엔드 개발환경의 이해와 실습 (웹팩 옵션 --entry, --output-path)
웹팩을 설치하고 옵션들을 이용해 번들링해보자. 엔트리/아웃풋 실습 우리가 export한 내용을 다른 파일에서 import해서 사용하고, 이런 과정이 반복되면 서로 의존하는 관계가 늘어날 것이다. 웹팩은 이런 여러개의 파일을 하나의 파일로 합쳐주는 번들러(bundler)이다. 하나의 시작점(entry point)으로 부터 의존적인 모듈을 모두 찾아내, 하나의 결과물을 만들어 낸다. 웹팩으로 번들링 작업을 해보기 위해 다음 명령어로 webpack 패키지와 웹팩 터미널 도구인 webpack-cli를 설치한다. $ npm install -D webpack webpack-cli 설치가 완료되면 node_modules/.bin 폴더에 실행 가능한 명령어가 몇 개 생긴다. --help 옵션으로 사용 방법을 확인해보자..
[인프런] 프론트엔드 개발환경의 이해와 실습 (웹팩이 필요한 이유)
웹팩에 대해 알아보기 전에 먼저, 웹팩을 왜 사용해야하는지 필요한 이유에 대해 살펴보자. 웹팩이 필요한 이유와 기본 동작 배경 모듈은 재사용할 수 있는 코드를 어떤 한 조각으로 만들어 둔 것(함수)을 의미한다. 결국 같은 코드를 반복하지 않고 모듈을 사용하면 효율적으로 코드를 작성할 수 있고, 유지보수가 쉽다. 이런 모듈을 문법 수준에서 지원하기 시작한 것은 ES2015 부터다. import/export 구문이 없었던 모듈 이전 상황으로 돌아가보자. math.js function sum(a, b) { return a + b } // 전역 공간에 sum이 노출 app.js console.log(sum(1, 2)) // 3 위 코드는 모두 하나의 HTML 파일 안에서 script 태그로 불러와 로딩해야 실행..
[인프런] 프론트엔드 개발환경의 이해와 실습 (NPM)
프론트엔드 개발에 있어 Node.js가 필요한 이유와 NPM(Node Package Manager)에 대해 알아보자. 프론트엔드 개발에 Node.js가 필요한 이유 최신 스펙으로 개발할 수 있다 자바스크립트 스펙의 빠른 발전에 비해 브라우저의 지원 속도는 느리다. 편리한 스펙이 나와도 이것을 구현해 주는 Babel 같은 도구의 도움이 필수적이다. 웹팩, NPM 같은 노드 기술로 만들어진 환경에서 사용할 때 비로소 자동화된 프론트엔드 개발환경을 갖출 수 있다. Typescript, SASS 같은 고수준 프로그래밍 언어를 사용하려면 전용 트랜스파일러가 필요한데, 이를 Node.js 환경에서 제공한다. 빌드 자동화 예전처럼 코딩 결과물을 브라우저에 바로 올리는 경우는 거의 없다. 파일을 압축하고, 코드를 난독..