'분류 전체보기'에 해당되는 글 214건

# 문제 상황.

    - Spring의 버전을 여러가지로 써야하는 상황.

    - Spring dependencies의 관리해야 하는 경우.

# 해결 방안.

  - pom.xml의 properties를 사용하자.

# pom.xml 의존성을 버전을 properties에 기록하기 

	<!-- 각각 dependency의 버전을 각각 기록하게 해놓은 경우 --> 
	<dependencies>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-context</artifactId>
			<version>5.2.0.RELEASE</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/org.slf4j/slf4j-api -->
		<dependency>
			<groupId>org.slf4j</groupId>
			<artifactId>slf4j-api</artifactId>
			<version>1.7.28</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/ch.qos.logback/logback-classic -->
		<dependency>
			<groupId>ch.qos.logback</groupId>
			<artifactId>logback-classic</artifactId>
			<version>1.2.3</version>
			<exclusions>
				<exclusion>
					<groupId>org.slf4j</groupId>
					<artifactId>slf4-api</artifactId>
				</exclusion>
			</exclusions>
			<scope>runtime</scope>
		</dependency>
	</dependencies>

# pom.xml properties에 사용하기

    - Spring의 pom.xml에 dependency들의 버전을 properties에 기록.

    - dependecy의 version에 정의한 버전을 ${사용할 버전} 가져다가 사용합니다.

<properties>
		<!-- 자바 버전 -->
		<java-version>1.8</java-version>
		<!-- 스프링 버전 -->
		<org.springframework-version>5.2.0.RELEASE</org.springframework-version>
		<!-- 스프링 버전의 변경이 자유롭게 -->
		<!-- <org.springframework-version>4.3.25.RELEASE</org.springframework-version> -->
		<org.slf4j-version>1.7.28</org.slf4j-version>
		<ch.qos.logback-version>1.2.3</ch.qos.logback-version>
	</properties>

	<!-- 프로젝트에서 사용할 라이브러리 정보 -->
	<dependencies>
		<!-- Spring Context -->
		<!-- https://mvnrepository.com/artifact/org.springframework/spring-context -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-context</artifactId>
			<version>${org.springframework-version}</version>
		</dependency>

		<!-- https://mvnrepository.com/artifact/org.slf4j/slf4j-api -->
		<dependency>
			<groupId>org.slf4j</groupId>
			<artifactId>slf4j-api</artifactId>
			<version>${org.slf4j-version}</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/ch.qos.logback/logback-classic -->
		<dependency>
			<groupId>ch.qos.logback</groupId>
			<artifactId>logback-classic</artifactId>
			<version>${ch.qos.logback-version}</version>
			<exclusions>
				<exclusion>
					<groupId>org.slf4j</groupId>
					<artifactId>slf4-api</artifactId>
				</exclusion>
			</exclusions>
			<scope>runtime</scope>
		</dependency>
	</dependencies>

[webpack] 파일 경로 단축 별명으로 대체시키기(alias)

 - 이 글은 https://minaminaworld.tistory.com/120 이어지는 글입니다.

선행 :  app/common/customUtil.js 파일 만들기

문제 상황

import 할 대상들의 경로가 현재는 길이가 짧지만 중복되는 내용을 줄이는 방안

// example.js

import "../css/reset.css"; // 중복을 줄여보자
import "../css/base.css"; // 중복을 줄여보자

import $ from "jquery";
import { count, PI } from "./common/customUtil.js"; // ./common을 바꿔보자

var moment = require('moment'); 

function createDiv() {
  var elem = document.createElement("div");
  elem.innerHTML = "웹팩을 사용해보겠습니다";
  return elem;
}

document.body.appendChild(createDiv());

$(function() { // html dom 완성시 실행되는 부분 
  console.log("jquery를 불러오는 것을 성공하였습니다");
});

console.log(count(10));
console.log(PI);

1. webpack.config.js에서 resolve.alias에서 별칭을 만들자.

import 할 대상들의 경로가 현재는 길이가 짧지만 중복되는 내용을 줄이는 방안

var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
var OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
var TerserJSPlugin = require("terser-webpack-plugin");
var ManifestPlugin = require("webpack-manifest-plugin");

module.exports = {
  mode: "development", //배포용으로 변경, development 경우 제대로 압축이 안됨
  // output을 두개로 나눠서 생성한다. 하나는 전체적인 import부분이 example.js
  // libray는 외부의 라이브러리(node_modules에 설치한 라이브러리)
  entry: { main: "./app/js/example.js", library: ["jquery" , "moment"] },
  output: {
    // output으로 배출한 js의 이름은 entry.key 값으로 생성된다.
    filename: "[name].js",
    path: path.resolve(__dirname, "dist")
  },
  resolve : { // 여기서 import할 경로들에 대해서 별칭을 만들어줍니다.
    alias : {
      // 현재 위치(webpack.config.js 파일 위치)에서 css 경로
      Style : path.resolve(__dirname, "./app/css/"), 
      // 현재 위치(webpack.config.js 파일 위치)에서 js/common 경로
      CommonsJS : path.resolve(__dirname, "./app/js/common") // 현재 
    }
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: "css-loader", options: { url: false, sourceMap: true } }
        ]
      }
    ]
  },
  optimization: {
    splitChunks: { //추가된 부분 main.js에서 라이브러리르 분리하는 작업
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "library",
          chunks: "all"
        }
      }
    },
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: "style.css" }),
    new ManifestPlugin({
      fileName: "manifest.json",
      basePath: "./dist/"
    }) // 번들링한 모든 결과물을 확인이 가능함.
  ]
};

2. example.js에서 resolve.alias을 사용.

//example.js 일부분 

// import "../css/reset.css"; // 중복을 줄여보자
// import "../css/base.css"; // 중복을 줄여보자
import "Style/reset.css"; // 변경
import "Style/base.css"; // 변경

import $ from "jquery";
// import { count, PI } from "./common/customUtil.js"; // ./common을 바꿔보자
import { count, PI } from "CommonsJS/customUtil.js"; // 변경

결과화면

webpack.config.js에서 webpack.optimize.CommonsChunkPlugin를 없애고, optimization.splitChunks를 바꿔준다.

var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
var OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
var TerserJSPlugin = require("terser-webpack-plugin");
var ManifestPlugin = require("webpack-manifest-plugin");

module.exports = {
  mode: "production", //배포용으로 변경, development 경우 제대로 압축이 안됨
  // output을 두개로 나눠서 생성한다. 하나는 전체적인 import부분이 example.js
  // libray는 외부의 라이브러리(node_modules에 설치한 라이브러리)
  entry: { main: "./app/js/example.js", library: ["jquery" , "moment"] },
  output: {
    // output으로 배출한 js의 이름은 entry.key 값으로 생성된다.
    filename: "[name].js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: "css-loader", options: { url: false, sourceMap: true } }
        ]
      }
    ]
  },
  optimization: {
    splitChunks: { //추가된 부분 main.js에서 라이브러리르 분리하는 작업
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "library",
          chunks: "all"
        }
      }
    },
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: "style.css" }),
    new ManifestPlugin({
      fileName: "manifest.json",
      basePath: "./dist/"
    }) // 번들링한 모든 결과물을 확인이 가능함.
  ]
};

[webpack]  javascript 라이브러리의 분리

https://minaminaworld.tistory.com/119 에서 선행되어서 이어지는 내용입니다. 

문제 상황

     -  자바스크립트 라이브러리와 main.js를 분리해야 되는 상황 

     -  entry에서 분개를 한다.

1. 예를 들어서 외부라이러리 jquery , moment를 쓴다.

    - 명령어 npm i jquery --save , npm i moment(시간 관련 라이브러리)

    - 화면에 영향을 미치는 요소임으로 pakage.json에 dependencies 안에 기록이 된다.

    - example.js 파일에서 jquery를 import 시켜준다.

    - 그리고, 아래의 jquery를 이용해서 로그를 찍어준다.

// example.js
import "../css/reset.css";
import "../css/base.css";
import $ from "jquery"; // 추가
var moment = require('moment'); // 추가  

function createDiv() {
  var elem = document.createElement("div");
  elem.innerHTML = "웹팩을 사용해보겠습니다";
  return elem;
}

document.body.appendChild(createDiv());

$(function() { // html dom 완성시 실행되는 부분 
  console.log("jquery를 불러오는 것을 성공하였습니다");
});

2. webpack.config.js에서 entry 부분과  output.filename을 변경해준다.

var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
var OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
var TerserJSPlugin = require("terser-webpack-plugin");
var ManifestPlugin = require("webpack-manifest-plugin");

module.exports = {
  mode: "production", //배포용으로 변경, development 경우 제대로 압축이 안됨
  // output을 두개로 나눠서 생성한다. 하나는 전체적인 import부분이 example.js
  // libray는 외부의 라이브러리(node_modules에 설치한 라이브러리)
    entry: { main: "./app/js/example.js", library: ["jquery" , "moment"] },
  output: {
    // output으로 배출한 js의 이름은 entry.key 값으로 생성된다.
    filename: "[name].js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: "css-loader", options: { url: false, sourceMap: true } }
        ]
      }
    ]
  },
  optimization: {
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: "style.css" }),
    new ManifestPlugin({
      fileName: "manifest.json",
      basePath: "./dist/"
    }) // 번들링한 모든 결과물을 확인이 가능함.
  ]
};

3. 빌드 - 성공 , 그러나 파일의 크기를 자세히 보자.

    - example.js 코드는 16줄 밖에 안되는 library.js와 크기가 동일하다.

    - 즉, main.js , library 안에도 moment,jquery 가 있는 경우, 

    - 중복으로 불러온 상황임으로 개선을 해야함.

    -> 따로 분리되지 않은 상황

4. webpack.config.js에 optimization.splitChunks를 추가

var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
var OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
var TerserJSPlugin = require("terser-webpack-plugin");
var ManifestPlugin = require("webpack-manifest-plugin");

module.exports = {
  mode: "production", //배포용으로 변경, development 경우 제대로 압축이 안됨
  // output을 두개로 나눠서 생성한다. 하나는 전체적인 import부분이 example.js
  // libray는 외부의 라이브러리(node_modules에 설치한 라이브러리)
  entry: { main: "./app/js/example.js", library: ["jquery" , "moment"] },
  output: {
    // output으로 배출한 js의 이름은 entry.key 값으로 생성된다.
    filename: "[name].js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: "css-loader", options: { url: false, sourceMap: true } }
        ]
      }
    ]
  },
  optimization: {
    splitChunks: { //추가된 부분 main.js에서 라이브러리르 분리하는 작업
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "library",
          chunks: "all"
        }
      }
    },
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: "style.css" }),
    new ManifestPlugin({
      fileName: "manifest.json",
      basePath: "./dist/"
    }) // 번들링한 모든 결과물을 확인이 가능함.
  ]
};

5. 빌드 - 성공 , main.js와 library.js 크기가 달라졌음을 확인

6. index.html에 libray.js와 main.js 파일로 각각 설정 

[webpack]  javascript 압축(min) 파일 만들기(terser-webpack-plugin)

https://minaminaworld.tistory.com/118 에서 선행되어서 이어지는 내용입니다. 

문제 상황

     - javascript 압축이 안되는 상황.

     ->  min 파일을 만들어 줄 수 있는 plugin을 사용함.

1. terser-webpack-plugin 플러그인 설치

      - javascript 압축이 안되는 상황.

      - 명령어 :  npm i terser-webpack-plugin -D

                     (npm install terser-webpack-plugin --save-dev)

2. webpack 빌드 - 성공 

      - javascript 압축이된 상황 

      - main.js 파일이 min 파일처럼 압축이 된 상황.

[webpack] css 압축(min) 파일 만들기

(optimize-css-assets-webpack-plugin ,

mini-css-extract-plugin)

https://minaminaworld.tistory.com/116 에서 선행되어서 이어지는 내용입니다. 

문제 상황

     - 기존의 ExtractTextPlugin의 경우 css 파일이 min 파일 처럼 생성이 안됨.

     ->  min 파일을 만들어 줄 수 있는 plugin을 사용함.

1. optimize-css-assets-webpack-plugin , mini-css-extract-plugin 설치

     - 명령어 :  npm i optimize-css-assets-webpack-plugin -D

                  (npm install optimize-css-assets-webpack-plugin --save-dev)

     - 명령어 :  npm i mini-css-extract-plugin -D

                  (npm install mini-css-extract-plugin --save-dev)

     - package.json에 plugin을 설치 확인 

2. webpack..config.js에 적용

var path = require("path");
// var ExtractTextPlugin = require("extract-text-webpack-plugin");
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
var OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = {
  mode: "production", //배포용으로 변경, development 경우 제대로 압축이 안됨 
  entry: "./app/js/example.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: "css-loader", options: { url: false, sourceMap: true } }
        ]
      }
    ]
  },
  optimization: {
    minimizer: [new OptimizeCSSAssetsPlugin({})]
  },
  plugins : [new MiniCssExtractPlugin({filename : "style.css"})]
};

3. webpack 빌드  - 성공

     -  style.css 파일이 min 파일 처럼 생성 

4. 문제 상황 

     - main.js는 압축이 안되는 상황 

     -> TerserJSPlugin 를 사용해서 해결을 해야 합니다. 

웹팩 에러가 나타는 상황

Chunks.groupsIterable and filter by instanceof Entrypoint instead at Chunk.get 

npm install extract-text-webpack-plugin@next 을 사용하시면 됩니다

https://minaminaworld.tistory.com/115 에서 선행되어서 이어지는 내용입니다. 

[webpack] webpack css 파일만 분리하기

1. 하나로 모두 다 묶인 상황 

     - 웹팩을 사용하면 main.js에 모두 다 묶인 상황 

     - css만 따로 분리해서 만들어야 될 경우

2.  extract-text-webpack-plugin 설치하기

     - 명령어 : npm i extract-text-webpack-plugin -D

     - package.json 파일에 devDependencies에  extract-text-webpack-plugin가 추가될 것입니다.

3.  webpack.config.js 파일에 extract-text-webpack-plugin 사용하기

var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  mode: "development",
  entry: "./app/js/example.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        //use : ['style-loader','css-loader']
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: "css-loader"
          })
      }
    ]
  },
  plugins : [new ExtractTextPlugin("style.css")]
};

4. webpack 빌드 - 실패 , extract-text-webpack-plugin@next 으로 재설치

     - 명령어 : npm install extract-text-webpack-plugin@next

     - package.json 파일에 devDependencies에  extract-text-webpack-plugin가 추가될 것입니다.

5. webpack 빌드 - 성공

     - 명령어 : webpack

     -  dist 폴더에 main.js, style.css 파일이 최종적으로 생성됩니다.

6. 결과화면

     -  style.css 와 main.js를 불러온 상황