티스토리 뷰
최근에 주변 지인 분께서 Angular로 개발중에 있었는데,
jQuery를 프로젝트에 넣으려다가 안되는것 같다 말씀 하시길래 한번 찾아보다가 내용을 정리하게 되었다.
따라서 간략하게 jQuery 사용 방법을 설명하려고 한다.
- Angular CLI를 이용하여 Project 생성
ng new jquery-test
- 생성한 Angular Project로 이동하여 jQuery 라이브러리 의존성을 설치해 줍니다.
- 프로젝트를 Angular CLI로 생성하였기 때문에, package.json 파일이 있습니다. 그곳에 해당 라이브러리의 의존성을 설정해 주기위해 --save 옵션을 붙여줍니다.
- --save 옵션 : dependencies 항목에 의존성 추가
- --save-dev 옵션 : devDependencies 항목에 의존성 추가
npm install jquery jqueryui --save
- Angular는 기본적으로 타입스크립트를 사용하고 있으므로, 해당 라이브러리에 대한 타입 정보가 필요합니다. (없다면, 컴파일할 때 타입정보를 찾을 수 없으므로 에러가 발생한다 ㅠㅠ)
- 동일하게 해당 프로젝트에 타입을 추가 시켜 주자
npm install --save @types/jquery @types/jqueryui
- package.json 파일을 확인해보면 dependencies에 jquery, jqueryui, @types/jquery, @types/jqueryui가 추가된 것이 확인이 된다.
{
"name": "jquery-test",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^5.0.0",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/router": "^5.0.0",
"@types/jquery": "^3.2.17",
"@types/jqueryui": "^1.12.0",
"core-js": "^2.4.1",
"jquery": "^3.2.1",
"jqueryui": "^1.11.1",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular/cli": "1.6.3",
"@angular/compiler-cli": "^5.0.0",
"@angular/language-service": "^5.0.0",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.4.2"
}
}
- 라이브러리 설치가 잘 된것 같으니 해당 프로젝트내에 모듈이 있는지 확인을 해보자
- 해당 프로젝트 내 node_modules라는 디렉토리 내에 설치가 되어있는지 확인 필요
- 자 이제 Angular CLI로 실행을 할 것임으로, 해당 라이브러리를 컴포넌트에서 사용할수 있도록 등록이 필요하다.
- .angular-cli.json에 파일경로를 추가해 주자
- apps에 있는 scripts 값에 jquery.min.js와 jquery-ui.min.js를 추가
- apps에 있는 styles 값에 jquery-ui.min.css 추가
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "jquery-test"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css",
"../node_modules/jqueryui/jquery-ui.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/jqueryui/jquery-ui.min.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
이제 간단히 한번 jQuery를 이용하여 datepicker를 붙혀 보자
- 간단하게 jQuerySelector를 이용하여 AppComponent에 datepicker추가
import {Component, OnInit} from '@angular/core';
declare var jQuery; // 변수가 다른곳에 만들어 졌음을 TypeScript에게 알려주기 위해 사용
@Component({
selector: 'app-root',
template: `
<input type="text" id="test-date-picker"/>
`
})
export class AppComponent implements OnInit {
/*
OnInit : 컴포넌트의 생성을 의미하는 생명주기
AfterViewInit 에서 하는것을 권장(?) 하는것 같으나... (템플릿이 완전히 초기화 되는 상태)
테스트 겸 확인을 위해 생성 테스트 해봄...
*/
ngOnInit(): void {
/*
직접적으로 DOM을 건드는 것을 Angular에서 권장하지 않는것 같으나, 예제를 보여 주기위해 테스트
*/
jQuery('#test-date-picker').datepicker();
}
}
- 결과
댓글