1. jquery-ui-dist 설치
datepicker는 jquery-ui에서 제공하고 있으며, 다운받으면 사용할 수 있다.
그런데 나같은 경우 jquery-ui로 webpack 설정을 하는데 실패해서 jquery-ui-dist를 사용했다.
npm i jquery-ui-dist
2. @types/jqueryui 설치
typescript와 jquery-ui의 호환을 위해서 @type/sjqueryui를 설치한다.
(datepicker만 사용하려면 @types/jquery.ui.datetimepicker를 설치해도 된다.)
npm i @types/jqueryui
3. alias 설정
lib 설치가 끝났으면 webpack.config.js에서 alias 설정을 해준다.
(alias 설정은 꼭 안 해도 되지만, import할 때 편하게 사용하기 위해 설정했다.)
module.exports = {
// 다른 옵션들 생략
resolve: {
extensions: [".js", ".ts"],
alias: {
"jquery-ui": "jquery-ui-dist/jquery-ui.js",
"jquery-ui-css": "jquery-ui-dist/jquery-ui.css"
}
}
}
4. loader 설정
만약 css 관련 loader가 설정되어있지 않다면, webpack.config.js에서 설정해주어야 한다.
jquery-ui 관련 css 파일을 사용하기 위해서다.
module.exports = {
//생략
module: {
rules: [
//ts loader 생략
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
};
5. 코드에서 사용하기
이제 ts 파일에서 다음과 같이 사용할 수 있다.
(import 구문은 alias 설정에 따라 달라질 수 있다.)
import 'jquery-ui'
import 'jquery-ui-css'
$('#datepicker').datepicker();
정 안 되면 꼼수라도
css같은 경우 html 파일에서 link tag로 불러와도 된다.
그러면 css loader 설정 및 불러오는 코드를 제거해도 된다.
정말 설정이 정 안 되면, 그냥 html 파일에서 cdn 방식으로 jquery-ui를 불러온 뒤
script tag에 직접 jquery-ui 관련 코드를 작성해서 사용하는 것도 방법이다.
'Tip' 카테고리의 다른 글
h2 db tcp 접속 에러 (0) | 2022.01.27 |
---|---|
css로 글자길이에 따라 글자 생략하기 (0) | 2022.01.27 |
date type input에 placeholder 만들기 (0) | 2021.12.21 |
VSCode REST Client (0) | 2021.11.11 |
git에 access token과 함께 push하기 (0) | 2021.09.10 |