input 태그에 선택한 항목이 label로 출력되게 해주는 choices.js 소개

web/javaScript|2018. 6. 17. 21:06

현재 공부하려고 개인적으로 만들고 있는 프로젝트 위들포스에서 사용자를 검색하고 input 박스위에 레이블처럼 보여주는 기능이 필요했다.

 

아무리 찾아보아도 좋은 라이브러리가 없었는데 choices.js의 이미지를 보니 좀 좋아보여서 적용해 보았다.

우선 내 프로젝트에 적용된 하면은 이렇다.

 

[홈페이지 및 github]

https://joshuajohnson.co.uk/Choices/

https://github.com/jshjohnson/Choices

홈페이지에는 예제가 여러개 나열되어 있고, 필요에 따라 소스보기를 통해 참고할 수 있다. github에는 document가 있어서 사용할 수 있는 속성들이 나열되어 있다.

 

[사용방법]

간단한 사용방법은 github에서 소스를 받거나 npm install choices.js를 통해 소스를  내려받을 수 있다.

필수로 필요한 파일은 assets/script/dist/choices.js와 icon, image, base.css, choices.css가 필요하다.

 

페이지에서 <script>와 <link>를 통해서 로드를 하거나 웹팩에서 import를 사용하여 가져올 수 있다. 그리고 html페이지에 input 태그를 하나 생성하고 다음과 같이 적용하면 된다.

<!-- html -->
<div id="messageTargetSearch">
  <div id="messageTargetLabel">
    <label for="messageTargetInput"><spring:message code="message.title.user"/></label>
 </div>
 <input id="messageTargetInput" class="form-control" type="text" placeholder="Search..">
</div>


<!-- javascript -->
const messageTargetInput = document.getElementById('messageTargetInput');
const choices = new Choices(messageTargetInput, {
  delimiter: ',',
  editItems: true,
  maxItemCount: 1,
  removeItemButton: true,
  addItemText: function(value) {
    return 'Please Enter to add user <b>"' + String(value) + '"</b>';
  },
});


delimiter, editItems등 기타 옵션들은 github 페이지에 가면 자세히 나열되어 있다.

그리고 이벤트를 등록하려면 여러가지 이벤트들이 제공이 되는데 addItem과 removeItem에 대한 소스만 잠깐보자. 이게 적용이 되기전 그러니까 추가 또는 삭제가 되기전에 이벤트를 잡아주면 좋은데 그렇지 못해서 나는 따로 validate검사를 하고 validate가 적합하지 않으면 다시 추가 또는 제거해주는 코드를 별도로 넣었다. 좋은 방법이 있으면 추천 바랍니다~

messageTargetInput.addEventListener('addItem', (event) => {
  // do something creative here...
  console.log(event.detail.id);
  console.log(event.detail.value);
  console.log(event.detail.label);
  console.log(event.detail.groupValue);
  //choices.removeItemsByValue(event.detail.value);
}, false);

messageTargetInput.addEventListener('removeItem', (event) => {

  if (!confirm(Common.getMessage('message.message.close'))) {
    choices.setValue([
      {value: event.detail.value, label: event.detail.label}
    ]);
  }

  // do something creative here...
  console.log(event.detail.id);
  console.log(event.detail.value);
  console.log(event.detail.label);
  console.log(event.detail.groupValue);

}, false);

아쉬운건 아이콘을 svg파일을 사용하는데 webpack에서 svg loader를 적용하여도 정상적으로 로드가 되지 않아서 좀 애를 먹었다. 

다른사람들도 검색해보니 동일한 문제를 겪은 사람이 있는데 해결은 안되었다. 아래 URL 참고

https://github.com/jshjohnson/Choices/issues/223

 

보시는분들중 이런 라이브러리들이 좋은게 있으면 추천 부탁드립니다.

댓글()

webpack 4.12.x 버전으로 업그레이드 후 performance 오류문제 해결

web/webpack|2018. 6. 9. 07:50

webpack을 4.12.0으로 업그레이드 하니까 갑작스럽게 아래와 같은 에러가 발생하였다.


1
2
3
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
cs


에러발생이유는 찾아보니까, mode를 production으로 사용하다 보니까 개발자 버전에서 필요없는 다른 오류까지도 봐야하기 때문에 dev로 변경하라는 에러 문구였다.


이를 해결하기위해서는 webpack.config.js에 아래 부분을 추가하니까 해결되었다.


1
2
3
performance: {
  hints: process.env.NODE_ENV === 'production' ? "warning" : false
},
cs




댓글()

webpack 모듈 실행시 babel waring 문제 수정

web/webpack|2018. 6. 8. 22:16

어느 순간 webpack으로 모듈화를 진행하는 도중에 다음과 같은 경고가 발생했다.


[BABEL] Note: The code generator has deoptimised the styling of "/Users/jeongcheol/Documents/workspace/wedulpos/src/main/front/lib/fontawesome/js/fontawesome-all.min.js" as it exceeds the ma

x of "500KB".


그냥 단순 경고라고 생각해서 크게 생각하지 않고 넘겼는데, 자꾸 나타나서 알아보았다.


[원인]

 이것은 "불필요한 공백 문자 및 줄 종결자를 포함하지 말라"는 Babel 컴파일러의 compact 옵션과 관련된다. 그래서 이를 해결하기 위해서는 babel의 compact옵션을 꺼주면 해결된다.



loaders: [
    { test: /\.js$/, loader: 'babel', query: {compact: false} }
]


댓글()
  1. ymkang 2019.12.18 16:28 댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다 ㅎㅎ

webpack 소개 및 환경 구축

web/webpack|2018. 5. 27. 00:50

Webpack



- webpack은 모듈 번들러이다.

- 여러 js 파일을 하나의 번들로 만들 수 있다.

- SCSS를 CSS로 돌릴 수 있다.

- EM6를 사용할 수 있다.

- 스타일로더와 CSS 로더등 다양한 로더를 사용할 수 있다.

- 코드 압축을 해주는 UglifyJsPlugin 등 다양한 플러그인등을 사용할 수 있다.

 


설치방법

- node.js를 설치한다. https://nodejs.org/ko/

- npm install -g webpack (npm을 이용하여 webpack을 설치한다)

- npm install --save-dev style-loader css-loader  (css loader)

- npm install --save-dev sass-loader node-sass webpack (scss loader)



사용방법

1. config 설정

webpack에서 사용할 설정을 기술한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// webpack.config.js
module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.sass$/, loader: 'style!css!sass' }
    ]
  }
  
  plugins: [
   new webpack.optimize.UglifyJsPlugin({
     compressor: {
       warnings: false,
      },
    })
  ]
};
cs



※ entry : 프로퍼티로 빌드되기전의 파일 경로 기입

※ output : bundle로 만들어질 파일의 정보를 명시

※ 로더 : test 영역은 파일들의 정규식 형태 기입, loader는 사용할 로더들의 이름을 명시


2. webpack 실행

- webpack

- webpack --watch       => 파일의 상태가 변경되면 자동 빌드

- webpack --config myconfig.js     => webpack.config.js를 사용하면 별도 기술을 하지 않지만 새로운 이름의 config를 사용하려면 다음과 같이 사용

댓글()