개발일기

Laravel에서는 Webpack의 빌드 기능을 사용하여 자바스크립트 파일과 Css파일을 빌드시켜 사용할 수 있는 Laravel Mix라는 기능을 제공한다. 또한 Laravel Mix는 Webpack보다 사용하기 쉽고 성능 부분에서도 큰 차이가 없다는 장점을 가지고 있다. 1. 준비단계 Laravel Mix기능을 사용하기 위해서는 Node와 Npm이 설치되어 있어야 한다. node -v npm -v # node와 npm의 설치 유무 확인 2. Laravel Mix 실행 package.json을 살펴보면 Laravel Mix 방법을 찾을 수 있는데, 두가지의 방법으로 실행할 수 있다. npm run watch npm run watch-poll watch : watch는 Css와 Js파일의 변경 부분이 있을..

1. package.json 생성 npm init -y yarn init -y 2. 리액트관련 라이브러리 추가 npm install -D react react-dom yarn add -D react react-dom 3. 웹팩관련 라이브러리 추가 npm install -D webpack webpack-cli webpack-dev-server html-webpack-plugin yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin 4. 바벨관련 라이브러리 추가 npm install -D @babel/cli @babel/core @babel/preset-env @babel/preset-react yarn add -D @babel/cli..

webpack.config.js 파일의 내용 const path = require("path"); const HtmlWebPackPlugin = require("html-webpack-plugin"); module.exports = { entry: "./src/", output: { path: path.resolve(__dirname, "build"), filename: "webpack_build.js", }, resolve: { modules: [path.join(__dirname, "src"), "node_modules"], alias: { react: path.join(__dirname, "node_modules", "react"), }, }, module: { rules: [ { test: /\...

1. 웹팩이란? 웹 어플리케이션을 구성하는데 HTML, Javascript, CSS 등의 다양한 자원이 활용된다. 웹 어플리케이션을 구성하다보면 이러한 자원들의 갯수가 많아질 것이다. HTML파일이 10개, Javascript파일이 20개, CSS파일이 15개 등으로 구성이 될 것이다. 이러한 각각의 파일들을 하나의 파일로 병합 및 압축해주는 것을 도와주는 도구가 바로 웹팩이다. 웹팩을 통해 병합 및 압이 완료되면 프로젝트를 구성하는 파일은 HTML 1개, Javascript 1개, CSS 1개로 간단하게 구성되도록 도와준다. 1-1. 모듈들을 모아주는 웹팩을 사용하는 이유는? 가장 큰 이유로는 웹 어플리케이션의 로딩속도 개선이다. 하나의 페이지에 연결된 자바스크립트 파일이 많다면 모든 자바스크립트 파일..